博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6语法
阅读量:6005 次
发布时间:2019-06-20

本文共 2495 字,大约阅读时间需要 8 分钟。

1.let

ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量只在let命令所在的代码块内有效

新建index.html,文件内容为

从console中可以打印出a的值

img_163ec2e13ca96b4a48a4b109a322f694.png

在ES6中,使用let声明a的值,然后再次打印a的值,会报错

报错如下所示,

img_5e206131ad2dce2cc774c89e376c0b61.png

上面两个例子中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效

修改上面的代码:

结果如下

img_a18ff82ac3b932d2158140536f460da7.png

同样的把上面的var改为let,

刷新浏览器后可以看到,抛出的异常又不一样了

img_c3f0bb2ddfc326300c1e15a933ac25d0.png

因为let声明的变量是块级作用域,不能重复声明

再次修改上面的代码

刷新浏览器,得到的结果为:

img_b627806ddb3708747bbe4612d6bbbea0.png

修改代码,把var改为let

再次刷新浏览器,得到的结果为:

img_43ba194a1123fafa9de7389e4ed0eb5b.png

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。

如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算

修改代码

刷新浏览器后,得到的结果为

img_1a5461ad3ff1179bd207856822860033.png

同样的,把var改为let,又会出现异常

img_3002171c5f80b17e75dbdf0d377f8e08.png

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。

这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

1.1 内层变量可能会覆盖外层变量。

程序执行结果

img_aaaf1b1ddf8e8161f9480a2429c8dcf9.png

上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

1.2 用来计数的循环变量泄露为全局变量。

执行结果:

img_cb31475ff81bf4ef4ae56100c0e13414.png

2.模板字符串

传统的JavaScript语言,输出很长的信息时,通常都是使用"+"号进行拼接的。

这种方法相当繁琐不方便,ES6引入了模板字符串解决这个问题

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

执行结果:

img_38e2d13bea14d533bd67176d5dfcc024.png

3.箭头函数

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;}

使用箭头函数需要注意的点:

3.1 函数体内的this对象,就是定义时所有的对象,而不是使用时所在的对象

代码:

执行结果:

img_5f873a48127fbd3cc83fe879a6b014fc.png

使用箭头函数定义上面的函数

执行结果:

img_656fba975f1c06e6f03e1d94da0bd8bf.png

3.2 箭头函数内部不可以使用arguments对象,该对象在函数体内不存在

再次修改上面的代码,打印函数传递的参数arguments

执行结果:

img_b648cdbd36107d486fa011058b25bdc1.png

使用箭头函数定义上面的fav函数,再次打印函数传递的参数arguments

执行结果

img_46e673475b7c6ef8b42f89c4ada01bdf.png

4. 对象的单体模式

为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式

程序执行结果:

img_265073c0b6073af205f8abb8ad4c831d.png

5. 面向对象

5.1 构造函数的方式创建对象

上面这种写法跟传统的面向对象语言(比如 Java 和 python)差异很大,很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。

通过class关键字,可以定义类。ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

5.2 class创建对象

修改上面的代码,用class创建对象

程序执行结果

img_78cd7faca00763b2fff6ee1ed8eaf363.png

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。

也就是说,ES5 的构造函数Animal,对应 ES6 的Animal类的构造方法。

Animal类除了构造方法,还定义了一个showName方法。注意,定义"类"的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

上面代码表示,类本身就指向了类的构造函数。

使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。

5.3 constructor方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。

一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

class Animal {}// 等同于class Animal {  constructor() {}}

上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。

转载地址:http://japmx.baihongyu.com/

你可能感兴趣的文章
新框架 - 收藏集 - 掘金
查看>>
JQuery坑,说说哪些大家都踩过的坑
查看>>
高性能迷你React框架anu在低版本IE的实践
查看>>
windows中用cmd 删除文件夹以及文件夹里面的所有内容
查看>>
中国在两年内赶超美国AI?李开复:不一定
查看>>
2018年OpenStack用户调查报告出炉:Kubernetes仍居首
查看>>
Eclipse基金会发布Eclipse Photon IDE
查看>>
纯css实现左右横线,文字自适应居中效果
查看>>
唯品会HDFS性能挑战和优化实践
查看>>
JavaScript 设计模式
查看>>
Java EE供应商和伦敦Java用户组宣布新的MicroProfile
查看>>
PostgreSQL中的大容量空间探索时间序列数据存储
查看>>
敏捷制造:并不是你想像的矛盾体
查看>>
jQuery选择器和事件
查看>>
十、syslog日志与loganalyzer日志管理
查看>>
Python多进程并发写入PostgreSQL数据表
查看>>
mysql 优化
查看>>
2.4 salt grains与pillar jinja的模板
查看>>
MySQL主从(介绍,配置主机,配置从机,测试主从同步)
查看>>
不同版本的outlook客户端配置Office 365 exchange online帐户需要安装的补丁
查看>>