1、Array.from()
用于将两类对象转为真正的数组：
- 类数组(array-like)对象与可遍历的对象转化为数组并返回
let arrayLike = {
'0' : 'a',
'1' : 'b',
'2' : 'c',
length : 3
};
//ES5 写法
var arr1 = [].slice.call(arrayLike); // ['a','b','c']
//ES6 写法
var arr2 = Array.from(arrayLike); // ['a','b','c']
ES5
var divs = document.querySelectAll("div");
[].slice.call(divs).forEach(function (node) {
console.log(node);
})
ES6
var divs = document.querySelectAll("div");
Array.from(divs).forEach(function (node) {
console.log(node);
})
- Array.from()也可以将ES6中新增的Set、Map等结构转化为数组：
// 将Set结构转化为数组
Array.from(new Set([1, 2, 3])); // [1, 2, 3]
//将Map结构转化为数组
Array.from(new Map(["name", "ty"])); // ["name", "ty"]
字符串既是类数组又是可遍历的，所以Array.from()也可将字符串转化为数组：
Array.from("tyz"); // ["t", "y", "z"]
Array.from()还有两个可选参数，完整语法如下：
Array.from(obj, mapFn, thisArg)
mapFn其实就是数组的map方法，对数组的每个元素处理。thisArg是执行环境的上下文。 Array.from(obj, mapFn, thisArg) 等同于 Array.from(obj).map(mapFn, thisArg)。
2、Array.of()
Array.of(1, 11, 8); // [1, 11, 8]
Array.of(3); // [3]
Array.of(3).length; // 1
Array(3) // [undefined, undefined, undefined]
3、数组实例 copyWithin()
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
target （必需）：从该位置开始替换数据。
start （可选）：从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
// 将 3 号位复制到 0 号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2 相当于 3 号位， -1 相当于 4 号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将 3 号位复制到 0 号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 将 2 号位到数组结束，复制到 0 号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
4、Array.prototype.find()与Array.prototype.findIndex()
参数包括一个回调函数和一个可选参数(执行环境上下文）。回调函数会遍历数组的所有元素，直到找到符合条件的元素，然后find()方法返回该元素。
[1, 2, 3, 4].find(function(el, index, arr) {
return el > 2;
}) // 3
[1, 2, 3, 4].find(function(el, index, arr) {
return el > 4;
}) // undefined
findIndex()方法与find()方法用法类似，返回的是第一个符合条件的元素的索引，如果没有则返回-1。
[1, 2, 3, 4].findIndex(function(el, index, arr) {
return el > 2;
}) // 2
[1, 2, 3, 4].findIndex(function(el, index, arr) {
return el > 4;
}) // -1
5、Array.prototype.fill()
fill(value, start, end)
[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
6、Array.prototype.entries()、Array.prototype.keys()与Array.prototype.values()
entries()、keys与values都返回一个数组迭代器对象
for (let i of entries) {
console.log(i)
} // [0, 1]、[1, 2]、[2, 3]
for (let [index, value] of entries) {
console.log(index, value)
} // 0 1、1 2、2 3
for (let key of keys) {
console.log(key)
} // 0, 1, 2
for (let value of values) {
console.log(value)
} // 1, 2, 3
var entries = [1, 2, 3].entries();
console.log(entries.next().value); // [0, 1]
console.log(entries.next().value); // [1, 2]
console.log(entries.next().value); // [2, 3]
var keys = [1, 2, 3].keys();
console.log(keys.next().value); // 0
console.log(keys.next().value); // 1
console.log(keys.next().value); // 2
var valuess = [1, 2, 3].values();
console.log(values.next().value); // 1
console.log(values.next().value); // 2
console.log(values.next().value); // 3
7、Array.prototype.includes()
返回布尔值，是否包含给定的值
assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);
assert([1, 2, NaN].includes(NaN) === true);
assert([1, 2, -0].includes(+0) === true);
assert([1, 2, +0].includes(-0) === true);
assert(["a", "b", "c"].includes("a") === true);
assert(["a", "b", "c"].includes("a", 1) === false);
8、数组的空位
Array(3) // [, , ,]
0 in [undefined, undefined, undefined] //true
0 in [, , ,] //false
ES5 大多方法会将空位跳过
ES6 则是明确将空位转为undefined
9、数组推导
var a1 = [1,2,3,4];
var a2 = [for (i of a1) i * 2];
a2 // [2,4,6,8]
(for (x of a) for (y of b) if (x > y) [x,y])
function* generatorComprehension() {
for (x of a) {
for (y of b) {
if (x > y) {
yield [x,y];
}
}
}
}
