介绍

本文旨在针对对JavaScript几乎不了解但想过渡到ReactJ的开发人员。 JavaScript是一种广泛使用的编程语言，在现代网络开发中起着重要作用。它用于构建功能和交互式用户界面。另一方面，ReactJ是一个流行的JavaScript库，用于构建Web应用程序。在本文中，我们将指导您进行重要的JavaScript概念，以便在服用Reactjs之前学习。

文章目标

在本文末尾，读者将在过渡到reactj之前了解JavaScript中坚实背景所需的重要概念。另外，读者将通过查看某些概念的编码示例并获取资源来进一步了解下面列出的每个概念。

变量和数据类型

在JavaScript中，变量被命名为数据。变量可用于存储数据，例如字符串，数组和数字E.T.C.可以使用var关键字来声明变量，然后使用变量的名称和可能为（字符串，数字或数组）的分配值。


var name = "David"; // strings
var radius = 2.77; // number
var user = {
name: "John Doe",
age: 30
} // object
var isDark = false; // boolean

了解有关JavaScript变量click here

的更多信息

JavaScript中的数据类型描述了可以存储在变量中的数据类型。它包括;

• 字符串
• 数字
• 符号
• 对象
• null
• 未定义
• bigint

您可以了解有关它们的更多信息here

操作员和表达

操作员用于在操作数之间执行数学或逻辑操作。一些常见的操作员包括;

。算术运算符

• 加法（+）
• 减法（ - ）
• 乘法（*）
• 分区（/）
• 模量（％）

。逻辑操作员

• 和（&&）
• 或（||）
• 不是（！）

。比较操作员

• 大于（>）
• 小于（<）
• 等于（==）
• 不等于（！=）

表达式是产生结果的变量，值和运算符的组合。例如;

var x = 20;
var y = 15;
var score = x + y; // 35

功能

函数是执行特定任务的可重复使用的代码块，并且可以在程序中的任何地方调用。这消除了再次重写相同代码的需求。功能采用输入（参数）并返回输出（返回值）及其使用函数的关键字进行声明。例如

function addNumbers(a, b) {
return a + b;
}

上面的示例创建了一个 addnumbers ，该函数采用两个参数（ a '和 b ）并在被调用时返回其总和。让我们看看一个真实的例子;

function addNumbers(a, b) {
return a + b;
}
addNumber(3,2); // output = 5;

上面的示例调用两个参数（ 3 ， 2 ），并且执行后的返回值为 5 。 >

了解有关功能的更多信息here

有条件的语句

有条件的语句允许您仅在满足特定条件时执行代码。 JavaScript中有几种条件语句类型，其中最常见的是IF-ELSE语句。如果程序为true，则可以执行代码，如果语句为false，则可以执行代码。例如;

var score = 20;
if (score >= 20) {
console.log("you passed")
}else{
console.log("try again")
}


第一个条件成功运行，因为得分等于20。

循环

循环允许您一遍又一遍地或直到满足条件。两个最常用的环是 的，而 loops。

循环创建一个带有3个可选表达式的语句;


for (expression 1; expression 2; expression 3) {
statement
}


• 表达式1在执行代码块之前（一次）执行。
• 表达式2定义了执行代码块的条件。
• 执行代码块后（每次）执行表达式3。

for ( i = 0; i < 10; i++){
console.log(i) // 0,1,2,3,4,5,6,7,8,9
}

只要条件为真，循环就会重复一个代码块。例如;

var i = 0;
while (i < 10) {
console.log(i);
i++;
} // 0,1,2,3,4,5,6,7,8,9

了解有关循环here

的更多信息

数组和数组方法

数组是订购的值列表，每个值都是用索引指定的元素。
使用方括号来声明数组 - * [] * - 其元素通过逗号分隔。例如;

const myArray = [“baby”, "two", 1, true];

上面的示例创建了一个数组 - 包含2个字符串（婴儿和两个），一个数字（1）和一个布尔值（true）。

数组方法是内置功能，可让您操纵数组的内容，其中包括;

• push（）：在数组的末端添加一个或多个元素。
• pop（）：从数组中删除最后一个元素并返回。
• shift（）：从数组中删除第一个元素并返回。
• unshift（）：在数组的开头中添加一个或多个元素。
• slice（）：返回一个包含原始数组子集的新数组。
• 剪接（）：删除或替换数组中的元素并返回删除的元素。

了解有关数组及其方法的更多信息here

破坏性

在ES6中，我们能够使用破坏性分配将数组和对象的数据提取到不同的变量中。
破坏数组的过程涉及创建变量以对应于数组的元素。例如

const myArray = [1, 2, 3, 4, 5];
const [a, b, c, d, e] = myArray;
console.log(a, b, c, d, e); // Output: 1 2 3 4 5

在上面的示例中，变量 a，b，c，d，e 是创建并分配给 myArray中的变量

您可以在JavaScript here

中了解更多有关破坏的信息

模板文字

模板文字是Ecmascript 6（ES6）功能，可让您嵌入字符串中的表达式和变量。模板文字被包含在背部（`）中，可以使用美元符号（ $ ）语法包括表达式的占位符。例如

const name = "David";
const greeting = hello，$ {name}！k​​oude11
在上面的示例中，变量名称使用 $ {} 语法嵌入字符串中，使您可以创建一个动态字符串，该字符串包含名称变量的值。

了解有关模板文字的更多信息here

三元运营商

三元运营商是撰写if语句的速记方式。这是一种在一行代码中表达语句的方法。语法在下面写；

condition ? expression1 : expression2

下面找到三元运算符的示例；

var score = 25;
var result = score >= 20 ? "You passed : "Try again.";
console.log(result); // You passed.

在上面的示例中，三元操作员检查得分的值的值是否大于或等于20。如果是true，则文本您通过了分配给变量结果。如果不是，则变量重试 - 分配给变量结果。

。

了解有关三元运营商here

的更多信息

模块导入 /导出

导入和导出是引入JavaScript中的新功能，以允许代码的可重复使用。它的关键字“导入和导出”有助于将一个文件的代码使用到另一个文件的代码，将代码分为较小的可重复使用的部分，并且非常容易维护。

导出：您可以使用导出语句从模块中导出值，函数或对象。例如;

// module.js
export const myFunction = () => {
console.log("Hello, David");
};

导入：您还可以使用导入语句从模块导入值或功能。例如;

// main.js
import { myFunction } from "./module";
myFunction(); // Output: Hello, David!

在上面的示例中，我们从 myfunction 中导出了 module.js file，并将其导入到该文件中 main.js 文件。此过程可以使我们通过在需要时导出和导入多个文件中使用 module.js 。

。

您可以了解更多有关导入和导出here

的信息

结论

上述主题是JavaScript中的重要和相关主题