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 相关文章推荐
解密效果
Jun 23 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
node express使用HTML模板的方法示例
Aug 22 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无限极分类实现的两种解决方法
2013/04/28 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php从字符串创建函数的方法
2015/03/16 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
php微信开发之图片回复功能
2018/06/14 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
移动节点的jquery代码
2014/01/13 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python re模块介绍
2014/11/30 Python
python变量不能以数字打头详解
2016/07/06 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
《中华少年》教学反思
2014/02/15 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
离职报告范文
2014/11/04 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS