ES6

ECMAScript是JavaScript基于的标准，通常缩写为ES。了解关于ECMAScript的一切以及ES6（又称ES2015）中添加的功能。 箭头函数 新的this作用域 Promises 生成器 let和const 类 构造函数 Super 取值器和存值器 模块 导入模块 导出模块 模板字符串 默认参数 展开运算符 解构赋值 增强的对象字面量 更简洁的语法来包含变量 原型 super() 动态属性 for-of循环 Map和Set 新的字符串方法 新的对象方法 ECMAScript 2015，也称为ES6，是ECMAScript标准的基本版本。 与最新的标准修订相隔4年发布，ECMAScript 5.1，它也标志着从版本号转换为年份的变化。 因此不应该称为ES6（尽管每个人都这样称呼），而应该称为ES2015。 ES5的制定历经了10年，从1999年到2009年，因此它也是一次基本而非常重要的语言修订，但现在已经过去了很长时间，没有必要讨论ES5之前的代码是如何工作的了。 由于ES5.1和ES6之间过去了很长时间，因此发布版本中充满了重要的新功能和对JavaScript程序开发中推荐最佳实践的重大变化。要了解ES2015有多么基础，请记住，随着这个版本，规范文档从250页增加到了~600页。 本文描述了最重要的变化。 箭头函数 自引入以来，箭头函数改变了大多数JavaScript代码的外观（和工作原理）。 从视觉上看，这是一个简单而受欢迎的变化，从： const something = function something() { //... } 到 const something = () => { //... } 如果函数体只有一行代码，只需： const something = () => doSomething() 此外，如果只有一个参数，可以写成： const something = param => doSomething(param) 这并不是一个破坏性的变化，常规的function仍然像以前一样工作。 新的this作用域 箭头函数的this作用域是从上下文继承的。...

學習如何在 JavaScript 中處理 Unicode，瞭解 Emoji 的組成，ES6 的改進以及在處理 Unicode 時可能遇到的一些問題。 源文件的 Unicode 編碼 JavaScript 在內部如何使用 Unicode 在字符串中使用 Unicode 歸一化 Emoji 獲取字符串的正確長度 ES6 Unicode 編碼點转義 編碼 ASCII 字節 Unicode 編碼的源文件 如果沒有指定其他方式，瀏覽器會假設任何程序的源代碼都是以本地字符集編寫的，而字符集因國家而異，可能會導致意外問題。因此，設置任何 JavaScript 文檔的字符集是很重要的。 如何指定其他字符集，尤其是 UTF-8，這是網絡上最常見的文件編碼方式？ 如果文件包含BOM字符，那將優先確定字符集。在網上可以找到許多不同的意見，有人說不建議在 UTF-8 中使用 BOM，有些編輯器甚至不會添加 BOM。 這是Unicode標準所說的： … 使用 BOM 對於 UTF-8 既不是必需的，也不是建議的，但在轉換使用了 BOM 的其他編碼形式的 UTF-8 數據的上下文中可能會遇到 BOM，或者在 BOM 作為 UTF-8 簽名使用的情況下可能會遇到 BOM。 這是 W3C 所說的： 在 HTML5 中，瀏覽器需要識別 UTF-8 BOM 並使用它檢測頁面的編碼，主要瀏覽器的最新版本在使用 UTF-8 編碼的頁面時也可以正常處理 BOM。- https://www.w3.org/International/questions/qa-byte-order-mark 如果使用 HTTP（或 HTTPS）獲取文件，Content-Type header 可以指定字符集：...

学习 JavaScript 函数参数的基础知识。 函数可以接受一个或多个参数。 const dosomething = () => { //做些事情 } const dosomethingElse = foo => { //做些事情 } const dosomethingElseAgain = (foo, bar) => { //做些事情 } 从 ES6/ES2015 开始，函数的参数可以有默认值： const dosomething = (foo = 1, bar = 'hey') => { //做些事情 } 这样你就可以在调用函数时不填充所有参数： dosomething(3) dosomething() ES2018 引入了参数的尾随逗号，这个特性有助于减少由于移动参数导致的缺少逗号而引起的 bug（例如，将最后一个参数移动到中间时）： const dosomething = (foo = 1, bar = 'hey',) => { //做些事情 } dosomething(2, 'ho!') 在最后一个参数后面加上逗号来调用函数也是可以的： dosomething(2, 'ho!',) 你可以将所有参数包装在数组中，并在调用函数时使用 扩展运算符：...

在 ES2015（也稱為 ES6）中引入的樣板文字提供了一種新的聲明字符串的方式，同時還提供了一些新的有趣的構造方法，並且已經被廣泛地使用。 樣板文字介紹 多行字符串 插值 樣板標籤 樣板文字介紹 樣板文字是 ES2015 / ES6 中的一個新功能，與 ES5 及其以下版本相比，它以一種新穎的方式處理字符串。 從外觀上看，語法非常簡單，只需使用反引號（`）而不是單引號或雙引號即可： const a_string = `something` 它們之所以獨一無二，是因為它們提供了很多普通字符串所不具備的功能，尤其是： 它們提供了一種很好的語法來定義多行字符串 它們提供了一種簡單的方式將變量和表達式插入字符串中 它們允許您使用樣板標籤創建特定領域的語言（DSL，即“domain specific language”），例如 React 中的 Styled Components 用於為組件定義 CSS 讓我們逐一詳細介紹這些功能。 多行字符串 在 ES6 之前，要創建跨兩行的字符串，您必須在行末使用反斜線字符（\）： const string = 'first part \ second part' 這允許在兩行上創建字符串，但實際呈現在只有一行上： first part second part 要將字符串呈現為多行，您需要在每行末尾明確添加 \n，如下所示： const string = 'first line\n \ second line' 或者 const string = 'first line\n' + 'second line' 樣板文字使多行字符串變得更簡單。...

回顧過去十年的JavaScript和Web的發展，真是一段驚心動魄的旅程。 儘管我書架上有一些1998年的JS書籍，但2010年時我並沒有寫很多JavaScript。當時我主要使用Mootools和jQuery插件。可能有些JS代碼是我寫的，但並沒有什麼突破性的創新。 那時的JavaScript絕對不被視為熱門語言。它的主要用途是在像GMail、Google Maps等有大量預算的項目中進行一些高級工作。 對於大多數人來說，用JavaScript編寫整個應用程序的概念當然是陌生的。 快進到2019年12月31日，JavaScript可真是太普遍了。 JavaScript無所不在。在過去的10年中，它經歷了多次更新，包括一個主要更新（ES6），如今我們寫JavaScript的方式與2010年完全不同。 異步和等待、箭頭函數、Promises、生成器、const/let、類、模板字面量等，肯定使現代JavaScript看起來和行為也非常不同。 ES模塊使大型應用程式更易於撰寫和維護。 但這不僅僅是語法和語言的新特性改變了。 我認為，這十年最大的變化之一就是構建工具的引入和廣泛使用。從Grunt到Gulp再到Webpack、Parcel和Rollup，工具的發展如此迅速，作為開發者，我們每天都有越來越大的能力。 模塊打包器為我們提供了非常高級的功能，如樹搖篩檢。了解這些技術是如何從早期發展至今真是令人驚嘆。 我們要提到Node.js嗎？從技術上講，Node在2009年春季首次推出，所以並不屬於這個十年。但可以肯定的是，Node第一年並沒有取得很大的突破，但在這十年中卻取得了巨大的成功。 現在讓我們來談談瀏覽器。2010年1月的IE版本是8，其佔有率超過50%並且Edge還不存在。Chrome作為一歲的瀏覽器佔有率僅為5%，因為1.0版本是在2008年12月發布的。你能想像嗎？如今Chrome是最受歡迎的瀏覽器，遠超其他瀏覽器。據我所知，64%的互聯網使用Chrome，而Safari佔有16%。 說到Safari，在2010年1月，iPhone 3GS已經推出（我當時沒有，我還用著Nokia。我第一部iPhone是在那一年晚些時候推出的iPhone 4）。那時JavaScript在該設備上執行速度可能不會很快。但如今移動瀏覽器可以以閃電般的速度執行JavaScript，並且JavaScript被用於使用Cordova、Ionic、React Native等令人驚嘆的框架來構建移動應用程序。 npm於2010年1月推出，它的崛起可謂驚人。起初它只是一個Node.js模塊的包管理器，如今npm也成為了前端開發的事實標準。它在去年6月份超過了一百萬個包，我敢肯定它是世界上最大的軟件目錄。 順帶一提，GitHub在2010年1月剛剛存在1年半的時間。看看它當時的樣子真是有趣。 在這十年中，許多驚人的項目應運而生。我可以提到Ember.js、CoffeeScript、Angular、React，只舉幾個例子。 我有幸參與並加入了許多不同的社區，而JavaScript和整個生態系統之所以在這十年中發展如此迅速，是因為工作在其中的人們。 憑著熱情、勤奮、承諾和慷慨精神，開源社區以及成百上千的充滿企圖心的公司，使JavaScript這個開發世界的一角成為今天的模樣。 回顧過去，看到我們走了多遠真是令人愉悅。 我真的無法想像這個未來十年會帶給我們什麼。

瞭解在 JavaScript 中如何使用一組值來初始化新陣列的方法 簡單解決方案: Array(12).fill(0) fill() 是在 ES6 中引入的新方法。

了解如何在JavaScript函數中添加預設參數值 預設參數值在2015年的ES6中引入，並且在現代瀏覽器中被廣泛實現。 這是一個接受param1的doSomething函數。 const doSomething = (param1) => { } 如果在調用函數時沒有指定參數，我們可以為param1添加一個預設值： const doSomething = (param1 = 'test') => { } 當然，這對於更多參數也同樣適用： const doSomething = (param1 = 'test', param2 = 'test2') => { } 如果您有一個帶有參數值的獨特對象呢？ 從前，如果我們需要將一個包含選項的對象傳遞給函數，在其中為那些選項提供默認值（如果其中一個未定義），則必須在函數內部添加一些代碼： const colorize = (options) => { if (!options) { options = {} } const color = ('color' in options) ? options.color : 'yellow' ... } 使用解構賦值，您可以提供默認值，這大大簡化了代碼： const colorize = ({ color = 'yellow' }) => { ....

箭頭函式是 ES6 / ES2015 中最具影響力的變化之一，現今廣泛使用。它們與常規函式稍有不同。讓我們來看看箭頭函式的用法。 箭頭函式是在 ES6 / ECMAScript 2015 中引入的，自那時以來，它們永遠改變了 JavaScript 代碼的外觀（和工作方式）。 在我看來，這種變化非常受歡迎，現代代碼庫中很少見到使用 function 關鍵字的情況。雖然這種用法仍然有它的用處。 從外觀上看，這是一個簡單而受歡迎的改變，它允許您使用更短的語法來編寫函式： const myFunction = function() { //... } 改為： const myFunction = () => { //... } 如果函式體只包含一條語句，您可以省略大括號，將所有內容寫在同一行上： const myFunction = () => doSomething() 參數通過括號傳遞： const myFunction = (param1, param2) => doSomething(param1, param2) 如果只有一個（且僅有一個）參數，您可以完全省略括號： const myFunction = param => doSomething(param) 由於這種簡潔的語法，箭頭函式鼓勵使用小函式。 隱式返回 箭頭函式允許您進行隱式返回：不需要使用 return 關鍵字就可以返回值。 它僅對函式體中一行的語句有效： const myFunction = () => 'test' myFunction() //'test' 另一個例子，當返回一個對象時，請記得用括號將大括號括起來，以避免它被認為是包含函式體的大括號：...

了解一下在學習React之前是否需要學習一些東西 如果您想學習React，首先需要掌握一些基礎知識。特別是一些在React中會反覆使用的最新JavaScript功能。 有時候人們認為某個特定功能是React提供的，但實際上它只是現代JavaScript語法。 起初不需要成為這些主題的專家，但您深入研究React時，就需要更加熟練地掌握這些知識。 我將列出一些事項，並提供我撰寫的文章的連結，以幫助您快速掌握基礎知識： JavaScript類 ES模組 非同步編程的基礎知識：回調函數，Promise，async/await 箭頭函數 this關鍵字 展開運算符 解構賦值 物件字面量 JavaScript函數式編程