开始 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中文网其他相关文章！