当前位置：网站首页>ES进阶 数组功能语法新特性详解

ES进阶 数组功能语法新特性详解

2022-08-11 02:20:00 【ZWZhangYu】

文章目录

扩展运算符

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

应用

数组合并，它的原理就是通过展开运算符将数组展开然后放入一个新的数组

    // 扩展运算符
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [7, 8, 9]
    let arr4 = [...arr1, ...arr2, ...arr3]
    console.log(arr4)

在这里插入图片描述
注意：这种数组合并的方式是浅拷贝，上面的是基本类型不会有影响，但是如果是如下的对象类型的话，那么就会影响到新的数组，需要注意。

    // 扩展运算符
    let arr1 = [{
    name:"alice"},{
    name:"Bob"}]
    let arr2 = [{
    name:"Tom"},{
    name:"pete"}]
    let arr3 = [...arr1, ...arr2]
    arr1[0].name="张三"
    console.log(arr3)

在这里插入图片描述
扩展运算符提供了复制数组的简便写法

    const a1 = [1, 2];
    const a2 = [...a1];
    a1[0] = 10
    console.log(a1)   // 10,2
    console.log(a2)  // 1,2

扩展运算符还可以将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

Array.from()

介绍

Array.from()方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

转换示例

Array.from可以将如下格式的数据转换为数组对象。

    let arr1 = {
    
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3
    }
    let arr2 = Array.from(arr1)
    console.log(arr2)

在这里插入图片描述
【操作DOM 返回的 NodeList 集合】

<p></p>
<p></p>
<p></p>
<p></p>

<body>
<script>
    let nodeList=document.getElementsByTagName("p")
    let arr=Array.from(nodeList)
    console.log(arr)
</script>

在这里插入图片描述
【任何有length属性的对象，都可以通过Array.from()方法转为数组】
在这里插入图片描述
上面代码中，Array.from()返回了一个具有2个成员的数组，每个位置的值都是undefined。注意扩展运算符转换不了这个对象。

【通过第二个参数实现map映射转换】
Array.from()还可以接受一个函数作为第二个参数，作用类似于数组的map()方法，用来对每个元素进行处理，将处理后的值放入新的数组。
在这里插入图片描述
上面示例中第二个参数是一个map映射函数，会将输入数据增加1000

Array.of()

Array.of()方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.of()基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。Array.of()总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

数组查找find()，findIndex()，findLast()，findLastIndex()

介绍

【find()】数组实例的find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
【findIndex()】数组实例的findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
【findLastIndex和findLast】从数组的最后一个成员开始，依次向前检查，其他使用和find和findIndex保持不变。

示例

【箭头函数简易操作】

    var arr = [3, 4, 1, 55, 677, 2, 22]
    var objArr = [{
    id: 331, name: "Tom"}, {
    id: 122, name: "Alice"},
        {
    id: 12, name: "Pete"}, {
    id: 441, name: "Kube"}]
    // 查找等于55的元素
    console.log(arr.find(x => x === 55))
    // 查找大于10的元素，返回第一个匹配的元素
    console.log(arr.find(x => x > 100))
    // 查询对象元素
    console.log(objArr.find(x => x.name.includes("A")))
    console.log(arr.findIndex(x => x === 55))
    console.log(arr.findLast(x => x === 55))

在这里插入图片描述
【自定义回调函数】

[1, 5, 10, 15].find(function(value, index, arr) {
    
  return value > 9;
}) // 10

上面代码中，find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

数组填充fill()

fill方法使用给定值，填充一个数组。
在这里插入图片描述
该方法对于数组的初始化很实用。如果数组中已经存在了数据，如上图的实例二那么原数组的数据会被填充的值覆盖，这个需要注意下。

对于刚才的操作可能过于粗暴了，fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。不包括结束位置。
在这里插入图片描述
注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

数组遍历entries()，keys() 和 values()

ES6 提供了entries()，keys()和values()用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
    
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
    
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
    
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

数组值包含includes()

includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

    var arr = [3, 4, 1, 55, 677, 2, 22]
    console.log(arr.includes(677))  //true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

flat()，flatMap()方法

flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。该方法支持嵌套多层的数组转换为一维的新数组。flatMap()方法主要是对其进行的扩展，支持map函数的映射，即转换多维数组时可以对处理数据进行map函数的转换映射。

    // 默认拉平的是二维数组
    let arr=[1,1,2,[3,4,5],4,]
    console.log(arr.flat())
    // [1, 1, 2, 3, 4, 5, 4]
    let arr2=[1,1,2,[3,4,5,[92,3,[23,4]]],4,]
    // 可以通过添加参数指定拉平的数组维度
    console.log(arr2.flat(3))
    // [1, 1, 2, 3, 4, 5, 92, 3, 23, 4, 4]

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
flatMap()只能展开一层数组。

    let arr2 = [1, 1, 2, [3, 4, 5, [92, 3, [23, 4]]], 4,]
    console.log(arr2.flatMap( x => x*10))
// [10, 10, 20, NaN, 40]

flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。

    let arr2 = [1, 2, [3, 4]]
    console.log(arr2.flatMap(function (value, index, array) {
    
        return value*100
    }));

toReversed()，toSorted()，toSpliced()，with()数组拷贝

toReversed()，toSorted()，toSpliced()，with()在功能上并不是新的，而是对array原有方法的改进，原来的会改变原有数组的数据，但是toReversed()，toSorted()，toSpliced()，with()不会改变原数组，而是返回原数组操作后的拷贝。

toReversed()对应reverse()，用来颠倒数组成员的位置。
toSorted()对应sort()，用来对数组成员排序。
toSpliced()对应splice()，用来在指定位置，删除指定数量的成员，并插入新成员。
with(index, value)对应splice(index, 1, value)，用来将指定位置的成员替换为新的值。
原网站

版权声明
本文为[ZWZhangYu]所创，转载请带上原文链接，感谢
https://zwzhangyu.blog.csdn.net/article/details/125711569

边栏推荐

猜你喜欢

随机推荐