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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue使用element-ui按需引入
May 20 Vue.js
通过实例了解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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php按单词截取字符串的方法
2015/04/07 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python数据分析数据标准化及离散化详解
2018/02/26 Python
python计算日期之间的放假日期
2018/06/05 Python
学python需要去培训机构吗
2020/07/01 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
学生思想表现的评语
2014/01/30 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
党员公开承诺书2016
2016/03/24 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript