来都来了,8个JavaScript技巧奉上

news2024/12/23 14:55:15

吆喝一声,如果你计算机、软件工程、电子等相关专业本科及以上学历,欢迎来共事。前后端/测试可投,技术大厂。

JavaScript 作为最流行的语言之一,其语法灵活且每年都在不断吸纳新特性,即使是一个从业多年的老手, 偶尔也会有一些被低估的 JavaScript 功能和技巧,本文将分享这些技巧,一同讨论探究。

1. 使用 flatMap

有些 JavaScript 方法尽管鲜为人知,但它们解决独特挑战的潜力能够增强编码效率, 比如 flatMap()

数组方法 flatMap() 本质上是 map()flat() 的组合,区别在于 flatMap 只能扁平1级,flat 可以指定需要扁平的级数,flatmap 比分别调用这两个方法稍微高效一些。

使用 flat + map

使用 flatmap


flatmap 尽管是一个方法,但也会有 中间数组 (指中间创建了必须进行垃圾收集的临时数组)的产生,flatMap 非常适合在需要灵活性和可读性的情况下使用。

2. 充分使用 generator

生成器 (Generator)迭代器 (iterators) 可能是 JavaScript 开发人员最不常使用的代码,其知识仅限于编码面试。(因为有更好用的语法糖 async/await ?😂)

生成器 (Generator) 是控制异步编程、生成可迭代对象和生成多个值的强大方法。生成器与传统函数不同。他们可以多次启动和停止执行。这使它们能够产生大量值并在以后继续执行,从而使它们非常适合管理异步操作、构造迭代器和处理无尽的数据流。

试想一下,假如在一个获取数据的场景下,数据库/ API 的数据量可能是无限的,而你必须将它们传输到前端,你会怎么做呢?

这种情况下, react 中最常用的方案就是无限加载方案, 如果是在 node 中或者原生JS,你该如何实现无限加载之类的功能

3. console 的妙用

console 并不只有 console.log(), 实际生产中都会使用已经封装好的log库,而 控制台对象 console 实际上内置了许多非常有用的方法,帮助您提高调试输出的质量和可读性,掌握它们能使您更轻松地 debug 和修复代码中的问题。

4. 深拷贝 structuredClone()

此前,如果开发人员想要深拷贝对象,经常需要依赖第三方库来实现或者手动实现一个神拷贝,或者采取 const cloneObj = JSON.parse(JSON.stringify(obj)); 的 hack, 但其在处理包含循环引用不符合 JSON 的数据类型(如 Map 和 Set,Blob 等 ) 的更复杂对象时,是有很多不足之处的

而现在,JavaScript 内置了一个 structuredClone() 的方法, 此方法提供了一种简单有效的方法来深度克隆对象, 且适用于大多数现代浏览器和 Node.js v17 以上


与众所周知的 JSON.parse(JSON.stringify())” 不同, structuredClone() 允许您克隆循环引用,这是目前在 JavaScript 中使用深拷贝最简单的方法。

5. 带标签的模板

带标签的模板(Tagged_Templates) - 是模板字符串(反引号)的一种更高级的形式,它允许你使用函数解析模板字面量。

这个高级特性我也是在 Next.js 14 发布后人们都在讨论的一张图才去了解的🫡,尽管这个特性是 ES6 就有的,至今已有8年!!!但我敢打赌知道这个并使用过这个特性的人屈指可数。

相信许多人已经见过下图(因为这个知识点请停止嘲笑 😝Next.js 14), 相信许多人的第一反应就是回到二十年前 PHP 时代并且代码容易遭受 sql 注入攻击 , 但实际上是安全的。这得益于模板字符串的高级特性 - ( 带标签的模板 -Tagged_Templates)

如果你不理解 Tagged_Templates 如何工作, 那么就让我用一个例子来简单说明下吧:

可以看到,Tagged Templates 的工作方式是将模板字符串里的所有字符串作为一个数组传递给函数的第一个参数,其余参数则根据相应的表达式直接插入到字符串中,Tagged Templates将 文字字符串 和表达式的结果 传递给函数,然后该函数可以以自定义方式操作并返回它们。这样开发者在构建 SQL 查询时,对输入进行适当的转义和验证,从而避免 SQL 注入攻击

带标签的模板字符串可用于很多用途,例如 安全性i18n和本地化 等。

6. 空合并运算符 ??

空合并运算符 ?? (Nullish coalescing operator) 是一个逻辑运算符,当其左侧操作数为 null 或 undefined 时,它返回其右侧操作数,否则返回其左侧操作数


这有啥值得提的?||不就行了 ?因为很多人在初学JS可能会困扰的一个问题是 假 (false)假值(falsy) 的区别, 而 ??|| 主要区别在于

  • ?? 仅当左操作数为 null 或 undefined 时?? 运算符才会将结果作为右操作数。
  • ||运算符会将左操作数的所有假值(falsy) 的结果作为右操作数

举个例子:

JS的假值判断,可以参考这个表格 JavaScript-Equality-Table/:

7. 使用Symbols作为WeakMap的键

WeakMapMap 很像,但不同点在于它的键(key) 只能是对象 Objects 和 symbol,这些键被作为弱引用存储(weakly)

为什么?因为 WeakMap 的键必须是可垃圾回收的。大多数原始数据类型可以任意创建并且没有生命周期,因此它们不能用作键, 而 对象Objectsnon-registered symbols 可以用作键,因为它们是垃圾可收集的 - MDN- WeakMap。

这个特性意味着除了键之外内存中没有其他对对象的引用,JavaScript 引擎可以在需要时对对象执行垃圾回收


好了,那 WeakMap 到底有什么作用呢?根据其特点可以联想到 WeakMap 的用途可以是自定义缓存以及检测内存泄漏

通过使用对象作为键,您可以将缓存的值与特定对象相关联。当对象被垃圾收集时,相应的 WeakMap 条目将被自动删除,立即清除缓存。

ES14 中, 使用 symbol 作为 WeakMapkey 已经成为可能, 这可以使键值对WeakMap 中扮演的角色更加清晰。因为唯一能在 WeakMap 中被作为 key 使用的原始类型只有 symbolsymbol 能保证 key 是 唯一的并且无法重新创建。

8. 函数式编程

2015 年以来,JavaScript 版本都会进行更新,今年(2023 ES14)也不例外。

ES14 最大的更新便是数组更新了许多数组方法或者为原有的数组方法增加不会带来突变(without mutation) 的互补方法。意味着它们会基于原数组创建新的数组,而不是直接修改原数组。

新增的互补方法有

  • Array.sort() -> Array.toSorted()
  • Array.splice() -> Array.toSpliced()
  • Array.reverse() -> Array.toReversed()

新增的新数组方法有:

  • Array with()
  • Array.findLast()
  • Array.findLastIndex()

今年的主题是更简单的函数式编程(fp)不变性(immutability)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1842429.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深圳信用贷款之路:申请了10次都被拒!这三步帮你逆袭银行贷款!

贷款客户最头疼的就是明明查询了一堆资料,贷款还是办不下来!尤其是那些负债累累的,急需资金还月供和本金的朋友们,不是在贷款就是在贷款的路上,一个月申请了10次都被拒!去了好几家贷款机构,费用…

手机制造计划调度场景下的复杂约束

获取更多资讯,赶快关注上面的公众号吧! 文章目录 手机制造过程大致分为SMT、板测、主板预加工、预组、组装、整测、包装等7大工段,每个工段包含一条或多条线体,根据项目要求和线体配置的差异,项目选择线体的适配度(优先级)不同,而且不同产品的工艺流程可能存在差异,共…

Hedra:让您的照片说话

在数字内容创作的世界里,我们总是在寻找那些能够让我们的作品更加生动和吸引人的工具。Hedra软件就是这样一款工具,它能够让您的照片动起来,甚至说话。想象一下,您的家庭相册中的照片突然变得栩栩如生,或者您的产品图片…

搭建Vue的环境

目录 # 开篇 步骤一,准备Vue 的环境 步骤二,下载Vue.js的包 步骤三,创建并打开写前端代码的文件夹 步骤四,在VSCode中引入Vue.js的包 步骤五,创建第一个vue.html Vue其他知识 Vue.config命令 # 开篇 介绍&…

朝阳医院2018年销售数据 数据分析与可视化

代码及数据集下载传送门 数据分析与可视化-朝阳医院2018销售数据-ipynbcsv 实践内容 以朝阳医院2018年销售数据为例,目的是了解朝阳医院在2018年里的销售情况,这就需要知道几个业务指标,本次的分析目标是从销售数据中分析出以下业务指标&am…

kafka的基本模型

kafka官网 线程和线程之间的数据交互 在jvm里不同的线程有自己的栈内存,但彼此之间交互可以在共享的内存中进行,即堆内存,堆内存会将这些消息放到队列中,具体实现jvm见,栈内存各自维护,堆内存大家共享 进…

【SD3辅助工具推荐】InstantX发布了三种SD3专属的ControlNet模式——Pose、Canny和Tile

InstantX 是一家专注于人工智能内容生成的独立研究机构。此前,曾开源著名的InstantID和论文《InstantID : Zero-shot Identity-Preserving Generation in Seconds》。随着本月12号,Stability AI正式开源了其产品 Stable Diffusion 3,这家机构…

开发板连接WiFi+开发板配置动态/静态IP

一、开发板连接WiFi 1、OTG线连接,使用adb进入开发板命令行。 2、使用下面指令来连接 wifi: connmanctl //进入 WIIF操作终端 connmanctl> enable wifi //使能 WIFI3、继续进入 connmanctl操作终端 connmanctl> scan wifi //开启 WIFI扫描,可以…

深度学习算法informer(时序预测)(三)(Encoder)

一、EncoderLayer架构如图(不改变输入形状) 二、ConvLayer架构如图(输入形状中特征维度减半) 三、Encoder整体 包括三部分 1. 多层EncoderLayer 2. 多层ConvLayer 3. 层归一化 代码如下 class AttentionLayer(nn.Module):de…

前端安全——最新:lodash原型漏洞从发现到修复全过程

前端安全——最新:lodash原型漏洞从发现到修复全过程 1. 漏洞复现 现在很多系统的前端都是基于vue和react框架的,所以就肯定少不了引入各种依赖,而lodash作为一款非常流行的npm库,每月的下载量超过8000万次。可以说是使用的十分…

ASP.NET MVC企业级程序设计(增删,int类型转时间取余)

目录 题目: 实现过程 控制器代码 DAL BLL Index Jia 题目: 实现过程 控制器代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication1.Models;namespace …

Palo Alto GlobalProtect App 6.3 (macOS, Linux, Windows, Andriod) - 端点网络安全客户端

Palo Alto GlobalProtect App 6.3 (macOS, Linux, Windows, Andriod) - 端点网络安全客户端 Palo Alto Networks 远程访问 VPN 客户端软件 请访问原文链接:https://sysin.org/blog/globalprotect-6/,查看最新版。原创作品,转载请保留出处。…

idea-Spring框架与ioc容器

Sping是轻量级的开源J2EE框架,可以解决企业应用开发的复杂性 Spring有两个核心部分为Ioc和AOP Ioc:控制反转,吧创建对象过程交给Sping进行管理 AOP:面向切面,不修改代码进行功能增强 创建Maven项目 IDEA-2024 就直接创建java项目即可 创…

为什么有人认为Linux不如macOS?

在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「Linux的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!!首先要明确你说的是哪个Lin…

Git分支的状态存储——stash命令的详细用法

文章目录 6.6 Git的分支状态存储6.6.1 git stash命令6.6.2 Git存储的基本使用6.6.3 Git存储的其他用法6.6.4 Git存储与暂存区6.6.5 Git存储的原理 6.6 Git的分支状态存储 有时,当我们在项目的一部分上已经工作一段时间后,所有东西都进入了混乱的状态&am…

前端网页开发学习(HTML+CSS+JS)有这一篇就够!

目录 HTML教程 ▐ 概述 ▐ 基础语法 ▐ 文本标签 ▐ 列表标签 ▐ 表格标签 ▐ 表单标签 CSS教程 ▐ 概述 ▐ 基础语法 ▐ 选择器 ▐ 修饰文本 ▐ 修饰背景 ▐ 透明度 ▐ 伪类 ▐ 盒子模型 ▐ 浮动 ▐ 定位 JavaScript教程 ▐ 概述 ▐ 基础语法 ▐ 函数 …

Si24R05—高度集成的低功耗 2.4G+125K SoC 芯片

Si24R05是一款高度集成的低功耗SoC芯片,具有低功耗、Low Pin Count、宽电压工作范围,集成了13/14/15/16位精度的ADC、LVD、UART、SPI、I2C、TIMER、WUP、IWDG、RTC、无线收发器、3D低频唤醒接收器等丰富的外设。内核采用RISC-V RV32IMAC(2.6 …

【BES2500x系列 -- RTX5操作系统】CMSIS-RTOS RTX -- 实时操作系统的核心,为嵌入式系统注入活力 --(一)

💌 所属专栏:【BES2500x系列】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &#x1f49…

本地部署应用测试01:ChatTTS

目的: 参考网上多种教程,学习开源大模型的部署与相关知识点,在此总结记录。 知识点: 1.大模型部署与应用大致步骤 首先需要下载项目的源码,并完成项目环境的搭建其次需要下载训练好的权重参数文件,以便…

微信公众号绑定开发者后端,报错“系统发生错误,请稍后重试”的坑

一、问题描述 在公众号后端填写完基本配置,点击保存,发现提示“系统发生错误,请稍后重试”。联系公众号客服回复,涉及开发内容不给支持-_-|| 二、经多次百度,结合实际尝试,总结解决方案如下:…