ES6 Rest参数与扩展运算符详解：替代arguments与数组操作技巧

ES6 Rest参数与扩展运算符详解

前言

本文主要介绍ES6中Rest参数与扩展运算符的核心内容。这两者均为ES6标准引入的新特性，其中Rest参数的语法形式为“...变量名”，而扩展运算符则表现为三个点“...”。接下来将详细阐述它们的具体用法与区别。

Rest参数的定义与特性

Rest参数

Rest参数主要用于获取函数中多余的参数，从而避免依赖arguments对象。Rest参数后的变量必须是一个数组，该数组会自动将所有剩余的实参存入其中。


function add(...values) {
 let sum = 0;
 for (var val of values) {
 sum += val;
 }
 return sum;
}

add(1, 2, 3) // 6

传递给add函数的一组参数值，会被整合成一个名为values的数组。

以下示例展示了如何使用Rest参数替代传统的arguments变量。


// arguments变量的写法
function sortNumbers() {
 return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

Rest参数与arguments对象的区别

Rest参数仅包含那些没有对应形参的实参；相比之下，arguments对象包含了传递给函数的所有实参。
arguments对象并非真正的数组实例；而Rest参数是真实的Array实例，这意味着可以直接在Rest参数上使用所有数组方法。
arguments对象还包含一些附加属性，例如callee属性。

此外，使用Rest参数时需注意以下两点限制：

1、Rest参数之后不能再定义其他参数（即它必须是函数的最后一个参数），否则会导致语法错误。


function f(a, ...b, c) { ... } // 报错

2、函数的length属性不包含Rest参数。


(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1

扩展运算符的基本概念

扩展运算符

扩展运算符可视为Rest参数的逆运算，其主要功能是将一个数组转换为用逗号分隔的参数序列。


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

console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5

扩展运算符的实战应用

扩展运算符的应用场景

普通的函数调用


function push(array, ...items) {
 array.push(...items);
}

function add(x, y) {
 return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

上述代码中，array.push(...items)和add(...numbers)这两行均属于函数调用，且都使用了扩展运算符。该运算符的作用是将一个数组转换为一系列参数。

替代apply方法调用函数


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

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

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


// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

合并数组


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

与解构赋值结合使用


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

当将扩展运算符用于数组解构赋值时，它只能放置在参数的最后一位，否则会引发错误。


const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错

将字符串转换为数组


var str = 'hello';

// ES5 
var arr1 = str.split(''); // [ "h", "e", "l", "l", "o" ] 

// ES6 
var arr2 = [...str]; // [ "h", "e", "l", "l", "o" ]

实现了Iterator接口的对象

任何实现了Iterator接口的对象，都可以使用扩展运算符转换为真正的数组。


var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

在上述代码中，querySelectorAll方法返回的是一个nodeList对象。该对象并非数组，而是类似数组的对象。此时，扩展运算符可将其转换为真正的数组，原因在于NodeList对象实现了Iterator接口。

总结

从上述示例可以看出，Rest参数的使用场景相对较少，主要用于处理不定数量的参数，从而避免使用arguments对象。而扩展运算符的应用范围则更为广泛，在实际项目中灵活运用，能够编写出更加精简的代码。

以上就是本文的全部内容，希望这些内容能对您的学习或工作有所帮助。如有任何疑问，欢迎留言交流，感谢大家对本站的支持。

ES6 Rest参数与扩展运算符：语法、区别与实战应用