當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

笔记 - ES6 - 学前浅析

發布時間：2023/11/27 生活经验 28 豆豆

生活随笔收集整理的這篇文章主要介紹了笔记 - ES6 - 学前浅析小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第01節：初識ES6

　　● 兼容性：IE10+，Chrome，FireFox，NodeJS，移動端。

　　● 編譯、轉換：

　　　　1.在線轉換：每次打開頁面都需要轉換；

　　　　2.提前編譯：例如Babel。

　　● ES6主要的改進和新特性涵蓋：

　　　　1.變量；

　　　　2.函數；

　　　　3.數組；

　　　　4.字符串；

　　　　5.面向對象；

　　　　6.Promise；

　　　　7.generator；

　　　　8.模塊化；

　　　　……

第02節：變量——let和const

　　● 使用var聲明變量的弊端：

　　　　1.可以重復聲明；

　　　　2.無法限制修改；

　　　　3.沒有塊級作用域。

　　● 使用let和const聲明的變量都不能重復聲明，并且都支持塊級作用域。例如：

let a = 10;
let a = 100；
alert(a);//報錯，提示a重復定義；

　　　　塊作用域示例：

if(true){let a = 10;     
}
alert(a);//報錯，提示a未定義，證明無法訪問到if語句中的a變量；

　　● 使用let和const聲明的變量的區別是：let聲明和定義的變量可以修改，而const聲明的變量其實是常量，一旦定義便不能修改。例如：

const a = 10; 
a = 100; 
alert(a);//報錯，提示不能修改；

第03節：函數——箭頭函數

　　● 據說修正了this指向……基本用法：

window.onload = function () {alert('test'); 
};
//使用箭頭函數簡寫后：
window.onload = () => {alert('test');
}

　　● 記住規律就好辦：

　　　　1.如果只有一個參數（沒有不行，多了不行），()可以省。

　　　　2.如果只有一個返回值（沒有不行，多了不行），{}可以省。

　　　　3.箭頭函數簡化過程示例：

let fn = function (a) {return a*2;
};
//基本簡寫：
let fn = (a) => {return a*2;
};
//只有一個參數，()可以省：
let fn = a => {return a*2;
};
//只有一個返回值，{}可以省：
let fn = a => a*2;

第04節：函數——參數

　　● 使用...來進行參數擴展或數組展開：

　　　　1.參數擴展可以收集剩余的參數，剩余參數（Rest Parameter）的名稱可自定義，但位置必須是形參列表的最后一個。例如：

function test(a, b, ...args){alert(a);alert(b);alert(args);  
}
test(10, 15, 20, 25, 30, 35, 40);//先彈出對應形參a的10，再彈出對應形參b的15，最后彈出對應形參args的由剩余參數組成的數組。

　　　　2.數組展開，展開后的效果就相當于把數組內容填在相應位置。例如：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];//其實就相當于把arr1和arr2的內容寫在對應位置；
alert(arr3);//1,2,3,4,5,6；
function test(a, b, c) {alert(a + b + c);
}
test(...arr1);//6，就是把arr1數組的前三個元素分別對應給3個形參，滿足3個形參位置外剩余的元素如果沒有位置接收就會被舍棄；

　　　　3.參數擴展與數組展開結合使用示例：

function foo(...args) {//將所有傳入的參數收集為一個數組；bar(...args);//將收集的參數數組展開并傳入；
}
function bar(a, b) {alert(a + b);
}
foo(10, 15, 20, 25);//25，但已將所有參數收集為數組，只不過能使用的是前兩位；

　　● 默認參數，非常簡單，直接將參數默認值賦值給形參即可；當有實參傳入時，使用傳入值，沒有實參傳入時，使用默認值。例如：

function test(a, b = 10, c = 15){console.log(a, b, c);
}
test(5);//5,10,15，實參只對應到第一個形參a，函數的其他參數便使用了默認值；
test(5, 20, 30);//5,20,30，實參全部對應且值與默認值不同，便將參數默認值覆蓋使用。

第05節：解構賦值

　　● 解構就是將一個結構拆開，解構賦值主要使用對象是數組和JSON對象。

　　● 解構賦值的使用條件：

　　　　1.賦值符左右的數據，結構必須相同。例如：

let [a, b, c] = [1, 2, 3];//左右都是數組；
let {d, e, f} = {d:4, e:5, f:6};//左右都是JSON對象；
console.log(a, b, c, d ,e, f);//1 2 3 4 5 6，正常的解構，并且賦值成功；
let [json, [n1, n2, n3], str, num] = [{foo: 'bar', bar: 'foo'}, [1, 2, 3], 'ok', 100];
console.log(json, n1, n2, n3, str, num);//Object(bar: "foo" foo: "bar") 1 2 3 "ok" 100；只要等號兩邊結構相同并對應即可賦值成功；

　　　　錯誤的示例：

let [a, b] = {a:12, b: 24};//左右結構不同；
console.log(a, b);//報錯，無法賦值；

　　　　2.賦值符右邊必須是合法數據。例如：

let{a, b} = {12, 24}//左右結構貌似是一樣的，但右邊的是JSON嗎？并不是，沒有鍵值對，數據非法；
console.log(a, b);//報錯，無法賦值；

　　　　3.聲明和賦值必須同時完成。例如：

let [a, b];
[a, b] = [12, 24];
console.log(a, b);//報錯，無法完成解構賦值。

第06節：數組

　　● 新增方法之map：稱為映射，通俗來講就是一個對一個。例如：

let arr1 = [1, 2, 3, 4];
let result1 = arr1.map(item => item * 3);//將數組內每個元素作為參數傳入并分別乘以3，然后將對應的結果返回為一個數組；
alert(result1);//3,6,9,12；
let arr2 = [59, 90, 75, 88, 55];
let result2 = arr2.map(score => score >= 60 ? '及格' : '不及格');//將數組內每個元素作為參數傳入并分別進行三目運算，然后將相應的結果返回為一個數組；
alert(result2);//不及格,及格,及格,及格,不及格；

　　● 新增方法之reduce：稱為匯總，通俗來講就是一堆出來一個。

　　　　1.方法解析：

arr.reduce(function (temp, item, index){});
//從數組第1個元素開始，temp是上一輪temp與item之間的處理結果，第1輪temp為第1個元素，item表示當前輪次處理的元素，index表示item的下標，也可理解為輪次，最終返回最后一輪的結果。

　　　　2.使用reduce方法求數組平均值的示例：

let arr = [45, 235, 3115, 2345, 15];
let result = arr.reduce((temp, item, index) => {if (index !== arr.length - 1) {//如果不是最后一輪就繼續累加；return temp + item;} else {return (temp + item) / arr.length;//如果是最后一輪便將最終累加值除以數組長度求出平均數；}
});
alert(result);//1151；

　　● 新增方法之filter：稱為過濾器，使用此方法可以篩選滿足條件的數組元素并將這些元素返回為一個新數組。

　　　　1.使用filter方法過濾5的整數倍：

let arr = [43, 235, 3115, 2346, 15];
let result = arr.filter(item => {if (item % 5 === 0) {//滿足被5整除的條件便返回，不滿足的默認被丟棄；return true;}
});
//可簡寫為let result = arr.filter(item => item % 5 === 0);
alert(result);//235,3115,15；

　　　　2.使用filter方法過濾數組內JSON對象的示例：

let goods = [{name: '手機', price: 3000},{name: '相機', price: 5500},{name: '飛機', price: 10000000},{name: '電機', price: 12000},{name: '扳機', price: 400}
];
let result = goods.filter(json => json.price > 5000);
console.log(result);//Array(3)0: {name: "相機", price: 5500}1: {name: "飛機", price: 10000000}2: {name: "電機", price: 12000}；

　　● 新增方法之forEach：稱為迭代（循環）。例如：

let arr = [43, 235, 3115, 2346, 15];
arr.forEach((item, index) => {//參數index可選，就是元素下標，這個方法會遍歷每一個數組元素；alert(index + ':' + item);//依次彈出下標和對應元素的值；
});

第07節：字符串

　　● 新增方法之startsWith：此方法返回一個布爾值，如果字符串是以指定字符串開頭，便返回true，反之則反。例如：

let str = 'https://www.baidu.com';
if (str.startsWith('http://')) {alert('普通網址');
} else if (str.startsWith('https://')) {alert('加密網址');//結果為加密網址；
} else if (str.startsWith('git://')) {alert('git地址');
} else {alert('其他');
}

　　● 新增方法之endsWith：與startsWith類似，此方法判斷的是字符串結尾。例如：

let str = 'abc.jpg';
if (str.endsWith('.txt')) {alert('文本文件');
} else if (str.endsWith('.mp3')) {alert('音樂文件');
} else if (str.endsWith('.jpg')) {alert('圖片文件');//結果為圖片文件；
} else {alert('其他');
}

　　● 字符串模板，使用一對反單引號`將字符串模板括起來；可以使用${data}直接將所需數據填入字符串中，并且可以方便的換行。例如：

let title = '標題';
let content = '內容';
let str = `<div><h1>${title}</h1>//將變量的值直接調用顯示到指定位置；<p>${content}</p></div>`;

第08節：面向對象——基礎

　　● 創建類的新模式：

　　　　1.新增class關鍵字，新增了constructor構造器，類和構造函數分開了；

　　　　2.方法直接在class中添加。

　　● 繼承關鍵字：

　　　　1.extends：繼承父類方法；

　　　　2.super：繼承父類（超類）構造器；

　　　　3.原先的構造函數和繼承的實現方法示例：

//創建People類的構造函數；
function People(name, age) {this.name = name;this.age = age;
}
//創建People類的方法；
People.prototype.showName = function () {alert(this.name);
};
People.prototype.showAge = function () {alert(this.age);
};
//創建Student類的構造函數；
function Student(name, age, num) {People.call(this, name, age);//通過call方法繼承People類的屬性；this.num = num;
}
//創建Student類的方法；
Student.prototype = new People();//通過將原型指向People類的實例繼承方法；
Student.prototype.constructor = Student;
Student.prototype.showNum = function () {alert(this.num);
};
//創建Student類的實例并執行其方法；
var stu = new Student('lucy', 18, 10086);
stu.showName();
stu.showAge();
stu.showNum();

　　　　4.在ES6中，使用新的方式實現上面的代碼示例：

//創建People類；
class People {//構造器；constructor(name, age) {this.name = name;this.age = age;}//添加方法；showName() {alert(this.name);}showAge() {alert(this.age);}
}
//創建Student類并指定父類為People類，此時已經繼承父類擁有的方法；
class Student extends People {//構造器；constructor(name, age, num) {super(name, age);//繼承父類屬性this.num = num;}//添加方法；showNum() {alert(this.num);}
}
//創建Student類的實例并執行其方法；
let stu = new Student('jim', 19, 10010);
stu.showName();
stu.showAge();
stu.showNum();

第09節：面向對象——實例

　　● 使用React進行練習，了解React的兩大特點：

　　　　1.組件化（或稱模塊化），即Class；

　　　　2.強依賴于JSX，即Babel（browser.js）。

　　● 在React中使用組件的基本方法：

class Item extends React.Component {//每個組件都繼承自這個內置組件；constructor(...args) {//構造器的所有參數都收集起來；super(...args);//將收集的參數數組展開至父類繼承，這樣傳入的屬性只要父類有便會繼承；};render() {//每個組件必須有這個渲染方法，并且這個方法必須有可渲染的返回值；//return <span>test content</span>;//最簡單的渲染標簽；return <li>{this.props.str}</li>;//使用{}插入代碼塊，將需要的數據添加于此，例如這行代碼中是將li的自定義屬性值使用原型調用并添加到標簽里；};
}class List extends React.Component {//利用上面的組件疊加實現一些功能；constructor(...args) {super(...args);};render() {//獲取自定義屬性中的數組并映射為相應的組件，再添加到ul標簽中，最后使用List組件渲染到頁面；return <ul>{this.props.arr.map(elem => <Item str={elem}></Item>)}</ul>;};
}window.onload = function () {let oDiv = document.getElementById('div1');ReactDOM.render(//在React中，使用字符串和表達式都可以傳參，但只有使用表達式才能傳字符串以外的數據；<List arr={['abc', '123', 'qwe', 'sna', 'jiu']></List>,//在這個方法中，將組件用標簽的形式引用至此，便可在目標標簽oDiv中顯示；oDiv);
}

第10節：JSON對象

　　● 關于JSON對象轉換的幾種方法：

　　　　1.串行化：

let json = {a: 12, b: 15};
let str = JSON.stringify(json);//使用JSON類下的stringify方法使JSON對象字符串化；
alert(str);//{"a":12,"b":15}
//順便記一下將字符串轉換為URI組件編碼的方法；
let url = 'http://www.abc.com/path/user?data=' + encodeURIComponent(str);
alert(url);//http://www.abc.com/path/user?data=%7B%22a%22%3A12%2C%22b%22%3A15%7D；

　　　　2.將字符串解析為JSON對象：

let str1 = '{a: 5, b: 15, c: "abc"}';
let str2 = '{"a": 5, "b": 15, "c": "abc"}';
//let json1 = JSON.parse(str1);
//console.log(json1);//報錯了，無法解析，因為判斷str1不能解析為JSON對象，這是因為寫法不規范；
let json2 = JSON.parse(str2);
console.log(json2);//正常打印出了JSON對象；
//JSON對象的標準寫法是：鍵值對上只能使用雙引號，而且所有的鍵名（key）必須使用雙引號括起來。又一個在JS中使用單引號比較好的理由……

　　● 關于JSON的簡寫：當鍵和值與引用數據一樣時，可以只寫鍵名；在JSON對象內部，方法可以像class中一樣的方式簡寫。例如：

let a = 10;
let b = 20;
let json1 = {a: 10,b: 20,c: 30,show: function () {alert(this.c);}
};
//上面的寫法等價于：
let json2 = {a, b, c: 30,show() {alert(this.c);}
};

第11節：Promise對象

　　● 異步與同步的特點：

　　　　1.異步：各操作之間沒有關系，可同時進行多個操作，但代碼更復雜，寫起來很麻煩；

　　　　2.同步：同時只能進行一個操作，但代碼簡單，好寫。

　　● 使用Promise就是為了消除異步操作，用寫同步的方式來寫異步代碼；但是它不適合用來處理帶邏輯處理的異步請求。

　　　　1.基本用法：

let p = new Promise(function (resolve, reject) {//resolve代表請求成功執行的函數，reject表示請求失敗執行的函數；//異步代碼，這里使用了jQuery封裝的AJAX；$.ajax({url: 'data/json.txt',dataType: 'json',success(arr) {resolve(arr);},error(err) {reject(err);}});
});p.then(function (res) {//將返回的數據傳入后使用；alert('成功');console.log(res);
}, function (err) {//將返回的錯誤信息傳入后使用；alert('失敗');console.log(err);
});//封裝創建Promise對象的函數大概如此：
function createPromise({url, dataType}) {//將需要請求的文件地址和數據類型以JSON格式傳入參數；return new Promise(function (resolve, reject) {//直接將文件請求實例返回出去；$.ajax({url,//這里直接調用傳入的文件地址即可；dataType,//數據類型也一樣，直接調用；success(arr) {resolve(arr);},error(err) {reject(err);}});});
}

　　　　2.請求多個數據，1.8版本以上的jQuery中已經封裝了創建Promise實例的函數，可以拿來創建Promise對象并使用Promise的all方法來進行文件的請求，例如：

Promise.all([//接收一個數組參數，就是文件請求列表，別忘了是一個數組，別把方括號丟了，不然死活出不來；$.ajax({url: 'data/arr.txt', dataType: 'json'}),//利用jQuery的AJAX請求返回的Promise對象進行傳參；$.ajax({url: 'data/json.txt', dataType: 'json'})
]).then(results => {//如果全部請求成功，則返回請求到的結果組成的數組；let [arr, json] = results;//可利用解構賦值將結果數組拆解，并分別存入指定變量以供使用；alert('成功了');console.log(arr);console.log(json);
}, err => {//如果至少有一個請求失敗，便會轉入此函數內，并將錯誤信息傳入；alert('失敗了');console.log(err);
});

　　　　3.在Promise中還有一個race方法，這個方法的作用是同時請求不同位置的相同數據，哪個數據最先響應并完成讀取，便使用哪個數據，一般用的比較少。

第12節：Generator函數

　　● 和普通函數不同的是，Generator函數（生成器）可以指定暫停；通俗來講它可以踹一腳走一步……基本用法：

function* show() {//特點是在function后加*號，也可以貼函數名寫；alert('a');yield;//需要在指定位置添加暫停執行命令；alert('b');
}
//show();//生成器不能被執行，需要使用它返回的生成器對象來驅動；
let genObj = show();//接收創建的生成器對象以供驅使；
genObj.next();//踹一腳，執行第1個alert；
genObj.next();//再踹一腳，執行第2個alert；

　　● 使用Generator函數，可在下步操作所需數據到位前暫停函數，等數據到位后再執行之后的操作，目的也是為了方便異步請求；其本質是將一個大函數分解為若干小函數。

　　● 在Generator函數中，yield既可以傳參，也可以返回數據。例如：

function* test(num) {//為第一個yield之前的代碼傳參要在默認位置傳入；alert(num);let a = yield;//這里的yield將接收執行它之后代碼塊的next方法傳入的參數；alert(a);yield a += 1000;//這里的yield將值返回給它之前代碼塊對應的next方法；return 'ok';//
}let genObj = test(123);//默認傳參要在生成器對象之前；genObj.next();//執行第1塊代碼，彈出結果123；
let b = genObj.next(456);//執行第2塊代碼，參數被第1個yield接收，并彈出結果456，將第2個yield的返回值接收賦值給b變量；
console.log(b);//Object{done:false,value:1456}，done是函數狀態，值為false表示函數未執行完成，這里value的值則是yield發出的返回值；
let c = genObj.next();//執行第3塊代碼，將return發出的返回值接收并賦值給c變量；
console.log(c);//Object{done:true,value:'ok'}，done是函數狀態，值為true表示函數已執行完成，這里value的值則是return發出的返回值；

　　● 同是解決異步請求，Generator比Promise好的地方是：Generator配合runner組件更適合帶邏輯操作的異步請求，而Promise更適合不做邏輯處理而一并讀取的多個數據請求。

第13節：展望ES7和ES8

　　● 數組：

　　　　1.includes方法：檢索數組內是否包含為指定數據的元素，包含則返回true，反之則反。例如：

let arr = [1, 2, 3, 4, 5, 6];
alert(arr.includes(3));//true；
alert(arr.includes(9));//false；

　　　　2.for...of/in和keys、values、entries：

　　　　for...in循環的是數組的元素下標，JSON對象的key值，而for...of循環的是數組的元素值，但無法用于JSON對象，因為JSON對象不是可迭代對象；

　　　　arr.keys對應對象所有的下標；arr.values對應對象所有的元素；arr.entries對應對象的所有的實體（entry），即鍵值對實體（格式為key, value）。

　　● 冪：兩個*號疊加就是求冪，例如：

//傳統方法：
alert(Math.pow(3, 8));//求3的8次方，6561；
//新方法，源自Python：
alert(4**4);//求4的4次方，256；

　　● 字符串填充方法padStart和padEnd:使用指定字符在字符串之前或之后填充，使字符串滿足指定位數，不指定字符串便默認使用空格填充。例如：

let str1 = '1234';
let str2 = '5678';
alert(str1.padStart(10,'0'));//0000001234，從開頭填充至10位，空余位使用0填充；
alert(str2.padEnd(10,'0'));//5678000000，從末尾填充至10位，空余位使用0填充；

　　● 用async和await代替generator和yield：不再依賴runner組件（原生自帶）就能實現原來generator配合組件的功能，而且能寫成箭頭函數；標準統一，更易用，性能更高。

完成。

轉載于:https://www.cnblogs.com/battlehawk/p/7682710.html

總結

以上是生活随笔為你收集整理的笔记 - ES6 - 学前浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。