ECMAScript日常总结--ES2023(ES14)

发布时间:2023年12月20日

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'
文章来源:https://blog.csdn.net/Robinwang1128/article/details/135008864
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。