数组新增特性
1 扩展(spread)运算符
1.1 用法
扩展(spread)运算符是三个点 ...
。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
function fn(a, b, c) {
console.log(a, b, c, a+b+c);
}
var nums = [100,200,300,250];
fn(nums); // 输出 [100, 200, 300, 250] undefined undefined "100,200,300,250undefinedundefined"
fn(...nums); // 输出 100 200 300 600
1.2 应用场景
① 函数传参
将数组中每个元素的值,按顺序依次赋值给形参。
function fn(a, b, c) {
console.log(a, b, c, a+b+c);
}
var nums = [100,200,300,250];
fn(...nums); // 输出 100 200 300 600
fn.call({}, ...nums); // 输出 100 200 300 600
Math.max(...nums); // 计算数组中值最大的元素 这里得到 300
var names = ['曹操', '张仁', '刘备'];
nums.push(...names); // [100, 200, 300, 250, "曹操", "张仁", "刘备"]
② 复制数组
数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
③ 合并数组
// ES5 实现方式
[1, 2].concat(more)
// ES6 实现方式
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的的方式合并数组
arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ]
// 使用 ES6 扩展运算符合并数组
[...arr1, ...arr2, ...arr3]; // [ 'a', 'b', 'c', 'd', 'e' ]
④ 可遍历对象转为纯数组
扩展运算符可以将可遍历对象(定义了遍历器(Iterator)接口的对象)转为真正的数组。
[...'hello'] // [ "h", "e", "l", "l", "o" ]
let nodeList = document.querySelectorAll('div');
let array = [...nodeList]; // [div,div,div,div]
注意:很多原生的类数组对象都是可遍历对象,但是二者并不完全一致!
⑤ 与解构赋值结合
扩展运算符可以与解构赋值结合起来,用于生成数组。
const [first, ...seconds] = [1, 2, 3, 4, 5];
first; // 1
seconds; // [2, 3, 4, 5]
2 Array 构造函数本身新增的方法
2.1 Array.from()
Array.from()
方法用于将类数组对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map转为真正的数组。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
2.2 Array.of()
Array.of()
方法用于将一组值,转换为数组。
Array.of()
基本上可以用来替代 Array()
或 new Array()
,它的行为非常统一,不会因为参数不同行为有差异。
Array.of(3, 11, 8); // [3,11,8]
Array.of(3); // [3]
Array.of('jack', 'anni'); // ["jack", "anni"]
Array.of(); // []
3 Array 实例新增的方法
3.1 find() 和 findIndex() 方法
数组实例的 find 方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为 true 的成员,然后返回该成员。如果没有符合条件的成员,则返回 undefined。
[1, 4, -5, 10].find((n) => n < 0) // -5
数组实例的 findIndex 方法的用法与 find 方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回 -1。
[1, 4, -5, 10].find((n) => n < 0) // 2
3.2 fill() 方法
fill()
方法使用给定值,填充一个数组。可以填满稀疏数组。
['a', 'b', 'c'].fill(7); // [7, 7, 7] 数组中已有的元素,会被全部抹去。
new Array(3).fill(7); // [7, 7, 7] 用于空数组的初始化非常方便
fill
方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
3.3 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"