ecplice中class.forname一直报错_前端基础面试:平常工作中,最常用的ES6特性有哪些?请举例说明...

最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。

let, const

这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。

首先来看下面这个例子:

4973182833eab3def00082cee7f37de2.png

使用var两次输出都是obama,这是因为ES5只有全局作用域函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

1c54f4480581670ce0721fef48beda00.png

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

45c972248199cd6f1563e45051fc4832.png

上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值,即函数值都是10。而使用let则不会出现这个问题。

ed39cae2d0cd27afc87da2bbeb485b1e.png

再来看一个更常见的例子,了解下如果不用ES6,而用闭包如何解决这个问题。

498435e1a2676121957de88f60e1d326.png

我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。下面我们来看下,如何用闭包搞定它。

a44b9736744be26c573311205cceabe6.png

const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。(注意这里指的是内存地址,类似数组,对象成为引用时,还是可以修改的)

const PI = Math.PIPI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

当我们尝试去改变用const声明的常量时,浏览器就会报错。

const有一个很好的应用场景,就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:

const monent = require('moment')

class, extends, super

这三个特性涉及了ES5中最令人头疼的的几个部分:原型、构造函数,继承...你还在为它们复杂难懂的语法而烦恼吗?你还在为指针到底指向哪里而纠结万分吗?

有了ES6我们不再烦恼!

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

000460c74b62443e838dc9fcb46e8dd3.png

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor定义的方法和属性是实例对象自己的,而constructor定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。

arrow function

这个恐怕是ES6最最常用的一个新特性了,用它来写function比原来的写法要简洁清晰很多:

function(i){ return i + 1; } //ES5(i) => i + 1 // ES6

简直是简单的不像话对吧(但是滥用也不见得好,就是遇到jQuery等等需要兼容老式代码,报错,除非摒弃不用,包括老式库,只能babel转一下)

如果方程比较复杂,则需要用{}把代码包起来:

37afecf4f924825f33df7d67625d9bdb.png

除了看上去更简洁以外,arrow function还有一项超级无敌的功能!

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。例如:

a75db4602d115e7d3c4c797a169db23d.png

运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:

4329bef0322131f6260ce317d1ecd2d7.png

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

template string

这个东西也是非常有用,当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等。

大家可以先看下面一段代码:

e4fb6e4f2709df20ee822a5818a38f82.png

我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

1d5d89b3397a394d6cfc39de82b41737.png

反引号` `(Tab键上面那个)来标识起始,用${}来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?

ES6允许按照一定模式,从数组对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

看下面的例子:

let cat = 'ken'let dog = 'lili'let zoo = {cat: cat, dog: dog}console.log(zoo) //Object {cat: "ken
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值