学习 React 所需的 ES6 功能

嗨，DEV 社区！

2020 年初，我决定探索 React，并至少用它构建两个项目。然而，在开始学习 React 之前，我发现一些 ES6 特性需要提前复习和学习。因此，在本文中，我将简单解释以下特性：

let 和 const
箭头函数
课程
扩展和剩余运算符
解构

这是我的第一篇文章，希望大家觉得这篇文章有用，并且喜欢。开始吧！

let 和 const

引入了 let 和 const 作为新特性，用于替代著名的 var 来声明变量。强烈建议使用它们，以避免变量值的意外改变。

let - 这应该用于声明块范围局部变量，通过可选地用一个值初始化它，并可以在需要时重新分配给一个新值。

let 和 var 之间有一些区别。让我们来看看主要的区别：

let 变量的作用域为直接块范围，而不是像 var 那样在函数体中：

function foo() {
     let x = 1;
     {
          let x = 2; //not the same variable
     } 
}

Let 不会在全局对象中创建属性，这将导致全局视角下未定义

var x = 1; 
let y = 2;

console.log(this.x); // global
console.log(this.y); // undefined

重新声明同一个变量将导致引用错误

let x = 1;
let x = 2; //reference error

声明变量而不初始化它将导致引用错误而不是未定义

console.log(x); // reference error
console.log(y); //undefined

let x= 1;
var y= 2;

const - 用于声明一个常量块作用域（类似于 let）变量，并且必须在声明它的同一行进行初始化。此外，常量不能通过重新赋值来更改，也不能重新声明。

const NAME = "React" //a read-only reference to a value

在 React 中，通常使用 const 声明函数，例如基于函数的组件。

箭头函数

本质上，箭头函数是创建函数的替代方法，除了简短的语法外，它与常规形式还有一些区别。

箭头函数的语法是：

// arrow function
const call = (phoneNumber) => { 
    console.log(phoneNumber)
}

// long form 
function(parameter1, parameter2) {
    return value;
}

//when there is only one parameter, brackets can be omitted
const call = phoneNumber => {
    console.log(phoneNumber);
}

//when only one line return statement, curly brackets and return keyword can be omitted
const call = phoneNumber => phoneNumber;

箭头函数没有自身的 this 绑定，这被认为是它的主要优势。此外，它也没有与 super、arguments 或 new.target 关键字的绑定，这意味着它们不适合用作构造函数。由于缺少 this，函数最终会从封闭作用域中查找 this。

function retryCall(phoneNumber){
   this.counter = 0;

   setInterval(() => {
       this.counter++; // 'this' refers to the retrycall object
   }, 1000);
}

扩展和剩余运算符

这两个运算符的语法相同，都是“...”（没错，就是三个点），它们的命名取决于上下文和使用方式。因此，展开运算符可以分别提取数组的元素或对象的属性。例如：

const numbers = [2,4,6];

function findSum(x,y,z) {
   return x + y + z;
}

findSum(...numbers); // that will result into findSum(2, 4, 6);

而 Rest 运算符则适用于将数组和对象克隆到不同的变量中。由于两者都是引用类型，因此该运算符可以有效地防止意外的变异。

let numbers = [2, 4, 6];

let moreNumbers = [...numbers, 8, 10] // this will result in [2, 4, 6, 8, 10];

解构赋值

此功能允许轻松提取数组元素或对象属性的值并将其存储在变量中。

//array destructuring
let [a, b] = ['hello', 'world'];
a = 'hello';
b = 'world';

//object destructuring
let {name} = {name : 'john', age: 28};
name = 'john';
age // undefined

这在使用函数参数时非常有用。如果不使用此功能，当需要对象的某个属性时，需要传递整个对象才能访问。然而，解构允许只提取所需的属性，从而获得更精简的代码。考虑以下代码：

function getPhoneNumber(addressBookObj) {
   return addressBookObj.phoneNumber;
}

getPhoneNumber({name : 'John', age: 25, phoneNumber : 223344}); //return the 223344 phone number value

//using destructuring to access only one property of the object
const getPhoneNumber = ({phoneNumber}) => return phoneNumber; 

getPhoneNumber({name : 'John', age: 25, phoneNumber : 223344}); //returns phoneNumber value

本质上，我们得到了相同的结果，但是通过仅提取所需的属性，我们节省了一些代码行。

我希望你喜欢这篇短文，并且发现它对开始学习 React 或任何其他框架很有用。

非常感谢任何反馈、建议或评论。敬请
期待更多帖子！

鏂囩珷鏉ユ簮锛�https://dev.to/tringakrasniqi/es6-features-you-need-to-learn-react-4163