開始 React 之前需要學習的基本 JavaScript 概念

React 是一個流行的 Javascript 函式庫，用於建立現實世界的應用程式。要成為熟練的 React 開發人員，了解一些基本的 Javascript 概念非常重要。對許多人來說，學習 React 似乎很困難，但理解這些基本概念可以簡化學習過程。
在本文中，我將介紹每位開發人員在開始 React 之前應該了解的 15 個基本概念。每個概念都透過範例進行解釋，以顯示其重要性。
如果您剛開始使用 React 或即將探索該程式庫，那麼這篇文章適合您。

15 個 JavaScript 基本概念

1.回呼函數
函數是任何程式的建構塊，允許多次呼叫程式碼而無需重複。
一種類型的函數是回調函數。
如果您希望使用者在顯示任何資訊之前點擊瀏覽器中的箭頭，或者希望在從 API 取得資料後立即執行某些程式碼，您可以利用回調的功能。
回調函數在函數或事件發生後執行其任務，並允許控制函數的執行。
它是一個作為參數傳遞給另一個函數的函數，用於指定非同步操作或事件完成後應該發生的情況。

例子

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.箭頭函數
ES6 中引入了箭頭函數，可以讓函數語法寫得更簡潔。箭頭函數因其簡潔而在React中被廣泛使用。

例子

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Array.Map() 方法
在 React 中通常不鼓勵更改現有數組，因為這可能會導致不必要的錯誤和效能問題。因此，開發人員採用數組方法。函數式數組方法不會改變原始數組，而是從現有數組傳回一個新數組。
函數式陣列方法之一是 Array.map() 方法。
Array.map() 方法循環遍歷現有陣列並傳回具有相同長度的新陣列。可以對新數組進行更改，而不會對現有數組產生任何影響。

例子

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Array.Filter() 方法
Array.filter() 方法以有趣且合乎邏輯的方式運作。這些方法可用於根據 true 或 false 條件過濾掉數組中的某些元素。
當一條語句為假時，它會自動被過濾掉；當它為真時，它會保留它，使其成為從陣列中刪除不需要的元素的合適方法。

例子

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

5.Array.reduce() 方法
顧名思義，array.reduce() 方法將整個陣列減少為單一值。這是對數組元素求和或分組的最佳方法之一。

3個Reduce方法中的重要關鍵字

• 初始值（可選）：累加器的起始值。如果不提供，則使用第一個陣列元素作為初始值，從第二個元素開始迭代。
• 累加器（必填）：之前迭代的累加結果。
• 目前值（必填）：目前正在處理的元素。

例子

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

6.範本文字
範本文字允許字串包含Javascript變數或任何JavaScript表達式。
它提供了一種在 JavaScript 中使用反引號和帶有大括號 ${}.

的美元創建字串的簡單方法

例子

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

7.三元運算子
三元運算子是條件運算符，提供了一個簡單而簡潔的方式來寫 if..else 語句。
React 不直接支援 if..else 語句，因為它不適合 React 中存在的名為 JSX 的語法表達式。
JSX 是 JavaScript 的語法擴展，允許將 Javascript、CSS 和 React 元件嵌入到 HTML 中。
React 語法更多地被認為是一個表達式而不是一個語句，並且三元作為它合適的運算符。

例子

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

8.短路和邏輯運算子
邏輯運算子用於將多個條件組合成一個表達式。 JavaScript 中存在的主要邏輯運算子有：

• AND- 只有當兩個運算元都為 true 時才傳回 true。
• OR- 如果至少一個操作數為 true，則傳回 true。
• NOT-反轉其運算元的真值..

短路是邏輯運算子中發生的一種行為，在特定條件下，不會計算第二個操作數，因為整個表達式的結果只能由第一個運算元決定。

短路如何運作

和（&&）

• 如果第一個運算元為假，則整個運算式為假，因此不評估第二個運算元。
• 如果第一個運算元為 true，則評估第二個運算元以決定將傳回的值。

或 (||)

• 如果第一個運算元為 true，則整個運算式為 true，因此不計算第二個運算元。
• 如果運算元為假，則評估第二個運算元以決定要傳回的值。

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

9.RestSpread 運算子
在實例中，當您想要為現有陣列新增屬性或合併一組現有陣列時，擴充運算子是首選運算子。
擴充運算子 (...) 由 3 個點表示，將陣列擴展為單一元素，並在陣列的開頭使用。它用於：

• 合併數組

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• 複製數組

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

• 為現有陣列新增屬性

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

• 將參數傳遞給函數

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

剩餘運算子(...) 也用 3 個點表示，但寫在陣列的最後。它用於從解構物件/陣列中收集多個屬性。

例子

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

10.選購鏈
可選連結以簡單的方式處理 null 或未定義的值。它用於存取鏈中看似為空或未定義的屬性或任何中間屬性。它將自動被短路並呈現為未定義。理想情況下，如果沒有可選鏈，它會回傳錯誤。
在某些情況下，您不確定物件中是否存在所有值，請考慮使用可選鏈接，因為它是一種提供空值和未定義值檢查的語法。

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

11.解構數組
當必須從數組同時呼叫多個屬性時，程式碼可能會變得很麻煩。透過解構，可以防止這種情況。
解構允許將數組中的值組裝成不同的變數。
解構可用於

• 跳過一個元素
• 巢狀元素
• 設定預設值。

在開始 React 之前不應該忽略的一個基本概念是解構。

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

12.使用不可變數組
陣列可以在 JavaScript 中發生變化，這意味著可以在陣列中新增、刪除或更新屬性。
然而，在 React 中，不變性通常是首選，以保持狀態完整性並確保 React 可以偵測到變更。要在 React 中使用不可變數組，通常使用映射、過濾器和展開運算子等方法來新增、刪除和更新數組中的項目，而無需更改原始數組。

例子

• 新增項目

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

• 刪除項目

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• 更新項目

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

13.非同步/等待函數
非同步 JavaScript 控制需要時間才能完成的任務的執行方式。 JavaScript 是一種同步語言，即在單一執行緒中一個接一個地執行程式碼。
在從資料庫取得資料的情況下，在取得完成之前可能需要載入一些程式碼。
透過非同步功能，無需等待操作完成即可執行程式碼，從而提高使用者體驗和整體效能。
在 React 中，您將經常使用應用程式介面 (API)，因此，深入了解此功能的工作原理非常重要。

例子

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

14.承諾
Promises 是指表示非同步操作最終完成或失敗的內建物件。
Promise 存在於以下三種狀態之一：

• 待處理：初始狀態，既未完成也未拒絕。
• 已完成：操作成功完成
• 已拒絕：操作遇到錯誤。

Promise 在 JavaScript 中扮演著重要的角色，這使得它成為一個需要學習的重要概念。它使您能夠編寫更清晰的程式碼、系統地處理錯誤並提高整體效能。

15.使用 try.catch.finally 處理錯誤
有時在資料取得過程中會彈出錯誤，讓您思考如何尋找或修復這些錯誤。
透過使用關鍵字，可以以更結構化的方式處理資料擷取。
Try..catch..finally 區塊是 JavaScript 中強大的錯誤處理結構，無論是否發生錯誤，它都可以成功處理潛在錯誤並執行特定程式碼。
查找程式碼中的某些錯誤可能會很耗時。透過利用這些塊，事情變得很容易。

• Try - 包含可能引發錯誤的程式碼。
• Catch - 如果在 try 區塊內拋出錯誤則執行。接收錯誤物件作為參數。
• 最後-無論是否發生錯誤都執行。

例子

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

結論

深入了解上面解釋的基本 JavaScript 概念將簡化學習過程，並引導您成為熟練的 React 開發人員。如果您還沒有學習這些概念，請努力學習。歡迎在留言區分享你的建議！

以上是開始 React 之前需要學習的基本 JavaScript 概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！