在本文中，请查看开发人员需要了解的十个JavaScript知识。
最近，我与一群志愿开发人员合作，开始将RICOH THETA Developer社区网站移至集成的React Web应用程序中。经验是美好的。我们能够使用React快速利用REST API数据源，并建立一个与我们有趣的开发者社区的接口，该接口每年可获得大约一百万次视图。当项目开始时，我们大多数人都不熟悉React。尽管我玩得很开心，但是如果我花了20分钟以上的时间重新学习现代JavaScript，然后再开始阅读React代码示例，那会更加有趣。
我将通过获取在线代码示例来解释我们希望在开始在React中对该站点进行编码之前希望学习的10篇JavaScript内容。
我们新的React网站仍处于社区反馈阶段，但是您可以在此处看到当前的概念。该站点由三个主要的React组件组成，每个组件都从不同的REST API中提取数据。后端数据源是来自Discourse论坛，Django Rest Framework（包含我们在PostgreSQL中的应用程序列表）和自定义文档服务器的API的组合。
最重要的是，React的组件体系结构是如此出色，以至于我们能够在几天之内得到一些东西，并使用该站点本身来征求有关设计的反馈，而不是漫长的模型和讨论过程。
吸收以下10个技巧，立即开始您的第一个React项目。
1.发箭
粗箭头用作功能快捷键。除了编写外function() ，还可以省略function关键字并编写 () => 。如果仅返回行，则可以省略return语句和大括号() => "long string" 。
您可以将函数分配给常量：const MyExport = () => { code goes here }。
2.模板文字
有三种方法可以在JavaScript中指定字符串。
- 双引号 "string"
- 单引号 'string'
- 反t `string`
反-线具有特殊的力量。
您可以在字符串中插入变量。
另一个有趣的反滴答功能是字符串可以跨越多行。
3.进出口
您可以将代码从一个文件导入另一个文件。
import { MyExport } from "./MyExport.js";
在此示例中，我将MyExport.js导入App.js
此代码示例在此处提供。
要导入文件的内容，必须将其导出。下面的示例显示了粗箭头功能，模板文字和新的导出功能的使用。
回到 App.js 文件中，我现在可以使用从中导出的功能 MyExport.js 。
在 console.log 下面输出被示出。
4.销毁
您可以使用此语法来分解对象或数组。
const {userId, title} = json
为了说明这个示例，我们首先从伪造的JSON测试服务器jsonplaceholder中提取一个JSON条目。
我现在可以使用此单个JSON条目。
JSON条目保存在名为的变量中 json 。
我现在可以通过将这些键放在大括号中来拉出 userId 和 title 拉出。 {userId, title}。
控制台将显示以下内容：
5.地图
您将不断使用数组映射方法。掌握它。这就像一个forEach循环。
此处提供代码示例。
结果是：
[ 1, 4, 9, 16 ]
本示例使用粗箭头功能。这使我们消除了花括号和return语句。代码循环遍历数组的每个元素，并将每个值保存在变量中 element 。
您可以将字符串添加到变量。
console.log(myArray.map(element => "My number is " + element));
您可以通过添加第二个参数来获取数组的索引。
console.log(myArray.map((element, index) => `At index ${index} the number is ${element} `));
6.筛选
使用相同的数组，您可以为条件过滤输出。
console.log (myArray.filter(element => element > 3));
过滤器返回一个数组。在此示例中，数组只是单个元素 [4]。
7.查找
查找类似于过滤器，但不返回数组。它将仅返回满足条件的第一个元素，然后退出。
console.log(myArray.find(element => element === 3));
此代码返回一个数字3 。
8.减少
这是最难理解的数组方法。
它的工作方式类似于具有外部全局变量的循环，该变量将数学运算的内容保留在数组的每个元素上。
经典示例是将数组的所有元素加在一起并返回一个数字。
返回10。变量total从0开始。
- total = 0，current = 1（数组的第一个元素）
- 加0 +1。现在总计为1。
- 遍历数组
- total = 1，current = 2（数组的第二个元素）
- 加1 +2。现在总数是3
- 环
- total = 3，current = 3（数组的第三个元素）
- 加3 +3。现在总数是6
- 环
- 总数= 6，电流= 4（数组的第四个元素）
- 加6 +4。现在总数是10-这就是答案！
您可以以任何值启动合计或累加器。下面的代码从100开始累加器。
console.log(myArray.reduce((total, current) => total + current, 100));
结果是110。
此处提供了所有数组练习的代码。
9.三元运算符
三元运算符看起来很奇怪。
console.log(activeUser ? "Welcome" : "Please sign in");
它的功能类似于if-then-else语句。
问号左侧的变量 ? 是布尔值true / false。如果activeUser为true，则显示字符串“ Welcome”。如果activeUser为false，则: 显示冒号后的字符串 -显示“请登录”。此代码将记录“欢迎”
此代码将记录“请登录”。
尽管看起来很怪异，但是如果您将三元运算符视为if-then-else语句的快捷方式，则它很容易理解。
10.异步并等待
与promise相比，我发现异步和等待的语法更易于理解。
在我先前关于解构的观点中，我曾许诺过。
尽管promise的功能和带有await的异步功能是相同的，但是可以使用异步和await编写promise，以清楚地显示您的代码正在等待什么。在此示例中，代码必须首先等待响应数据从Internet到达。然后，它需要等待响应被转换为JSON。下面的代码示例在此处提供。
React是用于开发的绝佳框架。它可以帮助使JavaScript重新变得有趣。开发系统将Babel集成在幕后，使我们能够使用新的JavaScript功能，从而使我们在学习新语法后更易于使用JavaScript。如果不熟悉JavaScript的新功能，React的初学者可能会因为阅读许多可用于React的代码示例或教程而感到害怕。在深入了解React之前，学习JavaScript语言基础知识将使您能够专注于React的酷而令人兴奋的组件架构，从而使您能够快速构建设计精美的应用程序。
閱讀更多 一名小白人員 的文章
