JavaScript扩展运算符
扩展运算符
扩展运算符…用于扩展可迭代类型或数组。例如,
const arrValue = ['My', 'name', 'is', 'Jack'];console.log(arrValue); // ["My", "name", "is", "Jack"]
console.log(...arrValue); // My name is Jack
在这种情况下,代码:
console.log(...arrValue)
相当于:
console.log('My', 'name', 'is', 'Jack');
使用扩展运算符复制数组
您还可以使用扩展语法 …将项目复制到单个数组中。例如,
const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four', 'five'];console.log(arr2);
// Output:
// ["one", "two", "three", "four", "five"]
使用扩展运算符克隆数组
在 JavaScript 中,对象是通过引用而不是通过值来分配的。例如,
let arr1 = [ 1, 2, 3];
let arr2 = arr1;console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]// append an item to the array
arr1.push(4);console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]
在这里,两个变量 arr1 和 arr2 指的是同一个数组。因此,一个变量的变化会导致两个变量的变化。
但是,如果要复制数组以使它们不引用同一个数组,则可以使用扩展运算符。这样,一个数组中的变化不会反映在另一个数组中。例如,
let arr1 = [ 1, 2, 3];// copy using spread syntax
let arr2 = [...arr1];console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]// append an item to the array
arr1.push(4);console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3]
带对象的扩展运算符
您还可以将扩展运算符与对象文字一起使用。例如,
const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };// add members obj1 and obj2 to obj3
const obj3 = {...obj1, ...obj2};console.log(obj3); // {x: 1, y: 2, z: 3}
这里,使用扩展运算符将 obj1 和 obj2 属性添加到 obj3。
剩余参数
当扩展运算符用作参数时,它被称为剩余参数。
您还可以使用剩余参数在函数调用中接受多个参数。例如,
let func = function(...args) {console.log(args);
}func(3); // [3]
func(4, 5, 6); // [4, 5, 6]
这里,
- 当将单个参数传递给func()函数时,剩余参数仅采用一个参数。
- 当传递三个参数时,剩余参数采用所有三个参数。
注意:使用剩余参数会将参数作为数组元素传递。
您还可以使用扩展运算符将多个参数传递给函数。例如,
function sum(x, y ,z) {console.log(x + y + z);
}const num1 = [1, 3, 4, 5];sum(...num1); // 8
如果使用扩展运算符传递多个参数,该函数将接受所需的参数,并忽略剩余参数。
注:ES6中引入了扩展运算符。有些浏览器可能不支持使用扩展语法。访问JavaScript Spread Operator support了解更多信息。
JavaScript扩展运算符相关推荐
- JavaScript 扩展运算符
文章目录 扩展运算符 使用扩展运算符复制数组 使用扩展运算符克隆数组 带对象的扩展运算符 剩余参数 参考文档 在本教程中,您将借助示例了解 JavaScript 扩展运算符. 扩展运算 ...
- JavaScript扩展运算符(...)
对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中. 合并两个 ...
- JavaScript扩展运算符...
1. 不使用扩展运算符,手动扩展数组: let arr = [6, 7, 8]; const badNewArr = [1, 2, arr[0], arr[1], arr[2]]; console.l ...
- JavaScript中的三个点(...)扩展运算符
三个点的真身 JavaScript中的三个点(-)名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开:还可以在构造字面量对象时将对象表达 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- Javascript中扩展运算符的作用及使用场景
扩展运算符(-)是ES6新增的一个运算符,下面来介绍一下它的使用场景及作用 1.作为函数的形参 在作为函数的形参时,通过 -数组名 来表示,也称为rest参数,当函数被调用时传入的实参全部会被放入到这 ...
- c语言扩展运算符是什么,扩展运算符(spread)是三个点(…)
扩展运算符(spread)是三个点(-),将一个数组||类数组||字符串转为用逗号分隔的序列. js中用来对数组进行操作,把数组里面的东西统统拿出来 一.展开数组 //展开数组 let a = [1, ...
- JavaScript instanceof 运算符深入剖析【转载】
http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/ instanceof 运算符简介 在 JavaScript 中, ...
- c语言扩展运算符是什么,扩展运算符的6个重要用途
前言 由于ES6和Babel的出现,编写JavaScript代码变得难以置信的灵活,从新的语法到自定的编译器,像JSX.我变成了扩展运算符(Spread Operator)的超级粉丝,三个点就改变你编 ...
最新文章
- APPium连接真机输入框中输入的内容与代码中不一致
- TCP/IP详解--第六章
- OpenStack在keystone部分同步数据库报错Errno 13解决办法
- 学习python装饰器_Python装饰器学习(九步入门)
- 分布式服务框架dubbo原理解析 转
- error Infos
- 视频传输面临的挑战和解决之道
- [dp] LeetCode 91. Decode Ways
- CSS hr修改样式
- Java 密码扩展无限制权限策略文件[转]
- 计算机开机切换用户界面,win7开机登录界面怎么设置?win7更换开机画面壁纸解决办法...
- 脱光解决方案——一枚大佬一枚白骨精
- Dell R730服务器inter 500系列网卡与光模块不兼容**
- Android 学习资料收集 1
- 各大网盘搜索资源神器免费送!!!
- faster R-CNN中anchors 的生成过程(generate_anchors源码解析)
- 【钛晨报】字节跳动硬件业务调整,原锤子团队被合并;蔚来回应特斯拉降价冲击:退订是有组织的水军谣言...
- Excel学习——制作周报
- MIT 18.02 多变量微积分总结(Part II)
- 大学生如何让自己强大起来(计算机、电子方向)