在前端开发中,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