江苏龙网

  1. 主页 > 生活百科 > >

前端程序员不可不知的ES6干货知识点( 二 )

ES6

尤其在对象解构赋值(见优化部分2.)或者模块输出变量时，这种写法的好处体现的最为明显:
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()方法，用来获取对象的所有键、所有值和所有键值对数组 。
举一些ES6对Function函数类型做的常用升级优化?(重要)答：
1.箭头函数(核心)：箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制 。
主要优化点:
箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象 。
ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一 。
ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this；
箭头函数不能用作构造函数，因为它没有自己的this，无法实例化；
也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象 。（可以用扩展运算符代替）
2.函数默认赋值：ES6之前，函数的形参是无法给默认值的，只能在函数内部通过变通方法实现 。ES6以更简洁更明确的方式进行函数默认赋值 。


推荐阅读


上一篇：Java工具包之轻松理解Java中的IO与NIO

下一篇：坚持跑步的11个好处是什么？