[轉(zhuǎn)帖]分享ES6 常用的幾個方法
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
1.什么是ES6 ？ESMAscript 6.0(以下簡稱 2.了解Babel轉(zhuǎn)碼器Babel是一個廣泛使用的 // 轉(zhuǎn)碼前 input.map(item => item + 1); // 轉(zhuǎn)碼后 input.map(function(item){ return item + 1; }) 上面的原始代碼用了箭頭函數(shù)， 我們也可以通過官方提供的REPL在線編譯器來體驗 3.變量的解構(gòu)賦值
3.1 數(shù)組的解構(gòu)賦值在之前；我們給變量賦值只能直接指定一個變量值 let a = 12; let b = 11; let c = 10; 在 let [a, b, c] = [1, 2, 3]; 上面的代碼表示，可以從數(shù)組中提取數(shù)值，按照對應(yīng)的位置，對變量賦值。本質(zhì)上，這種寫法屬于"匹配模式"，只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值，而解構(gòu)賦值允許指定的默認(rèn)值。 3.2 對象的解構(gòu)賦值對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值： 語法： const JsonData = { name: "小彭", id: 727, status: "OK", data: [867, 5309], otherData1: 18, otherData2: ['www', 'itsource', 'cn'], otherData3: { a: 1 } } console.log(JsonData.name,JsonData.id); 3.3 函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值；并且也一樣可以使用默認(rèn)值。函數(shù) function sum([a,b]){ return a + b; } sum([1,7]); 4.展開運(yùn)算符展開運(yùn)算符也叫擴(kuò)展運(yùn)算符。 語法： (...);
除此之外，擴(kuò)展運(yùn)算符也可以展開數(shù)組和對象；并且可以對數(shù)組和對象進(jìn)行淺拷貝、合并的功能；也可以將偽數(shù)組轉(zhuǎn)換為真數(shù)組。 5.模板字符串對于傳統(tǒng)的 $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 這種寫法相當(dāng)?shù)姆爆?，所以在ES6引入了模板字符串來解決繁瑣等的諸多問題。 $('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `); 模板字符串是增強(qiáng)版的字符串，用反引號 6.對象的簡潔寫法ES6中對象的屬性和方法都有簡寫形式。 它的寫法就是如果鍵名和鍵值的屬性名是一樣時，可以只寫一個。對于函數(shù)來說；可以省略 let name = "小彭"; let age = 22; let gender = "male"; let person = { name, age, gender, // 省略 冒號(:)和function hobby () { console.log("愛好和平"); }, color () { console.log("藍(lán)色"); } } console.log(person); 7.class7.1 class的由來在 // 類(構(gòu)造函數(shù)) function Person(name, age){ // 定義實例屬性 this.name = name; this.age = age; } // 添加原型方法 Person.prototype.show = function () { console.log("我是原型方法"); } // 創(chuàng)建實例對象 let per = new Person("花開富貴", 22); // 添加靜態(tài)方法。靜態(tài)方法是屬于類自己的，實例對象調(diào)用不了。 Person.say = function (){ console.log("我是靜態(tài)方法"); } 7.2 class的寫法
class Test{ // 一般固定的屬性會放在外層 eye = 2; leg = 2; constructor(name, age, gender){ this.name = name; this.age = age; this.gender = gender; } show () { console.log("原型方法"); } // 靜態(tài)方法 static () { console.log("靜態(tài)方法"); } } // 實例化對象 let obj = new Test("小彭", 22, "male"); console.log(obj); 7.3 class 繼承使用 繼承中的屬性或者方法查找原則：就近原則；先看自身有沒有這個屬性或者方法，有則用；如果沒有，則查找父類，若有，則用。 // 狗狗繼承動物 class Animal { //構(gòu)造器 eye = 2; constructor(name, age){ this.name = name; this.age = age; }
color () { console.log("毛發(fā)細(xì)潤呈白"); } static hobby() { console.log("躺平"); } }
class Dog extends Animal { // 構(gòu)造器 // ES6 要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)。 constructor(name,age) { super(name,age); } } let dogs = new Dog("富貴", 2); console.log(dogs); 8.ES6 模塊化什么是模塊化 ？ 一個 模塊功能主要由兩個命令構(gòu)成：
8.1 語法一導(dǎo)出/暴露：
導(dǎo)入：
步驟 ：
8.2 語法二語法二的引用過程和語法是一模一樣的。 導(dǎo)出： 導(dǎo)入： 使用
8.3 ES6 模塊化的優(yōu)勢寫法之外，相較于 靜態(tài)加載，也叫編譯時加載，它的好處是： （1）編譯時就能完成模塊加載，加載效率要比運(yùn)行時高得多； （2）使得「靜態(tài)分析」成為可能。有了它，就能進(jìn)一步拓寬 ————————————————————————— 該文章在 2023/5/25 17:24:34 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
