ECMAScript日常总结--ES2023(ES14)

ECMAScript日常总结–ES2023(ES14)

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

1. 数组新方法

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

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

举例说明：

	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() 不改变原始数组

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

举例说明：

    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 开始添加到数组当中

举例说明：

    //插入
    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。

举例说明：

const array = [ 1, 2, 3, 4 ] 
const targetEl = array.findLast((num) => num > 2) // 4

5.Array.prototype.findLastIndex()

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

const array = [ 1, 2, 3, 4 ] 
const lastIndex = array.findLastIndex((num) => num > 2) // 3

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

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

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 这样的遍历方法，因为键无法被迭代。

   // 创建一个 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。

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

w.set(uname, 'ABC')
console.log(wmap.get(uname)) // 'ABC'