ES6展开语法详解：函数传参、数组操作与剩余参数

作者：木棉时间：2026-10-22 21:07:48浏览：68

本文深入解析ES6展开语法（Spread Syntax）的三大核心应用场景。通过对比ES5与ES6代码，展示如何利用展开语法简化函数参数传递、实现数组的高效合并与追加，以及处理剩余参数。掌握这些技巧有助于编写更简洁、易读的现代JavaScript代码。

展开语法概述

展开语法通过三个点符号（...）表示，其作用是将可迭代对象拆解为独立的值序列。该语法常用于将可迭代对象中的元素作为参数传递给函数。下文将从函数传参、数组操作及剩余参数三个维度展开介绍。

函数传参中的应用
数组的相关应用
剩余参数的应用
函数传参中的应用

函数传参中的应用

在ES6标准推出前，若需将数组元素作为独立参数传递给函数，通常依赖Function对象的apply()方法。具体实现方式见下方代码示例。


function myFunction(a, b) {
 return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5”

上述代码中，apply方法接收一个数组，并将其元素解包后作为独立参数传递给目标函数执行。

ES6引入的展开语法提供了更简洁的调用方式，具体实现见下方代码示例。


function myFunction(a, b) {
  return a + b; 
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5”

代码执行时，JavaScript引擎在调用myFunction前，使用1,4表达式替代...运算符：


let result = myFunction(...data);

上述代码在运行时的转换逻辑如下所示。


let result = myFunction(1,4);

完成替换后，函数体内的代码将继续正常执行。

数组的相关应用

数组的合并

展开语法支持将数组元素插入到另一个数组中，从而构成新数组的一部分。


let array1 = [2,3,4];
let array2 = [1, ...array1, 5, 6, 7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7”

在代码执行阶段，以下代码片段会发生如下变化。


let array2 = [1, ...array1, 5, 6, 7];

上述代码最终会被转换为如下形式。


let array2 = [1, 2, 3, 4, 5, 6, 7];

在push方法中的运用

当需要将一个数组的内容追加到另一个数组时，ES6之前的实现方式较为繁琐，具体代码见下方示例。


var array1 = [2,3,4];
var array2 = [1];
Array.prototype.push.apply(array2, array1);
console.log(array2); //Output "1, 2, 3, 4”

利用ES6展开语法，可以实现更简洁的追加操作，具体代码见下方示例。


let array1 = [2,3,4];
let array2=[1];
array2.push(...array1);
console.log(array2); //Output "1, 2, 3, 4”

在代码执行阶段，以下代码片段会发生如下变化。


array2.push(...array1);

上述代码最终会被转换为如下形式。


array2.push(2, 3, 4);

传递多个数组参数

利用展开语法，可以一次性传递多个数组作为参数，具体实现见下方代码示例。


let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
 return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15”

剩余参数的应用

传统JS函数内部存在arguments对象，用于获取所有实参。ES6引入了剩余参数（Rest Parameters）概念，允许获取除已命名参数外的其余参数，可通过展开语法...进行获取。

在ES6标准之前，获取剩余参数的实现方式如下代码所示。


function myFunction(a, b) {
  const args = Array.prototype.slice.call(arguments, myFunction.length);
  console.log(args);
}
myFunction(1, 2, 3, 4, 5); //Output "3, 4, 5”

在ES6中，上述逻辑可重构为以下代码形式。


function myFunction(a, b, ...args) {
  console.log(args); //Output "3, 4, 5"
}
myFunction(1, 2, 3, 4, 5);

实现过程相对简单，但需注意一个关键限制：若函数参数列表中第一个参数使用了剩余语法，则后续不能再声明非剩余参数，否则将抛出语法错误。具体示例见下方代码。


function fn(...rest,foo) {} 
//Output "SyntaxError: Rest parameter must be last formal parameter"

小节

本文内容至此结束。展开语法在开发中极具实用价值，建议在日常编码中优先使用此类新语法糖替代旧式写法，从而使代码更加简洁、整洁且易于理解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01