如果感兴趣可以加QQ群: 157937068, 一起交流。
前言
目前前端开发流行框架，react,vue,angular以及微信小程序等等，都是对数据的操作，其实es6中对字符串、数组、对象的扩展，对于我们更简单的操作数据提供了方便。今天主要总结一下我项目中主要用到的es6对这些扩展的应用。当然，es6对函数的扩展及其他应用也很重要，关于这些应用，请关注我后面的文章。
includes方法
在e6字符串和数组中，多了一个includes（）方法，这个方法我在项目中经常用到。
有人说includes（）方法完全可以用indexOf取代，但是indexOf有几个缺点：
一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。
二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
[NaN].indexOf(NaN)
// -1
但是includes就可以解决这个问题！
[NaN].includes(NaN)
// true
该方法的几个例子：
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
数组includes方法和字符串includes方法类似：
let s = 'Hello world!';
s.includes('o') // true
s.includes('Hello', 6) // false
应用-求两个数组的交集和差集
数组a和数组b的交集：
a.filter(v => b.includes(v))
数组a和数组b的差集：
a.concat(b).filter(v => !a.includes(v) || !b.includes(v))
字符串 startsWith(), endsWith(),repeat(),padStart()，padEnd()
let haorooms = 'Hello world!';
haorooms.startsWith('Hello') // true
haorooms.endsWith('!') // true
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
'na'.repeat(2.9) // "nana"
padStart()，padEnd()接受2个参数，一个代表补全的长度，一个代表补全的字符串。
'haorooms.com'.padStart(16, 'www.');//"www.haorooms.com"
'haorooms'.padStart(16, '11') //"11111111haorooms"
'haorooms'.padEnd(12, '.com') //"haorooms.com"
'haorooms'.padEnd(5, '.com') //"haorooms"
数组 entries()，keys() 和 values() 及对象的Object.keys()，Object.values()，Object.entries()
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj) //["foo", "baz"]
Object.values(obj) //[bar,42]
Object.entries(obj)//[["foo", "baz"],[bar,42]]
类数组转为数组
Array.from()
let haorooms = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(haorooms); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(haorooms); // ['a', 'b', 'c']
扩展运算符也可以将类数组转为数组
var args = [...arguments];
应用，获取p标签中文本长度大于100的标签
let haorooms = document.querySelectorAll('p');
Array.from(haorooms).filter(p => { //等同于[...haorooms].filter
return p.textContent.length > 100;
});
Array.of()将一组值转为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
数组copyWithin()、find() 和 findIndex() 及fill()
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
[1, 4, -5, 10].find((n) => n < 0)
// -5
//上面代码找出数组中第一个小于 0 的成员。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
fill方法使用给定值，填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
表达式用于定义方法名-vuex中经常用到
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi
注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。
const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {
[keyA]: 'valueA',
[keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}
上面代码中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性。
Object.is()
Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.assign()
关于Object.assign()，我前面文章多次提及，请看：http://www.haorooms.com/post/js_copy_sq
http://www.haorooms.com/post/js_objectoperate
super 关键字
ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"
react项目中，经常看到
super(props)
这里 super(props) 之后，能在类里通过 this 访问，是因为在 React.Component 里面把传入的 props 绑定到了 this 上去，于是在 super 之后就可以用 this 访问了。
解构赋值数据交换
以前交换2个值比较简单的做法如下：
a=[b,b=a][0]
es6解构赋值如下：
[a,b]=[b,a]
网友评论