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

心已赠人 2023-01-17 08:00 107阅读 0赞

![bda927e7ad708d7126ee5d3762bf8845.png][]

英文 | 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); // 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标签中添加以下代码来实现。

举例来说，假设你要将功能从一个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中渲染事物。

# **结论** #

如果你想学习React或任何其他JavaScript框架，我上面列出的所有这些JavaScript功能都非常重要。如果你了解这些内容，学习框架将变得轻而易举。除此之外，我还建议在转向React之前学习Async / Await和fetch API之类的东西。

感谢你阅读本文，希望你觉得它对你有用。

#  #

**学习更多技能**

**请点击下方公众号**

![40264a5cb4c8e529f0b8dfc8739d5879.gif][]

[bda927e7ad708d7126ee5d3762bf8845.png]: /images/20221021/6fb2afee45254159874f752d9d9693fb.png
[40264a5cb4c8e529f0b8dfc8739d5879.gif]: /images/20221021/570f850159474d70980c1d4543fb6c23.png