8个在学习React之前必须要了解的JavaScript功能
共 5168字，需浏览 11分钟
·
2021-04-29 09:04
英文 | https://javascript.plainenglish.io/8-javascript-features-to-know-before-learning-reactjs-aac8b7748b30
翻译 | 小爱
React是用于构建前端Web应用程序中最流行的JavaScript库之一。许多前端开发人员的工作都需要具备React的技能。
在学习React之前，你首先需要有扎实的JavaScript知识。也就是所有JavaScript基础知识和技能你都需要掌握。除此之外，你还应该了解ES6 +功能，因为你将在React中需要大量使用到它们。
如果你对JavaScript及其功能有很好的了解，那么学习JS框架会让你变得轻松很多，学起来也会感觉容易很多。
在本文中，我们将与你分享一些在学习React之前。必须需要了解的一些重要JavaScript功能。
现在，让我们开始吧。
1、Let和Const
ES6引入了let，const用于声明变量以代替var。let与const相比有许多优势。
第一个优点是它们具有一个块作用域，这意味着它们不能在该块作用域之外访问。
示例如下：
{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声明的变量不可访问。这就是为什么我们会得到一个错误提示。
因此，这非常有用，因为有时var，可以使用关键字更改变量而你不会注意到它。
另一个优点是let与const是他们没有提升到像关键字的文件的顶部var。因此，如果你使用let，则不必担心const。
你可能还想知道let和const有什么区别。好吧，它们几乎是相似的。仅let用于以后要更改的const变量和不希望更改的常量变量。
看下面的例子：
const x = 5;x = 6; //Error.let y = 1;y = 2;console.log(x); // 5console.log(y); // 2
2、Arrow函数
// Normal function.const greeting = function(){console.log("hello");console.log("world");}// Arrow function.const greeting = () => {console.log("hello");console.log("world");}
如你所见，你不需要在Arrow函数中使用function关键字。
同样，如果你的arrow函数只有一行并且只有一个参数，则可以编写没有括号，没有花括号和没有return关键字的arrow语法。
这是一个例子：
// Normal function.const greeting = function(name){return "Hello " + name;}// Arrow function.const greeting = name => "Hello " + name;
Arrow功能如今无处不在，在学习React时，你会经常看到它们。
3、解构
销毁是你需要了解的重要ES6功能之一。它在React代码上使用了很多。这就是为什么你应该了解它。
它允许你复制对象或数组的一部分并将其放入命名变量中。
请看下面的示例，其中我们没有使用解构：
const user = { name: 'Mehdi', age: 19};//Without destructuring.const name = user.name; //name = 'Mehdi'const age = user.age; //age = 19console.log(name); //Mehdiconsole.log(age); //19
这是使用ES6解构的相同示例：
const user = { name: 'Mehdi', age: 19};//ES6 destructuringconst { name , age } = user; //name = 'Mehdi', age = 19console.log(name); //Mehdiconsole.log(age); //119
正如你在上面的示例中看到的那样，第二个示例看起来更加简洁并且易于编写。在解构示例中，变量name和age被创建并从用户对象分配值。这就是对象分解的力量。
除此之外，还可以对数组使用解构。只是代替对象键，而是根据数组中的元素索引分配变量。
这是一个例子：
//array destructuringconst [a, b, c] = [1, 2, 3, 4];console.log(a); //1console.log(b); //2console.log(c); //3
如你所见，变量a，b和c获得分配的值，这些值在numbers数组中具有相同的索引。这就是所谓的数组解构，在React中会经常使用到它。
4、ES6模块
ES6模块import和export无处不在。因此，你需要对它们有一个很好的了解。它们使你可以将文件中的代码共享，导出和导入到另一个文件。这是在JavaScript文件之间共享代码的好方法。
在原始JavaScript中，你必须首先告诉浏览器你正在使用模块。你可以通过type="module"在HTML的head标签中添加以下代码来实现。
<script type="module" src="fileName.js"></script>举例来说，假设你要将功能从一个JavaScript文件导入index.js到另一个名为app.js的文件中。为此，你必须先导出函数，然后再导入。
这是一个例子：
输出：
export const multiply = (a, b) => {return x * y;
输入：
import { multiply } from './index.js';就是这样，现在，你可以直接在app.js文件中使用multiply功能了。
5、ES6类
JavaScript中的类已被引入作为一种语法，以用JavaScript编写构造函数。它们用于创建对象，并且允许使用JavaScript进行面向对象的编程。
但是，现在有了React，你将不会使用很多类。但是，了解它们总是很有必要的，因为它们在JavaScript中非常重要。
这是一个类语法：
class Person{constructor(name, age) {this.name = name;this.age = age;}}//create new object from the class using the new keywordlet myPerson = new Person("John", 25); //{ name: 'John', age: 25}
因此，类只是用JavaScript编写面向对象代码的一种新的简便方法。
6、高阶函数
高阶函数是将另一个函数作为参数的任何函数。在JavaScript中，可以使用许多有用的高阶函数。map，filter和reduce会是你在React中大量使用到的函数。因此，你需要很好地理解它们。
map方法允许你遍历每个数组元素，并返回一个包含映射元素的新数组。
这是一个例子：
let numbers = [6, 7 , 8, 3, 2];numbers.map(number => number * 2); //[12, 14, 16, 6, 4]
filter方法允许你遍历每个数组元素，并在新数组中过滤所需的元素。
这是一个例子：
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
7、展开运算符
展开运算符，也是我在React中经常使用的功能之一。它允许在JavaScript中传播可迭代对象的值。
你可以使用它来复制对象和数组。还可以组合复制对象和数组。
让我们看一个在JavaScript中使用展开运算符的简单示例：
//copy and combine two objectslet 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 arrayslet 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]
如你在上面的示例中所看到的，散布运算符使我们能够轻松地复制和组合数组和对象。因此，它非常有用，你应该学习它。
8、三元运算符
三元运算符，是在JavaScript中编写条件语句的一种简便方法。
我注意到大多数时候，我使用三元运算符有条件地在React中渲染事物。这就是为什么我认为你在学习React之前，而应该先学习一下JavaScript中的三元运算符的原因。
看下面的例子：
let isOnline = true;// if else statement.if(isOnline){console.log("He is Online.");}else{console.log("He is Offline.");}//He is Online//Same example using the ternary operator[condition] ? [if] : [else]isOnline ? console.log("He is Online.") : console.log("He is Offline."); //He is Online
结论
学习更多技能
请点击下方公众号
