8個在學習React之前必須要了解的JavaScript功能

英文 | 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标簽中添加以下代碼來實作。

<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中渲染事物。

結論