前端--ES6入門

前言：臨時接手前端小程序，需補充下ES6用法

一.let 與 const

1. let 聲明的變量只在 let 命令所在的代碼塊內有效。
2. const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變。
3. for 循環計數器很適合用 let
4. const 聲明一個只讀變量，聲明之後不允許改變。意味着，一旦聲明必須初始化，否則會報錯

二.解構賦值

1. 解構賦值是對賦值運算符的擴展。

1. 數組模型解構

1. 基本

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

2. 解構默認值：當解構模式有匹配結果，且匹配結果是 undefined 時，會觸發默認值作爲返回結果

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

2. 對象模型解構

1. 基本

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

2. 解構默認值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

三. Symbol

四. Map和Set

五. Reflect 與 Proxy

1. Proxy 與 Reflect 是 ES6 爲了操作對象引入的 API 。
2. Proxy 可以對目標對象的讀取、函數調用等操作進行攔截，然後進行操作處理。它不直接操作對象，而是像代理模式，通過對象的代理對象進行操作，在進行這些操作時，可以添加一些需要的額外操作

六. 字符串

1. 子串的識別
2. 字符串重複
3. 字符串補全(拼接)
4. 模板字符串

//字符串插入變量和表達式。
let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

七. 數值

1. 各種處理數值的方法

八. 對象

1. ES6允許對象的屬性直接寫變量，這時候屬性名是變量名，屬性值是變量值。

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同於
const person = {age: age, name: name}

2. 方法名可以簡寫

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//等同於
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"

九. 數組

1. 數組的各類方法

十.函數

1. 默認參數

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

2. 只有在未傳遞參數，或者參數爲 undefined 時，纔會使用默認參數，null 值被認爲是有效的值傳遞。

function fn(name,age=17){
    console.log(name+","+age);
}
fn("Amy",null); // Amy,null

3. 箭頭函數 ：
   (1) .箭頭函數提供了一種更加簡潔的函數書寫方式。基本語法是：

參數 => 函數體

(2). 基本用法

var f = (a,b) => a+b;
f(6,2);  //8

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

(3). 當箭頭函數要返回對象的時候，爲了區分於代碼塊，要用 () 將對象包裹起來

// 報錯
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
// 不報錯
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

4. ES6 之前，JavaScript 的 this 對象一直很令人頭大，回調函數，經常看到 var self = this 這樣的代碼，爲了將外部 this 傳遞到回調函數中，那麼有了箭頭函數，就不需要這樣做了，直接使用 this 就行。

// 回調函數
var Person = {
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
Person.sayHello();  // 20
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18

十一.迭代器

1. 迭代器

十二.Class類

1. class類

十三.模塊

1. 模塊

十四.Promise 對象

1. Promise 對象

十五.Generator 函數

1. Generator 函數

十六.async 函數

1. async 函數