ES6笔记（五）Array类型的扩展、扩展运算符

简介

  ES6对JS原生的各个数据类型都进行了扩展，对于Array类型：新增了for…of的遍历方式；扩展了一些新方法；新增扩展运算符，用于数组的解构。

数组遍历for…of

语法：

for (variable of iterable) {

}

  iterable 迭代器的实现是ES6的新增语法，其主要作用就是含有iterable迭代器的对象可以通过for…of进行遍历，既不是 for 循环规定的 array，也不是 for…in 规定的 Object，for…of 遍历的是一切可遍历的元素（数组、对象、集合）等，在 ES6 中允许开发者自定义遍历，换句话说任何数据结构都可以自定义一个遍历，这个遍历是不能被 for、for…in 理解和实现的。

用法：

• Array.prototype.values()：获取键值
• Array.prototype.keys()：获取键名
• Array.prototype.entries()：获取键值对

  for (let item of arr) {
    console.log(item)
  }// 打印键值

  for (let item of arr.values()) {
    console.log(item)
  }// 打印键值

  for (let item of arr.keys()) {
    console.log(item)
  }// 打印键名index

  for (let [index, item] of arr.entries()) {
    console.log(index, item)
  }// 打印键名index和键值

关于forEach、every

• 不支持使用break、continue

关于for…in

• 不建议使用 for…in 遍历数组
• for…in 代码中不能出现return
• for…in 会将数组中的自定义属性一并遍历出来
• for…in 是为遍历对象创造的

新增的Array方法

Array.form()

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数	含义	必选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	Y
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数	N
thisArg	可选参数，执行回调函数 mapFn 时 this 对象	N

用法：

• 将伪数组直接转换为数组对象：

关于伪数组

伪数组具备两个特征，1. 按索引方式储存数据 2. 具有length属性；如：

  let arrLike = {
 	0: 'a',
 	1: 'b',
 	2: 'c',
	length: 3
  }

伪数组转换为数组的几种方法：

  let args = Array.prototype.slice.call(arguments); 
  let args = [].slice.call(arguments);
  //还可以使用Array.from()方法或spread运算符将arguments转为真正数组
  let args = Array.from(arguments);
  let args = [...arguments];

  // ES5
  let args = [].slice.call(arguments);
  let imgs = [].slice.call(document.querySelectorAll('img'));

  // ES6
  let args = Array.from(arguments);
  let imgs = Array.from(document.querySelectorAll('img'));

• 具备 map 的功能，也可用于数组初始化：

  // ES5
  let arr = Array(6).join(' ').split('').map(item => 1)
  // [1,1,1,1,1]

  // ES6
  Array.from({
    length: 5
  }, function() {
    return 1
  })

Array.of()

语法：Array.of(element0[, element1[, ...[, elementN]]])

参数	含义	必选
elementN	任意个参数，将按顺序成为返回数组中的元素	Y

用法： 创建数组，与Array的区别如下：

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

fill()

语法：arr.fill(value[, start[, end]])

参数	含义	必选
value	用来填充数组元素的值	Y
start	起始索引，默认值为0	N
end	终止索引，默认值为 this.length	N

用法： 数组填充

  let array = [1, 2, 3, 4]
  array.fill(0, 1, 2)
  // [1,0,3,4]

  Array(5).fill(1)
  // [1,1,1,1,1]

find()与findIndex()

语法：arr.find(callback[, thisArg])

参数	含义	必选
callback	在数组每一项上执行的函数，接收 3 个参数，element、index、array	Y
thisArg	执行回调时用作 this 的对象	N

用法： 遍历数组，返回满足函数条件的第一个元素的值，否则返回undefined

  let array = [5, 12, 8, 130, 44];
  let found = array.find(function(element) {
    return element > 10;
  });
  console.log(found);
  // 12

• findIndex()语法与find()完全相同，唯一不同在于返回的值为元素index，否则返回-1
  
  

copyWithin()

语法：arr.copyWithin(target, start = 0, end = this.length)

参数	含义	必选
target	从该位置开始替换数据。如果为负值，表示倒数	Y
start	从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算	N
end	到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算	N

用法： 复制并覆盖数组中指定元素值，修改并返回当前数组

  let arr = [1, 2, 3, 4, 5]
  console.log(arr.copyWithin(1, 3))
  // [1, 4, 5, 4, 5]

扩展运算符

含义

  扩展运算符的写法是三个点...。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。可以简单理解为运算符对数组进行了展开。

  console.log(...[1, 2, 3])
  // 1 2 3

应用

• 替代apply将数组转换为函数参数

  // ES5写法
  function f(x, y, z) {
    // ...
  }
  var args = [0, 1, 2];
  f.apply(null, args);
  
  // ES6使用扩展运算符
  f(...args)

• 数组的复制：数组作为复杂对象，直接赋值只能将同一个指针赋值过去，本质上并没有完成数组的复制

  // ES5中只能使用for循环完成复制
  var arr = [1, 2, 3]
  var newArr = []
  for(var i in arr){
	newArr.push(arr[i]) // 或 newArr[i] = arr[i]
  }
  
 // ES6使用扩展运算符
 let newArr = [...arr]
 // 也可使用Array.form方法
 let newArr = Array.form(arr)

• 数组的合并

  // ES5中使用apply
  var arr1 = [1, 2];
  var arr2 = [3, 4];
  Array.prototype.push.apply(arr1, arr2);
  // arr1 = [1, 2, 3, 4]

  // ES6中使用扩展运算符
  arr1.push(...arr2)
  // 或者直接合并为一个新数组
  let newArr = [...arr1, ...arr2]

• 字符串转换为数组

  console.log([...'hello'])
  // [ "h", "e", "l", "l", "o" ]

• 还可以应用到解构赋值中，获取rest数组