展开语法-展开语法的基本使用

最新推荐文章于 2024-08-13 16:15:07 发布

XiaoYu2002-AI

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量169

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_70037637/article/details/137615358

版权

本文介绍了ES2018中新增的展开语法，如何在函数调用、数组构造以及对象字面量创建时使用，强调了它是浅拷贝的特点，并通过示例展示了其在实际编程中的应用场景。

摘要由CSDN通过智能技术生成

展开语法(Spread syntax)：
- 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
- 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；
展开语法的场景：
- 在函数调用时使用；
- 在数组构造时使用
- 在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性
注意：展开运算符其实是一种浅拷贝

//1.基础使用
const names = ["小余","小满","洛佬","喜多川"]
function foo(name1,name2,...args){
  console.log(name1,name2,args);
}

foo(...names)
//或者也可以直接展开字符，不过用得很少
const str = "Hello"
foo(...str)

在这里插入图片描述

//ES9(ES2018)后新增的字面量方式
function foo(name1,name2,...args){
  console.log(name1,name2,args);
}

const obj = {
  name:"小余",
  age:20
}

//只能在构建字面量的时候进行使用
const obj2 = {
  ...obj,
  sex:"男",
  address:"福建"
}
console.log(obj2);//{name: '小余', age: 20, sex: '男', address: '福建'}

//foo(...obj)，错误使用方式
//在函数的调用时，用展开运算符，将对应的展开数据，进行迭代
//可迭代对象：数据/string/arguments

//有点像我们之前拼接数组的时候做的
const names = ["xiaoyu","小满","大满"]
const names2 = [...names,"园长","cool"]
console.log(names2);// ['xiaoyu', '小满', '大满', '园长', 'cool']