举例 ES6 常用升级优化
优化部分
ES6 新增了字符串模板,在拼接大段字符串时,用反斜杠()取代以往的字符串相加的形式,能保留所有空格和换行,使得字符串拼接看起来更加直观,更加优雅。升级部分
ES6 在 String 原型上新增了 includes()方法,用于取代传统的只能用 indexOf()查找包含字符的方法(indexOf()返回-1 表示没查到,不如 includes()方法返回false 更明确,语义更清晰),还新增了 startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法,可方便的用于查找,补全字符串。
优化部分
1、数组解构赋值
ES6 可以直接以 let [a,b,c] = [1,2,3]形式进行变量赋值,在声明较多变量时,不用再写很多 let(var),且映射关系清晰,且支持赋默认值。
2、扩展运算符
ES6 新增的扩展运算符(...),可以轻松的实现数组和松散序列的相互转化,可以取代arguments 对象和 apply 方法,轻松获取未知参数个数情况下的参数集合。(尤其是在ES5
中,arguments 并不是一个真正的数组,而是一个类数组的对象,但是扩展运算符的逆运算却可以返回一个真正的数组)。
扩展运算符还可以轻松方便的实现数组的复制和解构赋值(let a = [2,3,4]; let b =[...a])升级部分
ES6 在 Array 原型上新增了 find()方法,用于取代传统的只能用 indexOf()查找包含数组项目的方法,且修复了 indexO()f 查找不到 NaN 的 bug([NaN].indexOf(NaN) === -1).此外还新增了 copyWithin(), includes(), fill(),flat()等方法,可方便的用于字符串的查找,补全,转换等。
优化部分
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()等等较多的科学计数法运算方法,可以更加全面的进行立方根、求和立方根等等科学计算。
优化部分
1、箭头函数(核心)
箭头函数是 ES6 核心的升级项之一,箭头函数里没有自己的 this,这改变了以往JS 函数中最让人难以理解的 this 运行机制
优化点
1.1)箭头函数内的 this 指向的是函数定义时所在的对象,而不是函数执行时所在的对象。ES5 函数里的 this 总是指向函数执行时所在的对象,这使得在很多情况下this 的指向变得很 难理解,尤其是非严格模式情况下,this 有时候会指向全局对象,这甚至也可以归结为语言 层面的 bug 之一。ES6 的箭头函数优化了这一点,它的内部没有自己的 this,这也就导致了 this 总是指向上一层的 this,如果上一层还是箭头函数,则继续向上指,直到指向到有自己 this的函数为止,并作为自己的 this。1.2)箭头函数不能用作构造函数,因为它没有自己的 this,无法实例化。1.3)也是因为箭头函数没有自己的 this,所以箭头函数 内也不存在 arguments 对象。(可以用扩展运算符代替)
2、函数默认赋值
ES6 之前,函数的形参是无法给默认值得,只能在函数内部通过变通方法实现。ES6 以更简洁更明确的方式进行函数默认赋值。
升级部分
ES6 新增了双冒号运算符,用来取代以往的 bind(),call(),和 apply()foo::bar;等同于 bar.bind(foo)
foo::bar(...arguments)等同于 bar.apply(foo, arguments);
优化部分
1、对象属性变量式声明。ES6 可以直接以变量形式声明对象属性或者方法,。比传统的键值对形式声明更加简洁,更加方便,语义更加清晰。
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange}; // let myFruits = {apple: 'red appe', orange: 'yelloworange'};尤其在对象解构赋值(见优化部分 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(){}
}
2、对象的解构赋值
ES6 对象也可以像数组解构赋值那样,进行变量的解构赋值:
let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};
3、对象的扩展运算符(...)
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};
4、 super 关键字
ES6 在 Class 类里新增了类似 this 的关键字 super。同 this 总是指向当前函数所在的对象不同,super 关键字总是指向当前函数所在对象的原型对象。
升级部分
1、ES6 在 Object 原型上新增了 is()方法,做两个目标对象的相等比较,用来完善'='方法。'==='方法中 NaN === NaN //false 其实是不合理的,Object.is 修复了这个小bug。(Object.is(NaN, NaN) // true)
2、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 的值)。
3、ES6 在 Object 原型上新增了 getOwnPropertyDescriptors()方法,此方法增强了ES5 中getOwnPropertyDescriptor()方法,可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法,可以完美复制对象,包括复制 get 和 set 属性。4、 ES6 在 Object 原型上新增了 getPrototypeOf()和 setPrototypeOf()方法,用来获取或设置当前对象的 prototype 对象。这个方法存在的意义在于,ES5 中获取设置prototype 对像是通过__proto__属性来实现的,然而__proto__属性并不是 ES 规范中的明文规定的属性,只是浏览器各大产商“私自”加上去的属性,只不过因为适用范围广而被默认使用了,再非浏览器环境中并不一定就可以使用,所以为了稳妥起见,获取或设置当前对象的prototype 对象时,都应该采用 ES6 新增的标准用法。
5、 ES6 在 Object 原型上还新增了 Object.keys(),Object.values(),Object.entries()方法,用来获取对象的所有键、所有值和所有键值对数组。
用了箭头函数,this 就不是指向 window,而是父级(指向是可变的)不能够使用 arguments 对象
不能用作构造函数,这就是说不能够使用 new 命令,否则会抛出一个错误不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数
Promise构造函数中的 resolve 或 reject 只有第一次执行有效,多次调用没有任何作用,呼应代码二结论:Promise 状态一旦改变则不能再变。
本文来自博客园,作者:jialiangzai,转载请注明原文链接:https://www.cnblogs.com/zsnhweb/articles/17505720.html

浙公网安备 33010602011771号