ES6中一些很好用的数组方法

907 阅读2分钟

「这是我参与2022首次更文挑战的第22天,活动详情查看:2022首次更文挑战」。

Array.from方法

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

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

    let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    let arr = Array.from(arrayLike); // ['a', 'b', 'c']
    

所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组。

image-20220121004917556

  • 可遍历(iterable)的对象(包括 Set 和 Map)

    Array.from('hello')
    // ['h', 'e', 'l', 'l', 'o']
    
    let namesSet = new Set(['a', 'b'])
    Array.from(namesSet) // ['a', 'b']
    
    //字符串和 Set 结构都具有 Iterator 接口,所以可以被Array.from转为真正的数组。
    

Array.of方法

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

Array.of(1, 2, 3)

打印结果:

image-20220220202534760

flat方法

用于将嵌套的数组“拉平”,变成一维的数组。会返回一个新数组,对原数据没有影响。

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

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

image-20220220202931233

如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数。

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

如果不确定有多少层,但是都想转成一维数组,可以传关键字Infinity

[1, 2, [3, [4, [5,6]]]].flat(Infinity)

image-20220220203324774

fill方法

给定一个值,填充数组。

arr.fill(value, start, end)
- value:填充值。
- start:填充起始位置,可以省略。
- end:填充结束位置,可以省略,实际结束位置是end-1

假如已经有一个数组,想要把它的值全部替换为指定值

image-20220220215759391

也可以替换指定位置的数据(或者指定位置范围的数据)

image-20220220220356371

copyWithin方法

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

arr.copyWithin(target, start, end)
- target (必需):从该位置开始替换数据。
- start (可选):复制源的起始位置,默认为 0 。如果为负值,表示倒数。
- end (可选):复制源的结束位置,默认等于数组长度。如果为负值,表示倒数。实际结束位置是end-1

来看几个示例:

这边我们是把下标3-5的元素,复制并从下标1开始覆盖(从0开始数)

image-20220220221609076

start和end都是可选的,如果不填,则表示复制整个数组,如果目标位置不够,则能覆盖多少就覆盖多少。

image-20220220222259443

🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 一起来看看JS的原型继承

👉 15 个JavaScript数组实用技巧

👉 JavaScript数组方法看这一篇就够了

👉 JS内置日期对象Date的使用指南