总结一下ES6为 javascript中的 对象/数组/函数 这ＪＳ三巨头所提供的更简洁优雅的书写方式，以及扩展的API。
【前言】本文“严重参考” 自阮一峰老师写的ES6文档，在此我郑重感谢他沉默无声的帮助
总结一下ES6为 javascript中的 对象/数组/函数 这ＪＳ三巨头所提供的更简洁优雅的书写方式，以及扩展的API。
对象篇
属性名简洁表示法, 当对象的属性名和作为属性值的变量名名称相同时，可只写属性名
var name = "彭湖湾"
var obj = { name: name }
可简写为
var name = "彭湖湾"
var obj = { name }
如果对象的属性是函数，可简写为类似于“函数声明”的形式：
var obj = {
methods: function () {}
}
可简写为
var obj = {
methods () { // ...
}
}
对象字面量的属性名表达式
以前你只能对单一的对象属性使用表达式：obj['a' + 'b'] = value现在你可以在一个对象字面量里对属性名使用表达式：
var obj = {
['a' + 'b']: value
}
Object.assign(target, source1, source2 ....) 可把source1，source2等第二个参数以后的对象合并到target
1.规则是对于同名属性， 后面的对象会覆盖前面的，如source1覆盖target, source2会覆盖source1
var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
2. Object.assign的合并功能仅止于第一层属性，也就是说， 如果两个合并对象（如source1和source2）有一个第一层的同名属性，并且这个属性也是个有属性的对象，那么Object.assign不会“进入”位于第二层的属性对象，对其属性进行合并，而是简单地用后面对象的第一层属性替代前面对象的第一层属性
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
结果是
{ a: { b: 'hello' } }
不是
{ a: { b: 'hello', d: 'e' } }
遍历属性对象的几个API对比:
1.for...in 遍历对象自身属性和原型中的属性， 且要求是可枚举属性2. Object.keys(obj)，返回一个数组， 遍历自身属性， 不包括原型属性， 且要求是可枚举的3. Object.getOwnPropertyNames(obj) 返回一个数组，遍历自身属性， 不包括原型属性， 且不要求是可枚举的4.Object.values(): 和Object.keys(obj)类似，不过遍历的是属性值5.Object.entries() 和Object.keys(obj)类似，不过遍历的是属性名/值对，返回一个二维数组：[ ["key1", "value1"], ["key2", "value2"] ]
关键对比
1.for...in 和Object.keys(obj)/Object.getOwnPropertyNames(obj), 前者取得原型中的属性，后两者不取2.Object.getOwnPropertyNames(obj) 和Object.keys(obj)， 都是只返回遍历自身属性组成的数组，前者无论是否可枚举都返回， Object.keys(obj)只返回可枚举属性3.Object.keys(obj) ， Object.values()， Object.entries() 分别遍历对象的键， 值，键值对
数组篇
Array.of 将一组参数作为数组元素组成数组， 如
Array.of(1, 2, 3) // [1,2,3]
出现原因： 弥补Array构造函数的不足：
Array构造函数因为接收参数的不同行为表现差异非常巨大1. 当接收一个参数的时候，它会以为你传的是数组的长度，从而创建一个对应长度的“空”数组
Array(3) // [, , ,]
2. 当接收多个参数的时候，它会以为你传的是数组元素， 从而创建一个指定数组元素的数组
Array(1, 2, 3) // [1, 2, 3]
Array.from将两类对象都转为数组
1类数组对象（如函数内部的arguments,DOM操作产生的NodeList集合）2 ES6新增加的Set对象， Map对象都转为真正的数组
转化类数组对象
function foo() {
var args = Array.from(arguments);
// arguments从对象变成了数组
}
转化ES6新增加的Set对象， Map对象
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
find方法，用于在一个数组中找到第一个符合条件的数组元素
[1, 2, 3, -1].find((n) => n < 0)
// -1
ES5中我们可能会使用IndexOf方法来寻找一个特定的元素，但它的局限性在于indexof只能以数组元素的值作为查找条件，而find方法则更加灵活， 它提供了一个以数组元素为参数的函数供你做更加灵活的操作，并取得第一个返回true的数组元素
fill方法, 通过array.fill(value), 可以将array数组的所有值都写为value
一般可以用于初始化空数组：
new Array(4).fill(1)
// [1, 1, 1,1]
includes方法 检测数组中是否含有某个元素， 返回true或者false
【注意】array.indexOf(数组元素) === -1 这个常用于判断条件的表达式可以用 includes方法去替代
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
函数篇
函数参数在ES6下可以设置默认值
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
rest 参数
可以通过“...”的运算符把接收到的函数参数合为数组放入紧跟“...”的变量中
function fn(...args) {
}
fn(1, 2, 3) // 此时 args = [1,2,3]
【注意】 函数的reset参数可以看做是扩展运算符的“逆运算”
name属性
函数可取name属性
function fn() {}
fn.name // "fn"
箭头函数
ES6引入了箭头函数，它有几大作用：1. 使我们能通过一种更为简洁的方式书写函数2. 箭头函数绑定了this对象， 减少了this绑定丢失所造成的麻烦
在javascript中， 大多数变量的查找的都是静态的，而不是动态的， 或者说是变量所在的作用域是定义时候决定的，而不是运行时决定
但this却恰好相反， this的绑定是动态的， 是运行时决定的， 这有时候就导致了让人苦恼的this绑定丢失问题
用一段代码展示一下普通函数（相比于箭头函数）所存在this绑定丢失的问题
function foo() {
setTimeout( function () {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 21
为什么输出的是21不是42呢？ 因为setTimeout里的函数是异步执行的，当调用foo.call({ id: 42 })的时候setTimeout里的函数并没有立即得到执行，
所以setTimeout()调用的时候，它运行在与所在函数完全分离的执行环境上。这时候this指向的是window,而不是{ id: 42 } (在 ES6严格模式下是undefined)
但箭头函数的this是静态绑定的， 所以能很好地解决这个问题：
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
如果园友看到这里了， 那么请容我道个歉， 在这篇文章里， 其实多处“参考”了《ES6入门》中的例子， 比起自己亲手写的代码，多少可能会让读者们感到有些难理解，因为这几天实在挺累的，所以写这篇文章的时候有些心力不足，见谅。
资料来源：
1. MDN https://developer.mozilla.org/zh-CN/
2. ECMAScript 6入门 http://es6.ruanyifeng.com/
发表评论