【ES6】
一、什么是ES6
ES6（ECMAScript 6），簡單來說就是JavaScripe的標準。不在贅述ES5和ES6區別，可以使用Babel將ES6轉成ES5，提高可用性。
二、let和const命令
1、let和const命令聲明變量沒有變量提升，也就是說這種代碼是不能正常執行的。
<script> console.log(a); let a = 10; </script>
可以看到控制臺打印ReferenceError
ReferenceError: Cannot access 'a' before initialization at ImportAndExportView.vue:4:13
2、let和const命令是塊級作用域，對于也就是說變量a只在if塊中起作用。
<script> if (1 == 1) { let a = 10; } console.log(a); </script>
可以看到控制臺打印ReferenceError
main.js:14 ReferenceError: a is not defined
3、let和const命令不能重復聲明
4、const和let的區別在于const聲明常量，聲明之后對于基本屬性，值不變，對于對象，可以修改屬性。
一般來說，const使用的最多，除非確定是個變量，就使用let。
三、模板字符串
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量
<script> // 自動識別多行數據 console.log(`string text line 1 string text line 2`); // 字符串中嵌入表達式用$ let name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`); </script>
四、解構賦值
解構賦值是對賦值運算符的一種擴展，它針對數組和對象進行操作。
1、對對象進行解構賦值
<script> let cla = { type: "12", name: "name", }; // //不使用解構賦值 // let type = cla.type; // let name = cla.name; //使用解構賦值 let { type, name } = cla; console.log(type, name); //不完全解構 let obj = { a: { name: "123", }, b: [], c: "hello,world", }; // let { a } = obj; //省略變量 let { a, ...res } = obj; console.log(res); //使用默認值 let { x, b = 30 } = { x: 20 }; </script>
2、對數組解構賦值
<script> //對數組解構 let arr = [1, 2, 3]; // let [a, b] = arr; //可嵌套 let [a, [b]] = [1, [2], 3]; console.log(a, b); </script>
五、函數
1、帶參數默認值的函數
<script> //1設置默認參數 function add(a = 10, b = 20) { return a + b; } console.log(add()); //30 console.log(add(20)); //40 //2設置默認參數為函數 function add2(a = 10, b = getVal(5)) { return a + b; } function getVal(val) { return val + 5; } console.log(add2()); //20 //3剩余參數 //必須放在函數形參最后邊 let book = { title: "eeee", auth: "123", }; let { log } = console; log(pick(book, "title", "auth")); function pick(obj, ...keys) { console.log(keys); let result = Object.create(null); for (let i = 0; i < keys.length; i++) { result[keys[i]] = obj[keys[i]]; } return result; } </script>
六、擴展運算符、箭頭函數
<script> //擴展運算符 //剩余運算符允許把后續剩余參數合并到一個數組中 //擴展運算符 //把一個數組分割，并將各個項作為分離的參數 const arr = [10, 20, 30, 40, 50]; const { log } = console; // log(Math.max(...arr)); // 50 //箭頭函數 //使用=>定義函數 function(){} 等于 () => {} // let add = (a, b) => { // return a + b; // }; //有些括號可以省略 let add = (val) => val; log(add(3)); </script>
關于箭頭函數的this指向問題：
this 永遠指向 調用 包含 自己（this本身） 的 函數 對應的對象。舉個例子
<script> function test() { var a = 1; console.log(this.a); } test(); </script>
函數在最外層直接運行，調用test函數的地方是 window。因為外部window沒有變量a，所以會報以下錯誤：
TypeError: Cannot read properties of undefined (reading 'a')
再看一個例子
var name = 'China'; var obj = { name : 'America', show : function() { console.log(this.name) } } obj.show(); // America
調用函數的是obj對象，所以this指向obj對象，obj對象中有屬性‘name’，所以控制臺打印America。
再看一則例子：
var name = 'China'; var obj = { name : 'America', show : function() { return function(){ console.log(this.name); } } } var a = obj.show(); a(); // China
當a調用show方法時，a變量變成匿名函數。當調用a方法時，this指向window，那么window中的name值'China'，就被打印出來。
那么箭頭函數解決了關于this的什么問題呢？
<script> let PageHandle = { id: 123, init: function () { document.addEventListener("click", function (event) { // this.doSomeThings is not a function // console.log(this); this.doSomeThings(event.type); }); }, doSomeThings: function (type) { console.log(`事件類型:${type},當前id:${this.id}`); }, }; PageHandle.init(); </script>
這段代碼在點擊頁面時，會給出
Uncaught TypeError: this.doSomeThings is not a function at HTMLDocument.
這是因為調用this方法的類并非PageHandle，而是document。如果使用箭頭函數，就可以消解這個問題
<script> let PageHandle = { id: 123, init: function () { document.addEventListener("click", (event) => { // this.doSomeThings is not a function // console.log(this); this.doSomeThings(event.type); }); }, doSomeThings: function (type) { console.log(`事件類型:${type},當前id:${this.id}`); }, }; PageHandle.init(); </script>
這是因為箭頭函數沒有this指向，它會捕獲外部對象，所以this指向PageHandle。
七、迭代器Intertator用法
迭代器，又叫遍歷器，作用是遍歷不同數據結構，通常和生成器組合使用。
<script> const items = ["one", "two", "three"]; //創建新的迭代器 const it = items[Symbol.iterator](); console.log(it.next()); //{"value": "one","done": false} done 為false表示遍歷繼續，done為true表示遍歷完成 console.log(it.next()); console.log(it.next()); console.log(it.next()); // done 變為 true </script>
關于迭代器，在ES6中有語法糖for...of
浙公網安備 33010602011771號