在前端开发中,JavaScript 是一种非常常用的编程语言。随着 ES6(ECMAScript 6)的到来,JavaScript 语言的功能得到了极大的扩展。其中最重要的一部分,是关于变量类型和作用域的更新。本文将着重介绍 ES6 中新增的几种变量类型以及新的作用域定义方式,希望能和大家重新认识 JavaScript 中的变量和作用域。
let 和 const 关键字
ES6 新增了两个关键字,分别是 let 和 const。通过这两个关键字,我们可以声明块级作用域内的变量。
使用 let 关键字
使用 let 关键字定义的变量是只在当前块级作用域内生效的。例如:
- --- - - -- --------------- -- -- - - -- ---- - --------------- -- --
在上述代码中,a 只在 {} 这个块级作用域内生效。在 {} 外部无法访问到它。
除了作用域的区别之外,let 定义的变量声明方式和 var 是类似的。可以使用 let a = 1; 或者 let a; (不过必须在定义之后再使用)的形式定义变量。
使用 const 关键字
const 关键字用来定义常量。和 let 一样,使用 const 定义的变量也是只在当前块级作用域内生效的。但和 let 不同的是,const 定义的变量在定义之后无法再修改。
----- - - -- - - -- -- -----------
变量类型的声明
在 ES6 之前,JS 只有三种数据类型:Number、String 和 Boolean。而在 ES6 中,新增了两种数据类型:Symbol 和 Object。
Symbol 类型
Symbol 类型有两个作用:
- 它是一种新的数据类型,用来表示独一无二的数据。
- 它常常用来作为对象属性的名称。
----- --- - ---------- --------- ----------------- -- -- --------- ------- ----- --- - - ------ ------ ------- -- ---------------------- -- -- ----- ------
Object 类型
为了方便基于类的对象的定义和继承,ES6 引入了一种新的类,即 class。使用 class 定义类的语法,和其他面向对象语言很像。
----- ------ - ----------------- ---- - --------- - ----- -------- - ---- - ------- - ---------------- - -- ------------- - -- ----------- ----- ------- - - ----- ------ - --- ------------- ---- --------------- -- -- --- - -- ---- - -- -- ----- ----
箭头函数
箭头函数(Arrow Function)是 ES6 中推出的一种新的函数定义方式。它能简化函数定义,在某些情况下也能帮助代码更加清晰易懂。
-- --- -------- --- --- - ----------- -- - ------ - - -- - -- --- -------- ----- --- - --- -- -- - - --
在箭头函数中,左侧的括号是参数列表,右侧是函数体,如果函数体只有一条语句,那么该语句自动成为返回值;否则需要在函数体内部使用 return 语句返回值。
箭头函数还有几个特点:
- 箭头函数没有自己的 this,它的 this 指向父级作用域中的 this。
- 箭头函数没有 arguments 对象,可以使用 rest 参数 ...args 作为替代。
- 箭头函数不能使用 new 关键字调用,因为它没有 constructor 方法。
模板字符串
ES6 中新增了模板字符串(Template String)功能。模板字符串是一种字符串的表示方式,它支持很多特殊的功能,并且使用起来十分方便。
在模板字符串中,可以使用 ${} 语法,来非常方便的替换字符串中的变量。
----- ---- - ------ ----- --- - --- ----- ------- - ---- - -- -------- - -- ------ ----- ------ --------------------- -- -- --- - -- ---- - -- -- ----- ----
结论
在本文中,我们详细介绍了 ES6 中新增的变量类型和作用域控制方式。我们还详细介绍了箭头函数和模板字符串这两种新特性。希望通过本文,大家重新认识 JavaScript 的变量和作用域,从而写出更加优秀的 JavaScript 代码。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6702632ed91dce0dc8474787