ES6 数组的扩展速记

振作精神,努力更新!

先定个小目标,每周更新3篇内容!

本周:2022 - 06 - 27 ~ 2022 - 07 - 03 ( 第一篇 )

三点运算符

应用:

  1. 克隆数组

    let arr2 = [...arr1]
  2. 合并数组

    let arr3 = [...arr1, ...arr2]
  3. 与解构赋值结合

    let [a, ...arr2] = arr1
  4. 字符串

    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
    // 可识别四个字节的字符
  5. 实现了 Iterator 接口的对象

    任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。

  6. Map、Set结构,Generator 函数

数组的空位

ES5:

  • forEach(), filter(), reduce(), every()some()都会跳过空位。

  • map()会跳过空位,但会保留这个值

  • join()toString()会将空位视为undefined,而undefinednull会被处理成空字符串。

ES6:明确将空位转为undefined

  • Array.from

  • ...

  • entries()keys()values()find()findIndex()会将空位处理成undefined

copyWithin()会连空位一起拷贝。

fill()会将空位视为正常的数组位置。

for...of循环也会遍历空位。

注意:由于空位的处理规则非常不统一,所以建议避免出现空位。

Array.from()

Array.from方法用于将两类对象转为真正的数组:

  1. 类似数组的对象(array-like object)

  2. 可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.of()

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

主要目的是弥补数组构造函数Array()的不足.

参数个数的不同,会导致Array()的行为有差异。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

copyWithin()

在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)
  • target(必需):从该位置开始替换数据。如果为负值,表示倒数。

  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。

  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

find() 和 findIndex()

find(),参数为回调函数,返回符合条件的第一个值。

findIndex方法的用法与find方法类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

这两个方法的回调函数都可以接受三个参数:当前值 value,当前位置 index,原数组 arr。

这两个方法都可以发现NaN

这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

arr.find(callback, obj)

fill()

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
​
new Array(3).fill(7)
// [7, 7, 7]
​
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

注意:填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

entries()、keys()、values()

用于遍历数组,

keys()是对键名的遍历、

values()是对键值的遍历,

entries()是对键值对的遍历。

可以手动调用遍历器对象的next方法,进行遍历

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值。

该方法的第二个参数表示搜索的起始位置,默认为0

该方法可以检测 NaN。

flat()、flatMap()

该方法用于拉平嵌套的数组。

该方法返回一个新数组,对原数据没有影响。

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

flat()默认只会“拉平”一层

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
​
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

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

原数组有空位,flat()方法会跳过空位

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

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

flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值