標籤：變數提升 rom 對象 app 全域 htm anim 構造方法 struct
什麼是ES6ECMAScript 6 簡稱ES6, 在2015年6月正式發布~ ECMAScript 是JavaScript語言的國際標準。
我們本著二八原則，掌握好常用的，有用的~能讓我們更快的上手~~~
1 聲明變數const let varES6以前 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 = "隨意" // 報錯var let const2 模板字串
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關鍵字（因為箭頭函數的調用者是當前上下文，跟普通函數區別開）
// ES6x => 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();內容相關的this4 import 和 export
import 匯入模組、export匯出模組
// main.js// 匯出多個聲明export var name = "gaoxin"export var age = "18"export function aa() { return 1}// 大量匯出export {name, age, aa}// test.jsimport {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.jsvar 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 } = peopleconsole.log(name)console.log(age)const [name1, name2] = personconsole.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")class extends super
ES6 常用文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
