ES6/ES7/ES8特性

ES6

ES7

1.Array.prototype.includes() 方法
     在 ES6 中我们有 String.prototype.includes() 可以查询给定字符串是否包含一个字符，而在 ES7 中，我们在数组中也可以用 Array.prototype.includes 方法来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
 

const arr = [1, 3, 5, 2, '8', NaN, -0]
arr.includes(1) // true
arr.includes(1, 2) // false 该方法的第二个参数表示搜索的起始位置，默认为 0
arr.includes('1') // false
arr.includes(NaN) // true
arr.includes(+0) // true

indexOf内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。

[NaN].indexOf(NaN)// -1

ES8

1.Object.values()
Object.values()方法返回一个数组，成员是参数自身所有可遍历属性的值 [value] ，返回值按数值大小从小到大排列 。一般用于获取对象所有的值。

obj = { a: 'one', b: 'two', c: 'three' }
console.log(Object.values(obj)); // ["one", "two", "three"]
obj2 = { a: 1, b: 2, 3: 'c' }
console.log(Object.values(obj2)); // ["c", 1, 2]
obj3 = { 1: 'a', 2: 'b', foo: [{ d: 1, e: 2 }] }
console.log(Object.values(obj3)); // ["a", 'b',[{ d: 1, e: 2 }]]

因为 Object.values() 用于所有可遍历属性，如果参数不是对象， Object.values()会先将其转为对象，以参数的下标作为对象的 key值，因此也可以对数组和字符串进行操作。
 

// 数组可以看做key为下标的对象
// ['a','b','c']=>{ 0: 'a', 1: 'b', 3: 'c' }
obj = ['a','b','c']
console.log(Object.values(obj)); // ['a','b','c']
// 字符串可以看做key为下标的对象
// 'foo'=>{ 0: 'f', 1: 'o', 3: 'o' }
str = 'foo'console.log(Object.values(str)); // ['f','o','o']

2.Object.entries()
Object.entries()方法返回一个数组，成员是参数自身所有可遍历属性的键值对数组 [key,value]，返回值按数值大小从小到大排列。
 

obj = { a: 1, b: 2, c: 3 }
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

//跟 Object.values()一样 Object.entries()也可以用于数组和字符串。

let obj = ['a', 'b', 'c'];
console.log(Object.entries(obj)); // [['0', 'a'], ['1', 'b'], ['2', 'c']]
let obj2 = 'qux';
console.log(Object.entries(obj2)); // [['0', 'q'], ['1', 'u'], ['2', 'x']]

//使用 Object.entries()，我们还可以进行对象属性的遍历。
let obj = { a : 1, b : 2}
for (let [k, v] of Object.entries(obj)) {
   console.log(`${k} : ${v}`)
}
// 'a' : 1
// 'b' : 2

for (let i in obj) {
    console.log(`${i} : ${obj[i]}`)
}
// a:1
// b:2

3.字符填充函数padStart() 和 padEnd()
 

'css'.padStart(10).length 
// ' css' 长度10
'html'.padStart(10).length 
// ' html' 长度10
'Java'.padStart(10).length 
// 'Java' 长度10

'css'.padStart(10,'*') 
// '*******css' 长度10
'Java'.padStart(10,'*') 
// '******Java' 长度10
'Java'.padStart(8,'*').length 
// 'Java' 长度8

'css'.padEnd(10,'*') 
// 'css*******' 长度10
'Java'.padEnd(10,'*') 
// 'Java******' 长度10
'Java'.padEnd(8,'*').length 
// 'Java' 长度8