现代 JavaScript 参考(2)

注意： 从技术上讲，let 和 const 变量声明时也存在提升，但并不代表它们的赋值也会被提升。但由于它被设计成了赋值之前无法使用，所以我们直观感觉上它没有被提升，但其实是存在提升的。如果想了解更多细节，请看这篇文章。

此外，您不能重新声明一个 let 变量：

let myVar = 2; let myVar = 3; // 抛出语法错误 SyntaxError const

const 声明的变量很像 let ，但它不能被重新赋值。

总结一下 const 变量：

块级作用域

分配之前无法访问

在同一个作用域内部，不能重新声明

不能被重新分配

const myVar = "Nick"; myVar = "John" // 抛出一个错误， 不允许重新分配 const myVar = "Nick"; const myVar = "John" // 抛出一个错误， 不允许重新声明

但这里有一个小细节：const 变量并不是，具体来说，如果 const 声明的变量是 object 和 array 类型的值，那它是 可变的 。

对于对象：

const person = { name: 'Nick' }; person.name = 'John' // 这是有效的！person 变量并非完全重新分配，只是值被改变 console.log(person.name) // "John" person = "Sandra" // 抛出一个错误， 因为用 const 声明的变量不能被重新分配

对于数组：

const person = []; person.push('John'); // 这是有效的！person 变量并非完全重新分配，只是值被改变 console.log(person[0]) // "John" person = ["Nick"] // 抛出一个错误， 因为用 const 声明的变量不能被重新分配 扩展阅读 箭头函数

ES6 JavaScript 更新引入了 箭头函数 ，这是另一种声明和使用函数的方法。以下是他们带来的好处：

更简洁

this 的值继承自外围的作用域

隐式返回

简单的示例

简洁性和隐式返回

function double(x) { return x * 2; } // 传统的方法 console.log(double(2)) // 4 const double = x => x * 2; // 相同的函数写成带有隐式返回的箭头函数 console.log(double(2)) // 4

this 的引用

在箭头函数中， this 意味着封闭执行上下文的 this 值。基本上，使用箭头函数，在函数中调用函数之前，您不需要执行 “that = this” 这样的的技巧。

function myFunc() { this.myVar = 0; setTimeout(() => { this.myVar++; console.log(this.myVar) // 1 }, 0); } 详细说明 简洁性

箭头函数在许多方面比传统函数更简洁。让我们来看看所有可能的情况：

隐式 VS 显式返回

显式返回 (explicit return) 是指在函数体中明确的使用 return 这个关键字。

function double(x) { return x * 2; // 这个函数显示返回 x * 2, 并且使用了 *return* 关键字 }

在函数传统的写法中，返回总是显式的。但是如果是使用箭头函数，你可以执行 隐式返回(implicit return)，这表示你不需要使用关键字 return 来返回一个值。

要做隐式回传，代码必须用一行语句写完。

const double = (x) => { return x * 2; // 这里是显式返回 }

由于这里只有一个返回值，我们可以做一个隐式的返回。

const double = (x) => x * 2;

这样做，我们只需要 移除括号 以及 return 关键字。这就是为什么它会被称为 隐式 返回，return 关键字不在了，但是这个函数确实会返回 x * 2。

注意： 如果你的函数没有回传一个值 (这种作法有 副作用)，那么它将不会做显式或隐式返回。

另外，如果你想隐式地返回一个 对象(object)，你必须用括号包裹，否则它将与块大括号冲突：

const getPerson = () => ({ name: "Nick", age: 24 }) console.log(getPerson()) // { name: "Nick", age: 24 } -- 箭头函数隐式地返回一个对象

只有一个参数

如果你的函数只接受一个参数，你可以省略包裹它的括号。如果我们拿上述的 double 代码做为举例：

const double = (x) => x * 2; // 这个箭头函数只接受一个参数

包裹参数的括号是可以被省略：

const double = x => x * 2; // 这个箭头函数只接受一个参数

没有参数

当没有为箭头函数提供任何参数时，你就必须加上括号，否则将会抛出语法错误。

() => { // 提供括号，一切都能正常运行 const x = 2; return x; } => { // 没有括号，这不能正常运行！ const x = 2; return x; } this 引用

要理解箭头函数的精妙之处，你就必须知道 在 JavaScript 中是如何运作的。

在一个箭头函数中，this 等同于封闭执行上下文的 this 值。这意味着，一个箭头函数并不会创造一个新的 this，而是从它的外围作用域中抓取的。

如果没有箭头函数，你想在一个函数内部的函数中通过 this 访问变量，你就只能使用 that = this 或者是 self = this 这样的技巧。