ES6之展开运算符/扩展运算符(...)的应用，还可以作为剩余参数语法

最新推荐文章于 2022-08-18 12:28:54 发布
最新推荐文章于 2022-08-18 12:28:54 发布
阅读量442 收藏
点赞数
分类专栏： es6 js 文章标签： es6 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47700309/article/details/109562344
版权

扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

列如：

const obj = {
   
    name: 'tom',
    age: 22,
    gender: '小哥哥'
}
  • … 展开运算符/扩展运算符, 把一个已经成型的对象给解开
 ...obj =>   name: 'tom'
最低0.47元/天 解锁文章
Shaw_Fan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ES6柯里化(展开运算符).js
01-02
使用ES6中的剩余参数和展开运算符巧妙实现柯里化 柯里化（Currying）：柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术 通俗...
ES6扩展：数组展开运算符、区分剩余参数和展开运算符、应用
liuxudanhahaha的博客
02-21 576
ES6扩展：数组展开运算符、区分剩余参数和展开运算符、应用 一、数组展开运算符的基本用法 console.log(Math.min(...[3, 1, 2])); // 1 相当于 console.log(Math.min(3, 1, 2)); 二、区分剩余参数和展开运算符 1、根本区别 展开运算符 [3,1,2]->3,1,2 剩余参数 3,1,2->[3,1,2] 2、区分剩余参数和展开运算符 剩余参数 const add = (...args) => { console.
扩展运算符
weixin_47731512的博客
11-23 276
…运算符用于操作数组，有两种层面 1. 第一个叫做 展开运算符(spread operator)，作用是和字面意思一样，就是把东西展开。可以用在数组(array)和对象(object)上都行。 let a = [1,2,3]; let b = [0, ...a, 4]; // [0,1,2,3,4] let obj = { a: 1, b: 2 }; let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 } let obj3 = { ...obj, a: 3
ES6中的展开运算符
qq_39112047的博客
06-25 913
可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开，还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
...扩展运算符(展开运算符和合并运算符)
weixin_46449470的博客
06-06 2531
扩展运算符又叫三点运算符，可以用来展开与合并 - 展开： 使用方式1，利用展开运算符进行拼接数组 var arr = [1,2,3,4,5] var changeArr = [...arr,7,8,9] console.log(arr) //[1,2,3,4,5] console.log(changeArr) //拼接为[ 1, 2, 3, 4, 5, 7, 8, 9 ] 使用方式2，利用展开运算符进行拼接对象 let obj1 = { a: 1, b: 2, c: {changeName:
ECMAScript 6学习笔记（一）：展开运算符
John的专栏
04-25 3434
JavaScript是ECMAScript的实现和扩展，ES6标准的制定也为JavaScript加入了许多新特性。本文主要记录展开运算符。 展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。 展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（it
vue.js 中使用（…）运算符报错的解决方法
12-10
这个错误是，项目中不识别es6的扩展运算符， 解决方式很简单。 // 第一步 cnpm install babel-plugin-transform-object-rest-spread // 第二步 看一下你的 .babelrc 里面是否有识别es6语法的配置 { "presets": [ ...
es6数组之扩展运算符操作实例分析
10-15
主要介绍了es6数组之扩展运算符操作,结合实例形式总结分析es6数组扩展运算符具体原理、实现方法及操作注意事项,需要的朋友可以参考下
ES6中的rest参数与扩展运算符详解
08-29
rest参数和扩展运算符都是ES6新增的特性。下面这篇文章主要给大家介绍了关于ES6中rest参数与扩展运算符的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
6. 函数参数 与 展开运算符
weixin_30919919的博客
03-10 130
1.函数参数 a. function test(word){ console.log(word); } test('hello word'); b. function test(word = 'hello world'){ console.log(word); } test(); 2. 展开运算符 a. let args...
ES6展开运算符用法（扩展运算符）
高先生的猫
02-21 690
随着 ES6 的出现，编写 JavaScript 变得越来越灵活。新的语法让代码更简洁，可读性更高。ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号，让原本繁琐的代码瞬间变得简洁、优雅。那么，就让我们看看它有哪些常见用法吧。 让函数的 Apply 调用方式成为过去 有时候我们需要通过Function.prototype.apply来调用函数，参数就放在一个数组里。 fun...
ES6(...)展开运算符
热门推荐
菜鸟的博客
12-28 1万+
函数传参 展开运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了 // ES5 的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; ...
阮一峰ES6入门读书笔记（七）：运算符的拓展
黄黄黄一边敲代码一边写出来的博客
12-21 235
阮一峰ES6入门读书笔记（七）：运算符的拓展 1. 指数运算符 ES6新增了一个指数运算符（**）。 2 ** 2 // 4 2 ** 3 // 8 这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。 // 相当于 2 ** (3 ** 2) 2 ** 3 ** 2 // 512 指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。 let a = 1.5; a **= 2; // 等同于 a = a * a; let b = 4; b **= 3;
ES6 - 展开运算符的使用
qq_43886365的博客
08-18 210
关于ES6新语法中展开运算符的使用
ES6 ... 操作符的用法整理（展开操作符、剩余参数）
张许许的博客
07-17 1051
原文链接：http://www.jianshu.com/p/ae0a9ec1f8d6 看了阮老师的《ECMAScript 6 入门》教程，为了之后方便自己随时查看，将…操作符相关的内容整理在一起。 rest语法 function(a, b, ...theArgs) { // ... } 描述 ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用argume...
扩展运算符和参数之间的关系
weixin_45170083的博客
03-25 417
…扩展运算符 其实扩展运算符在我们项目中的运用是很多的，以下为很简单的方法。以后有机会在补充。 1.参数的展开 function show(a,b,...args){ console.log(a); console.log(b); console.log(args); } show(12,13,44,7,3,55); 打印如下 2.合并两个数组 //2：展开一个数组,展开后的效果和把数组直接...
js 中 同名属性应该在 ...展开对象属性之后 因为属性将由后覆盖之前的属性
hzxOnlineOk的博客
09-11 2089
在以下代码中，custShortName是this.state.custBasicInfo的一个属性，但是我们需要额外赋值时，必须在...扩展符之上，因为对象默认不添加或者修改已存在的属性： custBaseInfo: { custShortName: this.state.custShortName, ...this.state.cust...
python 阮一峰_阮一峰：前端框架 React 及 CSS in JS
weixin_42533751的博客
02-20 925
作者： 阮一峰1、以前，网页开发有一个原则，叫做“关注点分离”(separation of concerns)。它的意思是，各种技术只负责自己的领域，不要混合在一起，形成耦合。对于网页开发来说，主要是三种技术分离。HTML 语言：负责网页的结构，又称语义层CSS 语言：负责网页的样式，又称视觉层JavaScript 语言：负责网页的逻辑和交互，又称逻辑层或交互层简单说，就是一句话，不要写”行内样式...
es6 Object.keys() 一个数组覆盖另一个数组属性值
GuAng
12-02 980
let pastInfo = { name:'小明', age:18, hobby:'打篮球', school:'高中', placeOfAbode:'北京' } let nowInfo = { name:'小明', age:22, hobby:'学习', schoo..
ES6中rest参数和扩展运算符的区别
最新发布
03-25
Rest参数和扩展运算符都是ES6中新增的特性，但是它们的作用和使用方式略有不同。 Rest参数是用于捕获函数中的多余参数的机制，也就是说，Rest参数会将传递给函数的所有参数放在一个数组中，这个数组可以在函数内部使用。Rest参数的语法是在函数的参数列表中使用三个点（...）和一个名称来表示。 扩展运算符则是用来将一个数组或对象展开成相应的位置上的值，这个运算符可以理解为是Rest参数的逆运算。在函数调用时，可以使用扩展运算符将一个数组中的元素作为函数的参数传递给函数。扩展运算符的语法是在数组或对象前面使用三个点（...）来表示。 因此，Rest参数和扩展运算符都能够处理多个参数，但是Rest参数是用于捕获参数，而扩展运算符则是用于展开参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值