ES6学习笔记六|数组的扩展

1. Array.from()

• 用于将两类对象转为真正的数组。

• 类似数组的对象（array-like object）
  let arrayLike = {
  '0':'a',
  '1':'b',
  '2':'c',
  length:3
  } ;
  let arr2 = Array.from(arrayLike); //['a','b','c']

• DOM操作返回的NodeList集合，以及函数内部的arguments对象。
  //NodeList对象
  let ps = document.querySelectorAll('p');
  Array.from(ps).forEach(function (p)) {
  console.log(p);
  });

   //arguments对象
   function foo() {
       var args = Array.from(arguments);
   }
  

• 部署了Iterator接口的数据结构
  Array.from('hello');
  let namesSet = new Set(['a','b']);
  Array.from(namesSet); //['a','b']

• 如果是一个真正的数组，返回一个一模一样的新数组。

• 该方法还支持类似数组的对象。（类似数组的对象，即本质特征只有一点，必须有length属性）
  Array.from({length:3});
  //[undefined,undefined,undefined]

• 该方法接受第二个参数，类似数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
//等同于
Array.from(arrayLike).map(x => x * x);

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

• Array.from()另一个应用，将字符串转为数组，然后返回字符串的长度。它可以正确处理各种Unicode字符，可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug。

 function countSymbols(string) {
     return Array.from(string).length;
 }

2. Array.of()

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

Array.of(3,11,5);   //[3,11,5]
Array.of(2).length;   //1

• 该方法总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

3. 数组实例的copyWithin()

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

Array.prototype.copyWithin(target,start=0,end=this.length)

• 它接受三个参数。三个参数都应该是数值，如不是，则自动转为数值。
• target（必需）：从该位置开始替换数据。
• start（可选）：从该位置开始读取数据，默认为0.如果为负数，表示倒数。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负数，表示倒数。

[1,2,3,4,5].copyWithin(0,3)
//[4,5,3,4,5]

4. 数组实例的find()和findIndex()

• find()方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该函数，知道找出第一个返回true的成员，然后返回该成员。没有符合则返回undefined。

[1,4,-5,10].find((n) => n < 0);
//-5

• find方法接受三个参数，依次为当前的值、当前的位置和原数组

[1,5,10,15].find (function (value, index, arr) {
    return value > 9;
})   //10

---

• findIndex()方法与find()类似，无符合条件返回-1.

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

5. 数组实例的fill()

• fill方法使用给定值，填充一个数组。

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

• fill方法接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

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

6. 数组实例的entries(),keys()和values()

• 三个方法都是用于遍历数组。
• keys遍历键名。
• values遍历键值。
• entries遍历键值对。

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

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

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

7. 数组实例的includes()

• 该方法返回一个布尔值，表示某个数组是否包含给定的值。
• 该方法的第二个参数表示搜索的起始位置，默认为0.如果第二个参数是负数，则表示倒数位置。如果倒数的绝对值大于数组长度，则会重置从0开始。

8. 数组的空位

• 指数组的某一个位置没有任何职。

Array(3)  //[ , , ]

注意：空位不是undefined，空位是没有任何值。

0 in [undefined, undefined, undefined]  //true
0 in [ , , ,]   //false

---

总结：

• Array.from方法将空位转为undefined。
• copyWithin方法会连同空位一起拷贝。
• fill方法将空位视为正常的数组位置。
• for...of 循环也会遍历空位。
• entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。