ES6新特性

• • 一、let
  • 二、const
  • 三、變量的解構賦值
  • 四、模板字符串
  • 五、簡化對象寫法
  • 六、箭頭函數
  • 七、rest 參數
  • 八、擴展運算符
  • 九、Symbol
  • 十、迭代器
  • 十一、生成器
  • 十 二、Promise
  • • Promise封裝讀取文件
    • Promise.prototype.then 方法
    • 案例-讀取多個文件
    • Promise.prototype.catch 方法
  • 十三、Set
  • 十四、Map
  • 十五、class 類
  • • 靜態成員
    • 類繼承
    • get和set
  • 十六、數值擴展
  • 十七、對象擴展
  • 十八、模塊化
  • • 好處：
    • 語法：

~喜歡 的小伙伴點個贊收藏下唄，謝謝?~

一、let

let 關鍵字用來聲明變量，使用 let 聲明的變量有幾個特點：

不允許重復聲明

塊兒級作用域

不存在變量提升（不允許在聲明變量前使用）

不影響作用域鏈

應用場景：以后聲明變量使用 let 就對了

二、const

const 關鍵字用來聲明常量，const 聲明有以下特點：

必須要賦初始值

一般常量使用大寫（潛規則）

不允許重復聲明

常量的值不能修改

塊兒級作用域

ps：對于對象屬性和數組元素的修改, 不算做對常量的修改, 不會報錯

應用場景：聲明對象或數組類型使用 const，非對象數組類型聲明選擇 let

三、變量的解構賦值

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，稱為解構賦值。

// 數組的解構賦值 const xhd = ['蘇有朋', '吳奇隆', '陳志朋']; let [ su, wu, chen ] = xhd; // 對象的解構賦值 const guo = {name: '郭德綱',age: '47',xiangsheng: function () {console.log("我可以說相聲");}}; let { name, age, xiangsheng } = guo; xiaopin();

ps：頻繁使用對象方法、數組元素，可以使用解構賦值

四、模板字符串

模板字符串是增強版的字符串，用反引號（`）標識，特點有：

字符串中可以出現換行符

// 定義字符串let str = `<ul><li>沈騰</li><li>瑪麗</li><li>魏翔</li><li>艾倫</li> </ul>`;

變量拼接

let lovest = '無情'; let out = `${lovest}哈拉少!!`;

ps：當遇到字符串與變量拼接的情況使用模板字符串

五、簡化對象寫法

ES6 允許在大括號里面，直接寫入變量和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。

let name = '騰訊游戲'; let change = function(){console.log('沒錢玩個錘子!!'); }const school = {name,change,pay(){console.log("充錢使你更強");} }

總之，簡寫就對了

六、箭頭函數

ES6 允許使用 箭頭（=>）定義函數

// 格式 let fn = (a,b) => {return a + b; } // 調用函數 let result = fn(1, 2);

注意點：

this 是靜態的. this 始終指向函數聲明時所在作用域下的 this 的值

不能作為構造實例化對象

不能使用 arguments 變量

如果形參只有一個，則小括號可以省略

let fn2 = num => {return num * 10; };

代碼體如果只有一條語句，則大括號可以省略，return 必須省略，函數的返回值為該條語句的執行結果

let pow = n => n * n;

ps:箭頭函數不會更改this指向，用來指定回調函數會非常合適

七、rest 參數

ES6 引入 rest 參數，用于獲取函數的實參，用來代替 arguments

// ES5 獲取實參的方式function date(){console.log(arguments);}date('giao','嗷力給','淦');// rest 參數function date2(...args){console.log(args);// filter some every map}date2('giao','嗷力給','淦');// rest 參數必須要放到參數最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6);

ps:rest參數非常適合不定個數參數函數的場景

八、擴展運算符

『…』 擴展運算符能將數組轉換為逗號分隔的參數序列，對數組進行解包，好比 rest 參數的逆運算

// 展開數組const she = ['Selina','Hebe','Ella'];function superstar(){console.log(arguments);}superstar(...she);// chunwan('Selina','Hebe','Ella')// 1. 數組的合并const kuaizi = ['王太利','肖央'];const fenghuang = ['曾毅','玲花'];// ES5數組合并// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];// 2. 數組的克隆const tuhai = ['8','5','7'];const sanyecao = [...tuhai];// ['8','5','7']//3. 將偽數組轉為真正的數組const divs = document.querySelectorAll('div');const divArr = [...divs];

九、Symbol

基本使用
　　ES6 引入了一種新的原始數據類型 Symbol，表示獨一無二的值。
　　它是JavaScript 語言的第七種數據類型，是一種類似于字符串的數據類型。
特點：
　（１）Symbol的值是唯一的，用來解決命名沖突的問題
　（２）Symbol值不能與其他數據進行運算
　（３）Symbol定義的對象屬性不能使用for…in循環遍歷，但是可以使用Reflect.ownKeys 來獲取對象的所有鍵名

　// 創建Symbollet s = Symbol();// console.log(s, typeof s);// 添加標識的Symbollet s2 = Symbol('嘿嘿嘿');let s3 = Symbol('嘿嘿嘿');// Symbol.for創建let s4 = Symbol.for('啦啦啦');let s5 = Symbol.for('啦啦啦');

ps:遇到唯一性的場景時要想到 Symbol

Symbol向對象中添加屬性和方法的方式

// 向對象中添加方法 up downlet game = {name:'俄羅斯方塊',up: function(){},down: function(){}};// 聲明一個對象let methods = {up: Symbol(),down: Symbol()};game[methods.up] = function(){console.log("我可以改變形狀");}game[methods.down] = function(){console.log("我可以快速下降!!");}// 調用game[methods.up]();game[methods.down](); let youxi = {name:"狼人殺",[Symbol('say')]: function(){console.log("我可以發言")},[Symbol('zibao')]: function(){console.log('我可以自爆');}}

Symbol 內置值

除了定義自己使用的 Symbol 值以外，ES6 還提供了 11 個內置的 Symbol 值，指向語言內部使用的方法，它們會在特定的場景下自動執行。

Symbol值介紹

Symbol.hasInstance	當其他對象使用 instanceof 運算符，判斷是否為該對象的實例時，會調用這個方法
Symbol.isConcatSpreadable	對象的 Symbol.isConcatSpreadable 屬性等于的是一個布爾值，表示該對象用于 Array.prototype.concat()時，是否可以展開。
Symbol.species	創建衍生對象時，會使用該屬性
Symbol.match	當執行 str.match(myObject) 時，如果該屬性存在，會調用它，返回該方法的返回值
Symbol.replace	當該對象被 str.replace(myObject)方法調用時，會返回該方法的返回值
Symbol.search	當該對象被 str.search (myObject)方法調用時，會返回該方法的返回值
Symbol.split	當該對象被 str.split(myObject)方法調用時，會返回該方法的返回值
Symbol.iterator	對象進行 for…of 循環時，會調用 Symbol.iterator 方法，返回該對象的默認遍歷器
Symbol.toPrimitive	該對象被轉為原始類型的值時，會調用這個方法，返回該對象對應的原始類型值
Symbol. toStringTag	在該對象上面調用 toString 方法時，返回該方法的返回值
Symbol. unscopables	該對象指定了使用 with 關鍵字時，哪些屬性會被 with環境排除

十、迭代器

迭代器就是一種機制。它是一種接口，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作。
　　（1）ES6 創造了一種新的遍歷命令 for…of 循環，Iterator 接口主要供 for…of 消費
　　 　　　(for…in遍歷保存鍵名，for…of遍歷保存鍵值)
　　（2）原生具備 iterator 接口的數據(可用 for of 遍歷)

• . Array
• Arguments
• Set
• Map
• String
• TypedArray
• NodeList
  （3）工作原理
  　　１. 創建一個指針對象，指向當前數據結構的起始位置
  　　２. 第一次調用對象的 next 方法，指針自動指向數據結構的第一個成員
  　 　３. 接下來不斷調用 next 方法，指針一直往后移動，直到指向最后一個成員
  　 　４.每調用 next 方法返回一個包含 value 和 done 屬性的對象

// 聲明一個數組const xiyou = ['唐僧','孫悟空','豬八戒','沙僧'];// 創建一個指針對象let iterator = xiyou[Symbol.iterator]();// 調用對象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());

自定義遍歷數據

//聲明一個對象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};//下標自增index++;//返回結果return result;} else {return {value: undefined, done: true};}}};}}//遍歷這個對象for (let v of banji) {console.log(v);}

十一、生成器

生成器函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同，是一種特殊的函數。

function * gen(){// console.log(111);yield '一只沒有耳朵';// console.log(222);yield '一只沒有尾部';// 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);// }

說明：

** 的位置沒有限制

生成器函數返回的結果是迭代器對象，調用迭代器對象的 next 方法可以得到 yield 語句后的值

yield 相當于函數的暫停標記，也可以認為是函數的分隔符，每調用一次 next方法，執行一段代碼

next 方法可以傳遞實參，作為 yield 語句的返回值

// 生成器函數參數function * gen(arg){console.log(arg); // AAAlet one = yield 111;console.log(one); // BBBlet two = yield 222;console.log(two); // CCClet three = yield 333;console.log(three); // DDD}//執行獲取迭代器對象let iterator = gen('AAA');console.log(iterator.next());//next方法可以傳入實參console.log(iterator.next('BBB'));console.log(iterator.next('CCC'));console.log(iterator.next('DDD'));

十 二、Promise

Promise 是 ES6 引入的異步編程的新解決方案。語法上 Promise 是一個構造函數，用來封裝異步操作并可以獲取其成功或失敗的結果，解決回調地獄。

//實例化 Promise 對象 const p = new Promise(function(resolve, reject){setTimeout(function(){//let data = '數據庫中的用戶數據';resolve(data);// let err = '數據讀取失敗';// reject(err);}, 1000); });//調用 promise 對象的 then 方法 p.then(function(value){console.log(value); }, function(reason){console.error(reason); })

Promise封裝讀取文件

//1. 引入 fs 模塊 const fs = require('fs');//2. 調用方法讀取文件 // fs.readFile('./resources/為學.md', (err, data)=>{ // //如果失敗, 則拋出錯誤 // if(err) throw err; // //如果沒有出錯, 則輸出內容 // console.log(data.toString()); // });//3. 使用 Promise 封裝 const p = new Promise(function(resolve, reject){fs.readFile("./resources/為學.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方法的返回結果是 Promise 對象, 對象狀態由回調函數的執行結果決定

//創建 promise 對象 const p = new Promise((resolve, reject)=>{// 異步任務setTimeout(()=>{resolve('用戶數據');// reject('出錯啦');}, 1000) });// 調用 then 方法 const result = p.then(value => {console.log(value);//1. 非 promise 類型的屬性, 狀態為成功, 返回值為對象的成功的值return 'iloveyou';//2. promise 對象return new Promise((resolve, reject)=>{// resolve('ok');reject('error');});//3. 拋錯// throw new Error('fuck!');throw '出錯啦!'; }, reason=>{console.warn(reason); });

鏈式調用

p.then(value=>{}).then(value=>{});

案例-讀取多個文件

//引入 fs 模塊 const fs = require("fs");// 回調地獄 // fs.readFile('./resources/為學.md', (err, data1)=>{ // fs.readFile('./resources/插秧詩.md', (err, data2)=>{ // fs.readFile('./resources/觀書有感.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/為學.md", (err, data) => {resolve(data);}); });p.then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/七步詩.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方法指定的回調函數捕獲promise拋出的錯誤

const p = new Promise((resolve, reject)=>{setTimeout(()=>{//設置 p 對象的狀態為失敗, 并設置失敗的值reject("怎么搞的!");}, 1000) });// p.then(function(value){}, function(reason){ // console.error(reason); // });p.catch(function(reason){console.warn(reason); });

十三、Set

??????ES6 提供了新的數據結構 Set（集合）。它類似于數組，但成員的值都是唯一的，集合實現了 iterator 接口，所以可以使用『擴展運算符』和『for…of…』進行遍歷，集合的屬性和方法：

size 返回集合的元素個數

add 增加一個新元素，返回當前集合

delete 刪除元素，返回 boolean 值

has 檢測集合中是否包含某個元素，返回 boolean 值

clear 清空集合，返回 undefined

//聲明一個 set let s = new Set(); let s2 = new Set(['1','2','3','4','2']);// 元素個數 // console.log(s2.size); // 添加新的元素 // s2.add('5'); // 刪除元素 // s2.delete('4'); // 檢測 // console.log(s2.has('6')); // 清空 // s2.clear(); // console.log(s2);for(let v of s2){console.log(v); }

當然，集合還可以數組去重、交集、并集、差集

let arr = [1,2,3,4,5,4,3,2,1];//1. 數組去重// 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 數據結構。它類似于對象，也是鍵值對的集合。但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。Map 也實現了iterator 接口，所以可以使用『擴展運算符』和『for…of…』進行遍歷。Map 的屬性和方法：

size 返回 Map 的元素個數

set 增加一個新元素，返回當前 Map

get 返回鍵名對象的鍵值

has 檢測 Map 中是否包含某個元素，返回 boolean 值

clear 清空集合，返回 undefined

// 聲明 Map let m = new Map();// 添加元素 m.set('name','怪鴿'); m.set('say', function(){console.log("我們遇到什么困難，都不要怕"); }); let key = {hobby : '冬泳' }; m.set(key, ['加油','奧力給','干就完了']);// size // console.log(m.size);// 刪除 // m.delete('name');// 獲取 // console.log(m.get('hobby')); // console.log(m.get(key));// 清空 // m.clear();// 遍歷 for(let v of m){console.log(v); }

十五、class 類

??????ES6 提供了更接近傳統語言的寫法，引入了 Class這個概念，作為對象的模板。通過 class 關鍵字，可以定義類。基本上，ES6 的 class 可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

//手機function Phone(brand, price){this.brand = brand;this.price = price;}//添加方法Phone.prototype.call = function(){console.log("我可以打電話!!");}//實例化對象let Huawei = new Phone('華為', 5999);Huawei.call();console.log(Huawei);//classclass Shouji{//構造方法 名字不能修改constructor(brand, price){this.brand = brand;this.price = price;}//方法必須使用該語法, 不能使用 ES5 的對象完整形式call(){console.log("我可以打電話!!");}}let onePlus = new Shouji("1+", 1999);console.log(onePlus);

靜態成員

1.實例對象沒有構造函數對象的屬性和方法，兩者之間是不通的，和構造函數的原型對象是相通的
2.函數對象里的屬性是屬于函數對象的，并不屬于實例對象，對于這樣的屬性稱之為靜態成員

// 構造函數對象 function Phone(){} // 靜態成員 Phone.name = '手機'; Phone.change = function(){console.log("我可以改變世界"); } // 原型對象屬性 Phone.prototype.size = '5.5inch';// 實例對象 let nokia = new Phone();console.log(nokia.name); // undefinded // nokia.change(); // not a function console.log(nokia.size); // 5.5inch

class

// 類 class Phone{//靜態屬性static name = '手機';static change(){console.log("我可以改變世界");} }// 實例對象 let nokia = new Phone(); console.log(nokia.name); // undefined console.log(Phone.name); // 手機

static標注的屬性和方法屬于類，不屬于實例對象

類繼承

// ES5function Phone(brand, price){this.brand = brand;this.price = price;}Phone.prototype.call = function(){console.log("我可以打電話");}// 智能手機function SmartPhone(brand, price, color, size){// 繼承父類Phone.call(this, brand, price);this.color = color;this.size = size;}//設置子級構造函數的原型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繼承和方法重寫

// ES6class Phone{// 構造方法constructor(brand, price){this.brand = brand;this.price = price;}// 父類的成員屬性call(){console.log("我可以打電話!!");}}class SmartPhone extends Phone {// 構造方法constructor(brand, price, color, size){super(brand, price);// 相當于Phone.call(this, brand, price)this.color = color;this.size = size;}photo(){console.log("拍照");}playGame(){console.log("玩游戲");}// 方法的重寫call(){console.log('我可以進行視頻通話');}}const xiaomi = new SmartPhone('小米',1999,'黑色','4.7inch');// console.log(xiaomi);xiaomi.call();xiaomi.photo();xiaomi.playGame();

get和set

get通常對對象的動態屬性進行封裝，set可以進行控制和判斷是否合法

// get 和 set class Phone{get price(){console.log("價格屬性被讀取了");return 'iloveyou';}set price(newVal){console.log('價格屬性被修改了');}}//實例化對象let s = new Phone();// console.log(s.price);s.price = 'free';

十六、數值擴展

Number.EPSILON 是 JavaScript 表示的最小精度

//EPSILON 屬性的值接近于 2.2204460492503130808472633361816E-16function equal(a, b){if(Math.abs(a-b) < Number.EPSILON){return true;}else{return false;}}// console.log(0.1 + 0.2 === 0.3);console.log(equal(0.1 + 0.2, 0.3))

二進制和八進制
ES6 提供了二進制和八進制數值的新的寫法，分別用前綴 0b 和 0o 表示。

let b = 0b1010;let o = 0o777;let d = 100;let x = 0xff;console.log(x);

Number.isFinite 檢測一個數值是否為有限數

Number.isNaN 檢測一個數值是否為 NaN

Number.parseInt Number.parseFloat字符串轉整數

Number.isInteger 判斷一個數是否為整數

Math.trunc 將數字的小數部分抹掉

Math.sign 判斷一個數到底為正數 負數 還是零
正數返回1，負數返回-1，零返回0

十七、對象擴展

Object.is 比較兩個值是否嚴格相等，與『===』行為基本一致（+0 與 NaN）

console.log(Object.is(120, 120));// trueconsole.log(Object.is(NaN, NaN));// trueconsole.log(NaN === NaN);// false

Object.assign 對象的合并，將源對象的所有可枚舉屬性，復制到目標對象

const config1 = {host: 'localhost',port: 3306,name: 'root',pass: 'root',test: 'test'};const config2 = {host: 'http://baidu.com',port: 33060,name: 'baidu.com',pass: 'iloveyou',test2: 'test2'}console.log(Object.assign(config1, config2)); // config2覆蓋config1

Object.setPrototypeOf 設置原型對象 Object.getPrototypeof 獲取原型對象

const school = {name: '藍翔'}const cities = {xiaoqu: ['北京','山東','深圳']}Object.setPrototypeOf(school, cities); // 將cities設成school的原型對象console.log(Object.getPrototypeOf(school)); // 獲取school的原型對象

十八、模塊化

模塊化是指將一個大的程序文件，拆分成許多小的文件，然后將小文件組合起來。

好處：

防止命名沖突、代碼復用、高維護性

語法：

模塊功能主要由兩個命令構成：export 和 import。
export 命令用于規定模塊的對外接口, import 命令用于輸入其他模塊提供的功能.

有什么問題歡迎大家在評論區討論o~?

---

• 作者：風時摩羯
• 出處/源自：風時摩羯的《普歌-飛靈團隊-ES6匯總》
• 本文版權歸作者和CSDN共有，歡迎轉載，且在文章頁面明顯位置給出原文鏈接，未經作者同意必須保留此段聲明，否則保留追究法律責任的權利。

總結

以上是生活随笔為你收集整理的普歌-飞灵团队-ES6汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

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