ES6基礎整理(1)
阿新 • • 發佈:2018-12-14
剛開始用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涵蓋的知識整理出來,歡迎評論,留言,一起交流