|
阅读：4402回复：2
Javascript之ES7详解ES7 1.Array.prototype.includes() 基本用法： ['a', 'b', 'c'].includes('a') // true ['a', 'b', 'c'].includes('d') // false 接收俩个参数：要搜索的值和搜索的开始索引： ['a', 'b', 'c', 'd'].includes('b') // true ['a', 'b', 'c', 'd'].includes('b', 1) // true ['a', 'b', 'c', 'd'].includes('b', 2) // false 3.与ES6中的indexOf()
2.求幂运算符 基本用法： 3 ** 2 //9 效果同 Math.pow(3, 2) //9 由于是运算符，所以可以和 +=一样的用法 var b = 3; b **= 2; console.log(b); //9 ES8 1.async await var promise = new Promise((resolve, reject) => { this.login(resolve); }) .then(() => { this.getInfo() }) .catch(() => { console.log('Error') }) |
|
|
沙发#
发布于：2022-02-21 16:25
1.2声明方式 异步函数存在以下四种使用形式：
1.3支持返回Promise和同步的值 async用于定义一个异步函数，该函数返回一个Promise。 如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value)。 await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。 //async await //返回Promise let timer = async function timer() { return new Promise((reslove, reject) => { setTimeout(() => { reslove('a'); }, 1000); }) } timer().then(result => { console.log(result); }).catch(err => { console.log(err.message); }) //返回同步的值 let sayHello = async function sayHello() { let hi = 'hello world'//等同于return Promise.resolve(hi); return hi } sayHello().then(res => { console.log(res) }).catch(err => { console.log(err.message); }) 我们的async函数中可以包含多个异步操作，其异常和Promise链有相同之处，如果有一个Promise被reject()那么后面的将不会再进行。 let count = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject('promise故意抛出异常') }, 1000); }) } let list = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve([1, 2, 3]) }, 1000); }) } let getList = async () => { let c = await count() console.log('async') //此段代码并没有执行 let l = await list() return { count: c, list: l } } console.time('start'); getList().then(res => { console.log(res) }) .catch(err => { console.timeEnd('start') console.log(err) }) //start: 1000.81494140625ms //promise故意抛出异常 1.5并行 上面的案例中，async采用的是串行处理 count()和list()是有先后顺序的 let c = await count() let l = await list() 实际用法中，若是请求的两个异步操作没有关联和先后顺序性可以采用下面的做法 let res = await Promise.all([count(), list()]) return res //res的结果为 //[ 100, [ 1, 2, 3 ] ] 案例详情为： let count = ()=>{ return new Promise((resolve,reject) => { setTimeout(()=>{ resolve(100); },500); }); } let list = ()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve([1,2,3]); },500); }); } let getList = async ()=>{ let result = await Promise.all([count(),list()]); return result; } console.time('begin'); getList().then(result => { console.timeEnd('begin'); //begin: 505.557ms console.log(result); //[ 100, [ 1, 2, 3 ] ] }).catch(err => { console.timeEnd('begin'); console.log(err); }); 我们将count()和list()使用Promise.all()“同时”执行，这里count()和list()可以看作是“并行”执行的，所耗时间将是两个异步操作中耗时最长的耗时。 最后得到的结果是两个操作的结果组成的数组。我们只需要按照顺序取出数组中的值即可。作者：LinDaiDai_霖呆呆 链接：https://www.jianshu.com/p/13c5d002478b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 |
|
|
板凳#
发布于：2022-02-21 17:47
2.Object.entries() 2.1作用 将一个对象中可枚举属性的键名和键值按照二维数组的方式返回。 若对象是数组，则会将数组的下标作为键值返回。 Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]] Object.entries([1, 2]) //[['0', 1], ['1', 2]] 2.2要点 1.若是键名是Symbol，编译时会被自动忽略 Object.entries({[Symbol()]:1, two: 2}) //[['two', 2]] 2.entries()返回的数组顺序和for循环一样，即如果对象的key值是数字，则返回值会对key值进行排序，返回的是排序后的结果 Object.entries({ 3: 'a', 4: 'b', 1: 'c' }) //[['1', 'c'], ['3', 'a'], ['4', 'b']] 3.利用Object.entries()创建一个真正的Map var obj = { foo: 'bar', baz: 42 }; var map1 = new Map([['foo', 'bar'], ['baz', 42]]); //原本的创建方式 var map2 = new Map(Object.entries(obj)); //等同于map1 console.log(map1);// Map { foo: "bar", baz: 42 } console.log(map2);// Map { foo: "bar", baz: 42 } 2.3自定义Object.entries() Object.entries的原理其实就是将对象中的键名和值分别取出来然后推进同一个数组中 //自定义entries() var obj = { foo: 'bar', baz: 42 }; function myEntries(obj) { var arr = [] for (var key of Object.keys(obj)) { arr.push([key, obj[key]]) } return arr } console.log(myEntries(obj)) //Generator版本 function* genEntryies(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]] } } var entryArr = genEntryies(obj); console.log(entryArr.next().value) //["foo", "bar"] console.log(entryArr.next().value) //["baz", 42] 3.Object.values() 3.1作用 返回自己的键值对中属性的值。它返回的数组顺序，也跟Object.entries()保持一致 Object.values({ one: 1, two: 2 }) //[1, 2] Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b'] 3.2与Object.keys()比较 ES6中的Object.keys()返回的是键名 var obj = { foo: 'bar', baz: 42 }; console.log(Object.keys(obj)) //["foo", "baz"] console.log(Object.values(obj)) //["bar", 42] //Object.keys()的作用就类似于for...in function myKeys() { let keyArr = [] for (let key in obj1) { keyArr.push(key) console.log(key) } return keyArr } console.log(myKeys(obj1)) //["foo", "baz"] 3.3entries()、values()总结 var obj = { foo: 'bar', baz: 42 }; console.log(Object.keys(obj)) //["foo", "baz"] console.log(Object.values(obj)) //["bar", 42] console.log(Object.entries(obj)) //[["foo", "bar"], ["baz", 42]] 4.字符串填充 4.1padStart()和padEnd() 'Vue'.padStart(10) //' Vue' 'React'.padStart(10) //' React' 'JavaScript'.padStart(10) //'JavaScript' 4.2要点 1.填充函数只有在字符长度小于目标长度时才有效,而且目标长度如果小于字符串本身长度时，字符串也不会做截断处理，只会原样输出 'Vue'.padEnd(10, '_*') //'Vue_*_*_*_' 'React'.padEnd(10, 'Hello') //'ReactHello' 'JavaScript'.padEnd(10, 'Hi') //'JavaScript' 'JavaScript'.padEnd(8, 'Hi') //'JavaScript' https://www.jianshu.com/p/13c5d002478b |
|
