ES6中的新增符号 ... 和 =>

1.  ...

• 展开运算符(spread operator)，作用是和字面意思一样，就是把东西展开。可以用在array和object上都行。

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]

let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }

•  剩余操作符(rest operator)，是解构的一种，意思就是把剩余的东西放到一个array里面赋值给它。一般只针对array的解构，其他的没见过。。。

let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]

或者这样写

let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined
//*************************
//或者这样写
function test(a, ...rest){
  console.log(a); // 1
  console.log(rest); // [2,3]
}

test(1,2,3)

当遇到长度不匹配时

let array = [1, 2, 3, 4, 5];
const { x, y, ...z } = array;
// 其中z=[3, 4, 5]，注意如果由于array的length不足以完成析构，则会导致z为[]
对象：
let obj = { name: 'zhangsan', age: 30, city: 'shenzhen' };
const {name, ...others} = obj;
console.log(name); // 'zhangsan'
console.log(others); // {age: 30, city: 'shenzhen'}

2.=>

• 回顾跟箭头相关的东西

<!-- 单行注释
-->  递增/减的操作符
<=   小于等于
=>   ?

• ES6中的用法

// ES5  
var selected = allJobs.filter(function (job) {  
  return job.isSelected();  
});  
  
// ES6  
var selected = allJobs.filter(job => job.isSelected()); 

不难看出：当需要编写一个简单的单一参数函数时，可以采用箭头函数来书写，标识名=>表达式。这样就可以省却function和return的输入，还有括号，分号等。

• 不止一个参数（使用括号）

// ES5  
var total = values.reduce(function (a, b) {  
  return a + b;  
}, 0);  
  
// ES6  
var total = values.reduce((a, b) => a + b, 0);  

• 语句块

/ ES5  
$("#confetti-btn").click(function (event) {  
  playTrumpet();  
  fireConfettiCannon();  
});  
//ES6的写法为：

[js] view plaincopy
// ES6  
$("#confetti-btn").click(event => {  
  playTrumpet();  
  fireConfettiCannon();  
});  

• this 的传递

  //之前是这么写的，因为this有作用域限制
  {  
    ...  
    addAll: function addAll(pieces) {  
      var self = this;  
      _.each(pieces, function (piece) {  
        self.add(piece);  
      });  
    },  
    ...  
  }
  //现在可以这样写
  // ES6  
  {  
    ...  
    addAll: function addAll(pieces) {  
      _.each(pieces, piece => this.add(piece));  
    },  
    ...  
  } 

  特别注意：

• 使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的有意义的this值。
• 在其它场合都使用箭头函数。

 

转载于:https://my.oschina.net/u/1031097/blog/1525557