数组新增特性

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"

results matching ""

    No results matching ""