ES6 数组扩展 JavaScript

[JavaScript数组]一篇中介绍了ES6之前的数组方法。本篇介绍一下ES6里新增的数组方法。

• keys，values，entries

• find，findIndex，inclueds
• fill，copyWithin
• 静态方法（from，of）

---

1. 数组实例的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"

Array.map()

Array.map(function(ele){
  console.log(ele)  打印每个数组中的数值
})

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

find()

• 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()

• findIndex()方法与find()类似，无符合条件返回-1.
  这两个方法都可接受第二个参数，用来绑定回调函数的this对象。

includes()

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

第一个参数是查找的元素。
第二个参数可选，表示开始查找的位置，不指定的话默认为0，指定为负数，表示倒着数。
[1, 2, 3].includes(2);         // true
[1, 2, 3].includes(4);         // false
[1, 2, 3].includes(3, 3);      // false
[1, 2, 3].includes(3, -1);     // true
[1, 2, NaN].includes(NaN);     // true

3. 数组实例的copyWithin() fill()

数组实例的copyWithin() 复制

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

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

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

数组实例的fill() 填充

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

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

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

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

4. Array.from() Array.of()

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);
}

Array.of()

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

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

4. 数组的空位

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

Array(3) //[ , , ]
0 in [undefined, undefined, undefined]  //true
0 in [ , , ,]   //false