学习React之前你应该了解的JavaScript 特性

26 阅读8分钟

学习这些 JavaScript 特性后再学习 React

image.png 最近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

就像你看到的,用constlet声明的变量,不会在大括号范围外被访问。这就是为什么代码会报错。So 这是很有用的,因为你会在不经意间改变用关键词var声明的变量。

另一个letconst的优势是它们不像var那样会被放到文件顶部。因此,如果使用letconst,您不必再关心提升变量位置的事情。

您也可能想知道letconst之间的区别。好吧,它们几乎相似。只需使用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

如上面的例子所示,第二个示例看起来更简洁,易于编写。在析构示例中,变量nameageuser对象中获取并分配值。这就是对象析构的力量。

结构赋值不仅可以用于对象,也可以用于数组。只需要把对象键换成数组元素索引,变量就会根据数组元素索引被分配值。

下面是示例:

// 数组析构
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 模块

javascript.plainenglish.io

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 中类语法的实际例子

javascript.plainenglish.io

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 方法的示例。

javascript.plainenglish.io

7. spread 运算符

Spread 运算符 也是我在 React 中经常使用的功能之一。它允许在 JavaScript 中展开可迭代对象的值。

您可以使用它来复制对象和数组。还可以组合复制的对象和数组。

下面是我关于 Spread 运算符 {…} 可以做的一些事情的文章

5个有用的事情:在 JavaScript 中可以使用扩展运算符

使用扩展运算符写出更好、更清晰的 JavaScript 代码

javascript.plainenglish.io

让我们看一个在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 中的三元运算符以及如何使用它

javascript.plainenglish.io

小结

如果你想学习 React 或任何其他 JavaScript 框架,我列出的上面的所有 JavaScript 功能都非常重要。如果你理解了这些,学习框架将变得像吃蛋糕一样简单。此外,我还建议在学习 React 之前学习 Async/Await 和 fetch API 等东西。

谢谢你阅读本文。希望你觉得有用。

拓展

5个有用的JavaScript但是没人去讲的特性

未受欢迎的 JavaScript 特性,但是你应该了解。

javascript.plainenglish.io