1. 解构赋值
解构赋值 语法是一种 Javascript 表达式。通过解构赋值, 能够将属性/值从对象/数组中取出,赋值给其余变量:
const [name, { ball }] = ["wang", { ball: 45, study: 75 }];console.log(name, ball); // wang 45
上述办法解构除了用户姓名和 ball 的得分;
残余运算符 解构出对象剩下的局部:
let [name, ...rest] = ["wang", { ball: 45, study: 75 }];console.log(name, rest);
扩大运算符 将数组和对象剥离进去,可用于浅拷贝:
let wang = ["wang", { ball: 45, study: 75 }];let wangClone = [...wang];wang[0] = "li";console.log(wangClone, wang); // (2) ['wang', {…}] (2) ['li', {…}]
2. 箭头函数
箭头函数表达式的语法比函数表达式更简洁,并且没有本人的this,arguments,super或new.target。箭头函数表达式更实用于那些原本须要匿名函数的中央,并且它不能用作构造函数。
// ES5var x = function(x, y) { return x * y;} // ES6const x = (x, y) => x * y;
如果只有一条语句能够同时省略 {} 和 return,须要留神的是同时省略。
3. Promise
Promise 结构器次要用于包装不反对promise(返回值不是Promise)的函数。
const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('foo'); }, 300);});promise1.then((value) => { console.log(value); // expected output: "foo"});console.log(promise1);// expected output: [object Promise]
利用 Promise 简略实现 axios
function myAsyncFunction(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open("GET", url) xhr.onload = () => resolve(xhr.responseText) xhr.onerror = () => reject(xhr.statusText) xhr.send() });}
Promise.all
const promise1 = Promise.resolve(3);const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 200, 'wo');});const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo');});Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values);});// expected output: Array [3, "wo", "foo"]
这个Promise的resolve回调执行是在所有输出的promise的resolve回调都完结,或者输出的iterable里没有promise了的时候。它的reject回调执行是,只有任何一个输出的promise的reject回调执行或者输出不非法的promise就会立刻抛出谬误,并且reject的是第一个抛出的错误信息。
Promise.race
const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one');});const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two');});Promise.race([promise1, promise2]).then((value) => { console.log(value); // Both resolve, but promise2 is faster});// expected output: "two"
Promise.race(iterable) 办法返回一个 promise,一旦迭代器中的某个promise解决或回绝,返回的 promise就会解决或回绝。
4. Proxy
在以下简略的例子中,当对象中不存在属性名时,默认返回值为 37。上面的代码以此展现了 get handler 的应用场景。
// 定义代理策略const handler = { get: function(obj, prop) { return prop in obj ? obj[prop] : 37; }};const p = new Proxy({}, handler);p.a = 1;p.b = undefined;console.log(p.a, p.b); // 1, undefinedconsole.log('c' in p, p.c); // false, 37
打印 p 对象: