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。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const 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, undefined
console.log('c' in p, p.c); // false, 37
打印 p 对象: