搜尋

首頁 >web前端 >js教程 >開始 React 之前需要學習的基本 JavaScript 概念

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

Linda Hamilton
Linda Hamilton原創
2024-12-10 05:34:13170瀏覽

Essential JavaScript Concepts To Learn Before Starting React

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中文網其他相關文章！

JavaScript css html es6 Array Object NULL if for try throw catch Error Filter using Length operator Interface finally Conditional Property Event Thread copy map delete undefined function default this database embedding Access Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何在 JavaScript 中反轉鍵值查找？下一篇：如何在 JavaScript 中反轉鍵值查找？

相關文章

看更多