常見問題的 JavaScript 代碼片段

最後更新於 2021 年 7 月 27 日

每種編程語言都有其缺陷和怪癖。 JavaScript 語言，甚至使用的 JavaScript 代碼片段也不例外。 腳本語言近年來表現得很奇怪，但它是當今使用最廣泛的語言之一。 在很大程度上是因為它是互聯網瀏覽器的主要交互語言。

作為程序員和編碼員，有時我們會遇到重複的、簡單的任務問題，我們需要簡單的代碼片段。 在這篇博客中，我將介紹一些常見問題，這些問題可以使用 ES6 腳本作為一些 JavaScript 代碼片段的一部分輕鬆解決。

JavaScript 代碼片段提示：使用 'let' 而不是 'var'

let類似於var但let有作用域。 let只能在聲明並賦值的塊作用域級別訪問。 var可以在任何級別訪問它所定義的塊範圍。 在以下示例中，變量 'num1' 在If語句中定義，因此在函數外部無法訪問。

 如果真實） {
  讓 num1 = 40;
}

讓 num2 = 20;

控制台.log(num2, num1);
控制台.log(num1);

輸出：
20
不明確的

讓 a = 25;
讓 b = 50;

如果真實） {
  讓 a = 100;
  變量 c = 5;
  控制台.log(a/c);
  控制台.log(b/c);
}

控制台.log(c);
控制台.log(a);

輸出：
20
10
5
25

當變量值不變時使用 'const'

const將常量值分配給無法更改的變量。 每當定義 const 變量時，JavaScript 都會將值的地址引用到該變量。

JavaScript 代碼片段的箭頭函數，一種新的函數語法

ES6 中的 JavaScript 代碼片段的函數已更改為更簡單的表達式，'() => {}'。

 // 舊語法
功能我你好（）{
  console.log("Hello World..!");
}

// 新語法
var myHello = () => {
  console.log("Hello World..!");
}

新語法最初可能有點令人困惑。 語法有兩部分。

 var myHello = ()

JavaScript 代碼片段的第一部分聲明了一個變量並將函數 () 分配給它。 它只是說變量是一個函數。

 => { //做點什麼 } 

第二部分聲明函數的主體部分。 帶有花括號的箭頭部分定義了正文部分。

其他示例，但帶有參數。

 讓 withParameters = (a, b) => {
  控制台.log(a+b);
}

withParameters(10, 20);

輸出：
30

 讓 sumOfNum = (a, b = 10) => {
  返回 a + b;
}

控制台.log(sumOfNum(20);
console.log(sumOfNum(20,30);

輸出：
30
50

新的'for...of...'循環

for...of與for...in非常相似，只是稍作修改。 for...of遍歷像 Array 這樣的元素列表，並一一返回元素（不是它們的索引）。 請注意，變量“num”輸出數組中的每個元素，而不是索引。

 讓數字 = [5,6,7,8];

for（讓數字數量）{
  控制台.log（值）；
}

輸出：
5
6
7
8

 讓 str = 'Arturo';

for (let char of str) {
  控制台.log(char);
}

輸出：
一個
r
噸
你
r
○

破壞變量賦值

從數組中逐一分配變量既耗時又愚蠢。 只需使用析構函數賦值即可更快更輕鬆地完成此任務：

 讓 profile = ['John', 32, 'engineer'];

讓 [姓名，年齡，工作] = 個人資料；

控制台.log（名稱）；

輸出：
約翰

在對像數組中查找特定對象

您需要在 JavaScript 中完成的最常見任務之一是遍歷對像數組以查找特定對象。 find 方法在這裡是一個簡單的解決方案。 您只需使用匿名函數作為參數插入選擇標準，就可以設置：

 讓員工= [
  { id: 0, name: 'Nina' },
  { id: 1, name: '凱文' },
  { id: 2, name: '約翰' }
]

讓員工 = staff.find(emp => emp.name === 'John');

控制台.log（客戶端）；

輸出：
{ id: 2, name: '約翰' }

循環對象鍵和值

我們的數據結構可能是一個包含各種鍵/值對的複雜對象。 迭代每一對可能有點奇怪，但是一旦我們開始使用 Object 的函數就很簡單了。

Object的key被抓取後，我們可以同時循環遍歷key和value。 在接下來的解決方案中，我們在循環期間使用鍵和值變量訪問每一對。

 讓 myObject = { 彼得：15，約翰：20，安妮：35 }；

Object.keys(myObject).forEach((key, value) => {
  //...做一點事
  控制台.log（鍵，值）；
});

輸出：
彼得 15
約翰 20
安妮 35

根據條件過濾對像數組

有時我們有大量數據，我們想根據特定條件過濾掉項目。 我們可以通過一個過濾函數來完成這個。 以下解決方案具有一組文件路徑。 一些文件位於目錄“data1”中，而其他文件位於目錄“data2”中。 假設我們只想過濾特定目錄：

 讓位置 = [
  “文件/數據1/文件”，
  “文件/數據1/文件2”，
  “文件/data2/文件”，
  “文件/數據2/文件2”
];

讓 filter = location.filter(path => path.includes('data2'));

控制台.log（過濾器）；

輸出：
['文件/目錄2/文件'，'文件/目錄2/文件2']

通過指定路徑字符串必須包含字符串“data2”，我們過濾掉任何不包含“data2”的路徑。 請記住，您傳遞給 filter 的任何函數都必須返回 true 才能將項目包含在結果中。

將鍵分配給具有相同名稱的對象

當您將鍵分配給對象時，如果鍵與保存要分配的值的變量同名，則可以完全省略值分配。 這可以防止你不得不重複自己，這是我們都討厭做的事情。 看看這個例子：

 讓名字='約翰';
讓年齡= 32；
讓工作 = '工程師';

// 而不是這個
讓 profile1 = { 姓名：姓名，年齡：年齡，工作：工作 }；

// 做這個
讓 profile2 = { 姓名、年齡、工作 };

控制台.log(profile2);

輸出：
{ 姓名：“約翰”，年齡：32，工作：“工程師”}

使用 ES6 擴展運算符 '...'

擴展運算符允許您從字面上“擴展”一個數組。 這可用於將數組轉換為參數列表，甚至組合兩個數組。 您也可以使用它來形成函數的參數列表。

在第一個示例中，我們展示了擴展運算符如何在數組上工作並將每個項目轉換為單個元素。

 讓 numbers1 = [1,2,3,4,5];

控制台.log(...numbers1);

輸出：
1 2 3 4 5

第二個示例通過創建一個包含兩個內容的新臨時數組來組合兩個數組的內容。

 讓 numbers2 = [6,7,8,9,10];

讓組合 = [...numbers1, ...numbers2];

console.log(...組合);

輸出：
1 2 3 4 5 6 7 8 9 10

最後一個示例說明了擴展運算符如何將數組轉換為函數的參數列表。 Math.max 返回傳遞給它的參數列表中的最大數字。 其中一個論點是 10，這是最高的。

 讓 numbers1 = [1,2,3,4,5];

讓 numbers2 = [6,7,8,9,10];

讓組合 = [...numbers1, ...numbers2];

console.log(Math.max(...combined));

輸出：
10

新的 Getter 和 Setter 函數

Getter 和 setter 是 ES6 中引入的有用特性之一。 如果我們在 JavaScript 中使用類，它會派上用場。

 類人名 {
  構造函數（名稱）{
    this.name = 名稱；
  }
  獲取名稱（）{
    返回這個名稱；
  }
  設置名稱（名稱）{
    this.name = 名稱；
  }
}

let person = new PersonName("Jon Snow");
console.log(person.Name); // (一)

person.Name = "丹妮"; // (B)
console.log(person.Name);

輸出：
瓊恩·雪諾
丹妮

我們可以看到 PersonName 類中有兩個具有“get”和“set”屬性的函數。 “get”屬性用於獲取變量的值，“set”屬性用於設置變量的值。 我們也可以看到， get Name 函數（A）是不帶括號調用的， set Name 函數（B）是不帶括號調用的，就像給變量賦值一樣。