剛開始用vue，很多時候我們都會把ES6這位大兄dei加入我們的技術棧中。但是ES6那麼多那麼多特性，我們真的需要全部都掌握嗎？掌握好常用的、有用的這個可以讓我們的開發快速起飛。

接下來我們就聊聊ES6基礎常用的知識的總結。

es6中的宣告變數的方式：

// let
// 1. let宣告變數不可以進行重複宣告
// 2. let宣告的變數有塊級作用域


// const
// 宣告的叫做常量
// 1. const宣告變數不可以進行重複宣告
// 2. const宣告頁有塊級作用域
// 3. const宣告的變數不能被修改值
// 4. const宣告變數的時候必須賦一個初始值！


// const a;
// console.log(a);
 



// for (let i = 0; i < 10; i++){
//     setTimeout(function () { 
//         console.log(i);
//     }, 0)
// }


// let a = 10;
// let a = 100;
// console.log(a);

// if (true) {
//     let a = 10;
// }

// console.log(a);


// const obj = {
//     name: "小芳",
//     age: 18
// }

// obj.age = 19;

es6中物件的簡寫形式：

沒有簡寫的形式
let name = "jack"

//
 
 let obj = {
//     name: name,
//     sing: function () { 
//         console.log("love！！")
//     }
// }
// 1. 屬性簡寫  如果屬性名和後面的屬性值的變數名同名，就可以寫成一個
// let obj = {
//     name
// }
// 2. 方法簡寫 
let obj = {
    sing () { 
        console.log("帶MV的神話！！！")
    }
}

es6中的解構賦值:

// let obj = {
//     name: "jack",
//     age: 30
// }

// let name = obj.name;
 

// let age = obj.age;

// 解構賦值

// let {物件的屬性名: 要宣告的變數名} = 物件
// 就會自動宣告一個變量出來，變數的值就是物件中對應的屬性的值

// let { name: name1 } = obj;

// console.log(name1);


// let {物件的屬性名: 要宣告的變數名} = 物件
// 如果 物件的屬性名 和要宣告的變數名同名 可以簡寫成一個
// let { name, age } = obj;
// let { name： name, age: age } = obj;
// console.log(name, age);

// import { 要匯入的內容， 要匯入的內容 } from "模組"



// function test({name, age}) {
//     console.log(name, age)
// }

// test(obj);


// let arr = [1, 2, 3, 4];

// let num1 = arr[0]
// let num2 = arr[1]
// let num3 = arr[2]
// let num4 = arr[3]

// let [num1, num2, num3, num4] = arr;

// let [,,,num4] = arr;

// console.log(num4);


// let arr = [[1, 2], [3, 4]];

// let [[num1, num2], [num3, num4]] = arr;

// console.log(num1, num2,num3, num4)

es6中箭頭函式:

let func = function () { 

}

// 在es中函式表示式的寫法可以使用箭頭函式

// let f = (引數列表) => {
//     // 函式體
// }

// let sayHi = () => {
//     console.log("Hello jack");
// }

// sayHi();


// 箭頭函式的簡寫形式：
// 1. 如果箭頭函式的引數列表中只有一個引數, 那麼引數的()可以省略
// let double = (a) => {
//     console.log(a * 2);
// }

//簡寫如下
// let double = a => {
//     console.log(a * 2);
// }

// double(10);

// 2. 如果箭頭函式的函式體只有一句程式碼，那麼函式體的{}可以被省略
// let func = () => {
//     console.log("Hey jack");
// }
// 簡寫如下
// let func = () => console.log("Hey jack");

// let triple = (a) => {
//     console.log(a * 3);
// }
//簡寫如下
// let triple = a => console.log(a * 3);

// triple(10);

// 3. 如果箭頭函式的函式體只有一句程式碼，並且這句程式碼是返回語句，那麼return和{}都可以省略
// let sum = (a, b) => {
//     return a + b;
// }

//簡寫如下
// let sum = (a, b) => a + b;

// console.log(sum(1, 2));


// let square = a => a * a;


// let func = _ => {

// }

箭頭函式中的this說明:

// 平時確定一個函式中的this是誰，我們需要通過呼叫模式來確定
// 1. 函式呼叫模式  this ---> window   函式名()
// 2. 方法呼叫模式  this ---> 呼叫方法的物件  物件.方法名()
// 3. 建構函式呼叫模式 this ---> 創建出來的例項  new 函式名()
// 4. 上下文呼叫模式   this ---> call和apply的第一個引數  函式名.call()

// bind

// 箭頭函式中沒有this
// 如果在箭頭函式中使用this, 會向上一級作用域中進行查詢this

// let func = () => {
//     console.log(this);
// }

// func();

// let obj = {
//     name: "jack",
//     sayHello() {
//         let func = () => {
//             console.log(this);
//         }
//         func();
//     }
// }

// obj.sayHello();


// 之前使用var that = this的場景全都可以使用箭頭函式來解決了

// let obj = {
//     name: "jack",
//     sayHello() {
//         var that = this;
//         setTimeout(function () { 
//             console.log("我叫" + that.name)
//         }, 1000)
//     }
// }

// let obj = {
//     name: "jack",
//     sayHello() {
//         setTimeout(() => { 
//             console.log("我叫" + this.name)
//         }, 1000)
//     }
// }

// obj.sayHello();

之後陸陸續續把整個es6涵蓋的知識整理出來，歡迎評論，留言，一起交流