展开运算符 ... 的使用

最新推荐文章于 2022-08-12 10:26:56 发布

yee只鸟儿.

最新推荐文章于 2022-08-12 10:26:56 发布

阅读量189

点赞数

分类专栏： js 文章标签： js object

本文链接：https://blog.youkuaiyun.com/yeee1128/article/details/115035678

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中的展开运算符的使用方法，包括如何利用它来展开数组和对象，实现数组合并与对象复制及修改等常见操作。

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

1.展开数组

let arr1 = [1,2,3]
let arr2 = [4,5,6]

console.log(...arr1)  //1 2 3
//合并数组：
let arr3 = [...arr1,arr2]  
console.log(arr3)  //[1,2,3,4,5,6]

2.不能直接展开对象，需在花括号包裹下

let obj ={
    name:'张三',
    age:'14'
}

console.log(...obj)  //报错 展开运算符.html:21 Uncaught TypeError: Found non-callable @@iterator at 展开运算符.html:21

//正确写法
console.log({...obj})  //{name: "张三", age: "14"}

注：在react中，可以作为标签属性展开对象，因为有babel和react转化
例如：<Person {...obj} /> //此花括号和原生js花括号不同

3.可以复制对象，并修改复制后的属性

let obj1 = {name:'张三'，age:'18'}

let obj2 = {...obj1,name:'李四'}
console.log(obj2)  //{name:'李四',age:'18'}

let obj3 = {...obj1,name:'王五',sex:'女'}

console.log(obj3)  //{name: "王五", age: "18", sex: "女"}