Js_箭头函数、解构赋值

summary_2018/07 language_js

1、日常工作

• javaScript：解构赋值
• javaScript：箭头函数
• update FacebookAd service trace-ad-roi

2、技术学习

• javaScript：解构赋值
  
  • 解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

### 解构数组
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
## 设置默认值
为了防止从数组中取出一个值为undefined的对象，可以为这个对象设置默认值。
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
## 交换变量
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
## 忽略某些返回值
function f() {
  return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
## 剩余数组赋值给变量
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
### 解构对象（对应关系）
var o = {p: 42, q: true};
//必须是对象中存在的值，否则返回undefined，给新变量赋值见后文
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
## 无申明赋值
var a, b;
({a, b} = {a: 1, b: 2});
## 给新变量赋值
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
 //p和q与对象对应
console.log(foo); // 42 
console.log(bar); // true
##默认值
var {a:aa = 10, b:bb = 5} = {a: 3};
//a与对象中的a对应
console.log(aa); // 3
console.log(bb); // 5
Tips：{a, b} ={a:1,b:2}不是有效的独立语法，因为左边的{a, b}被认为是一个块而不是对象字面量。然而，({a, b} = {a: 1, b: 2})是有效的，正如 var {a, b} = {a: 1, b: 2}
注意：你的( .. ) 表达式需要一个分号在它前面，否则它也许会被当成上一行中的函数来执行。
### Stage 3 proposal(草案)
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}
更多请见原文。。。

• javaScript：箭头函数
  
  • ES6标准新增了一种新的函数：Arrow Function（箭头函数）
  • 箭头函数表达式的语法比函数表达式更短，并且没有自己的this，arguments，super或new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

### 基础语法
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
### 高级语法
//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})
//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6
### 箭头函数的一些特点和优势
## 简短的语法，适应于匿名函数的地方
## 不绑定this
在箭头函数出现之前，每个新定义的函数都有它自己的 this值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为undefined，如果该函数被称为“对象方法”则为基础对象等）
function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;
  setInterval(function growUp() {
  // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
  // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}
var p = new Person();
在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。/或者使用bind（）绑定
function Person() {
  // 将this传递给that
  var that = this;
  that.age = 0;
  setInterval(function growUp() {
    // 回调引用的是`that`变量,其值是预期的对象.若不传入为Timeout对象 
    that.age++;
  }, 1000);
}
## Tips：箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this| 正确地指向person 对象
  }, 1000);
}
var p = new Person();
## this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略
var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        // this.birth仍是1990
        var fn = (y) => y - this.birth; 
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25