个人网站

# 数组的扩展

  1. 扩展运算符
    spread(...),将一个数组转为用逗号分隔的参数序列. 应用

    • 复制数组
    let a=[1,2]
//写法1
let b=[...a]
//写法2
let [...b]=a;
    • 合并数组
    let a1=[1,3]
let a2=[33,32]
let a3=[...a1,...a2]
//浅拷贝
    • 和解构结合
    const [first,...rest]=[1,2,3,4]
first//1
rest//[2,3,4]
//字符串
[...'spread']
//['s','p','r','e','a','d']

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

    Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let set1 = new Set(['a', 'b'])
Array.from(set1) // ['a', 'b']

  3. Array.of()
    Array.of将一组值，转换为数组.

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

  4. copyWithin()
    copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

    copyWithin(target, start = 0, end = this.length)
//target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
//start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
//end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

  5. find(),findIndex()

    • find方法，找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined;
    • findIndex,返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
    [1,23,3].find((n)=>n>20)//23
[1,24,4].findIndex((v)=>v>20)//1

    两个方法都可以发现NaN,弥补indexOf不足

  6. fill)()
    填充数组,会改变原数组

    [1,2],fill(3)
//[3,3]
new Array(2).fill(1)
//[1,1]
[1,2,3],fill(4,1,2)//start end
//[1,4,3]

  7. includes()
    返回一个布尔值，表示某个数组是否包含给定的值

    [1, 2, 3].includes(2)     // true
[1, 3].includes(4)     // false   
[1,  NaN].includes(NaN) // true

  8. flat(),flatMap()

    • flat 将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
    • 默认“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
    • 不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
    • 原数组有空位，flat()方法会跳过空位。
    • 实验中的功能,浏览器有兼容问题,chrome68都不行
    [1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

    flatMap()方法对原数组的每个成员执行一个函数,相当于map函数,再执行flat方法,返回新数组. 只能展开一层数组。

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

  9. 空位

    • 数组的空位指，数组的某一个位置没有任何值[,,,]
    • 空位不是undefined,es6将空位转为undefined
    • 空位的处理规则非常不统一，所以建议避免出现空位 es5处理情况
      • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
      • map()会跳过空位，但会保留这个值
      • join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

  10. entries()，keys() 和 values()

    • entries()，keys() 和 values()用于遍历数组.返回遍历器对象.可以用for of循环.
    • keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
    for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1

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

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

← 对象的扩展 →