学习这些 JavaScript 特性后再学习 React
最近React是构建web应用前、后端最流行的JavaScript框架之一。很多前后端开发者需要掌握React的技能去替代jQuery，jQuery是之前比较流行的前后端开发框架。
在学习React之前首先你要对JavaScript有一些基本的了解，现在我会讲一些JavaScript的基础知识和基本原理。除此之外呢，你还要学习ES6+的特性，因为你在React的很多地方都会用到。
如果你对JavaScript以及它的特性有一些很好的理解，学习框架将会变得很容易。
在这篇文章里，我们会发现，在学习React之前你需要知道的一些重点。so，让我们开始吧。
1. Let 和 Const
ES6引入了let和const用于声明变量，作为var的替代者。let和const相对于var，有很大的优势。
一个优势就是：他们有一个块作用域，意味着他们不能再作用域之外被访问。
下面是一个示例：
{
const a = 5;
let b = 6;
var c = 7;
}
console.log(a); //Error: a is not defined.
console.log(b); //Error: b is not defined.
console.log(c); // 7
就像你看到的，用const和let声明的变量，不会在大括号范围外被访问。这就是为什么代码会报错。So 这是很有用的，因为你会在不经意间改变用关键词var声明的变量。
另一个let和const的优势是它们不像var那样会被放到文件顶部。因此，如果使用let和const，您不必再关心提升变量位置的事情。
您也可能想知道let和const之间的区别。好吧，它们几乎相似。只需使用let来声明您以后要更改的变量，使用const来声明您不想更改的常量变量。
来看一下下面的实力：
const x = 5;
x = 6; //Error.
let y = 1;
y = 2;
console.log(x); // 5
console.log(y); // 2
用关键字const声明的变量不能重新赋值，这是let和const的最大区别。
个人来说，我不再使用关键字var。我在React中会使用很多let和const。
2. 箭头函数
ES6引入了箭头函数，这是一种编写常规函数的简单方法。箭头语法更短更易于编写。许多开发人员在他们的React代码中使用它。这就是为什么你应该在React上使用它的原因。
让我们看下使用箭头函数的方式：
// Normal function.常规函数
const greeting = function(){
console.log("hello");
console.log("world");
}
// Arrow function.箭头函数
const greeting = () => {
console.log("hello");
console.log("world");
}
在写箭头函数时你不需要使用function关键词。
此外，如果您的箭头函数只有一行且只有一个参数，则可以在没有括号，没有大括号，没有 return 关键字的情况下编写箭头语法。
下面是示例：
// Normal function.常规函数
const greeting = function(name){
return "Hello " + name;
}
// Arrow function.箭头函数
const greeting = name => "Hello " + name;
箭头函数现在无处不在，在学习 React 时你将会经常看到它们。
3. 析构
析构是你需要了解的重要的 ES6 特性之一。它在 React 代码中使用很多，因此你应该学习它。
它允许你复制对象或数组的一部分并将其放入命名变量中。
看下下面这个没使用析构的示例
const user = { name: 'Mehdi', age: 19};//Without destructuring.
const name = user.name; //name = 'Mehdi'
const age = user.age; //age = 19
console.log(name); //Mehdi
console.log(age); //19
下面这是用析构形式写的同样的示例
const user = { name: 'Mehdi', age: 19};//ES6 destructuring
const { name , age } = user; //name = 'Mehdi', age = 19
console.log(name); //Mehdi
console.log(age); //19
如上面的例子所示，第二个示例看起来更简洁，易于编写。在析构示例中，变量name和age从user对象中获取并分配值。这就是对象析构的力量。
结构赋值不仅可以用于对象，也可以用于数组。只需要把对象键换成数组元素索引，变量就会根据数组元素索引被分配值。
下面是示例：
// 数组析构
const [a, b, c] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
正如您所看到的，变量 a、b 和 c 获得具有相同索引的值在数字数组中的值。这称为数组析构赋值，在使用React中的钩子时会经常使用。
4. ES6 模块
ES6 模块的导入和导出在 React 中随处可见，因此您需要对其有很好的理解。它们允许您在文件之间共享、导出和导入代码。这是一种在 JavaScript 文件之间共享代码的好方法。
在纯 JavaScript 中，您首先必须告诉浏览器您正在使用模块。您可以通过在 HTML 的 head 标签中添加具有 type="module" 的模块脚本来实现这一点。
<script type="module" src="fileName.js"></script>
举个例子，假设您想从一个名为index.js的JavaScript文件导入到另一个名为app.js的文件。为了实现这一点，您必须首先导出该函数，然后再导入它。
下面是示例：
Exporting:
export const multiply = (a, b) => {
return x * y;
}
Importing:
import { multiply } from './index.js';
这就是它，现在您可以在 app.js 文件中使用 multiply 函数了。
您还可以查看我的下面的文章以了解更多关于 ES6 模块的信息：
理解 JavaScript 模块：导入和导出语法
通过实例理解 JavaScript ES6 模块
5. ES6 类
JavaScript 中的类是作为语法糖来编写 JavaScript 构造函数的一种方法。它们用于创建对象，并允许 JavaScript 进行面向对象编程。
然而，现在使用 React Hooks，你不会使用太多类。但是了解它们总是很重要，因为它们在 JavaScript 中非常重要。
下面是类的语法：
class Person{
constructor(name, age) {
this.name = name;
this.age = age;
}
}
//用new关键词创建Person类
let myPerson = new Person("John", 25); //{ name: 'John', age: 25}
所以类只是JavaScript中编写面向对象代码的一种新方便方法。您可以在我的下面的文章中了解有关它们的更多信息：
JavaScript 类的解释和示例
学习关于 JavaScript 中类语法的实际例子
6. 高阶函数
高阶函数是任何一个接受另一个函数作为参数的函数。在 JavaScript 中，有很多有用的高阶函数可供使用，特别是在 React 中，你会经常使用 map、filter 和 reduce 这三个函数，所以你需要对它们有深入的了解。
map 方法允许你遍历数组中的每个元素，并返回一个新的映射元素的数组。
下面是示例：
let numbers = [6, 7 , 8, 3, 2];
numbers.map(number => number * 2); //[12, 14, 16, 6, 4]
过滤方法允许您遍历每个数组元素。返回一个新新数组，是过滤出的您想要的元素。
下面是示例：
let numbers = [6, 7 , 8, 3, 2];
numbers.filter(number => number < 5); //[3, 2]
reduce 方法也用于数组，它可以将数组元素减少到一个单一的值。
以下是使用 reduce 方法返回数字数组的总数的示例。
let numbers = [6, 7 , 8, 3, 2];
numbers.reduce((accumulator, num) => accumulator + num);
//returns 26
如果你感兴趣的话，你也可以查看我下面关于JavaScript中的reduce方法的文章。
JavaScript中的Reduce方法带有例子详细解释
了解 JavaScript 中 reduce 方法的示例。
7. spread 运算符
Spread 运算符 … 也是我在 React 中经常使用的功能之一。它允许在 JavaScript 中展开可迭代对象的值。
您可以使用它来复制对象和数组。还可以组合复制的对象和数组。
下面是我关于 Spread 运算符 {…} 可以做的一些事情的文章
5个有用的事情：在 JavaScript 中可以使用扩展运算符
使用扩展运算符写出更好、更清晰的 JavaScript 代码
让我们看一个在js中使用Spread运算符简单的例子
//copy and combine two objects
let obj1 = {name: "Mehdi", age: 19};
let obj2 = {eyeColor: "Black", hairColor: "Black"};
//using the spread operator.
let combination = {...obj1, ...obj2} ;
console.log(combination);
//output: {name: "Mehdi", age: 19, eyeColor: "Black", hairColor: "Black"}
还有一个结合数组使用的例子：
//copy and combine two arrays
let arr1 = [1, 2, 3];
let arr2 = [5, 6, 7, 8];
let combination = [...arr1, ...arr2] ;
console.log(combination);
//output: [1, 2, 3, 5, 6, 7, 8]
如上面的例子所示，展开（spread）运算符允许我们轻松复制和结合数组和对象。所以它非常有用，你应该学习它。
8. The ternary operator
三元运算符 ? : 是在 JavaScript 中编写条件语句的简单方法。
我发现我大部分时间都是在 React 中使用三元运算符来有条件地呈现东西。这就是为什么我认为在使用 React 之前，你应该先学习它的原因。
看一下下面的示例：
let isOnline = true;
// if else 语句.
if(isOnline){
console.log("He is Online.");
}else{
console.log("He is Offline.");
}
//He is Online
//使用三元运算符 [条件] ? [if] : [else]
isOnline ? console.log("He is Online.") : console.log("He is Offline."); //He is Online
如您所见，三目运算符允许我们在一行代码中轻松编写条件语句。 它对于小型条件非常有用，我更喜欢在React中使用它进行条件渲染。
如果您想了解更多有关JavaScript中的三目运算符的信息，也可以再次查看我的文章。
更好的JavaScript - 三目运算符
理解 JavaScript 中的三元运算符以及如何使用它
小结
如果你想学习 React 或任何其他 JavaScript 框架，我列出的上面的所有 JavaScript 功能都非常重要。如果你理解了这些，学习框架将变得像吃蛋糕一样简单。此外，我还建议在学习 React 之前学习 Async/Await 和 fetch API 等东西。
谢谢你阅读本文。希望你觉得有用。
拓展
5个有用的JavaScript但是没人去讲的特性
未受欢迎的 JavaScript 特性，但是你应该了解。
