箭头函数的理解等

ES6箭头函数的理解

基本用法

// 普通函数长这样
 const f = function (v) {
  return v;
};

// 箭头函数长这样
const f = (v) => {
  return v;
};

可以看出，箭头函数看似就是把'function'关键字变成'=>'，并且定义时放在函数参数后边；其实不然，箭头函数主要是为了解决js中this的指向这个困扰许久问题，它干脆没有this，直接用外部的this，避免了可能出现的各种难以理解的问题的出现。

this的指向及其衍生

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// 转ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

上面的ES6代码转为ES5就可以清楚的看到，箭头函数中的this是指向于外层的this
由于这个特性，在箭头函数中，不能再使用以往的call()、apply()、bind()等方法去改变this的指向；此外，箭头函数也不能被用来作为构造函数，不可以对箭头函数使用new命令；不可以使用yield命令，因此箭头函数不能用作 Generator 函数；

需要使用动态this时，也不该使用箭头函数：

const button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

原本的语义是this动态指向被点击的按钮对象，使用了箭头函数，则this只会指向全局对象，不符合某些场景的需求。

三元表达式的理解

在前端代码中，三元表达式现如今越来越常见，它作为简单的判断还是很好使的：

a = v > 5 ? 1 : 0;
// 上面的语句的含义是对变量a赋值，若v>5时值为1，否则为0

a = v > 5 ? 1 : (v == 5 ? 0 : -1);
// 稍微复杂一些的嵌套，v > 5时值为1，v = 5时值为0，v < 5时值为-1

理论上可以无限嵌套下去：
a = 条件1 ? 值1 : (条件2 ? 值2 : (条件3 ? 值3 : (条件4 ? 值4 : 值5)));

但是并不建议在代码中使用嵌套的三元表达式：

例如上图，如果不写注释，一时间难以知晓相关条件对应的相关值。