js中 ES6 新特性詳解

ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，引入了許多新的特性，使 JavaScript 代碼更加簡潔、可讀和高效。以下是 ES6 的主要新特性及其原理

1. let 和 const 關鍵字

原理解析

1.1 作用域

  • var 關鍵字的作用域：在 ES5 及之前，JavaScript 只有函數作用域（Function Scope），即 var 聲明的變量只在函數內部可見，但在塊級 {} 內仍然可以訪問：

    if (true) {var x = 10;
}
console.log(x); // 10，x 仍然可訪問

    由于 x 是 var 聲明的，它的作用域擴展到整個函數或全局，而非 if 代碼塊內部。

  • let 和 const 關鍵字的作用域：

    • let 和 const 是 塊級作用域（Block Scope），即它們聲明的變量只在當前代碼塊 {} 內有效。
    • 這避免了 var 可能導致的全局污染問題。
    if (true) {let y = 20;
}
console.log(y); // ReferenceError: y is not defined

1.2 暫時性死區（Temporal Dead Zone, TDZ）

  • let 和 const 不會像 var 一樣變量提升（Hoisting），而是進入暫時性死區，直到執行到變量聲明的位置，變量才可用。

    console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;

    解釋：

    • 代碼在執行時，會先創建變量的作用域。
    • 但是 let 聲明的變量在作用域創建后，直到真正聲明前，處于“暫時性死區”。
    • 只有 let a = 10; 執行后，a 才能被訪問。

1.3 const 的特性

  • const 聲明的變量不可被重新賦值： 
    const pi = 3.14;
pi = 3.14159; // TypeError: Assignment to constant variable.

  • 但是對象類型（數組、對象）可以修改其內容： 
    const obj = { name: "Alice" };
obj.name = "Bob"; // 允許修改對象的屬性
console.log(obj); // { name: "Bob" }

    解釋：
    • const 只是確保 obj 這個變量的引用地址不會變，但對象的內部屬性仍然可以修改。

2. 模板字符串（Template Literals）

原理解析

2.1 變量插值

  • 傳統字符串拼接需要 + 號，而模板字符串可以使用 ${} 插入變量： 
    let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

2.2 多行字符串

  • 傳統的字符串換行必須使用 \n： 
    let str = "Hello\nWorld";

  • 但模板字符串可以直接換行： 
    let str = `Hello
World`;
console.log(str);

3. 箭頭函數（Arrow Functions）

原理解析

3.1 this 綁定機制

  • 普通 function 的 this 由調用者決定，但箭頭函數的 this 由 定義時的作用域 決定：

    function normalFunction() {console.log(this); // this 取決于調用方式
}const arrowFunction = () => {console.log(this); // this 由定義時決定
};

  • 在 事件回調、定時器、map/filter 中，箭頭函數可以避免 this 綁定問題：

  • const obj = {value: 10,method: function () {setTimeout(() => {console.log(this.value); // 10}, 1000);}
};
obj.method();

    解釋：

    • setTimeout 里的回調是箭頭函數，this 保持 method 里的 this，即 obj。

3.2 語法簡化

  • 省略 function 關鍵字： 
    const add = (a, b) => a + b;
  • 單個參數可省略括號： 
    const square = x => x * x;

4. 解構賦值（Destructuring Assignment）

原理解析

4.1 數組解構

  • 直接提取數組元素： 
    let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3

  • 跳過某些元素： 
    let [first, , third] = [10, 20, 30];
console.log(first, third); // 10, 30

4.2 對象解構

  • 提取對象屬性： 
    let { name, age } = { name: "Alice", age: 25 };
console.log(name, age); // "Alice", 25

  • 給解構變量賦別名： 
    let { name: userName } = { name: "Alice" };
console.log(userName); // "Alice"

4.3 默認值

  • 如果解構的值 undefined，可提供默認值： 
    let { x = 10 } = {};
console.log(x); // 10

5. 默認參數（Default Parameters）

原理解析

5.1 傳統方式

  • 過去需要手動檢查參數： 
    function greet(name) {name = name || "Guest"; // 傳統方式console.log(`Hello, ${name}!`);
}
greet(); // "Hello, Guest!"

5.2 ES6 語法

  • 直接在參數定義時提供默認值： 
    function greet(name = "Guest") {console.log(`Hello, ${name}!`);
}
greet(); // "Hello, Guest!"

  • 默認參數只在傳 undefined 時生效，null 仍會覆蓋默認值： 
    greet(null); // "Hello, null!"

6. 擴展運算符（Spread Operator, ...）

原理解析

6.1 用于數組

  • 展開數組元素：使用 ... 運算符將數組的每一項展開，可以合并數組、拷貝數組，甚至將數組插入到另一個數組中。

    let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

  • 拷貝數組：創建一個新數組，避免修改原數組：

    let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

6.2 用于對象

  • 展開對象的屬性：

    let obj1 = { name: "Alice", age: 25 };
let obj2 = { ...obj1, city: "New York" };
console.log(obj2); // { name: "Alice", age: 25, city: "New York" }

  • 合并對象：

    let obj1 = { name: "Alice" };
let obj2 = { age: 25 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: "Alice", age: 25 }

6.3 與函數參數結合使用

  • 直接展開數組作為函數參數： 
    function sum(a, b, c) {return a + b + c;
}
let nums = [1, 2, 3];
console.log(sum(...nums)); // 6

7. 對象增強語法（Enhanced Object Literals）

原理解析

7.1 屬性簡寫

  • 如果對象字面量中的鍵名與變量名相同，可以省略鍵名：

    let name = "Alice";
let person = { name };
console.log(person); // { name: "Alice" }

7.2 方法簡寫

  • 定義對象方法時，不再需要 function 關鍵字：

    let person = {greet() {console.log("Hello!");}
};
person.greet(); // "Hello!"

7.3 動態屬性名

  • 對象的屬性名可以動態設置，使用方括號 []：

    let propName = "age";
let person = {[propName]: 25
};
console.log(person.age); // 25

8. for...of 迭代器

原理解析

8.1 迭代器（Iterator）

  • for...of 用于迭代對象，尤其適用于數組、字符串、Set、Map 等可迭代對象。

    let arr = [1, 2, 3];
for (let value of arr) {console.log(value); // 1, 2, 3
}

8.2 與 for...in 的區別

  • for...in 遍歷對象的屬性名，而 for...of 遍歷對象的值。

    let arr = [10, 20, 30];for (let key in arr) {console.log(key); // 0, 1, 2（索引）
}for (let value of arr) {console.log(value); // 10, 20, 30（元素值）
}

8.3 可迭代對象

  • 迭代對象必須實現 [Symbol.iterator]() 方法，如 Array, String, Map, Set 等。 
    let str = "Hello";
for (let char of str) {console.log(char); // H, e, l, l, o
}

9. Map 和 Set

原理解析

9.1 Map

  • Map 是一個鍵值對集合，支持任意類型的鍵（不僅僅是字符串），并且有序（按插入順序存儲）。

    let map = new Map();
map.set("name", "Alice");
map.set(1, "one");
console.log(map.get("name")); // Alice
console.log(map.get(1)); // one

  • Map 還支持直接遍歷：

    for (let [key, value] of map) {console.log(key, value); // name Alice, 1 one
}

9.2 Set

  • Set 是一個值的集合，其中每個值都是唯一的，不允許重復。

    let set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set { 1, 2, 3, 4 }

  • Set 可以用來自動去重：

    let arr = [1, 2, 3, 3, 4];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4]

10. 類（Class）

原理解析

10.1 類的定義

  • ES6 引入了更直觀的 class 語法，進行面向對象編程：

    class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log(`Hello, I'm ${this.name}`);}
}let p = new Person("Alice", 25);
p.greet(); // "Hello, I'm Alice"

10.2 類的繼承

  • class 還支持繼承，使用 extends 關鍵字：

    class Student extends Person {constructor(name, age, grade) {super(name, age);this.grade = grade;}study() {console.log(`${this.name} is studying`);}
}let student = new Student("Bob", 20, "A");
student.greet(); // "Hello, I'm Bob"
student.study(); // "Bob is studying"

  • super() 調用父類構造函數。

11. Promise 和異步操作

原理解析

11.1 Promise 的構造

  • Promise 是用于處理異步操作的一種機制，可以簡化回調函數的使用，避免回調地獄：

    let promise = new Promise((resolve, reject) => {let success = true;if (success) {resolve("Operation successful");} else {reject("Operation failed");}
});promise.then((message) => {console.log(message); // "Operation successful"
}).catch((error) => {console.log(error); // "Operation failed"
});

11.2 Promise 的鏈式調用

  • then() 返回一個新的 Promise，因此可以鏈式調用多個異步操作：

    let promise = new Promise((resolve, reject) => resolve(10));promise.then(value => {return value * 2;
}).then(value => {console.log(value); // 20
});

12. 模塊化（Modules, import/export）

原理解析

12.1 導出（export）

  • 使用 export 將函數、變量或類導出，使其可以在其他文件中使用：

    // math.js
export const pi = 3.14;
export function add(a, b) {return a + b;
}

12.2 導入（import）

  • 使用 import 從其他模塊導入：

    // main.js
import { pi, add } from './math.js';
console.log(pi); // 3.14
console.log(add(2, 3)); // 5

13. Symbol 類型

原理解析

13.1 唯一性

  • Symbol 是一個 唯一的原始數據類型，每個 Symbol 值都是唯一的。

    let sym1 = Symbol("desc");
let sym2 = Symbol("desc");
console.log(sym1 === sym2); // false

13.2 用作對象的私有屬性

  • Symbol 可以用于創建私有對象屬性，防止外部訪問：

    const secret = Symbol("secret");
let obj = {[secret]: "hidden"
};
console.log(obj[secret]); // "hidden"

    j

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

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

相關文章

深入理解設計模式之解釋器模式

深入理解設計模式之解釋器模式

深入理解設計模式之解釋器模式 在軟件開發的復雜世界中，我們常常會遇到需要處理特定領域語言的情況。比如在開發一個計算器程序時，需要解析和計算數學表達式；在實現正則表達式功能時，要解析用戶輸入的正則表達式來匹配文本。這些場景都涉及到對特定語言的解釋和執行，而解…
閱讀更多...
巧妙實現右鍵菜單功能，提升用戶操作體驗

巧妙實現右鍵菜單功能，提升用戶操作體驗

在動態交互式圖庫中，右鍵菜單是一項能夠顯著提升用戶操作便捷性的功能。它的設計既要響應用戶點擊位置，又需確保菜單功能與數據操作緊密結合，比如刪除圖片操作。以下將通過一段實際代碼實現，展示從思路到實現的詳細過程。 實現右鍵…
閱讀更多...
??????????????如何使用函數指針來調用函數

??????????????如何使用函數指針來調用函數

在C和C編程中，函數指針是一種特殊類型的指針，它指向一個函數而不是一個變量。使用函數指針可以動態地調用不同的函數，這在實現回調函數、事件處理、策略模式等場景中非常有用。 以下是如何定義和使用函數指針來調用函數的步驟： 定…
閱讀更多...
KEGG條形圖繪制

KEGG條形圖繪制

原始數據 setwd("C:\\Users\\HUAWEI\\Desktop\\proteomic_WGCNA\\bacteria\\Eggnog\\KEGGhun") library(ggplot2) library(cols4all) dt <- read.csv("bacteria_KEGG.csv")dt$KEGG_Term <- factor(dt$KEGG_Term, levels rev(dt$KEGG_Term))#基礎富集…
閱讀更多...
My Metronome for Mac v1.4.2 我的節拍器 支持M、Intel芯片

My Metronome for Mac v1.4.2 我的節拍器 支持M、Intel芯片

應用介紹 My Metronome 是一款適用于 macOS 的專業節拍器應用程序&#xff0c;旨在幫助音樂家、作曲家、學生和任何需要精確節奏控制的人進行練習。無論是進行樂器練習、音樂創作還是演出排練&#xff0c;My Metronome 都能為用戶提供精準的節拍支持和靈活的功能&#xff0c;確…
閱讀更多...
宇樹科技13家核心零部件供應商梳理！

宇樹科技13家核心零部件供應商梳理！

2025年2月6日&#xff0c;摩根士丹利&#xff08;Morgan Stanley&#xff09;發布最新人形機器人研報&#xff1a;Humanoid 100: Mapping the Humanoid Robot Value Chain&#xff08;人形機器人100&#xff1a;全球人形機器人產業鏈梳理&#xff09;。 Humanoid 100清單清單中…
閱讀更多...
Part 3 第十二章 單元測試 Unit Testing

Part 3 第十二章 單元測試 Unit Testing

概述 第十二章圍繞單元測試展開&#xff0c;闡述了單元測試的實踐與重要性&#xff0c;通過對比其他測試類型&#xff0c;突出其特點&#xff0c;還介紹了單元測試的最佳實踐、避免的反模式以及與測試替身相關的內容&#xff0c;為編寫高質量單元測試提供指導。 章節概要 1…
閱讀更多...
【Vite SVG 圖標方案：vite-plugin-svg-icons 指南】

【Vite SVG 圖標方案：vite-plugin-svg-icons 指南】

&#x1f31f; Vite SVG 圖標方案&#xff1a;vite-plugin-svg-icons 指南 &#x1f4dc; 背景與痛點 &#x1f30d; 前端圖標演進史 1.0 &#x1f5bc;? 圖片圖標 → 2.0 &#x1f3ad; 字體圖標 → 3.0 &#x1f3a8; SVG 圖標傳統方案存在三大痛點&#xff1a; 字體圖標…
閱讀更多...
go flag參數 類似Java main 的args

go flag參數 類似Java main 的args

兩部分內容 go run test1.go aa -name 123 1. 解析&#xff1a;aa -name 123 2. 解析&#xff1a;name 123 代碼 package mainimport ("log""os" )func main() {log.Println("main ...")if len(os.Args) > 0 {for index, arg : ra…
閱讀更多...
酒店旅游API：數據交互的隱形橋梁——以攜程API為例

酒店旅游API：數據交互的隱形橋梁——以攜程API為例

一、API&#xff1a;酒店 和第三方服務無縫連接。 核心價值&#xff1a; 實時數據互通&#xff1a;房態、價格、庫存秒級同步。業務流程自動化&#xff1a;預訂、支付、確認全程無需人工干預。生態擴展&#xff1a;開發者可基于API構建定制化工具&#xff08;如比價插件、智能…
閱讀更多...
深入理解 JSP 與 Servlet：原理、交互及實戰應用

深入理解 JSP 與 Servlet：原理、交互及實戰應用

一、引言 在 Java Web 開發領域，JSP（JavaServer Pages）和 Servlet 是兩個至關重要的技術，它們共同構成了動態網頁開發的基礎。Servlet 作為服務器端的 Java 程序，負責處理客戶端請求并生成響應；而 JSP 則是一種簡化的 Servlet 開發方式，允許開發者在 HTML 頁面中嵌入 J…
閱讀更多...
【JavaScript】《JavaScript高級程序設計 (第4版) 》筆記-Chapter20-JavaScript API

【JavaScript】《JavaScript高級程序設計 (第4版) 》筆記-Chapter20-JavaScript API

二十、JavaScript API JavaScript API 隨著 Web 瀏覽器能力的增加&#xff0c;其復雜性也在迅速增加。從很多方面看&#xff0c;現代 Web 瀏覽器已經成為構建于諸多規范之上、集不同 API 于一身的“瑞士軍刀”。瀏覽器規范的生態在某種程度上是混亂而無序的。一些規范如 HTML5&…
閱讀更多...
AI芯片的關鍵特征

AI芯片的關鍵特征

AI芯片是專門為人工智能應用設計的芯片&#xff0c;以下是其應具備的關鍵特征&#xff1a; 強大的并行計算能力&#xff1a;AI任務如深度學習中的神經網絡訓練和推理&#xff0c;涉及大量矩陣運算和并行數據處理。AI芯片需有眾多計算單元&#xff08;如GPU的大量流處理器、ASIC…
閱讀更多...
go 模塊管理

go 模塊管理

go version 查看版本 go version go1.21.12 windows/amd64 需要保證：go的版本升級為1.11以上，go mod依賴的最底版本 go env 查看go的環境變量 go env 開啟go mod # 標識開啟go的模塊管理 set GO111MODULE=on GO111MODULE有三個值：off, on和auto（默認值）。 GO111M…
閱讀更多...
Unity 適用于單機游戲的紅點系統（前綴樹 | 數據結構 | 設計模式 | 算法 | 含源碼）

Unity 適用于單機游戲的紅點系統（前綴樹 | 數據結構 | 設計模式 | 算法 | 含源碼）

文章目錄 功能包括如何使用 功能包括 紅點數據本地持久化 如果子節點有紅點&#xff0c;父節點也要顯示紅點&#xff0c;父節點紅點數為子節點紅點數的和&#xff1b; 當子節點紅點更新時&#xff0c;對應的父節點也要更新&#xff1b; 當所有子節點都沒有紅點時&#xff0c…
閱讀更多...
使用API有效率地管理Dynadot域名，為域名部署DNS安全拓展（DNSSEC）

使用API有效率地管理Dynadot域名，為域名部署DNS安全拓展（DNSSEC）

關于Dynadot Dynadot是通過ICANN認證的域名注冊商&#xff0c;自2002年成立以來&#xff0c;服務于全球108個國家和地區的客戶&#xff0c;為數以萬計的客戶提供簡潔&#xff0c;優惠&#xff0c;安全的域名注冊以及管理服務。 Dynadot平臺操作教程索引&#xff08;包括域名郵…
閱讀更多...
Web - JS基礎語法與表達式

Web - JS基礎語法與表達式

概述 這篇文章主要介紹了 JavaScript 的基礎語法&#xff0c;包括代碼書寫位置、ERPL 環境、變量&#xff08;命名規則、默認值、初始化&#xff09;、數據類型&#xff08;基本和復雜&#xff0c;及各類型特點、轉換&#xff09;、表達式和運算符&#xff08;算數、特殊算數、…
閱讀更多...
一臺服務器將docker image打包去另一天服務器安裝這個鏡像

一臺服務器將docker image打包去另一天服務器安裝這個鏡像

一臺服務器將docker image打到去另一天服務器安裝這個鏡像 1. 打包2.另一臺服務器執行 1. 打包 docker save -o nebula-graph-studio.tar harbor1.vm.example.lan/dockerio/vesoft/nebula-graph-studioxxx.tar 是打包好的文件 后面的是 docker image 2.另一臺服務器執行 docke…
閱讀更多...
一周學會Flask3 Python Web開發-response響應格式

一周學會Flask3 Python Web開發-response響應格式

鋒哥原創的Flask3 Python Web開發 Flask3視頻教程&#xff1a; 2025版 Flask3 Python web開發 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili 在HTTP響應中&#xff0c;數據可以通過多種格式傳輸。大多數情況下&#xff0c;我們會使用HTML格式&#xff0c;這也是Flask中…
閱讀更多...
TCP和Http協議

TCP和Http協議

TCP 三次握手&#xff1a; 第一次握手 &#xff1a; 初始狀態&#xff1a;開始時&#xff0c;客戶端處于 CLOSED&#xff08;關閉&#xff09;狀態&#xff0c;服務端處于 LISTEN&#xff08;監聽&#xff09;狀態&#xff0c;等待客戶端的連接請求。客戶端發送請求&#xff…
閱讀更多...
最新文章

Copyright @ 2022~2023