ES6 入门详解：重新认识变量类型和作用域-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，JavaScript 是一种非常常用的编程语言。随着 ES6（ECMAScript 6）的到来，JavaScript 语言的功能得到了极大的扩展。其中最重要的一部分，是关于变量类型和作用域的更新。本文将着重介绍 ES6 中新增的几种变量类型以及新的作用域定义方式，希望能和大家重新认识 JavaScript 中的变量和作用域。

let 和 const 关键字

ES6 新增了两个关键字，分别是 let 和 const。通过这两个关键字，我们可以声明块级作用域内的变量。

使用 let 关键字

使用 let 关键字定义的变量是只在当前块级作用域内生效的。例如：

{
  let a = 1;
  console.log(a); // 输出 1
}

// 无法访问 a
console.log(a); // 报错

在上述代码中，a 只在 {} 这个块级作用域内生效。在 {} 外部无法访问到它。

除了作用域的区别之外，let 定义的变量声明方式和 var 是类似的。可以使用 let a = 1; 或者 let a; （不过必须在定义之后再使用）的形式定义变量。

使用 const 关键字

const 关键字用来定义常量。和 let 一样，使用 const 定义的变量也是只在当前块级作用域内生效的。但和 let 不同的是，const 定义的变量在定义之后无法再修改。

const a = 1;
a = 2; // 报错，无法修改变量的值

变量类型的声明

在 ES6 之前，JS 只有三种数据类型：Number、String 和 Boolean。而在 ES6 中，新增了两种数据类型：Symbol 和 Object。

Symbol 类型

Symbol 类型有两个作用：

它是一种新的数据类型，用来表示独一无二的数据。
它常常用来作为对象属性的名称。

const sym = Symbol('my symbol');
console.log(sym); // 输出 Symbol(my symbol)

const obj = {
  [sym]: 'Hello symbol'
};

console.log(obj[sym]); // 输出 Hello symbol

Object 类型

为了方便基于类的对象的定义和继承，ES6 引入了一种新的类，即 class。使用 class 定义类的语法，和其他面向对象语言很像。

-- -------------------- ---- -------
----- ------ -
  ----------------- ---- -
    --------- - -----
    -------- - ----
  -

  ------- -
    ---------------- - -- ------------- - -- ----------- ----- -------
  -
-

----- ------ - --- ------------- ----
---------------  -- -- --- - -- ---- - -- -- ----- ----

箭头函数

箭头函数（Arrow Function）是 ES6 中推出的一种新的函数定义方式。它能简化函数定义，在某些情况下也能帮助代码更加清晰易懂。

// ES5 中定义函数的方式
var sum = function(a, b) {
  return a + b;
}

// ES6 中定义函数的方式
const sum = (a, b) => a + b;

在箭头函数中，左侧的括号是参数列表，右侧是函数体，如果函数体只有一条语句，那么该语句自动成为返回值；否则需要在函数体内部使用 return 语句返回值。

箭头函数还有几个特点：

箭头函数没有自己的 this，它的 this 指向父级作用域中的 this。
箭头函数没有 arguments 对象，可以使用 rest 参数 ...args 作为替代。
箭头函数不能使用 new 关键字调用，因为它没有 constructor 方法。

模板字符串

ES6 中新增了模板字符串（Template String）功能。模板字符串是一种字符串的表示方式，它支持很多特殊的功能，并且使用起来十分方便。

在模板字符串中，可以使用 ${} 语法，来非常方便的替换字符串中的变量。

const name = 'Bob';
const age = 20;

const message = `Hi, I am ${name}. I am ${age} years old.`;

console.log(message);  // 输出 Hi, I am Bob. I am 20 years old.

结论

在本文中，我们详细介绍了 ES6 中新增的变量类型和作用域控制方式。我们还详细介绍了箭头函数和模板字符串这两种新特性。希望通过本文，大家重新认识 JavaScript 的变量和作用域，从而写出更加优秀的 JavaScript 代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6702632ed91dce0dc8474787