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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
vue实现全选和反选功能
Aug 31 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
JS中Map和ForEach的区别
Feb 05 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/11/14 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
小程序实现录音功能
2020/09/22 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
使用Python写一个小游戏
2018/04/02 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
安全生产管理合理化建议书
2014/03/12 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python