欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

typescript ES6 扩展运算符 三个点(...) 点点点 有大用

ES6 扩展运算符 三个点(...)

0.799字数 198阅读 15738


它是什么

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];  

end 2017-02-17 14:46:14
博客原文地址



来自   https://www.jianshu.com/p/86cbabeda999


第五章: TypeScript的操作符...(三个点的用法)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_32963841/article/details/86579116

操作符的作用是用来声明任意数量的方法参数

   function func1( ...args ) {
      args.forEach(function(arg){
  			console.log(arg);
      })
        //这边在调用这个方法的时候,你可以用传任意参数
   }
//方法
    function(a,b,c) {
       console.log(a)
       console.log(b)
       console.log(c)
    }


//  调用的时候
	var args = [1,2,3];
	func1(...args);


普通分类: