當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript高级之ECMAScript 6 新特性

發布時間：2024/7/5 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript高级之ECMAScript 6 新特性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2.1. let關鍵字

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

不允許重復聲明

塊兒級作用域

不存在變量提升

不影響作用域鏈

應用場景：以后聲明變量使用let就對了
案例：點擊切換顏色

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.container {width: 500px;margin: 0 auto;}.box {display: flex;}.item {width: 100px;height: 45px;border: 1px solid deepskyblue;margin-right: 10px;}</style></head><body><div class="container"><h2>點擊切換顏色</h2><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div></div></div><script type="text/javascript">// 獲取div元素對象let items = document.getElementsByClassName('item')// 遍歷并綁定點擊事件for(let i = 0; i < items.length; i++) {items[i].onclick = function() {// 修改當前被點擊方塊的背景顏色// this.style.backgroundColor = 'pink'items[i].style.backgroundColor = 'pink'}}console.log(window.i)</script></body> </html>

2.2. const關鍵字

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

聲明必須賦初始值

標識符一般為大寫

不允許重復聲明

值不允許修改

塊級作用域

注意: 對象屬性修改和數組元素變化不會出發 const錯誤

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

2.3. 變量的解構賦值

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

//數組的解構賦值 const arr = ['張學友', '劉德華', '黎明', '郭富城'];let [zhang, liu, li, guo] = arr;//對象的解構賦值 const lin = {name: '林志穎',tags: ['車手', '歌手', '小旋風', '演員']};let {name,tags} = lin;//復雜解構 let wangfei = {name: '王菲',age: 18,songs: ['紅豆', '流年', '曖昧', '傳奇'],history: [{name: '竇唯'}, {name: '李亞鵬'}, {name: '謝霆鋒'}]};let {songs: [one, two, three],history: [first, second, third]} = wangfei;

注意：頻繁使用對象方法、數組元素，就可以使用解構賦值形式

2.4. 模板字符串

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

字符串中可以出現換行符

// 定義字符串 let str = `<ul> <li>沈騰</li> <li>瑪麗</li> <li>魏翔</li> <li>艾倫</li> </ul>`; // 變量拼接 let star = '王寧'; let result = `${star}在前幾年離開了開心麻花`;

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

2) 可以使用 ${xxx} 形式輸出變量

2.5. 簡化對象寫法

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

注意：對象簡寫形式簡化了代碼，所以以后用簡寫就對了

2.6. 箭頭函數

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

/** * 1. 通用寫法 */let fn = (arg1, arg2, arg3) => {return arg1 + arg2 + arg3;}

箭頭函數的注意點
:

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

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

箭頭函數 this指向聲明時所在作用域下 this 的值

箭頭函數不能作為構造函數實例化

不能使用 arguments

/** * 2. 省略小括號的情況 */let fn2 = num => {return num * 10;};/** * 3. 省略花括號的情況 */let fn3 = score => score * 20;/** * 4. this指向聲明時所在作用域中 this 的值 */let fn4 = () => {console.log(this);}let school = {name: '尚硅谷',getName() {let fn5 = () => {console.log(this);}fn5();}};

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

案例1：點擊div 2s 后顏色變成粉色

案例2：從數組中返回偶數的元素

注意：

箭頭函數適合與this無關的回調。定時器，數組的方法回調

箭頭函數不適合與this有關的回調。事件回調，對象的方法

2.6 函數參數默認值

形參初始值, 具有默認值的參數，一般位置要靠后放（潛規則）

與解構賦值結合

2.7. rest參數

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

/** * 作用與 arguments 類似 */function add(...args) {console.log(args);}add(1, 2, 3, 4, 5);/** * rest 參數必須是最后一個形參 */function minus(a, b, ...args) {console.log(a, b, args);}minus(100, 1, 2, 3, 4, 5, 19);

注意：
rest參數非常適合不定個數參數函數的場景

2.8. spread擴展運算符

擴展運算符（spread）也是三個點（…）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列，對數組進行解包。

/** * 展開數組 */let tfboys = ['德瑪西亞之力', '德瑪西亞之翼', '德瑪西亞皇子'];function fn() {console.log(arguments);}fn(...tfboys)/** * 展開對象 */let skillOne = {q: '致命打擊',};let skillTwo = {w: '勇氣'};let skillThree = {e: '審判'};let skillFour = {r: '德瑪西亞正義'};let gailun = {...skillOne,...skillTwo,...skillThree,...skillFour};

數組的合并

數組的克隆

將偽數組轉為真正的數組

2.9. Symbol

2.9.1. Symbol基本使用
ES6 引入了一種新的原始數據類型 Symbol，表示獨一無二的值。它是JavaScript 語言的第七種數據類型，是一種類似于字符串的數據類型。

Symbol特點：

Symbol的值是唯一的，用來解決命名沖突的問題

Symbol值不能與其他數據進行運算

Symbol定義的對象屬性不能使用 for…in循環遍歷，但是可以使用Reflect.ownKeys來獲取對象的所有鍵名

//創建 Symbol let s1 = Symbol();console.log(s1, typeof s1);//添加標識的 Symbol let s2 = Symbol('尚硅谷');let s2_2 = Symbol('尚硅谷');console.log(s2 === s2_2);//使用 Symbol for 定義 let s3 = Symbol.for('尚硅谷');let s3_2 = Symbol.for('尚硅谷');console.log(s3 === s3_2); 注意：

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

總結：js數據類型如下（7種）

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 向對象中添加方法 up downlet game = {up: function() {console.log('game對象本來存在的up方法')}}// 聲明一個對象let methods = {up: Symbol(),down: Symbol()}game[methods.up] = function() {console.log('我可以改變形狀')}game[methods.down] = function() {console.log('我可以快速下降')}console.log(game)console.log('---------')let youxi = {name: '狼人殺',[Symbol('say')]: function() {console.log('我可以發言')},[Symbol('zibao')]: function() {console.log('我可以自爆')}}console.log(youxi)</script></body> </html>

2.9.2. Symbol內置值

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

2.10. 迭代器

遍歷器（Iterator）就是一種機制。它是一種接口，為各種不同的數據結構提
供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作。

ES6創造了一種新的遍歷命令 for…of循環， Iterator接口主要供 for…of消費

原生具備 iterator接口的數據 (可用 for of遍歷 )
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList

工作原理
a) 創建一個指針對象，指向當前數據結構的起始位置
b) 第一次調用對象的 next方法，指針自動指向數據結構的第一個成員
c) 接下來不斷調用 next方法，指針一直往后移動，直到指向最后一個成員
d) 每調用 next方法返回一個包含 value和 done屬性的對象

注: 需要自定義遍歷數據的時候，要想到迭代器。

2.11. 生成器

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

function * gen(){ yield '一只沒有耳朵'; yield '一只沒有尾巴'; return '真奇怪'; } let iterator = gen(); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next());

代碼說明：

* 的位置沒有限制

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

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

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

案例1：// 1s 后控制臺輸出 111
// 2s 后控制臺輸出 222
// 3s 后控制臺輸出 333

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 異步編程：文件操作，網絡操作之（ajax, request）數據庫操作// 1s 后控制臺輸出 111// 2s 后控制臺輸出 222// 3s 后控制臺輸出 333// 回調地獄/* setTimeout(() => {console.log(111)setTimeout(() => {console.log(222)setTimeout(() => {console.log(333)}, 3000)}, 2000)}, 1000) */function one() {setTimeout(() => {console.log(111)iterator.next()}, 1000)}function two() {setTimeout(() => {console.log(222)iterator.next()}, 2000)}function three() {setTimeout(() => {console.log(333)iterator.next()}, 3000)}function * gen() {yield one()yield two()yield three()}// 調用生成器函數let iterator = gen()iterator.next()</script></body> </html>

案例2：模擬按如下順序獲取：用戶數據訂單數據商品數據

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 模擬獲取用戶數據訂單數據商品數據function getUsers() {setTimeout(() => {let data = '用戶數據'// 調用next 方法，并且將數據傳入iterator.next(data)}, 1000)}function getOrders() {setTimeout(() => {let data = '訂單數據'iterator.next(data)}, 1000)}function getGoods() {setTimeout(() => {let data = '商品數據'iterator.next(data)}, 1000)}function * gen() {let users = yield getUsers()console.log(users)let orders = yield getOrders()console.log(orders)let goods = yield getGoods()console.log(goods)}// 調用生成器函數let iterator = gen()iterator.next()</script></body> </html>

2.12. Promise

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

Promise構造函數 : Promise (excutor) {}

Promise.prototype.then方法
promise.then()的返回值：

沒有返回值

返回值為非Promise對象：

返回值為一個Promise對象：

返回值為拋出錯誤：

案例：讀取多個文件

Promise.prototype.catch方法

// 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/為學.mds', (err, data) => {// 如果失敗，則拋出錯誤if (err) {return reject(err)}// 如果成功resolve(data)}) })p.then(function(value) {console.log(value.toString()) }, function(error) {console.log('讀取失敗~~~', error) })

2.13. Set

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

size 返回集合的元素個數

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

delete 刪除元素，返回 boolean 值

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

clear 清空集合，返回 undefined

//創建一個空集合 let s = new Set(); //創建一個非空集合 let s1 = new Set([1,2,3,1,2,3]); //集合屬性與方法 //返回集合的元素個數 console.log(s1.size); //添加新元素 console.log(s1.add(4)); //刪除元素 console.log(s1.delete(1)); //檢測是否存在某個值 console.log(s1.has(2)); //清空集合 console.log(s1.clear());

2.14. Map

ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合。但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。 Map也實現了iterator接口，所以可以使用『擴展運算符』和『 for…of…』進行遍歷。

Map的屬性和方法：

size 返回 Map的元素個數

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

get 返回鍵名對象的鍵值

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

clear 清空集合，返回 undefined

//創建一個空 map let m = new Map(); //創建一個非空 map let m2 = new Map([ ['name','尚硅谷'], ['slogon','不斷提高行業標準'] ]);//屬性和方法 //獲取映射元素的個數 console.log(m2.size); //添加映射值 console.log(m2.set('age', 6)); //獲取映射值 console.log(m2.get('age')); //檢測是否有該映射 console.log(m2.has('age')); //清除 console.log(m2.clear());

2.15. class 類

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

使用ES5語法來實現類

使用ES6寫法

靜態成員和實例成員：

function Phone(price) {this.price = price}// 在構造函數本身上添加的屬性為靜態屬性，// 只能由構造函數對象來調用它們Phone.name = '手機'Phone.change = function() {console.log('我可以改變世界')}// prototype原型對象上的屬性為實例屬性// 構造函數內部通過this添加的成員 price也是實例屬性//，只能由實例對象來調用它Phone.prototype.size = '5.5英寸'let nokia = new Phone(9999)console.log(nokia.name) // undefinedconsole.log(Phone.name) // Phone// nokia.change()console.log(nokia.price) // 9999console.log(Phone.price) // undefinedconsole.log(nokia.size) // 5.5英寸console.log(Phone.size) // undefined

ES5 中實現類的繼承：

ES6 中實現類的繼承：

class Phone {// 構造方法constructor(brand, price) {this.brand = brandthis.price = price}// 父類的成員屬性callyou() {console.log('我可以打電話！！！')}}class SmartPhone extends Phone {// 構造方法constructor(brand, price, color, size) {super(brand, price) // 等價于 Phone.call(this, brand, price)this.color = colorthis.size = size}photo() {console.log('拍照')}playGame() {console.log('打游戲')}}const xiaomi = new SmartPhone('小米', 999, '黑色', '4.7英寸')console.log(xiaomi)xiaomi.callyou()xiaomi.photo()xiaomi.playGame()

知識點：

class聲明類

constructor定義構造函數初始化

extends繼承父類

super調用父級構造方法

static定義靜態方法和屬性

父類方法可以重寫

//父類 class Phone {//構造方法 constructor(brand, color, price) {this.brand = brand;this.color = color;this.price = price;}//對象方法 call() {console.log('我可以打電話!!!')}}//子類 class SmartPhone extends Phone {constructor(brand, color, price, screen, pixel) {super(brand, color, price);this.screen = screen;this.pixel = pixel;}//子類方法 photo() {console.log('我可以拍照!!');}playGame() {console.log('我可以玩游戲!!');}//方法重寫 call() {console.log('我可以進行視頻通話!!');}//靜態方法 static run() {console.log('我可以運行程序')}static connect() {console.log('我可以建立連接')}}//實例化對象 const Nokia = new Phone('諾基亞', '灰色', 230);const iPhone6s = new SmartPhone('蘋果', '白色', 6088, '4.7inch', '500w');//調用子類方法 iPhone6s.playGame();//調用重寫方法 iPhone6s.call();//調用靜態方法 SmartPhone.run();

2.16. 數值擴展

Number.EPSILON是Javascript表示的最小精度
EPSILON 屬性的值接近于2.2204468492503138808472633361816E-16
因為浮點數計算是不精確的，引入一個這么小的量的目的，在于為浮點數計算，設置一個誤差范圍。
Number.EPSILON可以用來設置“能夠接受的誤差范圍”。比如，誤差范圍設為 2 的-50 次方（即Number.EPSILON * Math.pow(2, 2)），即如果兩個浮點數的差小于這個值，我們就認為這兩個浮點數相等。

2.16.1. 二進制和八進制

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

2.16.2. Number.isFinite() 與 Number.isNaN()

Number.isFinite() 用來檢查一個數值是否為有限的

Number.isNaN() 用來檢查一個值是否為 NaN

2.16.3. Number.parseInt() 與 Number.parseFloat()

ES6 將全局方法 parseInt和 parseFloat，移植到 Number對象上面，使用不變。

2.16.4. Math.trunc

用于去除一個數的小數部分，返回整數部分。

2.16.5. Number.isInteger

Number.isInteger() 用來判斷一個數值是否為整數

2.16.6. Math.sign

Math.sign 判斷一個數字是正數負數還是0

2.17. 對象擴展

ES6新增了一些 Object對象的方法

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

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

__proto__、 setPrototypeOf、 setPrototypeOf可以直接設置對象的原型

2.18. 模塊化

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

2.18.1. 模塊化的好處

模塊化的優勢有以下幾點：

防止命名沖突

代碼復用

高維護性

2.18.2. 模塊化規范產品

ES6之前的模塊化規范有

CommonJS => NodeJS、 Browserify

AMD => requireJS

CMD => seaJS

2.18.3. ES6模塊化語法

模塊功能主要由兩個命令構成：
export和 import。

export命令用于規定模塊的對外接口
import命令用于輸入其他模塊提供的功能

分別暴露 export xxx

統一暴露 export {school, findJob}

默認暴露 export default:

2.18.4 ES6引入模塊語法匯總

2.18.5. 瀏覽器使用模塊化的方式：

2.18.6. babel

安裝工具 babel-cli babel-preset-env browserify(webpack)

npx babel ./js -d dist/js --presets=babel-preset-env

打包 npx browserify dist/js/app.js -o dist/bundle.js

使用babel-cli babel-preset-env 將ES6語法轉成ES5語法，來解決低版本瀏覽器不識別ES6語法的問題

使用browserify(webpack)將轉換好的ES5語法文件進行打包，生成瀏覽器可以運行的代碼

2.18.7. ES6模塊化引入npm 包

總結

以上是生活随笔為你收集整理的JavaScript高级之ECMAScript 6 新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： speech production mo
下一篇： JavaScript高级之ECMASri