JavaScript 高階技巧

SRIGT發表於2024-03-12

JavaScript

0x01 深淺複製

開發中經常需要複製（複製）一個物件，如果直接賦值，則對複製物件的修改會影響到源物件
```
const o1 = {
  a: 1,
  b: 2
}
const o2 = o1
console.log(o2) // { a: 1, b: 2 }

o2.a = 3
console.log(o1) // { a: 3, b: 2 }
console.log(o2) // { a: 3, b: 2 }
```
原因在於，直接賦值的方法是在複製物件資料在棧中的地址，即兩個變數操作同一個位置的資料
深複製與淺複製只針對引用型別

（1）淺複製

淺複製只將物件或陣列的第一層進行復制，其他層級複製的是所儲存的記憶體地址

a. 物件

方法：Object.assign(to, from) 或 {...obj}

案例：

const o1 = {
  a: 1,
  b: 2
}

const o2 = {}
Object.assign(o2, o1)
console.log(o2) // { a: 1, b: 2 }
o2.a = 3
console.log(o1) // { a: 1, b: 2 }
console.log(o2) // { a: 3, b: 2 }

const o3 = {...o1}
console.log(o3) // { a: 1, b: 2 }

淺複製僅複製第一層資料，而不會深入

const o1 = {
  a: 1,
  b: {
    c: 2
  }
}

const o2 = {}
Object.assign(o2, o1)

o2.b.c = 3

console.log(o1) // { a: 1, b: { c: 3 } }
console.log(o2) // { a: 1, b: { c: 3 } }

b. 陣列

方法：Array.prototype.concat() 或 [...array]

案例：

const a1 = [1, 2, 3]

const a2 = a1.concat([])
console.log(a2) // [ 1, 2, 3 ]

const a3 = [...a1]
console.log(a3) // [ 1, 2, 3 ]

（2）深複製

深複製會構造一個新的複合陣列或物件，遇到引用所指向的引用資料型別會繼續執行複製
常見方法：

a. 遞迴方法

遞回應用舉例：透過 setTimeout 模擬 setInterval 效果實現頁面中的時鐘每秒重新整理

document.body.appendChild(document.createElement('div'))
function getTime() {
document.querySelector('div').innerHTML = new Date().toLocaleString()
setTimeout(getTime, 1000)
}
getTime()

基於遞迴方法的深複製案例：

const o1 = {
  a: 1,
  b: {
    c: 2
  }
}
const o2 = {}

function deepCopy(newObj, oldObj) {
  // 遍歷oldObj中的所有屬性
  for (let key in oldObj) {
    // 如果屬性值是物件，則遞迴進行深度複製
    if (typeof oldObj[key] === 'object') {
      newObj[key] = {} // 為newObj建立一個空物件作為屬性值
      deepCopy(newObj[key], oldObj[key]) // 遞迴呼叫deepCopy函式複製屬性值中的所有屬性
    } else {
      // 如果屬性值不是物件，直接複製
      newObj[key] = oldObj[key]
    }
  }
}

deepCopy(o2, o1)
console.log(o2)	// { a: 1, b: { c: 2 } }
o2.b.c = 3
console.log(o1)	// { a: 1, b: { c: 2 } }
console.log(o2)	// { a: 1, b: { c: 3 } }

b. Lodash

Lodash 是第三方 JS 庫，官網連結
引入 Lodash：https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js

const o1 = {
  a: 1,
  b: {
    c: 2
  }
}

const o2 = _.cloneDeep(o1)

console.log(o2)

c. JSON 方法

const o1 = {
  a: 1,
  b: {
    c: 2
  }
}

const o2 = JSON.parse(JSON.stringify(o1))

console.log(o2)

0x02 異常處理

定義：預估程式碼執行過程中可能發生的錯誤，使用特定的方法對這些錯誤進行合適的處理
意義：有助於提高程式碼健壯性

（1）throw 丟擲異常

function division(x, y) {
  if(!x || !y) {
    throw "The parameter cannot be empty"
  }
  if(y === 0) {
    throw new Error("Divisor cannot be zero")
  }
}
division()

throw 丟擲異常資訊，程式也會中止
Error 物件常配合 throw 使用，能夠設定更詳細的錯誤訊息

（2）try...catch 捕獲異常

document.body.appendChild(document.createElement('p'))
function fun() {
  try {
    // Correct: document.querySelector('p').style.color = 'red'
    document.querySelector('.p').style.color = 'red'
  } catch (e) {
    console.log("Catch a error: ", e.message)
  } finally {
    console.log("Finally")
  }
}
fun()

用於捕獲錯誤資訊
try 中寫入可能會發生錯誤的程式碼
catch 中寫入捕獲錯誤後的處理
finally 中寫入無論是否出錯都會執行的程式碼

（3）debugger

const btn = document.createElement('button')
btn.onclick = function () {
  debugger
}
btn.textContent = 'Debug'
document.body.appendChild(btn)

使用 debugger 可以進入逐步除錯

0x03 處理 this

（1）this 指向

a. 普通函式

普通函式的呼叫方式決定了 this 的值

const obj = {
  a: function fun() {
    console.log(this);
  }
}
obj.a() // {a:f}

沒有明確的呼叫方法時，this 的值為 window

function fun() {
  console.log(this) // [object Window]
}
fun()

嚴格模式下沒有明確的呼叫方法時，this 的值為 undefined

'use strict'
function fun() {
  console.log(this) // undefined
}
fun()

b. 箭頭函式

箭頭函式不存在 this
- 箭頭函式會預設繫結外層 this 的值
- 箭頭函式中的 this 引用的是最近作用域中的 this
- 箭頭函式會向外層作用域中一層層查詢 this，直至找到有 this 的定義
```
const obj = {
  a: () => {
    console.log(this)
  }
}
obj.a()	// [object Window]
```

在開發中，使用箭頭函式前需要考慮函式中 this 的值

const btn = document.createElement("button")
btn.textContent = "Click"
btn.addEventListener("click", function() {
  console.log(this) // <button>Click</button>
})
btn.addEventListener("click", () => {
  console.log(this) // [object Window]
})
document.body.appendChild(btn)

基於原型的物件導向不推薦採用箭頭函式

function Obj() {}
Obj.prototype.a = () => {
  console.log(this)
}
const obj = new Obj()
obj.a()	// [object Window]

（2）改變 this

有三個方法可以動態指定普通函式中 this 的指向

a. call()

語法：call(thisArg, arg1, arg2, ...)
- thisArg：在函式執行時，指定 this 的值
- arg1, arg2, ...：傳參
- 返回值就是函式的返回值

舉例

const obj = { a: 0 }
function fun(x, y) {
  console.log(x, y, this) // 1 2 {a: 0}
}
fun.call(obj, 1, 2)

b. apply()

語法：fun.apply(thisArg, [argsArray])
- thisArg：在函式執行時，指定 this 的值
- argsArray：傳參，必須包含在陣列裡面
- 返回值就是函式的返回值
- 因此 apply 主要跟陣列有關係

舉例

function sum(x, y) {
  console.log(this) // [object Window]
  return x + y
}
console.log(sum.apply(null, [1, 2])) // 3
console.log(Math.max.apply(Math, [1, 2, 3])) // 3

c. bind()

bind 方法不會呼叫函式，但是也可以改變函式內部的 this 指向
語法：bind(thisArg, arg1, arg2, ...)
- thisArg：在函式執行時，指定 this 的值
- arg1, arg2, ...：傳參，必須包含在陣列裡面
- 返回值由指定的 this 值和初始化引數改造的原函式複製

舉例

const obj = { a: 0 }
function fun(x, y) {
  console.log(x, y, this)
}
fun.bind(obj, 1, 2)() // 1 2 {a: 0}

0x04 效能最佳化

（1）防抖

防抖（debounce）：單位時間內，頻繁觸發事件，只執行最後一次
- 觸發事件後，在 \(n\) 秒內函式只能執行一次，如果在 \(n\) 秒內再次被觸發，則重新計算函式執行時間
使用場景：常用於輸入事件的處理中，以減少不必要的計算或操作

舉例：滑鼠在盒子上移動，每 500ms 盒內數字加一

const box = document.createElement('div')
document.body.appendChild(box)

let cnt = 1
function add() {
  box.innerHTML = cnt++
}

function debounce(func, timeMs) {
  let timer
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(function () {
      func()
    }, timeMs)
  }
}

box.addEventListener("mousemove", debounce(add, 500))

防抖函式的封裝說明

/**
 * @param {Function} func 要執行的函式。
 * @param {number} timeMs 延遲的時間，單位為毫秒。
 * @returns {Function} 返回一個新的函式，該函式具有防抖功能。
 */
function debounce(func, timeMs) {
  let timer // 用於儲存定時器的變數

  // 返回一個新的函式，該函式會延遲執行傳入的func函式
  return function () {
    if (timer) clearTimeout(timer) // 如果存在定時器，則清除，以防止之前設定的執行被觸發

    // 設定一個新的定時器，當延遲時間過去後，執行func函式
    timer = setTimeout(function () {
      func()
    }, timeMs)
  }
}

（2）節流

節流（throttle）：單位時間內，頻繁觸發事件，只執行一次
- 連續觸發事件，但在 \(n\) 秒內僅執行一次函式
使用場景：常用於高頻事件的處理中，以減少不必要的效能消耗

舉例：滑鼠在盒子上移動，每隔 500ms 盒內數字加一

const box = document.createElement('div')
document.body.appendChild(box)

let cnt = 1
function add() {
  box.innerHTML = cnt++
}

function throttle(func, timeMs) {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(function() {
        func()
        timer = null
      }, timeMs)
    }
  }
}

box.addEventListener("mousemove", throttle(add, 500))

節流函式封裝說明

/**
 * @param {Function} func 要節流的函式
 * @param {number} timeMs 節流的時間間隔（毫秒）
 * @returns {Function} 返回一個新函式，新函式將控制原函式在指定時間間隔內只執行一次
 */
function throttle(func, timeMs) {
  let timer = null // 利用閉包儲存一個定時器變數

  return function () {
    // 如果定時器不存在，則設定定時器
    if (!timer) {
      timer = setTimeout(function() {
        func() // 在指定時間間隔後執行原函式
        timer = null // 執行後重置定時器變數
      }, timeMs)
    }
  }
}

-End-

常用JavaScript的高階技巧
2019-04-02
JavaScript
《前端之路》之 JavaScript 高階技巧、高階函式（一）
2018-08-28
前端JavaScript函式
JavaScript常用的簡潔高階技巧
2019-03-08
JavaScript
CSS高階技巧
2016-11-20
CSS
JS高階技巧
2017-09-03
JS
提升開發技能：10個高階的JavaScript技巧
2023-11-27
JavaScript
Python模組高階技巧
2019-02-24
Python
Github高階搜尋技巧
2019-01-11
Github
CSS 高階佈局技巧
2016-12-13
CSS
JavaScript系列--JavaScript陣列高階函式reduce()方法詳解及奇淫技巧
2019-06-26
JavaScript陣列函式
Javascript 高階函式
2023-02-08
JavaScript函式
iOS 核心動畫高階技巧 - 1
2019-11-29
iOS動畫
JS高階技巧(簡潔版)
2018-06-01
JS
ZeroMQ 教程 002 : 高階技巧
2018-05-10
MQ
JavaScript高階特性 — 作用域
2021-09-09
JavaScript
javaScript高階級函式
2018-12-10
JavaScript函式
javascript的高階應用
2007-12-04
JavaScript
CSS使用的一些小技巧/高階進階
2019-03-04
CSS
24個 CSS 高階技巧合集
2019-02-14
CSS
iOS高階開發者面試必過技巧
2018-12-19
iOS面試
LinuxShell高階技巧(目錄)
2018-03-10
Linux
jQuery高階技巧——效能優化篇
2016-05-11
jQuery優化
如何使用GOOGLE高階搜尋技巧
2014-06-28
Go
Python高階程式設計技巧
2014-03-14
Python程式設計
12 個 CSS 高階技巧彙總
2015-10-13
CSS
[譯] Kotlin 協程高階使用技巧
2019-03-03
Kotlin
（CSS學習記錄）：CSS高階技巧
2020-09-27
CSS
Core Animation 高階技巧（四）視覺效果
2017-04-22
視覺
你所不知的SEO高階策略技巧
2016-04-14
Google高階搜尋技巧之高階語法查詢指令
2018-07-15
Go
Javascript高階程式設計備忘
2019-04-04
JavaScript程式設計
JavaScript 高階函式快速入門
2019-03-20
JavaScript函式
javascript中replace的高階運用
2019-04-29
JavaScript
javascript高階函式的介紹
2021-09-11
JavaScript函式
理解 JavaScript 中的高階函式
2018-11-13
JavaScript函式
Java-JavaScript高階-第34節
2020-12-08
JavaScript
JavaScript高階程式設計筆記
2020-12-17
JavaScript程式設計筆記
重讀《JavaScript高階程式設計》
2018-03-03
JavaScript程式設計