听说现在大家在工作中ES6语法都已经用的炉火纯青了,那ES7-ES8的新特性你现在都用上了嘛?很多的新特性在开发中还是很实用的,也解决了很多js存在的问题。自己熬夜爆肝一个周末, 总结出了ES7-ES8的语法,希望对你能有一定的帮助。最后,了解真相,你才能获得真正的自由!
ES7
Array.prototype.includes()
includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。
语法: arr.includes(valueToFind[, fromIndex])
注意:使用 includes()查找字符串是区分大小写的。
const arr = [“es6”, “es7”, “es8”, “a”];
console.log(arr.includes(“A”));
使用 includes()只能判断简单类型的数据,对于复杂类型的数据,比如对象类型的数组,二维数组,这些是无法判断的.
const arr = [‘es6’, [‘es7’, ‘es8’], ‘es9’,{name:“jimmy”}]
console.log(arr.includes([“es7”, “es8”])); // false
console.log(arr.includes({name:“jimmy”}));
能识别NaN,indexOf是不能识别NaN的
const arr = [‘es6’, ‘es7’, NaN, ‘es8’]
console.log(arr.includes(NaN)) // true
console.log(arr.indexOf(NaN)) //-1
最后,如果只想知道某个值是否在数组中存在,而并不关心它的索引位置,建议使用includes(),如果想获取一个值在数组中的位置,那么使用indexOf方法。
幂运算符 **
比如我们想求2的10次方
用函数实现:
function pow(x, y) {
let result = 1
for (let i = 0; i < y; i++) {
result *= x
}
return result
}
console.log(pow(2, 10)) // 1024
Math.pow()
console.log(Math.pow(2, 10))
**幂运算符 ****
console.log(2 ** 10);
基本求幂
2 ** 3 // 8
3 ** 2 // 9
3 ** 2.5 // 15.588457268119896
10 ** -1 // 0.1
NaN ** 2 // NaN
注意:幂运算符的两个*号之间不能出现空格,否则语法会报错。
ES8
Object.values()
Object.values 方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
const obj = {
name: “jimmy”,
age: 18,
height: 188,
};
console.log(Object.values(obj)); // [ ‘jimmy’, 18, 188 ]
Object.entries()
Object.entries() 方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值对数组。
const obj = {
name: “jimmy”,
age: 18,
height: 188,
};
console.log(Object.entries(obj)); // [ [ ‘name’, ‘jimmy’ ], [ ‘age’, 18 ], [ ‘height’, 188 ] ]
console.log(Object.entries([1, 2, 3]));// [ [ ‘0’, 1 ], [ ‘1’, 2 ], [ ‘2’, 3 ] ]
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
const obj = {
name: “jimmy”,
age: 18,
};
const desc = Object.getOwnPropertyDescriptors(obj);
console.log(desc);
// 打印结果
{
name: {
value: ‘jimmy’,
writable: true,
enumerable: true,
configurable: true
},
age: {
value: 18,
writable: true,
enumerable: true,
configurable: true
}
}
上面打印结果中的
value表示当前对象的默认值
writable表示对象属性是否可以修改
enumerable表示当前这个属性是否可以出现在对象的枚举属性中
configurable表示当前对象的属性能否用delete删除
那这些对象的属性我们怎么设置和修改他们呢,我们可以使用es5的 Object.defineProperty()
接下来我们演示下,一些属性设置为false的情况
const obj = {};
Object.defineProperty(obj, “name”, {
value: “jimmy”,
writable: false,
configurable: false,
enumerable: true,
});
console.log(obj); // { name: ‘jimmy’ }
obj.name = “chimmy”;
console.log(obj); // { name: ‘jimmy’ }
delete obj.name
console.log(obj); // { name: ‘jimmy’ }
我们可以看到设置 writable: false和configurable: false,为false时,对象的name对象的值不能改变和不能被删除,打印出来还是原来的对象。
设置enumerable为false时
const obj = {};
Object.defineProperty(obj, “name”, {
value: “jimmy”,
writable: true,
configurable: true,
enumerable: false,
});
console.log(obj); // { }
for (let key in obj) {
console.log(key); // “”
}
当设置enumerable: false时,表示对象的属性不可被枚举,这时打印对象为空,遍历对象的键也为空。
还有我以前文章说的async和await
那么今天就到这里啦,灰灰~~