大家好，我是讯享网，很高兴认识大家。



讯享网

英文 | https://javascript.plainenglish.io/9-javascript-concepts-you-should-know-before-learning-react-f54ce4

翻译 | 杨小二

JavaScript 的语言自1995 年发布以来发生了很大变化，其用途也发生了变化。该语言从一种用于 Web 的脚本语言变成了一种影响 IT 行业中许多领域的语言。

从技术上讲，JavaScript 的语法在 ECMAScript 5 和 6 发布后发生了很大的变化。这个版本带来了所谓的现代JavaScript的概念，一种充满点、箭头和类的新语法。

我很自豪能够成为JavaScript开发人员之一，然后，必须学习现代 JavaScript。

当然，旧的语法仍然有效，但是像 React 这样的现代 JavaScript 库非常强调使用 ES6，这样可以充分利用现代JavaScript 库。虽然，你仍然可以在没有 ES6 的情况下使用 React。

如果你前往 React 的官方网站或任何教它的书籍或教程，你会注意到请求中存在 ES6 中先前的知识。

查看任何 React 代码，你会看到新的关键字和符号，如let, const，箭头，类，以及对象和数组。因此，我列出了一些你在学习 React 之前必须了解的JavaScript概念。

你可能认为声明变量不值一提，但它适用于JavaScript。在 ES6 之前，声明变量的唯一方法是使用var关键字，这导致了一些问题。

使用 const 声明变量

像常量这样的常规东西在 JavaScript 中不存在，但现在有了。使用const关键字意味着变量的值不会改变。但是，数组、对象和其他集合并非如此。

使用const关键字声明数组或对象不会使其元素不可变。

用 let 声明变量

除了不维护变量的值外，另一个在使用var关键字时让 JavaScript 开发人员烦恼的问题是变量的范围。你可以将范围视为可以访问变量的地方。

声明两个具有相同名称的变量，一个位于 if/else 块内，另一个位于if/else块外，应该不会造成任何问题。此规则不适用于使用 var 关键字声明的变量，如下所示。

如果我们更换了块内声明let或者const，我们会得到别的东西，因为let和const范围变量的块。换句话说，在块内声明的任何变量都只属于该块。

在使用 let 时，还有其他有趣的情况。仅仅将这些情况说明清楚，可能还需要写一整篇文章。因此，让我们为其他概念节省时间和空间。

在 JavaScript 中构建 HTML 标记时，会让你感到不安的一件事是，你应该将变量与用引号括起来的字符串连接起来。两三行 HTML 可能没问题，但想象一下 20行呢？

你将不得不处理关闭和打开引号，以及许多运算符而感到头痛。PHP 开发人员不必处理这个问题，因为他们可以毫无负担地在两个双引号内写入变量。

ES6 通过引入模板字面量将这份礼物送给了 JavaScript 开发人员。这取决于两件事：首先，模板文字被反引号 (“) 包围。第二：里面的变量用美元符号“\(”和花括号{}括起来，像\){element}这样。

用 JavaScript 编写函数需要大量工作。这对你来说可能听起来很奇怪，因为你一直在做这项工作，甚至不知道。想象一下我只用一个箭头来写一个函数？就像这个“=>”。

我们把关键字“function”和“return”、括号“()”、花括号{}、箭头和“=>”替换了，你看到这个箭头给我们减轻了多少负担吗？但是，在使用它时需要遵循一些规则。

首先，箭头函数必须作为匿名函数使用，所以应该赋值给一个变量，如下图：

你可能会注意到我们没有省略括号。箭头函数的其他规则之一是，当你有一个参数时，你必须使用括号。此外，如果函数体包含多个指令，则必须将函数体包裹在花括号 {} 中。

当我们将箭头函数与数组方法一起使用时，它们的威力就会大放异彩。你会在数组部分看到它。

知道 JavaScript 没有类让我震惊。我非常渴望学习 OOP（面向对象编程）方法并了解如何使用类。但是，在 ES6 之前，没有类。因此，我通过定期创建对象或使用构造函数来学习 OOP。

现在，该语言拥有自己的类系统，如果你有C++、PHP、VB.net 等语言基础的话，这个类系统对你来说，它看起来也会很熟悉。什么都没有真正改变。你学到的关于对象和原型继承的一切都仍然是一样的，除了我们有了一种使用类语法来声明对象结构的新方法。

在上面的例子中，我们创建了一个 House 类，它包含门、窗两个属性，以及一个显示这些属性值的方法。之后，我们创建了一个 House 类的实例。

任何想要学习 React 的人都必须了解类。就我个人而言，第一次使用 React 时，我遇到了类，因为你通常会通过扩展现有类来创建 React 组件。

虽然有一种通过函数在 React 中创建组件的新方法，但还是建议 React 开发者使用它。这比创建基于类的组件要容易得多。

数组结构没有改变。改变的是操作数组中每个项目的数组方法的数量。例如，我们有：map()、filter()、find()、forEach()、reduce()、match()。每个都有一个独特的用例。

你会在 React 中经常遇到 map 方法，实际上是在将数组中的每个项目映射到 <li> 元素时。map 方法将使你能够遍历数组中的每个项目并更改其形状。例如，让我们将现有数组中的每个元素乘以两个。

正如你在上面看到的，使用 map 方法遍历数组并更改其项比使用 for 循环的旧方法要容易得多。如果仔细观察，你会发现我们使用了箭头函数作为 map 方法的回调。箭头函数在与数组一起使用时发挥**作用。

对象现在有一些很棒的方法，可以消除处理对象结构的所有负担。例如，我们有：

Object.values()：此方法将返回一个包含对象中每个值的数组。

Object.keys()：它将返回一个数组，其中包含对象中每个属性的名称。

Object.assign()：这个方法非常强大，它可以让你用另一个对象的属性更新一个对象，同时保留旧的属性。

在 ES6 之前，关于数据收集的讨论仅限于对象和数组。现在这个名单正在增长。我们有 Map（不要将它与 map() 方法混淆）、Set、WeakMap 和 WeakSet。你不会经常使用这些集合，但了解它们是很好的。

大多数时候，我们使用构造函数来创建对象并将数据放入其中。如果没有使用对象属性或数组表示法的传统方式，如何从对象获取数据呢？在这种情况下，我们将使用解构赋值。让我们看看它是如何工作的。

正如你在上面的示例中看到的，我们创建了一个包含四个属性的对象，然后我们使用解构提取了颜色和内存属性的值。

为了使解构赋值起作用，你要为其赋值的变量的名称应该与对象中所需属性的名称相匹配，换句话说，这样的赋值：const {size}= phone;将给你一个未定义的值。

对于数组，语法保持不变。幸运的是，我们不需要知道任何东西的名称，因为数组不包含任何键。你只需要尊重数组中每个项目的顺序，这样你就可以获得所需的值。

在上面的例子中，我们不能在没有获得第一个值的情况下获得数组中第二个项目的值。如果我们只需要第四个值，我们将不得不创建三个不必要的变量。幸运的是，我们可以使用逗号代替如下所示的编写变量名称。

当涉及到一个函数时，会有一些情况，该函数应该得到三个参数，但它只收到了两个参数。在正常情况下，这会抛出错误或未定义，但使用默认参数时，将使用默认值。

正如我之前提到的，现代 JavaScript 的语法充满了点。为什么？嗯，那是因为扩展运算符。它被广泛用于变量。因此，你可能会在每个 ES6+ 或现代 JavaScript 文件中看到它。

你将使用展开运算符将数组转换为列表。换句话说，你将传播数组的项目。此外，你还可以将它与其他集合（如 Map）以及函数一起使用。让我们看看它是如何工作的。

在上面的情况下，我们通过使用扩展运算符将车辆数组与项目数组连接起来。如果你试图找出项“car”的索引，而不使用扩展运算符，你将得到 -1，简而言之，它不存在。

我们也可以将扩展运算符与解构赋值一起使用。

扩展运算符更有趣的是，我们可以使用它来操作数组中的值，而无需改变原始数组。

当我们使用 rest 运算符时，展开运算符的三点语法将为我们服务，当我们不知道函数应该获得多少个参数时，这个语法会起作用。因此，我们将仅使用展开运算符语法：三个点后跟参数名称。

模块，一个 JavaScript 文件，它导出其代码供另一个文件使用。我们知道，当你导出某些东西时，你应该导入它。导出和导入数据的语法会有所不同，这取决于你的偏好。对于导出数据，你可以使用命名导出或默认导出。

上面，我们创建了一个模块，用于导出名为 Junior 的类。这个类有4个属性。第一个属性将在使用构造函数创建实例时获取它们的值，最后一个属性将具有默认值。这里重要的是我们使用了 export 和 default 关键字来导出这个类。

使用默认关键字（默认导出）导出模块数据意味着：无论我们使用哪个名称导入数据，都会导入数据。让我们在下面的示例中展示这一点。

请注意我们如何从prototype.js 文件中以不同的名称导入该类，并且这不会导致任何错误。

看起来，命名导出将根据其名称导出数据。只需要去掉default关键字，导入的时候记住数据的名字，用大括号把数据包起来。

你可以根据要导出的内容和导出方式使用导出和导入语句。顺便说一下，这里涉及到对象解构。

我试图向你概述在尝试学习 React 甚至 Angular 时可能遇到的每个概念。遇到这些概念是不可避免的。你必须加强和更新有关 JavaScript 的语法知识。

对于每个概念，我承认我仅举一个例子就只触及了皮毛。所以，我为你提供更多的资源供你学习，希望对你有所帮助。

资源如下：

2、模板文字：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

3、箭头函数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

4、ES6 类：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class

5、数组、对象和其他数据集合。

• 数组：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• 对象：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
• 其他数据集合：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#keyed_collections

6、解构对象和数组：https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

7、默认参数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

8、Spread and Rest 运算符：https://javascript.info/rest-parameters-spread

9 、模块：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

谢谢你的时间，感谢阅读，祝编程愉快！