ES6 ... 展开&收集运算符
时间:2019-11-18
本文章向大家介绍ES6 ... 展开&收集运算符,主要包括ES6 ... 展开&收集运算符使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
...展开&收集运算符,也就是说他可以干两件事情,展开和收集
一:收集,顾名思义把散列东西收集到一个地方,这个地方ES6规定收集在数组中
例如:下面函数fn将传递的参数收集在arg变量中,打印arg是一个数组,里面包含着传来的参数。就像吃豆子一样把值收到自己的嘴里。
function fn(...arg){
console.log(arg); //[1,2,3]
}
fn(1,2,3)
上面的代码让我们想起来arguments,也是保存着传过来的参数。但是我们知道arguments对象是类数组,当我们想使用数组的方法时,时使用不了的,需要手动的转化才可以,而此时的...收集后就是一个数组。可以使用一系列的数组方法。
...运算符让我们感觉有点省略的意思,把参数用...代替。当像下面那样传参时参数(3,4,5,6,7),实参(a,b,...arg).此时的arg就是5,6,7.也就是说...收集只收集你没定义的形参,就像你省略不写他们。因此...只能作为最后一位出现。
function test(a,b,...arg){
console.log(a,b,arg); 3,4,[5,6,7]
}
test(3,4,5,6,7);
二: 展开,展开,首先展开的这个东西应该是一个集合,如果是一个值的话,那还展开干嘛。所以ES6规定,展开的这个值必须是可迭代对象(带Symbol(Symbol.iterator)属性的对象),怎么看这个是不是可迭代对象,可以在他的原型上看有没有Symbol(Symbol.iterator)属性。事实上,所有集合对象--数组,Set,Map,字符串的原型上都默认携带这个属性,因此都是可迭代对象。展开成什么?展开成散列的值。
例如:
var arr = [1,2,3];
console.log(...arr); //1 2 3
可以利用这个特性将两个数组合并成一个数组
var arr1 = [1,2,3];
var arr2 = [7,8,9];
var newArr = [...arr1,...arr2];
...运算符可以获取(展开)对象里的属性。但必须在对象里展开{...arg},因为对象不是可迭代对象所以直接...arg会报错。
var obj1 = {
name: 'zhang',
age: 18,
}
var obj2 = {
...obj1
}
console.log(obj2); {name:'zhang',age:18}
合并对象
var obj1 = {
name:'zhang',
age:18,
}
var obj2 = {
leader:{
'name':'wen',
'age': 20
},
text:'ccc'
}
var newObj = {
...obj1,
leader:{
...obj2.leader
}
}
console.log(newObj);
原文地址:https://www.cnblogs.com/jiaobaba/p/11882975.html
- 安装serverstatus监控多台服务器状态
- Windows2012搭建我的世界(Minecraft)服务器超简单
- 高效程序员的MacBook工作环境配置
- vsftpd搭建自己的ftp服务器
- Linux一键安装Transmission电影下载到服务器
- centos安装ab工具给网站进行压力测试
- ubuntu16.04安装mongodb教程
- linux压缩解压命令使用
- linux使用wc命令查看文件行数、字母、字节数命令
- 程序员偷偷深爱的 9 个不良编程习惯
- 低级程序员和高级程序员的区别
- Silverlight学习(二)
- Silverlight学习(三)
- ArcGIS for Android学习(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux系统JDK+Tomcat环境安装布署过程
- Python version 3.6 required, which was not found in the registry错误解决
- LNMP架构应用实战——Nginx服务介绍与安装
- 使用tidylib解决不规则网页问题
- LNMP架构应用实战——Nginx服务配置文件介绍
- Mac Sublime Text3快捷键
- Linux系统shell脚本编程——生产实战案例
- 学习python第一天总纲
- 学习python第二天数据库day1
- LNMP架构应用实战——Nginx配置虚拟主机
- 学习python第三天单行函数
- MySQL数据库入门——常用基础命令
- MySQL数据库入门——多实例配置
- python第二课——数据类型1
- python第三课——数据类型2