介绍

或许是因为 ES7/ES8 更新的东西相比 ES6 来说比较少,所以关于他们的文章和知识也就用得比较少,反正我也是整理一点咯。

1、ES7 - includes()

Array.prototype.includes()
使用场景:验证数组中是否存在某个元素。

1-不使用ES7 使用 indexOf() 判断返回值是否 -1 ,若是则为不存在,反之存在。

1
2
let t =  ['hello','leo','perfect'];
if(t.indexOf('leo')!=-1) console.log('存在');

2-使用ES7 使用 includes() 简单判断,返回 True 为存在,False 不存在。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let t =  ['hello','leo','perfect'];
if(t.includes('leo')) console.log('存在');
```

### 2、ES7 - 指数操作符
1-不使用ES7
使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算:
```js
function calculateExponent(base, exponent)
{
if (exponent === 1)
{
return base;
}
else
{
return base * calculateExponent(base, exponent - 1);
}
}

console.log(calculateExponent(7, 3)); // 输出343
console.log(Math.pow(7, 3)); // 输出343

2-使用ES7
使用指数运算符**,就像+、-等操作符一样:

1
console.log(7**3);

3、ES8 - Object.values()

通常用于遍历对象的属性值。
1-不使用ES8
使用Object.keys()遍历对象的属性值,需要通过属性名key去获取属性值:

1
2
3
4
5
let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) => // Object.keys() 对象=>数组
{
console.log(obj[key]); // 输出1, 2, 3
});

2-不使用ES8
使用Object.values()遍历对象的属性值,无需使用使用属性名:

1
2
3
4
5
let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(value =>
{
console.log(value); // 输出1, 2, 3
});

4、ES8 - Object.entries()

遍历对象的属性名和属性值。
1-不使用ES8
使用Object.keys()遍历对象的属性名和属性值:

1
2
3
4
5
let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) =>
{
console.log(key + ": " + obj[key]); // 输出a: 1, b: 2, c: 3
})

2-不使用ES8
使用Object.values()遍历对象的属性值,无需使用使用属性名:

1
2
3
4
5
let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) =>
{
console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})

5、ES8 - padStart()

在字符串前面填充指定的字符串。
1-不使用ES8
使用Object.keys()遍历对象的属性名和属性值:

1
2
3
console.log('0.00')         	    // 0.00
console.log('10,000.00') // 10,000.00
console.log('250,000.00') // 250,000.00

2-不使用ES8
使用padStart()可以在字符串前面填充指定的字符串:

1
2
3
console.log('0.00'.padStart(20))          //    0.00	
console.log('10,000.00'.padStart(20)) // 10,000.00
console.log('250,000.00'.padStart(20)) // 250,000.00

6、ES8 - padEnd()

在字符串后面填充指定的字符串。
1-不使用ES8
使用Object.keys()遍历对象的属性名和属性值:

1
2
3
console.log('0.00 ' + '0.00' )         	   // 0.00 0.00
console.log('10,000.00 ' + '10,000.00' ) // 10,000.00 10,000.00
console.log('250,000.00 ' + '250,000.00') // 250,000.00 250,000.00

2-不使用ES8
使用padEnd()可以在字符串后面填充指定的字符串:

1
2
3
console.log('0.00'.padEnd(20) + '0.00' )         	   //  0.00           0.00
console.log('10,000.00'.padEnd(20) + '10,000.00' ) // 10,000.00 10,000.00
console.log('250,000.00'.padEnd(20) + '250,000.00') // 250,000.00 250,000.00

7、ES8 - 函数参数列表结尾允许逗号

1-不使用ES8

1
2
3
4
5
6
7
var f = function(a,
b,
c,
d // d之后不能带逗号
) {
console.log(d)
}

2-使用ES8

1
2
3
4
5
6
7
var f = function(a,
b,
c,
d, // d之后允许带逗号
) {
console.log(d)
}

允许逗号之后,可以避免一些不必要的报错。

8、ES8 - Async/Await

使用Promise

使用Promise写异步代码,会比较麻烦:

1
2
3
4
5
6
7
axios.get(`/q?query=${query}`)
.then(response => response.data)
.then(data =>
{
this.props.processfetchedData(data);
})
.catch(error => console.log(error));

使用Async/Await

Async/Await使得异步代码看起来像同步代码,这正是它的魔力所在:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
async fetchData(query) =>
{
try
{
const response = await axios.get(`/q?query=${query}`);
const data = response.data;
return data;
}
catch (error)
{
console.log(error)
}
}

fetchData(query).then(data =>
{
this.props.processfetchedData(data)
})

Async/Await 是写异步代码的新方式,以前的方法有 回调函数Promise 。相比于 Promise ,它更加简洁,并且处理错误、条件语句、中间值都更加方便,因此有望替代 Promise ,成为新一代的一步代码编写方式。