JavaScript 扩展语法（Spread Syntax）的十种实用技巧
本文详细介绍 JavaScript ES6 中扩展语法（...）的十种核心用法。涵盖数组与对象的浅拷贝、元素增删、数组合并、字符串与类数组转换，以及函数不定参数处理。通过对比传统方法与扩展语法，展示代码简洁性，帮助开发者提升编码效率。
前言
扩展语法（Spread Syntax，即 ...）是 ES6 引入的重要特性，允许从可迭代对象中快速提取元素。利用该语法，可以替代部分复杂 API，使代码更加简洁。掌握此功能将显著提升开发体验。
1、复制一个数组
传统复制数组的方式是使用 slice 方法。
let arr = [1, 2, 3, [4, 5]];
let copy = arr.slice()
console.log(copy)
// [1, 2, 3, [4, 5]];;虽然 slice 主要用于截取片段，但常被用于复制。相比之下，扩展语法在语义上更直观且易于使用：
2、复制一个对象
复制对象通常使用 Object.assign()：
let user = { name: 'bytefish', url: 'https://bytefish.medium.com'}
let copy = Object.assign({}, user)
console.log(copy);输出结果：
Object {name: "bytefish", url: "https://bytefish.medium.com"}
使用扩展语法实现对象复制：
let user = { name: 'bytefish', url: 'https://bytefish.medium.com'}
let copy = {...user}
console.log(copy);输出结果：
Object {name: "bytefish", url: "https://bytefish.medium.com"}
扩展语法会提取对象中所有可枚举属性，并将其合并到新对象中。
3、将元素添加到数组的开头或结尾
在数组首尾添加元素是常见操作，数组原生提供了 push 和 unshift 方法：
let arr = [3]
arr.unshift(1, 2)
arr.push(4, 5)
console.log(arr);输出结果：
[1, 2, 3, 4, 5]
使用扩展语法可使代码更简洁易读：
let arr = [3]
let copy = [1, 2, ...arr, 4, 5]
console.log(copy);输出结果：
[1, 2, 3, 4, 5]
注意：arr.push 和 arr.unshift 会修改原数组，而扩展语法会创建新数组。请根据实际需求选择合适的方法。
4、合并数组
传统合并方式：
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = arr1.concat( arr2 )
console.log(arr3);使用扩展语法：
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3);输出结果：
[1, 2, 3, 4, 5, 6]
5、合并对象
传统合并方式：
let p1 = { name: 'bytefish' }
let p2 = { tag: 'JavaScript' }
let p3 = Object.assign({}, p1, p2)
console.log(p3) ;输出结果：
Object {name: "bytefish", tag: "JavaScript"}
使用扩展语法：
let p1 = { name: 'bytefish' }
let p2 = { tag: 'JavaScript' }
let p3 = {...p1, ...p2}
console.log(p3) ;输出结果：
Object {name: "bytefish", tag: "JavaScript"}
6、将字符串转换为数组
传统方式：
let str = 'bytefish'
let arr = str.split('')
console.log(arr) ;输出结果：
["b", "y", "t", "e", "f", "i", "s", "h"]
使用扩展语法：
let str = 'bytefish'
let arr = [...str]
console.log(arr) ;输出结果：
["b", "y", "t", "e", "f", "i", "s", "h"]
7、将类数组对象转换为数组
JavaScript 中存在一些类似数组的数据结构（如 NodeList、函数参数对象等），它们并非真正的数组。
这些结构具有顺序性，元素可通过索引访问，但缺乏数组的部分属性和方法。
function sum(){
console.log(arguments)
console.log(arguments instanceof Array)
}
sum(1, 2, 3);输出结果：
Arguments {0: 1, 1: 2, 2: 3} false
为了使用这些类似数组的对象，有时需要将其转换为数组。
传统转换方式：
function foo(){
let argArray = Array.from(arguments)
console.log(argArray instanceof Array)
}
foo();输出结果：
true
使用扩展语法：
function sum(){
console.log(arguments)
let argArray = [...arguments]
console.log(argArray instanceof Array)
}
sum(1, 2, 3);Arguments {0: 1, 1: 2, 2: 3}
true在 JavaScript 中，Rest Syntax 和 Spread Syntax 均使用三个点（…）表示。
两者存在细微区别：
- Rest 语法将所有剩余元素收集到一个数组或对象中。
- 扩展语法将收集的元素（如数组）解压缩为独立的单个元素。
部分场景虽理论上属于 Rest Syntax，但因表现相似，此处一并列出。尽管概念有差异，实际开发中无需过度纠结，以下示例展示了 Rest Syntax 的用法。
8、提取对象
假设有一个对象：
let httpOptions = {
method: 'POST',
url: 'https://api.github.com',
returnType: 'json',
timeout: 2000,
data: {
name: 'bytefish'
}
}若需获取 method 和 url，并将其他字段合并，该如何操作？
使用扩展语法可简化为：
提取对象属性仅需一行代码，这是目前最简洁的写法之一。
9、无限参数的函数
若需编写一个接受任意数量参数并求和的函数，如何实现？
新手可能会尝试将参数组合成数组传递：
function sum(arr){
return arr.reduce((acc, cur) => acc + cur)
}
console.log(sum([1, 2, 3, 4]));这种方式需手动组合参数，不够优雅。更优方案是利用函数的 arguments 对象动态读取参数。
function sum() {
let argsArray = Array.from(arguments)
return argsArray.reduce((acc, cur) => acc + cur)
}
console.log( sum(1, 2, 3, 4) ) // 10
console.log( sum(1, 3, 5, 7) ) // 16;使用扩展语法，可直接将所有参数收集：
function sum(...arr) {
return arr.reduce((acc, cur) => acc + cur)
}
console.log( sum(1, 2, 3, 4) ) // 10
console.log( sum(1, 3, 5, 7) ) // 16;无论传递多少参数，均会被存入 arr 中。这比前两种写法更简洁且便捷。
Math.max
许多 JavaScript 内置函数采用此技术，例如 Math.max。
Math.max 可接受任意数量的参数。
若需获取数组中的最大或最小值，可这样写：
let arr = [23, 34, 53, 3]
console.log(Math.max(...arr))
console.log(Math.min(...arr));输出结果：
53 3
10、Rest Parameters
除上述用法外，还可使用 rest 参数。假设函数前两个参数固定，其余不确定，可这样定义：
function team(leader, viceLeader, ...members){
console.log('leader: ' + leader)
console.log('vice leader: ' + viceLeader)
members.forEach(member => console.log('member: ' + member))
}
team('Jon', 'Jack', 'Bob', 'Alice');输出结果：
function team(leader, viceLeader, ...members){ console.log('leader: ' + leader) console.log('vice leader: ' + viceLeader) members.forEach(member => console.log('member: ' + member)) } team('Jon', 'Jack', 'Bob', 'Alice');
结论
至此，我们掌握了 JavaScript 中扩展语法的十种用法。希望这些技巧对您有帮助，欢迎在评论区交流心得。
到此这篇关于 JavaScript Spread Syntax (...）的十种使用方法的文章就介绍到这了，更多相关 JS 扩展语法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38