本文共 2495 字,大约阅读时间需要 8 分钟。
ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量只在let命令所在的代码块内有效
新建index.html,文件内容为
从console中可以打印出a的值
在ES6中,使用let声明a的值,然后再次打印a的值,会报错
报错如下所示,
上面两个例子中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效
修改上面的代码:
结果如下
同样的把上面的var改为let,
刷新浏览器后可以看到,抛出的异常又不一样了
因为let声明的变量是块级作用域,不能重复声明
再次修改上面的代码
刷新浏览器,得到的结果为:
修改代码,把var改为let
再次刷新浏览器,得到的结果为:
上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。
如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算
修改代码
刷新浏览器后,得到的结果为
同样的,把var改为let,又会出现异常
var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。
这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
程序执行结果
上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。
执行结果:
传统的JavaScript语言,输出很长的信息时,通常都是使用"+"号进行拼接的。
这种方法相当繁琐不方便,ES6引入了模板字符串解决这个问题
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
执行结果:
ES6允许使用"箭头"(=>)定义函数
var f = a => a等同于var f = function(a){ return a;}
如果箭头函数不需要参数或需要多个参数,就使用括号代表参数部分
//无参函数var f = () => 5;等同于var f = function(){return 5};//多个形参的函数var f = (num1,num2) => num1 + num2等同于var f = function(num1,num2){ return num1 + num2;}
使用箭头函数需要注意的点:
代码:
执行结果:
使用箭头函数定义上面的函数
执行结果:
再次修改上面的代码,打印函数传递的参数arguments
执行结果:
使用箭头函数定义上面的fav函数,再次打印函数传递的参数arguments
执行结果
为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式
程序执行结果:
上面这种写法跟传统的面向对象语言(比如 Java 和 python)差异很大,很容易让新学习这门语言的程序员感到困惑。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。
通过class关键字,可以定义类。ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
修改上面的代码,用class创建对象
程序执行结果
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。
也就是说,ES5 的构造函数Animal,对应 ES6 的Animal类的构造方法。
Animal类除了构造方法,还定义了一个showName方法。注意,定义"类"的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
上面代码表示,类本身就指向了类的构造函数。
使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。
一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
class Animal {}// 等同于class Animal { constructor() {}}
上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。
转载地址:http://japmx.baihongyu.com/