JavaScript中使用Spread运算符的八种方法总结


Posted in Javascript onJune 18, 2020

Spread运算符

允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中)。

语法

var array = [[arg0ToN ,] ...iterable [, arg0ToN]]
func([args ,] ...iterable [, args | ...iterable])

参数

iterable

必需。 迭代对象。

arg0ToN

可选。 数组文本的一个或多个元素。

args

可选。 函数的一个或多个参数。

本文将带大家了解如何在JavaScript中使用Spread(延展操作)运算符。

ES6中引入了延展操作运算符(...)。

延展操作运算符将可迭代的对象扩展为其单独的元素,可迭代对象是可以使用 for 循环进行循环的任何对象。

可迭代的示例:Array,String,Map,Set,DOM节点。

1.在log中使用延展操作运算符

你可以在 console.log 中对可迭代对象使用延展操作操作符

let fruits = ['?', '?', '?', '?'];
console.log(...fruits); //? ? ? ?

2.用延展操作运算符复制数组

let fruits = ['?', '?', '?', '?'];
let fruitsCopy = [ ...fruits ];
console.log(...fruitsCopy); //? ? ? ?

复制对象

let user = {name : "John", age : 20 }
let userCopy = {...user}

延展操作运算符不执行深度复制。

3.延展操作运算符合并

let fruits = ['?', '?', '?', '?'];
let vegetables = ['?', '?', '?'];
let fruitsAndVeg = [...fruits, ...vegetables]

合并对象

合并对象时,如果已经存在某个键,则将其替换为具有相同键的最后一个对象。

let user1 = {name : "John", age : 20 };
let user2 = {name : "Ram", salary: '20K' };
let userCopy = {...user1, ...user2};
userCopy ; // {name : "Ram", age :20 , salary : '20K'};

4.延展操作运算符作为参数传递

function sum(a, b) {
 return a+b;
}
let num = [1,2];
sum(...num); // 3

与 math 函数一起使用

let num = [5,9,3,5,7];
Math.min(...num);
Math.max(...num);

5.延展操作运算符在解构变量中

let [melon, ...fruits ] = ['?', '?', '?', '?'];
melon; //?
fruits; // [ '?', '?', '?']

解构对象

let user = {name : "Ram", age: 20, salary: '20K', job : "Tester" };
let { name, age, ...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K', job : 'Tester'};

6.将NodeList对象转换为数组

NodeList类似于数组,但是没有 Array 的所有方法,例如 forEach,map,filter 等。

let nodeList = document.querySelectorAll('.class')
var nodeArray = [...nodeList]

7.将字符串转换为字符

字符串也是可迭代的对象,因此我们也可以使用 ... 来字符串。

let name = "Ram";
let chars = [...name]; // ["R", "a", "m"]

8.从数组中删除重复项

let num = [1, 3, 1, 3, 3, 1];
let uniqueNum = [...new Set(num)];
uniqueNum; //[ 1, 3 ]

总结

到此这篇关于JavaScript中使用Spread运算符的八种方法就介绍到这了,更多相关JavaScript使用Spread运算符内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 #Javascript
从0搭建vue-cli4脚手架
Jun 17 #Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 #Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 #Javascript
vue移动端的左右滑动事件详解
Jun 17 #Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 #Javascript
vue-iview动态新增和删除的方法
Jun 17 #Javascript
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
教育学习自我评价
2014/02/03 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
董事长助理岗位职责
2014/02/18 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
物业经理自我鉴定
2014/03/03 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
人生感悟经典句子
2019/08/20 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL