【分享】ES6常用特性

解构赋值

//对象
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

//数组
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

模板字符串

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

箭头函数

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

...扩展操作符

let obj1 = {
    book1: '葫芦娃1',
    book2: '葫芦娃2',
    book3:'葫芦娃3',
}
let obj2 = {
    ...obj1,
    book4:'葫芦金刚',
}
console.log(obj2) //{book1: "葫芦娃1", book2: "葫芦娃2", book3: "葫芦娃3", book4: "葫芦金刚"}

//如果后者与前者相同，后者覆盖前者
let obj1 = {
    book1: '葫芦娃1',
    book2: '葫芦娃2',
    book3:'葫芦娃3',
    book4: '葫芦金刚',
}
let obj2 = {
    ...obj1,
    book4: '葫芦金刚XL',
    book5: '蛇精',
}
console.log(obj2) //{book1: "葫芦娃1", book2: "葫芦娃2", book3: "葫芦娃3", book4: "葫芦金刚XL", book5: "蛇精"}

Promise

const promise = new Promise(function(resolve, reject) {
  //some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

ES7 awit/async

async function testSync() {
     const response = await new Promise(resolve => {
         setTimeout(() => {
             resolve("async await test...");
          }, 1000);
     });
     console.log(response);
}
testSync();//async await test...

//catch
async function catchErr() {
      try {
          const errRes = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject("http error...");
                 }, 1000);
           );
        } catch(err) {
             console.log(err);
        }
}
catchErr(); //http error...

Q.E.D.

Hi,Friend