只知道ECMAScript 2015（ES6），一篇匯總ECMAScript 2015~ECMAScript 2023新特性

前言

我們常說的ES6也就是ECMAScript 2015是在2015年6月發布的。這個版本引入了許多重要的語言特性和改進，對 JavaScript 進行了深刻的擴展和升級，ES6 是 JavaScript 語言的一個里程碑。所以有時也被稱為ES6。這是由于規范的發布年份與實際版本號之間的不匹配。然而，標準化組織決定更改命名方式，以便更好地反映年份，從而引入了“ECMAScript [年份]”的命名習慣。

從2015年的ECMAScript 2015（ES6）到現在的ECMAScript 2023。在這幾年的發展中，我們見證了JavaScript的成為web開發的主導語言。但是人們在談論JS時還是習慣性說ES6，然而舉例2015已經過去了8年，是不是該更新一下知識庫啦。

這篇文章我們介紹一下JavaScript從ES6到ES2023的重要變化。

ECMAScript 2015

這里只介紹一些主要的特性，

  1. let 和 const 聲明： 引入了塊級作用域的變量聲明方式。let用于聲明變量，而const用于聲明常量。

  2. 箭頭函數： 提供了更簡潔的函數聲明語法，尤其適用于匿名函數。

    // 傳統函數
function add(a, b) {return a + b;
}// 箭頭函數
const add = (a, b) => a + b;

  3. 模板字符串： 允許在字符串中插入表達式，更易讀且更靈活。

    const name = 'World';
const greeting = `Hello, ${name}!`;

  4. 默認參數值： 允許在函數聲明中為參數設置默認值。

    function greet(name = 'World') {console.log(`Hello, ${name}!`);
}

  5. 解構賦值： 允許從數組或對象中提取值并賦給變量。

    // 數組解構
const [a, b] = [1, 2];// 對象解構
const { x, y } = { x: 1, y: 2 };

  6. 類和繼承： 引入了更接近傳統面向對象編程的類和繼承語法。

    class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a sound.`);}
}class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}

  7. 模塊化： 引入了模塊系統，允許將代碼分割為可維護的模塊。

    // 導出
export const myVar = 42;// 導入
import { myVar } from './myModule';

  8. Promise： 提供了更強大的異步編程機制，以解決回調地獄問題。

    const myPromise = new Promise((resolve, reject) => {// 異步操作if (/* 操作成功 */) {resolve('Success!');} else {reject('Failure!');}
});myPromise.then(result => console.log(result)).catch(error => console.error(error));

  9. for…of 和 for…in： 用于迭代對象和數組中的元素。

  10. Set和 Mapz：
    Set 是一種用于存儲唯一值的集合。它不允許重復的元素，并提供了一系列方法來操作這些值。

const uniqueNumbers = new Set([1, 2, 3, 1, 2]);uniqueNumbers.add(4);
console.log(uniqueNumbers); // Set { 1, 2, 3, 4 }console.log(uniqueNumbers.has(2)); // true

Map 是一種鍵值對的集合，其中的鍵和值可以是任意數據類型。它提供了一種更靈活的方式來存儲和檢索數據，相較于對象，Map 在處理鍵值對的場景中更為直觀和高效。

const userMap = new Map();userMap.set('name', 'John');
userMap.set('age', 30);console.log(userMap.get('name')); // 'John'
console.log(userMap.has('gender')); // false

ECMAScript 2016

ECMAScript 2016本質上是一個較小的更新，其中包括了一些相對較小的語法和功能改進。

  1. 指數操作符（Exponentiation Operator）： 引入了指數操作符 **，用于計算一個數字的冪。

    let result = 2 ** 3; // 8

  2. Array.prototype.includes()： 在數組原型上添加了 includes 方法，用于檢查數組是否包含特定元素。

    const array = [1, 2, 3];
console.log(array.includes(2)); // true
console.log(array.includes(4)); // false

ECMAScript 2017

ECMAScript 2017（也稱為ES8）是在2017年發布的 JavaScript 語言的一個版本，相對于 ECMAScript 2016 來說，引入了一些新的功能和改進。以下是其中一些主要的變化：

  1. 異步函數（Async/Await）的改進： ES2017 對異步函數進行了一些改進，使其更加靈活和強大。異步函數是使用 async 關鍵字聲明的函數，而 await 關鍵字可以在異步函數內部等待一個 Promise 解決。

    async function fetchData() {let response = await fetch('https://api.example.com/data');let data = await response.json();return data;
}

  2. Object.values() 和 Object.entries()： 引入了 Object.values() 和 Object.entries() 方法，分別用于獲取對象的值數組和鍵值對數組。

    const obj = { a: 1, b: 2, c: 3 };console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

  3. 字符串填充方法（String Padding）： 引入了字符串填充方法 String.prototype.padStart() 和 String.prototype.padEnd()，用于在字符串前或后填充指定的字符。

    let str = 'hello';
console.log(str.padStart(8, '*')); // '***hello'
console.log(str.padEnd(8, '*')); // 'hello***'

  4. 共享內存與原子操作（Shared Memory and Atomics）： 引入了 SharedArrayBuffer 和 Atomics 對象，用于更好地支持多線程和并行編程。

    // 創建共享內存
const buffer = new SharedArrayBuffer(16);// 在共享內存上進行原子操作
Atomics.add(new Int32Array(buffer), 0, 5);

ECMAScript 2019

也不是每一年都有那種很重要的改變，這里ECMAScript 2018 并入了 ECMAScript 2019

  1. Array.prototype.flat() 和 Array.prototype.flatMap()： 引入了 flat 和 flatMap 方法，用于扁平化嵌套的數組結構。

    const nestedArray = [1, [2, [3, 4]]];
const flatArray = nestedArray.flat(); // [1, 2, [3, 4]]

    flatMap 可以同時扁平化和映射數組。

  2. Object.fromEntries()： 提供了從鍵值對數組創建對象的方法。

    const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries); // {a: 1, b: 2, c: 3}

  3. String.prototype.trimStart() 和 String.prototype.trimEnd()： 引入了字符串的兩個新方法，用于刪除字符串開頭和結尾的空格。

    const str = '   Hello   ';
console.log(str.trimStart()); // 'Hello   '
console.log(str.trimEnd()); // '   Hello'

  4. Symbol.prototype.description： 允許通過 Symbol.prototype.description 獲取 Symbol 的描述信息。

    const mySymbol = Symbol('My Symbol');
console.log(mySymbol.description); // 'My Symbol'

  5. Function.prototype.toString() 的改進： Function.prototype.toString() 方法現在返回精確的源代碼表示，包括空格和注釋。

    function example() {// This is a commentreturn 'Hello';
}console.log(example.toString());
// 函數源代碼中包含注釋和縮進

ECMAScript 2020

ECMAScript 2020（也稱為ES11）引入了一些新的功能和改進。以下是其中一些主要的變化：

  1. 可選鏈操作符（Optional Chaining）： 引入了可選鏈操作符（?.），用于簡化訪問可能不存在的屬性或方法的代碼。

    const user = {address: {street: '123 Main St'}
};// 傳統方式
const street = user && user.address && user.address.street;// 使用可選鏈操作符
const street = user?.address?.street;

  2. 空值合并操作符（Nullish Coalescing Operator）： 引入了空值合并操作符（??），用于提供默認值，但僅在變量為 null 或 undefined 時。

    const defaultValue = 'Default';
const userValue = null;// 傳統方式
const result = userValue !== null && userValue !== undefined ? userValue : defaultValue;// 使用空值合并操作符
const result = userValue ?? defaultValue;

  3. 全局對象 globalThis： 引入了 globalThis，它提供了一種標準的方式來獲取全局對象，無論代碼在哪里執行（瀏覽器、Node.js、Web Workers等）。

    console.log(globalThis === window); // 在瀏覽器中為 true
console.log(globalThis === global); // 在 Node.js 中為 true

  4. Promise.allSettled()： 引入了 Promise.allSettled() 方法，它接收一組 Promise，無論這些 Promise 是成功還是失敗，都會等待它們全部 settled（已完成，不論是 resolved 還是 rejected）。

    const promises = [Promise.resolve('Success'), Promise.reject('Error')];Promise.allSettled(promises).then(results => console.log(results));

  5. 動態導入： 可以將js文件動態導入模塊中。

  6. BigInt： js代碼可以使用更大的整數。

  7. matchAll： 是一個用于 String 的新的方法，和正則相關。這個方法將返回一個迭代器，該迭代器一個接一個地返回所有匹配的組。

ECMAScript 2021

  1. String.prototype.replaceAll： 新增了字符串方法，可以全局替換字符串中的匹配項。
const originalString = 'apple banana apple orange';// 使用 replaceAll 替換所有的 'apple' 為 'grape'
const newString = originalString.replaceAll('apple', 'grape');console.log(newString);
// 輸出: 'grape banana grape orange'
  1. 邏輯賦值運算符： 引入了邏輯賦值運算符，如&&=、||=和??=，用于對變量進行邏輯運算和賦值的組合操作。
let x = 1;// 邏輯與賦值
x &&= 2;  // x = x && 2;let y = 0;// 邏輯或賦值
y ||= 3;  // y = y || 3;let z = null;// 空值合并賦值
z ??= 4;  // z = z !== null && z !== undefined ? z : 4;
  1. 數字分隔符： 允許在數字中使用下劃線作為分隔符，以提高數字的可讀性。
const billion = 1_000_000_000;
const binary = 0b1010_0010_0011;
const decimal = 1_000_000.123_456;
  1. Promise.any： 新增了Promise的靜態方法，接受一個Promise可迭代對象，返回第一個解決的Promise的值。
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'one'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 500, 'two'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 800, 'three'));Promise.any([promise1, promise2, promise3]).then(result => console.log(result)).catch(error => console.error(error));
  1. WeakRef： 引入了WeakRef和FinalizationRegistry API，用于處理弱引用和對象的最終化
let obj = { data: 'some data' };
let weakRef = new WeakRef(obj);console.log(weakRef.deref()); // { data: 'some data' }obj = null; // 弱引用不會阻止對象被垃圾回收console.log(weakRef.deref()); // undefined

ECMAScript 2022

頂層 await

在 ECMAScript 2022 中引入了頂層 await，它允許在模塊的頂層直接使用 await 關鍵字，而不需要在異步函數內部包裹。

// 在模塊的頂層直接使用 await
const result = await fetchData();console.log(result);

ECMAScript 2023

今年6月份發布了ECMAScript 2023，這將是目前最新版本的規范。

  1. findLast() 、findLastIndex()： 在 JS中，可以通過 find() 和 findIndex() 從前往后查找數組中的值。
    這兩個方法支持從后往前查找，用法和find()、findIndex()一樣。
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];array.findLast(elem => elem.v > 3); // {v: 5}
array.findLastIndex(elem => elem.v > 3); // 4
array.findLastIndex(elem => elem.v > 5); // undefined

2.Hashbang 語法：
Hashbang（也稱為 shebang）是一種在腳本文件的開頭使用 #! 注釋的語法，通常用于指定腳本文件的解釋器。

#!/usr/bin/env node
  1. toReversed()、toSorted()、toSpliced()、with()
    之前js支持的reverse、sort、splice都是修改原數組的，以前使用這些方法想又不改變原數組，可能是這樣：
const originalArray = [3, 1, 4, 1, 5, 9];const reversedArray = originalArray.slice().reverse();
const sortedArray = originalArray.slice().sort();
const splicedArray = originalArray.slice(1, 4);
const arrayWithElement = [...originalArray, 7];console.log(reversedArray); // 輸出 [9, 5, 1, 4, 1, 3]
console.log(sortedArray);   // 輸出 [1, 1, 3, 4, 5, 9]
console.log(splicedArray);  // 輸出 [1, 4, 1]
console.log(arrayWithElement); // 輸出 [3, 1, 4, 1, 5, 9, 7]

然而有以下這些方法返回新的數組，不改變原數組。是不是就簡便多了。

  • toReversed()：返回數組的逆序副本。
  • toSorted()：返回數組的排序副本。
  • toSpliced()：返回對數組進行切片后的副本。
  • with()：可能是返回包含特定元素的副本。

with()：該方法會以非破壞性的方式替換給定 index 處的數組元素，即 arr[index]=value 的非破壞性版本。

const arr = ['a', 'b', 'c'];
const arr1 = arr.with(2, 'd');
console.log(arr1); // ['a','b','d']
console.log(arr); // ['a', 'b', 'c']

今天就介紹這些吧，本文介紹并非全部新特性。
注意使用這些方法時看一下瀏覽器各個版本兼不兼容哦！！！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/162498.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/162498.shtml
英文地址，請注明出處：http://en.pswp.cn/news/162498.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

OpenAI“宮斗”新進展！Sam Altman將重返OpenAI擔任首席執行官 董事會成員改動

OpenAI“宮斗”新進展！Sam Altman將重返OpenAI擔任首席執行官 董事會成員改動

在經過激烈的五天討論和辯論之后，高調人工智能初創公司OpenAI宣布，其聯合創始人之一Sam Altman將回歸擔任首席執行官。這一決定是對上周Altman突然被解雇的回應，該決定引起了極大的關注和討論。 OpenAI表示，他們已經達成了與Altm…
閱讀更多...
德迅云安全-德迅衛士：保障您的主機安全

德迅云安全-德迅衛士：保障您的主機安全

主機安全是指保證主機在數據存儲和處理的保密性、完整性、可用性，包括硬件、固件、系統軟件的自身安全，以及一系列附加的安全技術和安全管理措施。 為什么要主機安全？ 服務器一旦被黑客入侵，個人和企業面臨以下安全風險&#xff…
閱讀更多...
張弛聲音變現課，如何為偶像劇配音?

張弛聲音變現課，如何為偶像劇配音?

在為偶像劇進行配音工作時，配音員應當捕捉劇中角色的年輕活力、浪漫的愛情故事以及輕快的生活節奏。偶像劇主要講述的是青春的愛戀、友誼和夢想追求，因此配音需要傳遞出劇中的真誠和活潑。為偶像劇配音可以考慮以下幾點建議： 鮮明活潑的聲音 …
閱讀更多...
如何判斷交流回饋老化測試負載是否合格？

如何判斷交流回饋老化測試負載是否合格？

交流回饋老化測試負載是用于模擬實際工作環境中設備運行狀態的測試工具，主要用于檢測設備的耐久性和穩定性。 負載性能：需要檢查負載的性能是否符合設計要求，這包括負載的功率、電流、電壓等參數是否在規定的范圍內，以及負載的工作…
閱讀更多...
【AI】行業消息精選和分析（11月23日）

【AI】行業消息精選和分析（11月23日）

今日動態 1、Sam Altman 重掌 CEO，OpenAI 權力斗爭正式「落幕」 2、重磅好消息：語音 ChatGPT 現已向全用戶開放 3、NVIDIA 與基因泰克合作，利用生成式 AI 加速藥物發現 4、 英偉達Q3營收同比增長206%至181億美元 黃仁勛：生成式AI時…
閱讀更多...
Zoho Bigin和標準版CRM有什么區別？

Zoho Bigin和標準版CRM有什么區別？

Zoho Bigin是Zoho公司推出的一款針對小微企業設計的CRM系統，它與Zoho CRM一脈相承，但更加輕量級，快速幫助小微企業實現數字化銷售。下面來說說，Zoho Bigin是什么？它適合哪些企業？ 什么是Zoho Bigin&#x…
閱讀更多...
【c語言】重溫一下動態內存，int數組過大會造成棧錯誤

【c語言】重溫一下動態內存，int數組過大會造成棧錯誤

項目場景： 項目場景：互助群同學在刷題的過程中，遇到的一個題目，需要申請一個很大數組，于是這個同學就寫了int[1000000],其實這樣寫也沒有錯，可是運行后卻顯示棧錯誤。于是就找到我來請教，我想就…
閱讀更多...
從零開始的c語言日記day36——指針進階

從零開始的c語言日記day36——指針進階

一、什么是指針: 指針的概念:1.指針就是個變量，用來存放地址，地址唯一標識一塊內存空間。 ⒉指針的大小是固定的4/8個字節(32位平臺/64位平臺)。 指針是有類型，指針的類型決定了指針的-整數的步長，指針解引用操作的時候的權限。…
閱讀更多...
嵌入式面經-python相關問題

嵌入式面經-python相關問題

1、c\cpp\python 區別，各自優缺點？ 2、python是怎么處理 深拷貝和淺拷貝的？ 3、python的多線程 多進程 4、用過python哪些庫
閱讀更多...
玻璃加工ERP包含些模塊?玻璃加工ERP好用嗎

玻璃加工ERP包含些模塊?玻璃加工ERP好用嗎

玻璃制品的類型多、規格不一、營銷策略靈活、銷售渠道廣泛、生產關聯業務環節。在當今這個市場競爭日益激烈的時代，如何有效整合各個業務環節，提升多部門協作效率，隨時進行數據分析等，是每個玻璃加工企業面臨的管理難題。 在數字…
閱讀更多...
【C語法學習】27 - 字符串轉換為數字

【C語法學習】27 - 字符串轉換為數字

文章目錄 1 atoi()函數1.1 函數原型1.2 參數1.3 返回值1.4 轉換機制1.5 示例1.5.1 示例1 1 atoi()函數 1.1 函數原型 atoi()：將str指向的字符串轉換為整數，函數原型如下： int atoi(const char *str);1.2 參數 atoi()函數只有一個參數str&…
閱讀更多...
docker部署paddleocr

docker部署paddleocr

內容僅供參考學習 歡迎朋友們V一起交流： zcxl7_7 環境 1. CentOS7 ?2. docker ?3. PaddleOCR2.5.2 1.準備 1. 首先準備好需要打包的項目 2. 在該項目中創建Dockerfile文件 touch Dockerfile2. 編寫Dockerfile # 從Python 3.8的官方鏡像中創建(pyt…
閱讀更多...
建立簡單的客戶端-服務端通信系統

建立簡單的客戶端-服務端通信系統

本文介紹如何使用C編寫一個基本的客戶端-服務端通信系統。通過這個例子&#xff0c;你將學到如何建立TCP連接、發送和接收消息&#xff0c;以及如何處理多個客戶端連接。 客戶端代碼&#xff1a; #include <stdio.h> // 標準輸入輸出庫&#xff0c;提供基本的輸入…
閱讀更多...
matlab使用scatter函數畫圖時報錯“數組索引必須為正整數或邏輯值”解決辦法

matlab使用scatter函數畫圖時報錯“數組索引必須為正整數或邏輯值”解決辦法

一、背景 在使用matlab的scatter函數畫圖時報錯“數組索引必須為正整數或邏輯值”。 scatter函數說明&#xff1a;scatter(x,y) 在向量 x 和 y 指定的位置創建一個包含圓形標記的散點圖。 二、解決辦法 如果使用scatter函數時報上述錯誤&#xff0c;嘗試將連續函數先轉換為函…
閱讀更多...
ubuntu編譯sqlite3并使用

ubuntu編譯sqlite3并使用

SQLite3是一種輕量級的關系型數據庫管理系統&#xff0c;它是在C語言基礎上實現的。SQLite3具有許多優點&#xff0c;例如&#xff1a; 1.靈活&#xff1a;它可以在多種操作系統上運行&#xff0c;并且可以將多個數據庫文件合并成一個文件。 2.易于使用&#xff1a;SQLite3使用…
閱讀更多...
基于爬行動物算法優化概率神經網絡PNN的分類預測 - 附代碼

基于爬行動物算法優化概率神經網絡PNN的分類預測 - 附代碼

基于爬行動物算法優化概率神經網絡PNN的分類預測 - 附代碼 文章目錄 基于爬行動物算法優化概率神經網絡PNN的分類預測 - 附代碼1.PNN網絡概述2.變壓器故障診街系統相關背景2.1 模型建立 3.基于爬行動物優化的PNN網絡5.測試結果6.參考文獻7.Matlab代碼 摘要&#xff1a;針對PNN神…
閱讀更多...
八股文面試day6

八股文面試day6

什么是代理&#xff1f;為什么要用動態代理&#xff1f; 代理模式大概意思是&#xff1a;為其他對象提供一個代理項或者是占位符&#xff0c;以控制對這個對象的訪問 代理模式核心思想&#xff1a;創建一個代理對象&#xff0c;在客戶端和目標對象之間的一個中介&#xff0c;…
閱讀更多...
35的程序員被辭了可以自己接外包啊？為什么都那么悲觀呢？

35的程序員被辭了可以自己接外包啊？為什么都那么悲觀呢？

35的年紀&#xff0c;上有老下有小&#xff0c;即將步入中年危機&#xff0c;在這個節骨眼上被辭&#xff0c;能不悲觀嗎&#xff1f; 在這個年紀人們往往追求的是穩定的工作和生活&#xff0c;而進入一個自己不熟悉的行業并不是一個好的選擇。 況且&#xff0c;你認為的外包…
閱讀更多...
診斷0x27服務解密文件DLL制作與使用

診斷0x27服務解密文件DLL制作與使用

DLL文件在CANoe的使用方法 DLL文件在診斷里面可以用在0x27秘鑰服務里面&#xff0c;對解密有幫助&#xff0c;在下圖位置加載。 DLL文件制作 vector公司本來就給了我們一個demo&#xff0c;先拷貝一份下來&#xff0c;別把原來的文件給改壞了。我這個是CANoe12&#xff0c;de…
閱讀更多...
Visio給立方體的每條邊填充不同的顏色，超好用的visio小技巧~

Visio給立方體的每條邊填充不同的顏色，超好用的visio小技巧~

Visio給立方體的每條邊填充不同的顏色&#xff0c;超好用的visio小技巧~ 如何實現立方體的填充顏色從左邊的純色到右邊的多色呢&#xff1f;一起學起來吧~ 在visio中繪制一個普通的立方體&#xff1b; 用一個大的矩形蓋住剛才繪制的立方體&#xff1b; 全選之后找到 開發工具-&…
閱讀更多...
最新文章

Copyright @ 2022~2023