JavaScript知識總結 ES6篇

来源:https://www.cnblogs.com/smileZAZ/archive/2022/04/14/16144422.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. let、const、var的區別 （1）塊級作用域：塊作用域由 { }包括，let和const具有塊級作用域，var不存在塊級作用域。塊級作用域解決了ES5中的兩個問題： 內層變數可能覆蓋外層變數 用來計數的迴圈變數泄露為全局變數 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1. let、const、var的區別

（1）塊級作用域：塊作用域由 { }包括，let和const具有塊級作用域，var不存在塊級作用域。塊級作用域解決了ES5中的兩個問題：

  • 內層變數可能覆蓋外層變數
  • 用來計數的迴圈變數泄露為全局變數

（2）變數提升：var存在變數提升，let和const不存在變數提升，即在變數只能在聲明之後使用，否在會報錯。

（3）給全局添加屬性：瀏覽器的全局對象是window，Node的全局對象是global。var聲明的變數為全局變數，並且會將該變數添加為全局對象的屬性，但是let和const不會。

（4）重覆聲明：var聲明變數時，可以重覆聲明變數，後聲明的同名變數會覆蓋之前聲明的遍歷。const和let不允許重覆聲明變數。

（5）暫時性死區：在使用let、const命令聲明變數之前，該變數都是不可用的。這在語法上，稱為暫時性死區。使用var聲明的變數不存在暫時性死區。

（6）初始值設置：在變數聲明時，var 和 let 可以不用設置初始值。而const聲明變數必須設置初始值。

（7）指針指向：let和const都是ES6新增的用於創建變數的語法。 let創建的變數是可以更改指針指向（可以重新賦值）。但const聲明的變數是不允許改變指針的指向。

2. const對象的屬性可以修改嗎

const保證的並不是變數的值不能改動，而是變數指向的那個記憶體地址不能改動。對於基本類型的數據（數值、字元串、布爾值），其值就保存在變數指向的那個記憶體地址，因此等同於常量。

但對於引用類型的數據（主要是對象和數組）來說，變數指向數據的記憶體地址，保存的只是一個指針，const只能保證這個指針是固定不變的，至於它指向的數據結構是不是可變的，就完全不能控制了。

3. 如果new一個箭頭函數的會怎麼樣

箭頭函數是ES6中的提出來的，它沒有prototype，也沒有自己的this指向，更不可以使用arguments參數，所以不能New一個箭頭函數。

new操作符的實現步驟如下：

  1. 創建一個對象
  2. 將構造函數的作用域賦給新對象（也就是將對象的__proto__屬性指向構造函數的prototype屬性）
  3. 指向構造函數中的代碼，構造函數中的this指向該對象（也就是為這個對象添加屬性和方法）
  4. 返回新的對象

所以，上面的第二、三步，箭頭函數都是沒有辦法執行的。

4. 箭頭函數與普通函數的區別

（1）箭頭函數比普通函數更加簡潔

  • 如果沒有參數，就直接寫一個空括弧即可
  • 如果只有一個參數，可以省去參數的括弧
  • 如果有多個參數，用逗號分割
  • 如果函數體的返回值只有一句，可以省略大括弧
  • 如果函數體不需要返回值，且只有一句話，可以給這個語句前面加一個void關鍵字。最常見的就是調用一個函數：
let fn = () => void doesNotReturn();

（2）箭頭函數沒有自己的this

箭頭函數不會創建自己的this， 所以它沒有自己的this，它只會在自己作用域的上一層繼承this。所以箭頭函數中this的指向在它在定義時已經確定了，之後不會改變。

（3）箭頭函數繼承來的this指向永遠不會改變

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};
obj.a();    // 'OBJ'
obj.b();    // 'GLOBAL'
new obj.a()  // undefined
new obj.b()  // Uncaught TypeError: obj.b is not a constructor

對象obj的方法b是使用箭頭函數定義的，這個函數中的this就永遠指向它定義時所處的全局執行環境中的this，即便這個函數是作為對象obj的方法調用，this依舊指向Window對象。需要註意，定義對象的大括弧{}是無法形成一個單獨的執行環境的，它依舊是處於全局執行環境中。

（4）call()、apply()、bind()等方法不能改變箭頭函數中this的指向

var id = 'Global';
let fun1 = () => {
    console.log(this.id)
};
fun1();                     // 'Global'
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'

（5）箭頭函數不能作為構造函數使用

構造函數在new的步驟在上面已經說過了，實際上第二步就是將函數中的this指向該對象。 但是由於箭頭函數時沒有自己的this的，且this指向外層的執行環境，且不能改變指向，所以不能當做構造函數使用。

（6）箭頭函數沒有自己的arguments

箭頭函數沒有自己的arguments對象。在箭頭函數中訪問arguments實際上獲得的是它外層函數的arguments值。

（7）箭頭函數沒有prototype

（8）箭頭函數不能用作Generator函數，不能使用yeild關鍵字

5. 箭頭函數的this指向哪⾥？

箭頭函數不同於傳統JavaScript中的函數，箭頭函數並沒有屬於⾃⼰的this，它所謂的this是捕獲其所在上下⽂的 this 值，作為⾃⼰的 this 值，並且由於沒有屬於⾃⼰的this，所以是不會被new調⽤的，這個所謂的this也不會被改變。

可以⽤Babel理解⼀下箭頭函數: 

// ES6 
const obj = { 
  getArrow() { 
    return () => { 
      console.log(this === obj); 
    }; 
  } 
}

轉化後：

// ES5，由 Babel 轉譯
var obj = { 
   getArrow: function getArrow() { 
     var _this = this; 
     return function () { 
        console.log(_this === obj); 
     }; 
   } 
};

6. 擴展運算符的作用及使用場景

（1）對象擴展運算符

對象的擴展運算符(...)用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中。

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述方法實際上等價於:

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

Object.assign方法用於對象的合併，將源對象（source）的所有可枚舉屬性，複製到目標對象（target）。Object.assign方法的第一個參數是目標對象，後面的參數都是源對象。(如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性)。

同樣，如果用戶自定義的屬性，放在擴展運算符後面，則擴展運算符內部的同名屬性會被覆蓋掉。

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

利用上述特性就可以很方便的修改對象的部分屬性。在redux中的reducer函數規定必須是一個純函數，reducer中的state對象要求不能直接修改，可以通過擴展運算符把修改路徑的對象都複製一遍，然後產生一個新的對象返回。

需要註意：擴展運算符對對象實例的拷貝屬於淺拷貝。

（2）數組擴展運算符

數組的擴展運算符可以將一個數組轉為用逗號分隔的參數序列，且每次只能展開一層數組。

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5

下麵是數組的擴展運算符的應用：

  • 將數組轉換為參數序列
function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
  • 複製數組
const arr1 = [1, 2];
const arr2 = [...arr1];

要記住：擴展運算符(…)用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中，這裡參數對象是個數組，數組裡面的所有對象都是基礎數據類型，將所有基礎數據類型重新拷貝到新的數組中。

  • 合併數組

如果想在數組內合併數組，可以這樣：

const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]
  • 擴展運算符與解構賦值結合起來，用於生成數組
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

需要註意：如果將擴展運算符用於數組賦值，只能放在參數的最後一位，否則會報錯。

const [...rest, last] = [1, 2, 3, 4, 5];         // 報錯
const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 報錯
  • 將字元串轉為真正的數組
[...'hello']    // [ "h", "e", "l", "l", "o" ]
  • 任何 Iterator 介面的對象，都可以用擴展運算符轉為真正的數組

比較常見的應用是可以將某些數據結構轉為數組：

// arguments對象
function foo() {
  const args = [...arguments];
}

用於替換es5中的Array.prototype.slice.call(arguments)寫法。

  • 使用Math函數獲取數組中特定的值
const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9

7. Proxy 可以實現什麼功能？

在 Vue3.0 中通過 Proxy 來替換原本的 Object.defineProperty 來實現數據響應式。

Proxy 是 ES6 中新增的功能，它可以用來自定義對象中的操作。

let p = new Proxy(target, handler)

target 代表需要添加代理的對象，handler 用來自定義對象中的操作，比如可以用來自定義 set 或者 get 函數。

下麵來通過 Proxy 來實現一個數據響應式：

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
}
let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`監聽到屬性${property}改變為${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 監聽到屬性a改變
p.a // 'a' = 2

在上述代碼中，通過自定義 set 和 get 函數的方式，在原本的邏輯中插入了我們的函數邏輯，實現了在對對象任何屬性進行讀寫時發出通知。

當然這是簡單版的響應式實現，如果需要實現一個 Vue 中的響應式，需要在 get 中收集依賴，在 set 派發更新，之所以 Vue3.0 要使用 Proxy 替換原本的 API 原因在於 Proxy 無需一層層遞歸為每個屬性添加代理，一次即可完成以上操作，性能上更好，並且原本的實現有一些數據更新不能監聽到，但是 Proxy 可以完美監聽到任何方式的數據改變，唯一缺陷就是瀏覽器的相容性不好。

8. 對對象與數組的解構的理解

解構是 ES6 提供的一種新的提取數據的模式，這種模式能夠從對象或數組裡有針對性地拿到想要的數值。

1）數組的解構

在解構數組時，以元素的位置為匹配條件來提取想要的數據的：

const [a, b, c] = [1, 2, 3]

最終，a、b、c分別被賦予了數組第0、1、2個索引位的值：

數組裡的0、1、2索引位的元素值，精準地被映射到了左側的第0、1、2個變數里去，這就是數組解構的工作模式。還可以通過給左側變數數組設置空占位的方式，實現對數組中某幾個元素的精準提取：

const [a,,c] = [1,2,3]

2）對象的解構

對象解構比數組結構稍微複雜一些，也更顯強大。在解構對象時，是以屬性的名稱為匹配條件，來提取想要的數據的。現在定義一個對象：

const stu = {
  name: 'Bob',
  age: 24
}

假如想要解構它的兩個自有屬性，可以這樣：

const { name, age } = stu

這樣就得到了 name 和 age 兩個和 stu 平級的變數：

註意，對象解構嚴格以屬性名作為定位依據，所以就算調換了 name 和 age 的位置，結果也是一樣的：

const { age, name } = stu

9. 如何提取高度嵌套的對象里的指定屬性？

有時會遇到一些嵌套程度非常深的對象：

const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}

像此處的 name 這個變數，嵌套了四層，此時如果仍然嘗試老方法來提取它：

const { name } = school

顯然是不奏效的，因為 school 這個對象本身是沒有 name 這個屬性的，name 位於 school 對象的“兒子的兒子”對象裡面。要想把 name 提取出來，一種比較笨的方法是逐層解構：

const { classes } = school
const { stu } = classes
const { name } = stu
name // 'Bob'

但是還有一種更標準的做法，可以用一行代碼來解決這個問題：

const { classes: { stu: { name } }} = school
       
console.log(name)  // 'Bob'

可以在解構出來的變數名右側，通過冒號+{目標屬性名}這種形式，進一步解構它，一直解構到拿到目標數據為止。

10. 對 rest 參數的理解

擴展運算符被用在函數形參上時，它還可以把一個分離的參數序列整合成一個數組：

function mutiple(...args) {
  let result = 1;
  for (var val of args) {
    result *= val;
  }
  return result;
}
mutiple(1, 2, 3, 4) // 24

這裡，傳入 mutiple 的是四個分離的參數，但是如果在 mutiple 函數里嘗試輸出 args 的值，會發現它是一個數組：

function mutiple(...args) {
  console.log(args)
}
mutiple(1, 2, 3, 4) // [1, 2, 3, 4]

這就是 … rest運算符的又一層威力了，它可以把函數的多個入參收斂進一個數組裡。這一點經常用於獲取函數的多餘參數，或者像上面這樣處理函數參數個數不確定的情況。

11. ES6中模板語法與字元串處理

ES6 提出了“模板語法”的概念。在 ES6 以前，拼接字元串是很麻煩的事情：

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = 'my name is ' + name + ', I work as a ' + career + ', I love ' + hobby[0] + ' and ' + hobby[1]

僅僅幾個變數，寫了這麼多加號，還要時刻小心裡面的空格和標點符號有沒有跟錯地方。但是有了模板字元串，拼接難度直線下降：

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

字元串不僅更容易拼了，也更易讀了，代碼整體的質量都變高了。這就是模板字元串的第一個優勢——允許用${}的方式嵌入變數。但這還不是問題的關鍵，模板字元串的關鍵優勢有兩個：

  • 在模板字元串中，空格、縮進、換行都會被保留
  • 模板字元串完全支持“運算”式的表達式，可以在${}里完成一些計算

基於第一點，可以在模板字元串里無障礙地直接寫 html 代碼：

let list = `
	<ul>
		<li>列表項1</li>
		<li>列表項2</li>
	</ul>
`;
console.log(message); // 正確輸出，不存在報錯

基於第二點，可以把一些簡單的計算和調用丟進 ${} 來做：

function add(a, b) {
  const finalString = `${a} + ${b} = ${a+b}`
  console.log(finalString)
}
add(1, 2) // 輸出 '1 + 2 = 3'

除了模板語法外， ES6中還新增了一系列的字元串方法用於提升開發效率：

  • 存在性判定：在過去，當判斷一個字元/字元串是否在某字元串中時，只能用 indexOf > -1 來做。現在 ES6 提供了三個方法：includes、startsWith、endsWith，它們都會返回一個布爾值來告訴你是否存在。
    • includes：判斷字元串與子串的包含關係：
const son = 'haha' 
const father = 'xixi haha hehe'
father.includes(son) // true
    • startsWith：判斷字元串是否以某個/某串字元開頭：
const father = 'xixi haha hehe'
father.startsWith('haha') // false
father.startsWith('xixi') // true
    • endsWith：判斷字元串是否以某個/某串字元結尾：
const father = 'xixi haha hehe'
father.endsWith('hehe') // true
  • 自動重覆：可以使用 repeat 方法來使同一個字元串輸出多次（被連續複製多次）：
const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3) 
console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 刪庫到跑路?還得看這篇Redis資料庫持久化與企業容災備份恢復實戰指南
    本章目錄 0x00 數據持久化 1.RDB 方式 2.AOF 方式 如何抉擇 RDB OR AOF? 0x01 備份容災 一、備份 1.手動備份redis資料庫 2.遷移Redis指定db-資料庫 3.Redis集群數據備份與遷移 二、恢復 1.系統Redis用戶被刪除後配置數據恢復流程 2.Kub ...
  • Kotlin快速上手
    一、Kotlin基礎 1.數據類型聲明 在Kotlin中要定義一個變數需要使用var關鍵字 //定義了一個可以修改的Int類型變數 var number = 39 如果要定義一個常量可以使用val關鍵字,等價於Java的final關鍵字. val name = "miku" //給val定義的常量再 ...
  • 【Harmony OS】【ARK UI】ETS 的 List 實現下拉刷新功能實現
    在HarmonyOS開發中List下拉刷新是一種很常見的問題，今天描述怎麼實現List下拉刷新的功能實現，主要分為“開發準備”，“代碼實現”，“運行效果” 1. 開發準備 我們需要學習以下知識點 1.1 【Harmony OS】【ARK UI】【Demo】載入動畫實現 1.2 PanGesture ...
  • 開發者必讀：2022年移動應用趨勢洞察白皮書
    華為開發者聯盟與艾瑞咨詢聯合發佈《2022年移動應用趨勢洞察白皮書》，本白皮書主要分析移動應用行業發展現狀和趨勢，並對影音娛樂、通訊社交、電商生活、運動健康、出行導航等細分行業場景進行分析，把握移動應用細分行業發展特色和趨勢，為廣大開發者的開發和運營決策提供參考。 華為開發者聯盟一直致力於全方位聯接 ...
  • 初識前後端
    初識前後端 在學習瞭解前後端的過程中，自己看到了這一篇好的文章，摘下了一些當下用的的內容，供複習參考。 什麼是前端開發？ 前端開發主要涉及網站和 App，用戶能夠從 App 屏幕或瀏覽器上看到東西。簡單地說，能夠從 App 屏幕和瀏覽器上看到的東西都屬於前端。 網站和移動 App 的前端 **對於網 ...
  • node.js - 路由、中間件、mysql
    這幾天天天搞到這麼晚，我看今天的內容看起不多啊，不知道為什麼學著學著就到了這麼晚。今天的內容還是有點多哈，有點自我矛盾了，再次一一道來。 1. 首先今天先看到路由的概念，什麼叫做路由？ 路由就是映射關係，在express中路由指的是客戶端請求和伺服器處理函數的映射關係，路由有三部分組成：請求類型、請 ...
  • 空間轉換/動畫
    一、背景由來 cookie原來是用來網路請求攜帶用戶信息的，只不過在HTML5出現之前，前端沒有本地存儲的方法，只能使用cookie代替 localstorge、sessionStorge是html5提供的API，極大的方便了前端在客戶端存儲數據 二、那麼這三者有什麼區別呢？ 1.存儲時間 cook ...
  • JavaScript深入理解系列：bind方法詳解以及手寫
    定義 bind() 方法創建一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定為 bind() 的第一個參數，而其餘參數將作為新函數的參數，供調用時使用。 由定義可知，函數調用bind()方法的時候，會返回一個新函數，並且this指向bind函數的第一個參數，簡單來表示。 fn ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類