普歌-飞灵团队-ES6汇总
生活随笔
收集整理的這篇文章主要介紹了
普歌-飞灵团队-ES6汇总
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
ES6新特性
- 一、let
- 二、const
- 三、變量的解構(gòu)賦值
- 四、模板字符串
- 五、簡(jiǎn)化對(duì)象寫(xiě)法
- 六、箭頭函數(shù)
- 七、rest 參數(shù)
- 八、擴(kuò)展運(yùn)算符
- 九、Symbol
- 十、迭代器
- 十一、生成器
- 十 二、Promise
- Promise封裝讀取文件
- Promise.prototype.then 方法
- 案例-讀取多個(gè)文件
- Promise.prototype.catch 方法
- 十三、Set
- 十四、Map
- 十五、class 類
- 靜態(tài)成員
- 類繼承
- get和set
- 十六、數(shù)值擴(kuò)展
- 十七、對(duì)象擴(kuò)展
- 十八、模塊化
- 好處：
- 語(yǔ)法：
~喜歡 的小伙伴點(diǎn)個(gè)贊收藏下唄，謝謝?~
一、let
let 關(guān)鍵字用來(lái)聲明變量，使用 let 聲明的變量有幾個(gè)特點(diǎn)：
應(yīng)用場(chǎng)景：以后聲明變量使用 let 就對(duì)了
二、const
const 關(guān)鍵字用來(lái)聲明常量，const 聲明有以下特點(diǎn)：
ps：對(duì)于對(duì)象屬性和數(shù)組元素的修改, 不算做對(duì)常量的修改, 不會(huì)報(bào)錯(cuò)
應(yīng)用場(chǎng)景：聲明對(duì)象或數(shù)組類型使用 const，非對(duì)象數(shù)組類型聲明選擇 let
三、變量的解構(gòu)賦值
ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，稱為解構(gòu)賦值。
// 數(shù)組的解構(gòu)賦值 const xhd = ['蘇有朋', '吳奇隆', '陳志朋']; let [ su, wu, chen ] = xhd; // 對(duì)象的解構(gòu)賦值 const guo = {name: '郭德綱',age: '47',xiangsheng: function () {console.log("我可以說(shuō)相聲");}}; let { name, age, xiangsheng } = guo; xiaopin();ps：頻繁使用對(duì)象方法、數(shù)組元素，可以使用解構(gòu)賦值
四、模板字符串
模板字符串是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)，特點(diǎn)有：
ps：當(dāng)遇到字符串與變量拼接的情況使用模板字符串
五、簡(jiǎn)化對(duì)象寫(xiě)法
ES6 允許在大括號(hào)里面，直接寫(xiě)入變量和函數(shù)，作為對(duì)象的屬性和方法。這樣的書(shū)寫(xiě)更加簡(jiǎn)潔。
let name = '騰訊游戲'; let change = function(){console.log('沒(méi)錢(qián)玩?zhèn)€錘子!!'); }const school = {name,change,pay(){console.log("充錢(qián)使你更強(qiáng)");} }總之，簡(jiǎn)寫(xiě)就對(duì)了
六、箭頭函數(shù)
ES6 允許使用 箭頭（=>）定義函數(shù)
// 格式 let fn = (a,b) => {return a + b; } // 調(diào)用函數(shù) let result = fn(1, 2);注意點(diǎn)：
ps:箭頭函數(shù)不會(huì)更改this指向，用來(lái)指定回調(diào)函數(shù)會(huì)非常合適
七、rest 參數(shù)
ES6 引入 rest 參數(shù)，用于獲取函數(shù)的實(shí)參，用來(lái)代替 arguments
// ES5 獲取實(shí)參的方式function date(){console.log(arguments);}date('giao','嗷力給','淦');// rest 參數(shù)function date2(...args){console.log(args);// filter some every map}date2('giao','嗷力給','淦');// rest 參數(shù)必須要放到參數(shù)最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6);ps:rest參數(shù)非常適合不定個(gè)數(shù)參數(shù)函數(shù)的場(chǎng)景
八、擴(kuò)展運(yùn)算符
『…』 擴(kuò)展運(yùn)算符能將數(shù)組轉(zhuǎn)換為逗號(hào)分隔的參數(shù)序列，對(duì)數(shù)組進(jìn)行解包，好比 rest 參數(shù)的逆運(yùn)算
// 展開(kāi)數(shù)組const she = ['Selina','Hebe','Ella'];function superstar(){console.log(arguments);}superstar(...she);// chunwan('Selina','Hebe','Ella')// 1. 數(shù)組的合并const kuaizi = ['王太利','肖央'];const fenghuang = ['曾毅','玲花'];// ES5數(shù)組合并// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];// 2. 數(shù)組的克隆const tuhai = ['8','5','7'];const sanyecao = [...tuhai];// ['8','5','7']//3. 將偽數(shù)組轉(zhuǎn)為真正的數(shù)組const divs = document.querySelectorAll('div');const divArr = [...divs];九、Symbol
ES6 引入了一種新的原始數(shù)據(jù)類型 Symbol，表示獨(dú)一無(wú)二的值。
它是JavaScript 語(yǔ)言的第七種數(shù)據(jù)類型，是一種類似于字符串的數(shù)據(jù)類型。
特點(diǎn)：
（１）Symbol的值是唯一的，用來(lái)解決命名沖突的問(wèn)題
（２）Symbol值不能與其他數(shù)據(jù)進(jìn)行運(yùn)算
（３）Symbol定義的對(duì)象屬性不能使用for…in循環(huán)遍歷，但是可以使用Reflect.ownKeys 來(lái)獲取對(duì)象的所有鍵名
ps:遇到唯一性的場(chǎng)景時(shí)要想到 Symbol
Symbol向?qū)ο笾刑砑訉傩院头椒ǖ姆绞?/font>
// 向?qū)ο笾刑砑臃椒?up downlet game = {name:'俄羅斯方塊',up: function(){},down: function(){}};// 聲明一個(gè)對(duì)象let methods = {up: Symbol(),down: Symbol()};game[methods.up] = function(){console.log("我可以改變形狀");}game[methods.down] = function(){console.log("我可以快速下降!!");}// 調(diào)用game[methods.up]();game[methods.down](); let youxi = {name:"狼人殺",[Symbol('say')]: function(){console.log("我可以發(fā)言")},[Symbol('zibao')]: function(){console.log('我可以自爆');}}Symbol 內(nèi)置值
除了定義自己使用的 Symbol 值以外，ES6 還提供了 11 個(gè)內(nèi)置的 Symbol 值，指向語(yǔ)言內(nèi)部使用的方法，它們會(huì)在特定的場(chǎng)景下自動(dòng)執(zhí)行。
| Symbol.hasInstance | 當(dāng)其他對(duì)象使用 instanceof 運(yùn)算符，判斷是否為該對(duì)象的實(shí)例時(shí)，會(huì)調(diào)用這個(gè)方法 |
| Symbol.isConcatSpreadable | 對(duì)象的 Symbol.isConcatSpreadable 屬性等于的是一個(gè)布爾值，表示該對(duì)象用于 Array.prototype.concat()時(shí)，是否可以展開(kāi)。 |
| Symbol.species | 創(chuàng)建衍生對(duì)象時(shí)，會(huì)使用該屬性 |
| Symbol.match | 當(dāng)執(zhí)行 str.match(myObject) 時(shí)，如果該屬性存在，會(huì)調(diào)用它，返回該方法的返回值 |
| Symbol.replace | 當(dāng)該對(duì)象被 str.replace(myObject)方法調(diào)用時(shí)，會(huì)返回該方法的返回值 |
| Symbol.search | 當(dāng)該對(duì)象被 str.search (myObject)方法調(diào)用時(shí)，會(huì)返回該方法的返回值 |
| Symbol.split | 當(dāng)該對(duì)象被 str.split(myObject)方法調(diào)用時(shí)，會(huì)返回該方法的返回值 |
| Symbol.iterator | 對(duì)象進(jìn)行 for…of 循環(huán)時(shí)，會(huì)調(diào)用 Symbol.iterator 方法，返回該對(duì)象的默認(rèn)遍歷器 |
| Symbol.toPrimitive | 該對(duì)象被轉(zhuǎn)為原始類型的值時(shí)，會(huì)調(diào)用這個(gè)方法，返回該對(duì)象對(duì)應(yīng)的原始類型值 |
| Symbol. toStringTag | 在該對(duì)象上面調(diào)用 toString 方法時(shí)，返回該方法的返回值 |
| Symbol. unscopables | 該對(duì)象指定了使用 with 關(guān)鍵字時(shí)，哪些屬性會(huì)被 with環(huán)境排除 |
十、迭代器
迭代器就是一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作。
（1）ES6 創(chuàng)造了一種新的遍歷命令 for…of 循環(huán)，Iterator 接口主要供 for…of 消費(fèi)
(for…in遍歷保存鍵名，for…of遍歷保存鍵值)
（2）原生具備 iterator 接口的數(shù)據(jù)(可用 for of 遍歷)
- . Array
- Arguments
- Set
- Map
- String
- TypedArray
- NodeList
（3）工作原理
１. 創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
２. 第一次調(diào)用對(duì)象的 next 方法，指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
３. 接下來(lái)不斷調(diào)用 next 方法，指針一直往后移動(dòng)，直到指向最后一個(gè)成員
４.每調(diào)用 next 方法返回一個(gè)包含 value 和 done 屬性的對(duì)象
自定義遍歷數(shù)據(jù)
//聲明一個(gè)對(duì)象const banji = {name: "giao",stus: ['yahou','zmsn','huohua','nosmoking'],[Symbol.iterator]() {//索引變量let index = 0;return {next: () => {if (index < this.stus.length) {const result = {value: this.stus[index], done: false};//下標(biāo)自增index++;//返回結(jié)果return result;} else {return {value: undefined, done: true};}}};}}//遍歷這個(gè)對(duì)象for (let v of banji) {console.log(v);}十一、生成器
生成器函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同，是一種特殊的函數(shù)。
function * gen(){// console.log(111);yield '一只沒(méi)有耳朵';// console.log(222);yield '一只沒(méi)有尾部';// console.log(333);yield '真奇怪';// console.log(444);}let iterator = gen();console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());//遍歷// for(let v of gen()){// console.log(v);// }說(shuō)明：
十 二、Promise
Promise 是 ES6 引入的異步編程的新解決方案。語(yǔ)法上 Promise 是一個(gè)構(gòu)造函數(shù)，用來(lái)封裝異步操作并可以獲取其成功或失敗的結(jié)果，解決回調(diào)地獄。
//實(shí)例化 Promise 對(duì)象 const p = new Promise(function(resolve, reject){setTimeout(function(){//let data = '數(shù)據(jù)庫(kù)中的用戶數(shù)據(jù)';resolve(data);// let err = '數(shù)據(jù)讀取失敗';// reject(err);}, 1000); });//調(diào)用 promise 對(duì)象的 then 方法 p.then(function(value){console.log(value); }, function(reason){console.error(reason); })Promise封裝讀取文件
//1. 引入 fs 模塊 const fs = require('fs');//2. 調(diào)用方法讀取文件 // fs.readFile('./resources/為學(xué).md', (err, data)=>{ // //如果失敗, 則拋出錯(cuò)誤 // if(err) throw err; // //如果沒(méi)有出錯(cuò), 則輸出內(nèi)容 // console.log(data.toString()); // });//3. 使用 Promise 封裝 const p = new Promise(function(resolve, reject){fs.readFile("./resources/為學(xué).md", (err, data)=>{//判斷如果失敗if(err) reject(err);//如果成功resolve(data);}); });p.then(function(value){console.log(value.toString()); }, function(reason){console.log("讀取失敗!!"); });Promise.prototype.then 方法
then方法的返回結(jié)果是 Promise 對(duì)象, 對(duì)象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定
//創(chuàng)建 promise 對(duì)象 const p = new Promise((resolve, reject)=>{// 異步任務(wù)setTimeout(()=>{resolve('用戶數(shù)據(jù)');// reject('出錯(cuò)啦');}, 1000) });// 調(diào)用 then 方法 const result = p.then(value => {console.log(value);//1. 非 promise 類型的屬性, 狀態(tài)為成功, 返回值為對(duì)象的成功的值return 'iloveyou';//2. promise 對(duì)象return new Promise((resolve, reject)=>{// resolve('ok');reject('error');});//3. 拋錯(cuò)// throw new Error('fuck!');throw '出錯(cuò)啦!'; }, reason=>{console.warn(reason); });鏈?zhǔn)秸{(diào)用
p.then(value=>{}).then(value=>{});案例-讀取多個(gè)文件
//引入 fs 模塊 const fs = require("fs");// 回調(diào)地獄 // fs.readFile('./resources/為學(xué).md', (err, data1)=>{ // fs.readFile('./resources/插秧詩(shī).md', (err, data2)=>{ // fs.readFile('./resources/觀書(shū)有感.md', (err, data3)=>{ // let result = data1 + '\r\n' +data2 +'\r\n'+ data3; // console.log(result); // }); // }); // });// Promise const p = new Promise((resolve, reject) => {fs.readFile("./resources/為學(xué).md", (err, data) => {resolve(data);}); });p.then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/七步詩(shī).md", (err, data) => {resolve([value, data]);});}); }).then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/游園不值.md", (err, data) => {//壓入value.push(data);resolve(value);});}) }).then(value => {console.log(value.join('\r\n')); });Promise.prototype.catch 方法
catch方法指定的回調(diào)函數(shù)捕獲promise拋出的錯(cuò)誤
const p = new Promise((resolve, reject)=>{setTimeout(()=>{//設(shè)置 p 對(duì)象的狀態(tài)為失敗, 并設(shè)置失敗的值reject("怎么搞的!");}, 1000) });// p.then(function(value){}, function(reason){ // console.error(reason); // });p.catch(function(reason){console.warn(reason); });十三、Set
??????ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set（集合）。它類似于數(shù)組，但成員的值都是唯一的，集合實(shí)現(xiàn)了 iterator 接口，所以可以使用『擴(kuò)展運(yùn)算符』和『for…of…』進(jìn)行遍歷，集合的屬性和方法：
當(dāng)然，集合還可以數(shù)組去重、交集、并集、差集
let arr = [1,2,3,4,5,4,3,2,1];//1. 數(shù)組去重// let result = [...new Set(arr)];// console.log(result);//2. 交集let arr2 = [4,5,6,5,6];// let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));// console.log(result);//3. 并集// let union = [...new Set([...arr, ...arr2])];// console.log(union);//4. 差集let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));console.log(diff);十四、Map
??????ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象，也是鍵值對(duì)的集合。但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。Map 也實(shí)現(xiàn)了iterator 接口，所以可以使用『擴(kuò)展運(yùn)算符』和『for…of…』進(jìn)行遍歷。Map 的屬性和方法：
十五、class 類
??????ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class這個(gè)概念，作為對(duì)象的模板。通過(guò) class 關(guān)鍵字，可以定義類。基本上，ES6 的 class 可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。
//手機(jī)function Phone(brand, price){this.brand = brand;this.price = price;}//添加方法Phone.prototype.call = function(){console.log("我可以打電話!!");}//實(shí)例化對(duì)象let Huawei = new Phone('華為', 5999);Huawei.call();console.log(Huawei);//classclass Shouji{//構(gòu)造方法 名字不能修改constructor(brand, price){this.brand = brand;this.price = price;}//方法必須使用該語(yǔ)法, 不能使用 ES5 的對(duì)象完整形式call(){console.log("我可以打電話!!");}}let onePlus = new Shouji("1+", 1999);console.log(onePlus);靜態(tài)成員
1.實(shí)例對(duì)象沒(méi)有構(gòu)造函數(shù)對(duì)象的屬性和方法，兩者之間是不通的，和構(gòu)造函數(shù)的原型對(duì)象是相通的
2.函數(shù)對(duì)象里的屬性是屬于函數(shù)對(duì)象的，并不屬于實(shí)例對(duì)象，對(duì)于這樣的屬性稱之為靜態(tài)成員
class
// 類 class Phone{//靜態(tài)屬性static name = '手機(jī)';static change(){console.log("我可以改變世界");} }// 實(shí)例對(duì)象 let nokia = new Phone(); console.log(nokia.name); // undefined console.log(Phone.name); // 手機(jī)static標(biāo)注的屬性和方法屬于類，不屬于實(shí)例對(duì)象
類繼承
// ES5function Phone(brand, price){this.brand = brand;this.price = price;}Phone.prototype.call = function(){console.log("我可以打電話");}// 智能手機(jī)function SmartPhone(brand, price, color, size){// 繼承父類Phone.call(this, brand, price);this.color = color;this.size = size;}//設(shè)置子級(jí)構(gòu)造函數(shù)的原型SmartPhone.prototype = new Phone;SmartPhone.prototype.constructor = SmartPhone;// 聲明子類的方法SmartPhone.prototype.photo = function(){console.log("我可以拍照")}SmartPhone.prototype.playGame = function(){console.log("我可以玩游戲");}const huawei = new SmartPhone('華為',2499,'黑色','5.5inch');console.log(huawei);class繼承和方法重寫(xiě)
// ES6class Phone{// 構(gòu)造方法constructor(brand, price){this.brand = brand;this.price = price;}// 父類的成員屬性call(){console.log("我可以打電話!!");}}class SmartPhone extends Phone {// 構(gòu)造方法constructor(brand, price, color, size){super(brand, price);// 相當(dāng)于Phone.call(this, brand, price)this.color = color;this.size = size;}photo(){console.log("拍照");}playGame(){console.log("玩游戲");}// 方法的重寫(xiě)call(){console.log('我可以進(jìn)行視頻通話');}}const xiaomi = new SmartPhone('小米',1999,'黑色','4.7inch');// console.log(xiaomi);xiaomi.call();xiaomi.photo();xiaomi.playGame();get和set
get通常對(duì)對(duì)象的動(dòng)態(tài)屬性進(jìn)行封裝，set可以進(jìn)行控制和判斷是否合法
// get 和 set class Phone{get price(){console.log("價(jià)格屬性被讀取了");return 'iloveyou';}set price(newVal){console.log('價(jià)格屬性被修改了');}}//實(shí)例化對(duì)象let s = new Phone();// console.log(s.price);s.price = 'free';十六、數(shù)值擴(kuò)展
ES6 提供了二進(jìn)制和八進(jìn)制數(shù)值的新的寫(xiě)法，分別用前綴 0b 和 0o 表示。
正數(shù)返回1，負(fù)數(shù)返回-1，零返回0
十七、對(duì)象擴(kuò)展
十八、模塊化
模塊化是指將一個(gè)大的程序文件，拆分成許多小的文件，然后將小文件組合起來(lái)。
好處：
防止命名沖突、代碼復(fù)用、高維護(hù)性
語(yǔ)法：
模塊功能主要由兩個(gè)命令構(gòu)成：export 和 import。
export 命令用于規(guī)定模塊的對(duì)外接口, import 命令用于輸入其他模塊提供的功能.
有什么問(wèn)題歡迎大家在評(píng)論區(qū)討論o~?
- 作者：風(fēng)時(shí)摩羯
- 出處/源自：風(fēng)時(shí)摩羯的《普歌-飛靈團(tuán)隊(duì)-ES6匯總》
- 本文版權(quán)歸作者和CSDN共有，歡迎轉(zhuǎn)載，且在文章頁(yè)面明顯位置給出原文鏈接，未經(jīng)作者同意必須保留此段聲明，否則保留追究法律責(zé)任的權(quán)利。
總結(jié)
以上是生活随笔為你收集整理的普歌-飞灵团队-ES6汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 解决SQL Server2017的sa用
- 下一篇： 如何快速创建k8syaml文件模板