8个在学习React之前必须要了解的JavaScript功能

发表于 3年以前 | 总阅读数：618 次

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); // 5
console.log(y); // 2

如你所见，你无法重新分配用关键字声明的变量const。这是let和const之间最大的区别。就个人而言，我不再使用var关键字。我用了很多的let和const。

2、Arrow函数

ES6中引入了Arrow函数，这是编写常规函数的简便方法。Arrow语法更短，更容易编写。许多开发人员在他们的React代码中使用它。这就是为什么你也应该在学习React之前了解它，以便后面使用它。让我们看一下如何编写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 = 19
console.log(name); //Mehdi
console.log(age); //19

这是使用ES6解构的相同示例：

 const user = { name: 'Mehdi', age: 19};
//ES6 destructuring
const { name , age } = user; //name = 'Mehdi', age = 19
console.log(name); //Mehdi
console.log(age); //119

正如你在上面的示例中看到的那样，第二个示例看起来更加简洁并且易于编写。在解构示例中，变量name和age被创建并从用户对象分配值。这就是对象分解的力量。

除此之外，还可以对数组使用解构。只是代替对象键，而是根据数组中的元素索引分配变量。

这是一个例子：

//array destructuring
const [a, b, c] = [1, 2, 3, 4];
console.log(a); //1
console.log(b); //2
console.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 keyword
let 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 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]

如你在上面的示例中所看到的，散布运算符使我们能够轻松地复制和组合数组和对象。因此，它非常有用，你应该学习它。

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

如你所见，三元运算符可以轻松的仅用一行代码编写条件语句。它在小条件下非常有用，我更喜欢使用它在React中渲染事物。