为了账号安全,请及时绑定邮箱和手机立即绑定

ES6新手学习知识点整理

阮一峰参考文档:http://es6.ruanyifeng.com/#docs/let
一、 30分钟掌握ES6/ES2015核心内容
1.关键点:ES2015=ES6
2.最常用的ES6特性
3.ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。
块级作用域与函数声明问题:
函数能不能在块级作用域之中声明,是一个相当令人混淆的问题。
ES6引入了块级作用域,明确允许在块级作用域之中声明函数。

注意:ES6规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

4.当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this
5.ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
6.template string
我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库
我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号(`)来标识起始,用${}来引用变量,而且所有的空格和缩进都会被保留在输出之中
7.default ,rest
default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat'来指定默认值。

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

如果用ES6我们而已直接这么写:

function animal(type = 'cat'){
    console.log(type)
}
animal()

最后一个rest语法也很简单,直接看例子:

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

二、import export
es6自己的module功能。
们有了es6的module功能,它实现非常简单,可以成为服务器和浏览器通用的模块解决方案。

ES6 module的其他高级用法
export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)

参考文档:30分钟掌握ES6/ES2015核心内容(下)
结合 ES6+ 开发 React 组件

点击查看更多内容
20人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消