es7-10语法糖学习记录
1.JavaScript Array includes() 方法
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
第一个参数是要搜索的值,第二个参数(可选,默认为0)表示开始搜索的位置,0为从头开始,当为负数时,表示只搜索最后一个,例如-1就搜索最后一个,这个方法相比于之前使用的indexof方法在速度更快,includes方法在搜索到值的时候会直接返回true并不需要从头到尾搜索一遍,并且可以选择索引位置,性能更好,速度更快。
2.求幂运算符(**)
let squared = 3 ** 2; // 9
这个属性使用的场景比较少,但他确实代替了Math.pow(x, y)方法,使代码更简洁了
3.Object.entries方法
var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
该方法用于便利出对象中的键值对,可接受数组和对象和字符串作为参数,字符串的话会将字符分割成数组的形式(每个字符作为一项)
const obj=Object.entries('lc');
console.log(obj)//[["0","l"],["1","c"]]
const arr=Object.entries([1,2]);
console.dir(arr);//[["0","1"],["1","2"]]
当对象的键值明是数值时,返回的数组会进行排序
4.padStart 和 padEnd
console.log('react'.padStart(10, '_')) // "_____react"
console.log('backbone'.padStart(10, '*')) // "**backbone"
console.log('react'.padEnd(10, ':-)')) // "react:-):-" is 10
console.log('backbone'.padEnd(10, '*')) // "backbone**" is 10
分别从字符串的左边或右边使用指定字符填充到指定长度(若第二个参数没有则使用空格填充),
5.Rest/Spread 属性
const myObject = { a: 1, b: 2, c: 3};
const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, z: 26 };
// obj2 is { a: 1, b: 2, c: 3, z: 26 }
三点(...)方法在es9以后支持对对象使用了,之前的只能对数组使用,使用方法和数组类似。
可以使用扩展运算符拷贝一个对象,像是这样obj2 = {...obj1},但是 这只是一个对象的浅拷贝。如果一个对象A的属性是对象B,那么在克隆后的对象cloneB中,该属性指向对象B。
6.async/await
function say() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(`hello, world`);
}, 1000);
});
}
async function demo() {
const v = await say();
// 输出:hello, world
}
demo().then(function(v){
console.log('222',v)
});
为了解决js中的异步问题,在es6时出现了promise,经过改良,现在可以使用async和await来实现了
那么async/await借用阮一峰的话简单来说就是
async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句
可以使用更类似同步的写法来实现异步,需要注意的是,async定义的函数会返回一个promise对象,可以用then方法来处理,await方法只能使用在async定义的方法内部,使用在别的函数中会报错
7.Array的flat()方法和flatMap()方法
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。基本用法是数组降纬和去除空项
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]
8.String的trimStart()方法和trimEnd()方法
分别去除字符串首尾空白字符
9.Object.fromEntries()
Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
而Object.fromEntries() 则是 Object.entries() 的反转。
Object.fromEntries() 函数传入一个键值对的列表,并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象,返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象,第一个元素是将用作属性键的值,第二个元素是与该属性键关联的值。