芯が強い人になるESTJ-A

# es6 扩展运算符语法

IT開発 Tags: 无标签 阅读: 243

扩展运算符( spread )是三个点(…)。作用是

将一个数组转为用逗号分隔的参数序列。

arr=[1,2,3]
console.log(...arr)//1,2,3
console.log(0,...arr)//0,1,2,3

用于函数调用

function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

扩展运算符与正常的函数参数可以结合使用,非常灵活。

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

替代数组的 apply 方法

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数

function f(x, y, z) {
        // ...
        }
        var args = [0, 1, 2];
        f.apply(null, args);
        // ES6 的写法
        function f(x, y, z) {
        // ...
        }
        var args = [0, 1, 2];
        f(...args);

合并数组

/ 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' ]

与解构赋值结合

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []

函数的返回值

JavaScript 的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

字符串

扩展运算符还可以将字符串转为真正的数组。

[...'hello']    // [ "h", "e", "l", "l", "o" ]

参考:link
link2
link3