esl6中的三个点（...）-rest参数与扩展运算符

最新推荐文章于 2022-02-25 17:35:23 发布

转载最新推荐文章于 2022-02-25 17:35:23 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014875454

文章标签：

#javascript #ViewUI

本文介绍了ES6中的Rest参数与扩展运算符的基本概念及其应用案例，包括如何使用Rest参数来处理函数中的多余参数，以及扩展运算符在数组合并、函数参数转换等方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rest参数

ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。 rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
        let sum = 0;
        for (var val of values) {
            sum += val;
        }
         return sum;
} 
add(2, 5, 3) // 10

应用：

1.rest参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用rest参数改写数组push方法的例子。

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
    return array
} 
var a = [];
push(a, 1, 2, 3)  //[1,2,3]

扩展运算符

扩展运算符（ spread）是三个点（ ...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

应用：

1.扩展运算符将数组变为参数序列

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

2.替代数组的apply 方法,由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5的写法
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);

// 应用Math.max方法， 简化求出一个数组最大元素的写法

// ES5的写法
Math.max.apply(null, [14, 3, 77])

// ES6的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

上面代码表示，由于JavaScript不提供求数组最大元素的函数，所以只能套用Math.max函数，将数组转为一个参数序列，然后求最大值。有了扩展运算
符以后，就可以直接用Math.max

3.合并数组

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