关于前端:ES6-相关

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 对象：