在本文中，請查看開發人員需要了解的十個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的酷而令人興奮的組件架構，從而使您能夠快速構建設計精美的應用程序。
閱讀更多 一名小白人員 的文章
