ES6詳解

let和const

let a=12;

let a=5;

alert(a); 

// Uncaught SyntaxError: Identifier 'a' has already been declared

const a=12;

a=5;

alert(a);

// Uncaught TypeError: Assignment to constant variable.

塊級作用域

if (true) {
    let a = 23;
}
alert(a);

// Uncaught ReferenceError: a is not defined

 

解構賦值

let {a,b,c}={a: 12, b: 55, c: 99}; 

let [a,b,c]=[12,5,8];

 

箭頭函數

document.onclick=ev=>{

    alert(ev.clientX+','+ev.clientY);

};

 

let sum=(a,b)=>a+b;

alert(sum(12, 88)); // 100

當箭頭函數不加{}時， 箭頭後的表達式默認爲返回值

 

剩餘參數

function show(a, b, ...arr){
    console.log(a, b, arr);
}

show(12,5,44,7,85,34,33);

 

 function show(a, b, ...arr, c){
    console.log(a, b, arr, c);
 }
 show(12,5,44,7,85,34,33);

// Uncaught SyntaxError: Rest parameter must be last formal parameter

數組展開

let arr=[12,5,8,99,27];

console.log(...arr)

// 12 5 8 99 27

 

map

let arr=[100, 98, 37, 28, 19, 96, 56, 67];
    
let res=arr.map(item=>item>=60);

console.log(arr, res); 

// [100, 98, 37, 28, 19, 96, 56, 67]
// [true, true, false, false, false, true, false, true];

forEach

let arr=[12, 5, 8, 99];

arr.forEach((item, index)=>{
  //alert('第'+index+'個：'+item);
  console.log(`第${index}個：${item}`);
});

// 第0個：12
// 第1個：5
// 第2個：8
// 第3個：99

filter

let arr=[12, 88, 19, 27, 82, 81, 100, 107];

let arr2=arr.filter(item=>item%2==0);

// [12, 88, 19, 27, 82, 81, 100, 107]

// [12, 88, 82, 100]

reduce

let arr=[12, 66, 81, 92];

let res=arr.reduce(function (tmp, item, index){
  console.log(`第${index}次，${tmp}+${item}`);
  return tmp+item;
});
console.log(res)
// 第1次 12 + 66
// 第2次 78 + 81
// 第3次 159 + 92
// 251

注意： 循環次數爲arr.length -1 並且index 從1開始

 

let arr=[12, 66, 81, 92];

let res=arr.reduce((tmp, item, index)=>{
  if(index<arr.length-1){
    return tmp+item;
  }else{
    return (tmp+item)/arr.length;
  }
});

alert(res);
// 取平均值

startsWith endsWidth

let url='http://www.bing.com/a';

console.log(url.startsWith("http://"));// true

console.log(url.endsWith("com/a")); // true

promise

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve("小於0.5")
    }else{
      reject("不小於0.5")
    }
  })
})
p1.then(res => {
  console.log('res', res)
}, err => {
  console.log('err', err)
})
// res 小於0.5 or err 不小於0.5

理解下這個代碼

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      console.log(11)
      resolve("小於0.5")

    }else{
      console.log(1111)
      reject("不小於0.5")
    }
  })
})
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      console.log(22)
      resolve("小於0.5")
    }else{
      console.log(2222)
      reject("不小於0.5")
    }
  },1000)
})
let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      console.log(33)
      resolve("小於0.5")
    }else{
      console.log(3333)
      reject("不小於0.5")
    }
  }, 2000)
})
Promise.all([p1, p2, p3]).then(([data1, data2, data3]) => {
  console.log(1, data1, data2, data3)
}, (err) => {
  console.log(2, err)
})

Promise.race([p1, p2, p3]).then(err => {
  console.log(3, err)
}, (err) => {
  console.log(4, err)
})

async await

// 首先
async function show () {
  return 1;
}

// 等同於
async function show () {
    return Promise.resolve(1);
}

// async 是返回promise對象， 即使return在值不是promise對象， async函數會自動包裝成promise對象

// 其次

show();
console.log(2);
// 最終先輸出2 在輸出1
// async 修飾的函數式異步函數

// await 用法

async function show () {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("success");
        }, 1000)
    })
    
    let result = await promise;
    console.log(res)
    console.log(2)
}


// 注意 當上述代碼resolve 改成reject時
async function f() {
    await Promise.reject(new Error('whoops!'))
}

// 此時 相當於
async function f() {
    throw new Error('Whoops!')
} 

// 因此 修改代碼

async function f() {
    try {
        let response = await fetch('http://no-such-url')
    } catch (err) {
        alet(err) // TypeError: failed to fetch
    }
}

 

總結一下

放在一個函數前的async有兩個作用：
1.使函數總是返回一個promise
2.允許在這其中使用await

promise前面的await關鍵字能夠使JavaScript等待，直到promise處理結束。然後：
1.如果它是一個錯誤，異常就產生了，就像在那個地方調用了throw error一樣。
2.否則，它會返回一個結果，我們可以將它分配給一個值