es6扩展运算符(...)

责编:menVScode 2018-04-13 14:51 阅读(227)

1、扩展运算符将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])  
// 1 2 3  
console.log(1, ...[2, 3, 4], 5)  
// 1 2 3 4 5  
[...document.querySelectorAll('div')]  
// [<div>, <div>, <div>]  

用于:

【1】将一个数组,变为参数序列

let add = (x, y) => x + y;
let numbers = [3, 45];
console.log(add(...numbers))//48

【2】使用扩展运算符展开数组代替apply方法,将数组转为函数的参数

//ES5 取数组最大值
console.log(Math.max.apply(this, [654, 233, 727]));
//ES6 扩展运算符
console.log(Math.max(...[654, 233, 727]))
/5/相当于
console.log(Math.max(654, 233, 727))

【3】使用push将一个数组添加到另一个数组的尾部

// ES5  写法  
var arr1 = [1, 2, 3];  
var arr2 = [4, 5, 6];  
Array.prototype.push.apply(arr1, arr2); 
//push方法的参数不能是数组,通过apply方法使用push方法 
// ES6  写法  
let arr1 = [1, 2, 3];  
let arr2 = [4, 5, 6];  
arr1.push(...arr2); 

【4】合并数组

var arr1 = ['a', 'b'];  
var arr2 = ['c'];  
var arr3 = ['d', 'e'];  
// ES5 的合并数组  
arr1.concat(arr2, arr3);  
// [ 'a', 'b', 'c', 'd', 'e' ]  
// ES6 的合并数组  
[...arr1, ...arr2, ...arr3]  
// [ 'a', 'b', 'c', 'd', 'e' ] 

【5】将字符串转换为数组

[...'hello']  
// [ "h", "e", "l", "l", "o" ] 
//ES5
str.split('')

【6】转换伪数组为真数组

var nodeList = document.querySelectorAll('p');  
var array = [...nodeList]; 
//具有iterator接口的伪数组,非iterator对象用Array.from方法

【7】map结构

let map = new Map([  
[1, 'one'],  
[2, 'two'],  
[3, 'three'],  
]);  
let arr = [...map.keys()]; // [1, 2, 3]


2、扩展运算符传递整个属性对象

const props = {firstName: 'Ben', lastName: 'Hector'};
console.log({...props})
// {firstName: "Ben", lastName: "Hector"}

下面两个组件是等效的

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}
标签: 扩展运算符 es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码