英文 | https://javascript.plainenglish.io/8-javascript-features-to-know-before-learning-reactjs-aac8b7748b30

翻譯 | 小愛

React是用于構(gòu)建前端Web應(yīng)用程序中最流行的JavaScript庫(kù)之一。許多前端開發(fā)人員的工作都需要具備React的技能。

在學(xué)習(xí)React之前，你首先需要有扎實(shí)的JavaScript知識(shí)。也就是所有JavaScript基礎(chǔ)知識(shí)和技能你都需要掌握。除此之外，你還應(yīng)該了解ES6 +功能，因?yàn)槟銓⒃赗eact中需要大量使用到它們。

如果你對(duì)JavaScript及其功能有很好的了解，那么學(xué)習(xí)JS框架會(huì)讓你變得輕松很多，學(xué)起來也會(huì)感覺容易很多。

在本文中，我們將與你分享一些在學(xué)習(xí)React之前。必須需要了解的一些重要JavaScript功能。

現(xiàn)在，讓我們開始吧。

1、Let和Const

ES6引入了let，const用于聲明變量以代替var。let與const相比有許多優(yōu)勢(shì)。

第一個(gè)優(yōu)點(diǎn)是它們具有一個(gè)塊作用域，這意味著它們不能在該塊作用域之外訪問。

示例如下：

{    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

如你所見，在花括號(hào)之間的范圍之外，用const和let聲明的變量不可訪問。這就是為什么我們會(huì)得到一個(gè)錯(cuò)誤提示。

因此，這非常有用，因?yàn)橛袝r(shí)var，可以使用關(guān)鍵字更改變量而你不會(huì)注意到它。

另一個(gè)優(yōu)點(diǎn)是let與const是他們沒有提升到像關(guān)鍵字的文件的頂部var。因此，如果你使用let，則不必?fù)?dān)心const。

你可能還想知道let和const有什么區(qū)別。好吧，它們幾乎是相似的。僅let用于以后要更改的const變量和不希望更改的常量變量。

看下面的例子：

const x = 5;x = 6; //Error.let y = 1;y = 2;console.log(x); // 5console.log(y); // 2

2、Arrow函數(shù)

// Normal function.const greeting = function(){    console.log("hello");    console.log("world");}// Arrow function.const greeting = () => {    console.log("hello");    console.log("world");}

如你所見，你不需要在Arrow函數(shù)中使用function關(guān)鍵字。

同樣，如果你的arrow函數(shù)只有一行并且只有一個(gè)參數(shù)，則可以編寫沒有括號(hào)，沒有花括號(hào)和沒有return關(guān)鍵字的arrow語法。

這是一個(gè)例子：

// Normal function.const greeting = function(name){    return "Hello " + name;}// Arrow function.const greeting = name => "Hello " + name;

Arrow功能如今無處不在，在學(xué)習(xí)React時(shí)，你會(huì)經(jīng)常看到它們。

3、解構(gòu)

銷毀是你需要了解的重要ES6功能之一。它在React代碼上使用了很多。這就是為什么你應(yīng)該了解它。

它允許你復(fù)制對(duì)象或數(shù)組的一部分并將其放入命名變量中。

請(qǐng)看下面的示例，其中我們沒有使用解構(gòu)：

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解構(gòu)的相同示例：

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

正如你在上面的示例中看到的那樣，第二個(gè)示例看起來更加簡(jiǎn)潔并且易于編寫。在解構(gòu)示例中，變量name和age被創(chuàng)建并從用戶對(duì)象分配值。這就是對(duì)象分解的力量。

除此之外，還可以對(duì)數(shù)組使用解構(gòu)。只是代替對(duì)象鍵，而是根據(jù)數(shù)組中的元素索引分配變量。

這是一個(gè)例子：

//array destructuringconst [a, b, c] = [1, 2, 3, 4];console.log(a); //1console.log(b); //2console.log(c); //3

如你所見，變量a，b和c獲得分配的值，這些值在numbers數(shù)組中具有相同的索引。這就是所謂的數(shù)組解構(gòu)，在React中會(huì)經(jīng)常使用到它。

4、ES6模塊

ES6模塊import和export無處不在。因此，你需要對(duì)它們有一個(gè)很好的了解。它們使你可以將文件中的代碼共享，導(dǎo)出和導(dǎo)入到另一個(gè)文件。這是在JavaScript文件之間共享代碼的好方法。

在原始JavaScript中，你必須首先告訴瀏覽器你正在使用模塊。你可以通過type="module"在HTML的head標(biāo)簽中添加以下代碼來實(shí)現(xiàn)。

<script type="module" src="fileName.js"></script>

舉例來說，假設(shè)你要將功能從一個(gè)JavaScript文件導(dǎo)入index.js到另一個(gè)名為app.js的文件中。為此，你必須先導(dǎo)出函數(shù)，然后再導(dǎo)入。

這是一個(gè)例子：

輸出：

export const multiply = (a, b) => {  return x * y;

輸入：

import { multiply } from './index.js';

就是這樣，現(xiàn)在，你可以直接在app.js文件中使用multiply功能了。

5、ES6類

JavaScript中的類已被引入作為一種語法，以用JavaScript編寫構(gòu)造函數(shù)。它們用于創(chuàng)建對(duì)象，并且允許使用JavaScript進(jìn)行面向?qū)ο蟮木幊獭?/span>

但是，現(xiàn)在有了React，你將不會(huì)使用很多類。但是，了解它們總是很有必要的，因?yàn)樗鼈冊(cè)贘avaScript中非常重要。

這是一個(gè)類語法：

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編寫面向?qū)ο蟠a的一種新的簡(jiǎn)便方法。

6、高階函數(shù)

高階函數(shù)是將另一個(gè)函數(shù)作為參數(shù)的任何函數(shù)。在JavaScript中，可以使用許多有用的高階函數(shù)。map，filter和reduce會(huì)是你在React中大量使用到的函數(shù)。因此，你需要很好地理解它們。

map方法允許你遍歷每個(gè)數(shù)組元素，并返回一個(gè)包含映射元素的新數(shù)組。

這是一個(gè)例子：

let numbers = [6, 7 , 8, 3, 2];numbers.map(number => number * 2); //[12, 14, 16, 6, 4]

filter方法允許你遍歷每個(gè)數(shù)組元素，并在新數(shù)組中過濾所需的元素。

這是一個(gè)例子：

let numbers = [6, 7 , 8, 3, 2];numbers.filter(number => number < 5); //[3, 2]

reduce方法還用于數(shù)組，它將數(shù)組元素減少為單個(gè)值。

這是一個(gè)使用reduce方法返回?cái)?shù)字?jǐn)?shù)組總數(shù)的示例：

let numbers = [6, 7 , 8, 3, 2];numbers.reduce((accumulator, num) => accumulator + num);//returns 26

7、展開運(yùn)算符

展開運(yùn)算符，也是我在React中經(jīng)常使用的功能之一。它允許在JavaScript中傳播可迭代對(duì)象的值。

你可以使用它來復(fù)制對(duì)象和數(shù)組。還可以組合復(fù)制對(duì)象和數(shù)組。

讓我們看一個(gè)在JavaScript中使用展開運(yùn)算符的簡(jiǎn)單示例：

//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"}

這是數(shù)組的另一個(gè)示例：

//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]

如你在上面的示例中所看到的，散布運(yùn)算符使我們能夠輕松地復(fù)制和組合數(shù)組和對(duì)象。因此，它非常有用，你應(yīng)該學(xué)習(xí)它。

8、三元運(yùn)算符

三元運(yùn)算符，是在JavaScript中編寫條件語句的一種簡(jiǎn)便方法。

我注意到大多數(shù)時(shí)候，我使用三元運(yùn)算符有條件地在React中渲染事物。這就是為什么我認(rèn)為你在學(xué)習(xí)React之前，而應(yīng)該先學(xué)習(xí)一下JavaScript中的三元運(yùn)算符的原因。

看下面的例子：

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

結(jié)論

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)