ES6 扩展运算符 三个点(...)
它是什么
es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。因为typeScript是es6的超集,所以typeScript也支持扩展运算符。
用在哪儿
可变参数个数的函数调用
function push(array, ...items) {
array.push(...items);
}
function add(...vals){
let sum=0;
for(let i=0;i<vals.length;i++){
sum+=vals[i];
}
return sum;
}
let arr = [1,2,3,4,5,6];
let sum = add(...arr);
console.log(sum); //21
更便捷的数组合并
let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
//es5 旧写法
newArr = newArr.concat(arr1).concat(arr2); //[20,1,2,5,6]
console.log(newArr);
//es6 使用扩展运算符
newArr = [20,...arr1,...arr2]; //[20,1,2,5,6]
console.log(newArr);
替代es5的apply方法
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);
求最大值Math.max()
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
通过push函数,将一个数组添加到另一个数组的尾部
// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
新建Date类型
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);
与解构赋值结合,生成新数组
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
将实现了 Iterator 接口的对象转为数组
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
ES6 扩展运算符 三个点(...)的更多相关文章
- ES6 扩展运算符 三点(...)
含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[, , ]) // 1 2 3 conso ...
- Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)
0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...
- es6 扩展运算符 三个点...
es6中引入扩展运算符…,它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScript也支持扩展运算符 ...
- ES6扩展运算符(三点符号), 解构
http://www.cnblogs.com/chrischjh/p/4848934.html
- es6 学习小记 扩展运算符 三个点(...)
参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...
- ES6扩展运算符的几个小技巧
es6扩展运算符,也就是... ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...
- ES6...扩展运算符(数组或类数组对象)
数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- es6之扩展运算符 三个点(...)
对象的扩展运算符理解对象的扩展运算符其实很简单,只要记住一句话就可以: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 ...
随机推荐
- HTML5基础标签
块级元素 1.独占一行,不和其他元素待在同一行 2.能设置宽高 标签 是否为单标签 标签属性 备注 <h1></h1>......<h6><h6> 双 ...
- consul 集群
主机运行 : consul agent -server -bootstrap-expect 2 -data-dir D:\consul -node=winyh -bind=192.168.10.1 ...
- js 比大小
html部分 <input type="button" onclick="mymax(5,4,12)" value="按钮"/> ...
- vue组件传值
组件的传值(组件之间的通讯) 1.父子通信 1)父传子 传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据 接收:在子组件内部通过props进行接收 接收的 ...
- php 数组数字 补零
$hour_list = range(0,24); foreach($hour_list as $key=>$val){ $hour_list[$key] = str_pad($val, 2, ...
- KVO的使用一
概述 KVO即Key-Value Observing,它允许一个对象被另一个对象在改变指定的属性值后进行通知.iOS中的应用场景很多,比如model的值发生变化,controller里对model进行 ...
- JavaScript Dom 查找
JavaScript Dom 查找 一.直接查找 获取单个元素 document.getElementById('i1') 获取多个元素(列表数组) document.getElementsByTag ...
- .NET Core 配置GC工作模式与内存的影响
.NET Core 配置GC工作模式与内存的影响 .NET Core GC 原文:https://blog.markvincze.com/troubleshooting-high-memory-usa ...
- PHP钩子的简单介绍
<?php /** * 钩子类 */ class Hook { static public function execute($type, $model='') { if($model == ' ...
- Python自学:第三章 索引从0开始而不是从1
#返回最后一个,和倒数第二个元素 bicycles = ['trek','cannondale','redline','specialized'] print(bicycles[-1]) print( ...