掌握React需要了解的JavaScript特性

这些天，React是最受欢迎的JavaScript库之一。它可以用来创建动态和响应式的应用程序，允许更好的性能，并且可以很容易地扩展。底层逻辑是基于可以在不同情况下重复使用的组件，减少了多次编写相同代码的需要。简而言之，使用React你可以创建高效和强大的应用程序。

因此，现在是学习如何创建React应用程序的最佳时机。

然而，如果没有对一些关键的JavaScript功能的扎实了解，构建React应用程序可能是困难的，甚至是不可能的。

出于这个原因，我们汇编了一份在开始使用React之前需要了解的JavaScript特性和概念清单。你越了解这些概念，你就越容易构建专业的React应用程序。

既然如此，下面是我们将在本文中讨论的内容：

1. JavaScript和ECMAScript
2. 语句与表达式
3. React中的不可变性（Immutability）
4. 模板字符串
5. 箭头函数
6. 类
7. 关键词this
8. 三元运算符
9. 短路求值（最小化求值）
10. 展开语法
11. 解构赋值
12. filter(), map(), and reduce()
13. 导出和导入

JavaScript和ECMAScript

JavaScript是一种流行的脚本语言，与HTML和CSS一起用于建立动态网页。HTML用于创建网页的结构，CSS用于创建其元素的样式和布局，而JavaScript则是用于向网页添加行为的语言，即创建功能和互动性。

✍️ JavaScript是由Netscape Communications的Brendan Eich在1995年开发的，旨在为Netscape Navigator浏览器的网页增加互动性。

此后，该语言被各大浏览器采用，并编写了一份文件来描述JavaScript的工作方式：ECMAScript标准。

从2015年起，ECMAScript标准的更新每年都会发布，因此每年都会有新的功能加入到JavaScript中。

ECMAScript 2015是该标准的第六个版本，因此也被称为ES6。之后的版本都是按进度标注的，所以我们把ECMAScript 2016称为ES7，ECMAScript 2017称为ES8，以此类推。

由于标准中添加新功能的频率，有些功能可能不被所有浏览器支持。那么，你怎样才能确保你添加到JS应用中的最新JavaScript功能在所有的网络浏览器中都能如期工作呢？

你有三个选择：

1. 等到所有主要的浏览器都提供对新功能的支持。但如果你的应用程序绝对需要那个令人惊奇的新JS功能，这不是一个选择。
2. 使用Polyfill，它是 “一段代码（通常是网络上的JavaScript），用于在不支持现代功能的旧浏览器上提供现代功能”（另见MDN网络文档）。
3. 使用JavaScript转码器，如Babel或Traceur，将ECMAScript 2015+代码转换成所有浏览器都支持的JavaScript版本。

语句与表达式

在构建React应用程序时，理解语句和表达式之间的区别是至关重要的。因此，让我们暂时回到编程的基本概念。

一个计算机程序是一个由计算机执行的指令列表。这些指令被称为语句。

与语句不同，表达式是产生一个值的代码片段。在语句中，表达式是返回一个值的部分，我们通常在等号的右边看到它。

✍️ 语句是一个做某事的代码块。

而：

✍️ 一个表达式是产生一个值的代码片段。

JavaScript语句可以是代码块或代码行，通常以分号结尾或用大括号括起来。

下面是一个JavaScript语句的简单例子：

document.getElementById("hello").innerHTML = "Hello World!";

上面的语句在一个 id="hello" 的DOM元素中写下了 "Hello World!" 。

正如我们已经提到的，expessions产生一个值或者本身就是一个值。请看下面的例子：

msg = document.getElementById("hello").value;

document.getElementById("hello").value 是一个表达式，因为它返回一个值。

一个额外的例子应该有助于澄清表达式和语句之间的区别：

const msg = "Hello World!";
function sayHello( msg ) https://www.wbolt.com/{
console.log( msg );
}

在上面的例子中

• 第一行是一个语句，其中 "Hello World!" 是一个表达式、
• 函数声明是一个语句，其中传递给函数的参数 msg 是一个表达式、
• 在控制台中打印消息的那一行是一个语句，其中参数 msg 也是一个表达式。

为什么表达式在React中很重要

在构建React应用程序时，你可以在JSX代码中注入JavaScript表达式。例如，你可以传递一个变量，写一个事件处理器或一个条件。要做到这一点，你需要在大括号中包含你的JS代码。

例如，你可以传递一个变量：

const Message = () => https://www.wbolt.com/{
const name = "Carlo";
return 
Welcome https://www.wbolt.com/{name}!
;
}

简而言之，大括号告诉你的转码器将大括号中的代码作为JS代码来处理。在开头

标签之前和结尾

标签之后的所有内容都是正常的JavaScript代码。开头

和结尾

标签内的所有内容都被当作JSX代码处理。

下面是另一个例子：

const Message = () => https://www.wbolt.com/{	
const name = "Ann";
const heading = 
Welcome https://www.wbolt.com/{name}
;
return (

https://www.wbolt.com/{heading}
This is your dashboard.

);
}

你也可以传递一个对象：

render()https://www.wbolt.com/{			
const person = https://www.wbolt.com/{
name: 'Carlo',
avatar: 'https://en.gravatar.com/userimage/954861/fc68a728946aac04f8531c3a8742ac22',
description: 'Content Writer'
}
return (

Welcome https://www.wbolt.com/{person.name}

Description: https://www.wbolt.com/{person.description}.

);
}

而下面是一个更全面的例子：

render()https://www.wbolt.com/{
const person = https://www.wbolt.com/{
name: 'Carlo',
avatar: 'https://en.gravatar.com/userimage/954861/fc68a728946aac04f8531c3a8742ac22?size=original',
description: 'Content Writer',
theme: https://www.wbolt.com/{
boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'
}
}
return (



https://www.wbolt.com/{person.name}
https://www.wbolt.com/{person.description}.


);
}

注意 img 和 div 这两个元素的 style 属性中的双大括号。我们用双括号来传递两个包含卡片和图像样式的对象。

一个用React构建的卡片实例

你应该注意到，在上面的所有例子中，我们在JSX中包含了JavaScript表达式。

✍️ JSX只接受大括号中的JavaScript表达式。你不允许在你的JSX代码中写语句。

这包括：

• 变量
• 带引号的字符串
• 函数调用
• 对象
• 条件性表达式

React中的不可变性（Immutability）

可变性和不变性是面向对象和函数式编程的两个关键概念。

不可变性是指一个值在被创建后不能被改变。当然，可变性的意思正好相反。

在Javascript中，基元值是不可变的，这意味着一旦一个基元值被创建，它就不能被改变。相反，数组和对象是可变的，因为它们的属性和元素可以被改变，而不需要重新分配一个新值。

在JavaScript中使用不可变的对象有几个原因：

• 提高性能
• 减少了内存消耗
• 线程安全
• 更容易编码和调试

遵循不可变性的模式，一旦一个变量或对象被分配，它就不能被重新分配或改变。当你需要修改数据时，你应该创建它的副本并修改其内容，而不改变原来的内容。

不变性（Immutability）也是React的一个关键概念。

React文档指出：

类组件的状态可以用 this.state 来表示。状态字段必须是一个对象。请不要直接改变状态。如果你想改变状态，用新的状态调用 setState 。

每当一个组件的状态改变时，React会计算是否重新渲染该组件并更新虚拟DOM。如果React没有跟踪之前的状态，它就不能确定是否重新渲染组件。React文档对此提供了一个很好的例子。

我们可以使用哪些JavaScript特性来保证React中状态对象的不变性？

声明变量

在JavaScript中，你有三种方法来声明变量： var 、 let 和 const 。

 var 语句从JavaScript的开始就存在。它被用来声明一个函数范围或全局范围的变量，可以选择将其初始化为一个值。

当你使用 var 声明一个变量时，你可以在全局和局部范围内重新声明和更新该变量。下面的代码是允许的：

// Declare a variable
var msg = "Hello!";
// Redeclare the same variable
var msg = "Goodbye!"
// Update the variable
msg = "Hello again!"

var 的声明在任何代码执行之前都会被处理。因此，在代码中的任何地方声明一个变量都等同于在顶部声明它。这种行为被称为变量提升（hoisting）。

值得注意的是，只有变量声明被提升，而不是初始化，初始化只发生在控制流到达赋值语句的时候。在那之前，该变量是 undefined 的：

console.log(msg); // undefined
var msg = "Hello!";
console.log(msg); // Hello!

在JS函数中声明的 var 的范围是该函数的整个主体。

这意味着该变量不是在块级定义的，而是在整个函数级定义的。这导致了一些问题，可能会使你的JavaScript代码出现错误并难以维护。

为了解决这些问题，ES6引入了 let 关键字。

let declaration声明了一个block-scoped的局部变量，可以选择将其初始化为一个值。

与 var 相比， let 的优点是什么？这里有一些：

• let 声明一个变量到一个块语句的范围内，而 var 声明一个变量到整个函数的全局或局部，与块范围无关。
• 全局 let 变量不是 window 对象的属性。你不能用 window.variableName 访问它们。
•  let 只能在其声明到达后被访问。在控制流到达它被声明的那行代码之前，该变量不会被初始化（let声明是non-hoisted）。
• 用let 重新声明一个变量会产生一个SyntaxError。

由于使用 var 声明的变量不能被block-scoped，如果你在一个循环中或 if 语句中使用 var 定义一个变量，它可以从block之外被访问，这可能导致代码的bug。

第一个例子中的代码执行起来没有错误。现在在上面看到的代码块中用 let 代替 var ：

console.log(msg);
let msg = "Hello!";
console.log(msg);

在第二个例子中，使用 let 而不是 var 产生了一个 Uncaught ReferenceError：

Chrome浏览器中未捕获的引用错误

✍️ 因此，作为一般规则，你应该总是使用 let 而不是 var 。

ES6还引入了第三个关键字： const 。

const 与 let 非常相似，但有一个关键区别：

✍️ 用 const 声明的变量不能被赋值，除非是在它们被声明的地方。

请看下面的例子：

const MAX_VALUE = 1000;
MAX_VALUE = 2000;

上述代码将产生以下类型错误：

谷歌浏览器中的Uncaught TypeError: Assignment to constant variable

此外：

✍️ 你不能声明一个 const 而不给它一个值。

声明一个 const 而不给它一个值，会产生以下 SyntaxError （参见ES6 in Depth：let和const）：

谷歌浏览器中的Uncaught SyntaxError: Missing initializer in const declaration

✍️ 未发现的语法错误： 在Chrome中常量声明中缺少初始化器

但是如果一个常量是一个数组或一个对象，你就可以编辑该数组或对象中的属性或项目。

例如，你可以改变、增加和删除数组项目：

// Declare a constant array
const cities = ["London", "New York", "Sydney"];
// Change an item
cities[0] = "Madrid";
// Add an item
cities.push("Paris");
// Remove an item
cities.pop();
console.log(cities);
// Array(3)
// 0: "Madrid"
// 1: "New York"
// 2: "Sydney"

但你不允许重新分配数组：

const cities = ["London", "New York", "Sydney"];
cities = ["Athens", "Barcelona", "Naples"];

上面的代码会导致一个TypeError。

谷歌浏览器中的Uncaught TypeError: Assignment to constant variable

你可以添加、重新分配和删除对象的属性和方法：

// Declare a constant obj
const post = https://www.wbolt.com/{
id: 1,
name: 'JavaScript is awesome',
excerpt: 'JavaScript is an awesome scripting language',
content: 'JavaScript is a scripting language that enables you to create dynamically updating content.'
};
// add a new property
post.slug = "javascript-is-awesome";
// Reassign property
post.id = 5;
// Delete a property
delete post.excerpt;
console.log(post);
// https://www.wbolt.com/{id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}

但你不允许重新分配对象本身。下面的代码会经历一个 Uncaught TypeError：

// Declare a constant obj
const post = https://www.wbolt.com/{
id: 1,
name: 'JavaScript is awesome',
excerpt: 'JavaScript is an awesome scripting language'
};
post = https://www.wbolt.com/{
id: 1,
name: 'React is powerful',
excerpt: 'React lets you build user interfaces'
};

✍️ 在React中，用 const 声明变量是默认的。 当 const 不合适时，应该使用 let 。非常不鼓励使用 var 。

Object.freeze()

我们现在同意，使用 const 并不总是保证强大的不变性（尤其是在处理对象和数组时）。那么，你如何在你的React应用程序中实现不变性模式呢？

首先，当你想防止数组的元素或对象的属性被修改时，你可以使用静态方法 Object.freeze() 。

冻结一个对象可以防止扩展，并使现有的属性不可写入和不可配置。一个被冻结的对象不能再被改变：新的属性不能被添加，现有的属性不能被删除，它们的可枚举性、可配置性、可写性或值不能被改变，而且对象的原型不能被重新分配。freeze() 返回与传入的对象相同。

任何试图添加、改变或删除一个属性的行为都会失败，要么是无声无息，要么是抛出一个 TypeError ，最常见的是在严格模式下。

你可以这样使用 Object.freeze() ：

'use strict'
// Declare a constant obj
const post = https://www.wbolt.com/{
id: 1,
name: 'JavaScript is awesome',
excerpt: 'JavaScript is an awesome scripting language'
};
// Freeze the object
Object.freeze(post);

如果你现在尝试添加一个属性，你会收到一个 Uncaught TypeError：

// Add a new property
post.slug = "javascript-is-awesome"; // Uncaught TypeError

火狐浏览器中的Uncaught TypeError: can’t define property “slug” : Object is not extensible

当你试图重新分配一个属性时，你会得到另一种 TypeError ：

// Reassign property
post.id = 5; // Uncaught TypeError

重新分配一个只读属性会产生一个未发现的类型错误

谷歌浏览器中的Uncaught TypeError: Cannot assign to read only property ‘id’ of object ‘#