什么是ES6
ECMAScript 6 簡稱ES6, 在2015年6月正式發布~ ECMAScript 是JavaScript語言的國際標准。
我們本着二八原則，掌握好常用的，有用的~能讓我們更快的上手~~~
1 聲明變量const let var
ES6以前 var關鍵字來聲明變量，無論聲明在何處都存在變量提升這個事情~~會提前創建變量~
作用域也只有全局作用域以及函數作用域~ 所以變量會提升在函數頂部或全局作用域頂部~
let 關鍵字表示變量，const 表示常量。都是塊級作用域，比如一個函數內部，代碼塊{}內部~
// 全局變量的提升 console.log(global) var global = "global" console.log(global) // 函數內變量的提升 function aa() { if(1){ var test = "test" } console.log(test) } function bb() { if(1){ let test ="test"; } console.log(test) } // 在for循環中 let var arry = []; for(var i = 0; i<10; i++){ console.log(i) arry[i] = function () { console.log(i) } } // 相當於 // var arry = []; // var i; // for(i = 0; i<10; i++){ // console.log(i) // arry[i] = function () { // console.log(i) // } // } arry[5]() const name = "gaoxin"; const name = "隨意" // 報錯
2 模板字符串
ES6引入了反引號``, 來看看它的神奇之處吧~~~
<body> <div id="head"> </div> <script> // 模板字符串進行標簽字符串的拼接一行搞定 let ele = ` <div> <h1>模板字符串</h1> <p>動態添加</p> </div> `; let ele_div = document.getElementById("head"); console.log(ele_div) ele_div.innerHTML= ele; // 將表達式嵌入字符串 let a = 10; let b = 5; console.log(`結果是：${ a + b }, ${ a * b}`) </script> </body>
3 函數
箭頭函數，是函數的快捷寫法，類比Python的匿名函數 lambda。
最直觀的三個特點
-- 不需要function關鍵字來創建函數
-- 省略return關鍵字
-- 繼承當前上下文的this關鍵字（因為箭頭函數的調用者是當前上下文，跟普通函數區別開）
// ES6 x => x+1 // 等同於 function test(x) { return x+1 }
// 函數在哪里調用了 才決定this到底引用的是誰~~~ // 最后一個調用函數的對象才是傳到函數里的上下文對象this~~~ console.log(this) function test() { console.log(this) }; let obj = { a: 1, test: test, }; let obj2 = { b: 3, obj: obj, }; obj.test(); test(); obj2.obj.test();
4 import 和 export
import 導入模塊、export導出模塊
// main.js // 導出多個聲明 export var name = "gaoxin" export var age = "18" export function aa() { return 1 } // 批量導出 export {name, age, aa} // test.js import {name, age, aa} from "./main" console.log(name) console.log(age) console.log(aa()) // 整個模塊導入 把模塊當做一個對象 // 該模塊下所有的導出都會作為對象的屬性存在 import * as obj from "./main" console.log(obj.name) console.log(obj.age) console.log(obj.aa())
// 一個模塊只能有一個默認導出 // 對於默認導出 導入的時候名字可以不一樣 // main.js var app = new Vue({ }); export default app // test.js // import app from "./main" import my_app from "./main"
5 數據解構
數據的解構類似於我們python里面的**解包
const people = { name: "提莫", age: 2, }; const person = ["瑞文", "刀妹"] const { name, age } = people console.log(name) console.log(age) const [name1, name2] = person console.log(name1) console.log(name2)
6 class extends super
ES6 引入了關鍵字class來定義一個類，constructor是構造方法，this代表實例對象。
類之間通過extends繼承，繼承父類的所有屬性和方法。
super關鍵字，它代指父類的this對象，子類必須在constructor中調用super()方法，
否則新建實例時會報錯，因為子類沒有自己的this對象。調用super()得到this，才能進行修改。
class Animal{ constructor(){ this.type = "animal" } says(say){ console.log(this.type + "says" + say ) } } let animal = new Animal() animal.says("hello") class Dog extends Animal{ constructor(){ super(); this.type = "dog"; } } let dog = new Dog() dog.says("hello")
~~其實ES6的特性遠不止於此，有興趣的可以自己查看文檔~~
~~ 待更新~~~