es6核心特性-数组扩展

1. Array.from() : 将伪数组对象或可遍历对象转换为真数组

　　如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，称为伪数组。典型的伪数组有函数的arguments对象，以及大多数 DOM 元素集，还有字符串。

　　　　针对伪数组，没有数组一般方法，直接遍历便会出错,ES6新增Array.from()方法来提供一种明确清晰的方式以解决这方面的需求。

　　　　Array.from(btns).forEach(item=>console.log(item))将伪数组转换为数组

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

　　数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

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

　　数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

3.数组实例的includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

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

　　没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN) // -1
[NaN].includes(NaN) // true

4.数组实例的 entries()，keys() 和 values()

　　可以用for...of循环进行遍历，唯一的区别是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"

5.扩展运算符的使用“ [...] ”

　　1）复制数组：

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
a2[1] = 3
console.log(a2); //[1, 3]
console.log(a1); //[1, 2]

　　2）合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
console.log([...arr1, ...arr2, ...arr3]); //["a", "b", "c", "d", "e"]

　　3）与解构赋值结合

　　如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

　　4）字符串转数组

扫描二维码关注公众号，回复： 4749607 查看本文章

[...'hello world']
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

　　以上内容是现在vue项目开发中经常使用到的es6中数组的一些用法，这些也是源自阮一峰的es6和我在github上看到<ES6核心特性>，感谢以上作者。