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