1 ES5、ES6 和 ES2015 有什么区别?
ES2015
特指在2015
年发布的新一代JS
语言标准,ES6
泛指下一代 JS 语言标准,包含ES2015
、ES2016
、ES2017
、ES2018
等。现阶段在绝大部分场景下,ES2015
默认等同ES6
。ES5
泛指上一代语言标准。ES2015
可以理解为ES5
和ES6
的时间分界线
2 babel 是什么,有什么作用?
babel
是一个ES6
转码器,可以将ES6
代码转为ES5
代码,以便兼容那些还没支持ES6
的平台
3 let 有什么用,有了 var 为什么还要用 let?
在
ES6
之前,声明变量只能用var
,var
方式声明变量其实是很不合理的,准确的说,是因为ES5
里面没有块级作用域是很不合理的。没有块级作用域回来带很多难以理解的问题,比如for
循环var
变量泄露,变量覆盖等问题。let
声明的变量拥有自己的块级作用域,且修复了var
声明变量带来的变量提升问题。
4 举一些 ES6 对 String 字符串类型做的常用升级优化?
优化部分
ES6
新增了字符串模板,在拼接大段字符串时,用反斜杠(
)`取代以往的字符串相加的形式,能保留所有空格和换行,使得字符串拼接看起来更加直观,更加优雅
升级部分
ES6
在String
原型上新增了includes()
方法,用于取代传统的只能用indexOf
查找包含字符的方法(indexOf
返回-1
表示没查到不如includes
方法返回false
更明确,语义更清晰), 此外还新增了startsWith()
,endsWith(),
padStart()
,padEnd()
,repeat()
等方法,可方便的用于查找,补全字符串
5 举一些 ES6 对 Array 数组类型做的常用升级优化
优化部分
-
数组解构赋值。 ES6
可以直接以let [a,b,c] = [1,2,3]
形式进行变量赋值,在声明较多变量时,不用再写很多let(var),
且映射关系清晰,且支持赋默认值 -
扩展运算符。 ES6
新增的扩展运算符(...
)(重要),可以轻松的实现数组和松散序列的相互转化,可以取代arguments
对象和apply
方法,轻松获取未知参数个数情况下的参数集合。(尤其是在ES5
中,arguments
并不是一个真正的数组,而是一个类数组的对象,但是扩展运算符的逆运算却可以返回一个真正的数组)。扩展运算符还可以轻松方便的实现数组的复制和解构赋值(let a = [2,3,4]
;let b = [...a]
)
升级部分
ES6
在Array
原型上新增了find()
方法,用于取代传统的只能用indexOf
查找包含数组项目的方法,且修复了indexOf
查找不到NaN的bug([NaN].indexOf(NaN) === -1)
.此外还新增了copyWithin()
,includes()
,fill()
,flat()
等方法,可方便的用于字符串的查找,补全,转换等
6 举一些 ES6 对 Number 数字类型做的常用升级优化
优化部分
ES6 在
Number
原型上新增了isFinite()
,isNaN()
方法,用来取代传统的全局isFinite(),
isNaN()
方法检测数值是否有限、是否是NaN
。ES5
的isFinite()
,isNaN()
方法都会先将非数值类型的参数转化为Number
类型再做判断,这其实是不合理的,最造成 isNaN('NaN') === true
的奇怪行为--'NaN'
是一个字符串,但是isNaN
却说这就是NaN
。而Number.isFinite()
和Number.isNaN()
则不会有此类问题(Number.isNaN('NaN') === false
)。(isFinite()
同上)
升级部分
ES6
在Math
对象上新增了Math.cbrt()
,trunc()
,hypot()
等等较多的科学计数法运算方法,可以更加全面的进行立方根、求和立方根等等科学计算
7 举一些 ES6 对 Object 类型做的常用升级优化
优化部分
对象属性变量式声明。
ES6
可以直接以变量形式声明对象属性或者方法,。比传统的键值对形式声明更加简洁,更加方便,语义更加清晰
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange}; // let myFruits = {apple: 'red appe', orange: 'yellow orange'};
尤其在对象解构赋值(见优化部分 b.)或者模块输出变量时,这种写法的好处体现的最为明显
let {keys, values, entries} = Object;
let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}
可以看到属性变量式声明属性看起来更加简洁明了。方法也可以采用简洁写法
let es5Fun = {
method: function(){}
};
let es6Fun = {
method(){}
}
对象的解构赋值。
ES6
对象也可以像数组解构赋值那样,进行变量的解构赋值
let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};
对象的扩展运算符(
...
)。 ES6 对象的扩展运算符和数组扩展运算符用法本质上差别不大,毕竟数组也就是特殊的对象。对象的扩展运算符一个最常用也最好用的用处就在于可以轻松的取出一个目标对象内部全部或者部分的可遍历属性,从而进行对象的合并和分解
let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'};
// otherFruits {grape: 'purple grape', peach: 'sweet peach'}
// 注意: 对象的扩展运算符用在解构赋值时,扩展运算符只能用在最有一个参数(otherFruits后面不能再跟其他参数)
let moreFruits = {watermelon: 'nice watermelon'};
let allFruits = {apple, orange, ...otherFruits, ...moreFruits};
super
关键字。ES6
在Class
类里新增了类似this
的关键字super
。同this
总是指向当前函数所在的对象不同,super
关键字总是指向当前函数所在对象的原型对象
升级部分
ES6`在`Object`原型上新增了`is()`方法,做两个目标对象的相等比较,用来完善`'==='`方法。`'==='`方法中`NaN === NaN //false`其实是不合理的,`Object.is`修复了这个小`bug`。`(Object.is(NaN, NaN) // true)
ES6
在Object
原型上新增了assign()
方法,用于对象新增属性或者多个对象合并
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
注意:
assign
合并的对象target
只能合并source1
、source2
中的自身属性,并不会合并source1
、source2
中的继承属性,也不会合并不可枚举的属性,且无法正确复制 get 和 set 属性(会直接执行get/set
函数,取return
的值)
-
ES6
在Object
原型上新增了getOwnPropertyDescriptors()
方法,此方法增强了ES5
中getOwnPropertyDescriptor()
方法,可以获取指定对象所有自身属性的描述对象。结合defineProperties()
方法,可以完美复制对象,包括复制get
和set
属性 -
ES6
在Object
原型上新增了getPrototypeOf()
和setPrototypeOf()
方法,用来获取或设置当前对象的prototype
对象。这个方法存在的意义在于,ES5
中获取设置prototype
对像是通过__proto__
属性来实现的,然而__proto__
属性并不是 ES 规范中的明文规定的属性,只是浏览器各大产商“私自”加上去的属性,只不过因为适用范围广而被默认使用了,再非浏览器环境中并不一定就可以使用,所以为了稳妥起见,获取或设置当前对象的prototype
对象时,都应该采用 ES6 新增的标准用法 -
ES6
在Object
原型上还新增了Object.keys()
,Object.values()
,Object.entries()
方法,用来获取对象的所有键、所有值和所有键值对数组
8 举一些 ES6 对 Function 函数类型做的常用升级优化?
优化部分
箭头函数(核心)。箭头函数是 ES6 核心的升级项之一,箭头函数里没有自己的 this,这改变了以往 JS 函数中最让人难以理解的 this 运行机制。主要优化点
-
箭头函数内的 this 指向的是函数定义时所在的对象,而不是函数执行时所在的对象。ES5 函数里的 this 总是指向函数执行时所在的对象,这使得在很多情况下 this
的指向变得很难理解,尤其是非严格模式情况下,this
有时候会指向全局对象,这甚至也可以归结为语言层面的 bug 之一。ES6 的箭头函数优化了这一点,它的内部没有自己的this
,这也就导致了this
总是指向上一层的this
,如果上一层还是箭头函数,则继续向上指,直到指向到有自己this
的函数为止,并作为自己的this
-
箭头函数不能用作构造函数,因为它没有自己的 this
,无法实例化 -
也是因为箭头函数没有自己的 this,所以箭头函数 内也不存在 arguments
对象。(可以用扩展运算符代替) -
函数默认赋值。 ES6
之前,函数的形参是无法给默认值得,只能在函数内部通过变通方法实现。ES6
以更简洁更明确的方式进行函数默认赋值
function es6Fuc (x, y = 'default') {
console.log(x, y);
}
es6Fuc(4) // 4, default
升级部分
ES6 新增了双冒号运算符,用来取代以往的
bind
,call
,和apply
。(浏览器暂不支持,Babel
已经支持转码)
foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/250728.html