ECMAScript日常总结--ES2023(ES14)

ECMAScript日常总结--ES2023(ES14)

最近突然看到了ES相关更新,才发现ES已经到14了,看了一下之后,写了一下最近几年部分新方法的总结,便于自己之后的查找。

1. 数组新方法

1.Array.prototype.toSorted(fn) 不改变原始数组

返回一个新数组,其中元素按升序排序,而不改变原始数组。

举例说明:

js 复制代码
	const array = [ 1,99,50,32,-1,-5,-8]
    const array2 = array.toSorted((a, b) => a - b)
    const array3 = array.toSorted((a, b) => b - a)
    const array4 = array.toSorted()
    
    console.log('array',array) //[1, 99, 50, 32, -1, -5, -8]
    console.log('array2',array2) // [-8, -5, -1, 1, 32, 50, 99]
    console.log('array3',array3) //[99, 50, 32, 1, -1, -5, -8]
    console.log('array4',array4) //[-1, -5, -8, 1, 32, 50, 99]
Fn(a, b) 排序顺序
toSorted((a, b) => a - b) 从小到大
toSorted((a, b) => b - a) 从大到小
toSorted()省略参数 将数组元素转换为字符串,根据每个字符的 Unicode 码位值进行排序

2.Array.prototype.toReversed() 不改变原始数组

返回一个新数组,该数组的元素顺序被反转,但不改变原始数组。

举例说明:

js 复制代码
    const array = [ 1,99,50,32,-1,-5,-8]
    const reversearray = array.toReversed()
    
    console.log('array',array)			//[1, 99, 50, 32, -1, -5, -8]
    console.log('reverseArr',reversearray) 	//[-8, -5, -1, 32, 50, 99, 1]

3.Array.prototype.toSpliced(start,length,item1...itemN) 不改变原始数组

返回一个新数组,在给定索引处删除和/或替换了一些元素,而不改变原始数组。

参数:

start:开始改变数组的位置

length:删除的长度 ( 可选 0 或者负数,则不会删除元素 )

item1...itemN:元素将从 start 开始添加到数组当中

举例说明:

js 复制代码
    //插入
    const insertArr = array.toSpliced(0,0,9)
    //删除
    const deleteArr = array.toSpliced(0,1)
    //替换
    const replaceArr = array.toSpliced(0,1,9)

    console.log(array)			//[ 1,99,50,32,-1,-5,-8]
    console.log(insertArr) 		//[ 9,1,99,50,32,-1,-5,-8]
    console.log(deleteArr) 		//[ 99,50,32,-1,-5,-8]
    console.log(replaceArr) 	//[ 1,9,50,32,-1,-5,-8]

PS:新增的toSorted(),toReversed(),toSpliced()对应了原本的sort,reverse,splice方法,区别就在于:执行ES14的新方法后,并不会影响原先的数组。

4.Array.prototype.findLast()

反向迭代数组,并返回满足提供的测试函数的第一个元素的值。也可以理解为查找最后一个满足条件的元素的值,如果没有找到对应元素,则返回 undefined。

举例说明:

js 复制代码
const array = [ 1, 2, 3, 4 ] 
const targetEl = array.findLast((num) => num > 2) // 4

5.Array.prototype.findLastIndex()

反向迭代数组,并返回满足提供的测试函数的第一个元素的下标索引。也可以理解为查找最后一个满足条件的元素的下标,如果没有找到对应元素,则返回 undefined。

js 复制代码
const array = [ 1, 2, 3, 4 ] 
const lastIndex = array.findLastIndex((num) => num > 2) // 3

6.array.with() 不改变原始数组

使用括号表示法更改给定索引值的复制版本。它返回一个新数组,其中给定索引处的元素替换为给定值。

js 复制代码
const array = [ 'asd', 'qwe', 'zxc','iop' ]
const withArray = array.with(1, 'qqq')

console.log(array) // [ 'asd', 'qwe', 'zxc','iop' ]
console.log(withArray) // [ 'asd', 'qqq', 'zxc','iop' ]

2. WeakMap支持使用Symbol作为key

WeakMap 是 一种数据结构,用于存储键值对,其中键是弱引用的。与 Map 不同,WeakMap 中的键必须是对象,而值可以是任意类型。WeakMap 的设计目的是为了解决一些与垃圾回收相关的问题,同时提供一种轻量级的键值存储机制。

特点:

  1. 弱引用键: WeakMap 中的键是弱引用的。这意味着,如果没有其他对象引用这个键,键就可能被垃圾回收机制回收掉。

  2. 不可迭代和清空: 由于键是弱引用的,WeakMap 是不可迭代的,而且没有提供像 clear 这样的方法来清空整个映射。垃圾回收会自动处理不再被引用的键。

  3. 没有大小属性:Map 不同,WeakMap 没有 size 属性,因为无法知道当前有多少个键在 WeakMap 中。

  4. 无法遍历: WeakMap 不提供类似 forEach 这样的遍历方法,因为键无法被迭代。

    js 复制代码
    // 创建一个 WeakMap
    let weakMap = new WeakMap();
    
    // 创建两个对象作为键
    let obj1 = {};
    let obj2 = {};
    
    // 设置键值对
    weakMap.set(obj1, "Value1");
    weakMap.set(obj2, "Value2");
    
    // 获取值
    console.log(weakMap.get(obj1)); //"Value1"
    
    // 删除键值对
    weakMap.delete(obj1);
    
    // 尝试再次获取值,返回 undefined
    console.log(weakMap.get(obj1)); //undefined

WeakMap 原本只支持 object 类型的 key,现在支持了 Symbol 类型作为 key。

js 复制代码
const wmap = new WeakMap()
//之前使用
const uname = { name: 'ABC' }
//现在使用
const uname = Symbol('ABC')

w.set(uname, 'ABC')
console.log(wmap.get(uname)) // 'ABC'
相关推荐
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm2 小时前
Dioxus 与数据库协作
前端·rust