重学ES6 数组的扩展(1)

扩展运算符

含义

（... ）如同rest的参数的逆运算，将一个数组转为用逗号分隔的参数序列。

主要用于函数调用：

function push (array, ...items){
    console.log(items)
    items.forEach(function(item){
        array.push(item)
    })
    console.log(array)
}

push([],[1,2,3])
复制代码

替代数组的apply

扩展符可以展开数组，所以不再需要使用 apply 将数组转为函数参数。

// es5 
function f(x,y,z){
    // ...
}

var args = [0, 1, 2];

f.apply(null, args);

// es6

f(...args)
复制代码

求数组中的最大值

//es5
Math.max.apply(null,[14,7,9])

// es6
Math.max(...[14,7,9])
复制代码

扩展运算符应用

合并数组

// es5
[1, 2].concat(more, arr1);
//es6
[1, 2, ...more], ...arr1;
复制代码

与解构赋值结合

// es5
a = list[0], rest = list.slice(1)
// es6
[a, ...rest] = list
复制代码

函数返回值

javascript函数只能返回一个值，如果需要返回多个值，只能返回数组或者对象。扩展运算符提供了一个变通的方法。

var dataFields = readDataFields(database)
var d = new Date(...dataFields)
复制代码

从数据库取出一行，通过扩展运算符，直接传入构造函数Date

字符串

将字符串转化为真正的数组

[...'hello']
// ["h","e","l","l","o"]
复制代码

实现lterator接口的对象

var nodeList = document.querySlectorAll('div');//类数组对象
var arr = [...nodeList];  // 这样就变成了真正的数组，因为nodeList实现了lterator接口
复制代码

Map 和 Set结构，Generator函数

扩展元算符调用的是数据结构的lterator接口，只要具有lterator接口的对象，都可以使用

let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three']
])

let arr = [...map.keys()]; // [1, 2, 3]
复制代码

var go = function*(){
    yield 1;
    yield 2;
    yield 3;
}
[...go()]; //[1, 2, 3]
复制代码

转载于:https://juejin.im/post/5cc3c2e46fb9a0322861708a