ES6学习笔记之数组的扩展

发表于 更新于 分类于 阅读次数： Disqus：

Learning Card

  • 扩展运算符
    • 写法： ...
    • 用途：将数组转为参数序列
    • 应用
      • 复制数组
      • 合并数组
      • 转换字符串
  • 数组的新方法
    • Array.from()
      • 将类似数组的及有遍历接口的对象转换成数组
    • Array.of()
  • 数组实例的新方法
    • copyWith(target, start, end)
      • 复制数组内的元素到特定位置
    • find
      • 找到第一个符合条件的元素
    • findIndex
      • 找到第一个符合条件的元素的位置
    • fill()
      • 填充数组
    • keys(), values(), entries()
      • 遍历数组的键名、键值、键值对
    • includes
      • 检查数组中是否包含某个元素

1. 扩展运算符

扩展运算符的写法是...三个点，用于将一个数组转为用逗号分隔的参数序列

1
2
3
4
5
6
7
8
9
10
console.log(...[1,2,3]);  // 1 2 3

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) //42

辨析：扩展运算符 VS rest参数

扩展运算符与rest参数正好相反。扩展运算符用于将数组转换为参数序列，即...array；rest参数的写法是...变量，传入的变量是一系列参数，但是rest参数整体作为数组使用。

扩展运算符可以直接将数组转换为参数，因此不用使用apply方法。

####应用

  1. 复制数组

    数组是复合数据类型，直接复制只能复制指向底层数据结构的指针，而不能真正克隆数组（浅拷贝和深拷贝的区别）；扩展运算符可以简便地复制数组

    1
    2
    3
    4
    5
    const a1 = [1, 2];
    //写法1
    const a2 = [...a1];
    //写法2
    const [...a2] = a1;

  2. 合并数组

    ES5使用concat方法来合并数组，ES6利用扩展运算符可以更方便地合并数组

    1
    [...arr1, ...arr2, ...arr3]

  3. 转换字符串为数组

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

数组的新方法

Array.from()

Array.from()方法用于将类似数组的对象（array-like object）和可遍历的对象转成真正的数组。

1
2
let nameSet = new Set(['a', 'b']);
Array.from(nameSet) //['a', 'b']

Array.from()还可以接受第二个参数，起到类似于map的作用，对每个元素进行处理，最终返回到新的数组中

1
Array.from([1, 2, 3], (x)=> x * x)  //[1, 4, 9]

Array.of()

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

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

这个方法用于弥补Array()方法在参数较少时，无法生成由参数构成的数组的缺陷。

1
2
3
4
5
6
7
8
Array() //[]
Array(3) //[, , ,]
Array(1, 2, 3) //[1, 2, 3]

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

数组实例的新方法

copyWithin()

将指定位置的成员复制到其他位置，覆盖原有元素。

1
Array.prototype.copyWithin(target, start = 0, end = this.length);
  • target(必需): 从该位置开始替换数据
  • start(可选)：从该位置开始读取数据
  • end(可选)： 到该位置前停止读取数据
1
[1, 2, 3, 4, 5].copyWithin(0, 3)  //[4, 5, 3, 4, 5]

find()和findIndex

find用于找出第一个符合条件的数组成员

1
[1, 2, 3].find((n) => n > 2)  // 3

findIndex用于找到第一个符合条件的数组成员的位置

1
[1, 2, 3].findIndex((n) => n > 2)  // 2

这两个方法都可以识别NaN，弥补indexOf的不足。

fill()

使用给定值填充数组。用于初始化空数组非常方便

1
new Array(3).fill(7) //[7, 7, 7]

也可以指定填充的起始位置和结束位置

1
['a', 'b', 'c'].fill(7, 1, 2)  //['a', 7, 'b']

entries(), keys(), values()

分别对键名、键值、键值对进行遍历。

可以用for...of循环，也可以手动调用遍历器对象的next方法。

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

includes

返回一个布尔值，表示数组是否包含特定的值

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

可以添加第二个参数，规定开始搜索的起始位置

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

ES6学习笔记的内容主要基于阮一峰老师的《ECMAScript 6入门》，原文请见链接