ECMAScript是JavaScript的基礎標準，通常縮寫為ES。了解有關ECMAScript的所有內容，以及ES2017（也稱為ES8）中加入的功能。 字串填充 Object.values() Object.entries() getOwnPropertyDescriptors() 這有什麼用處？ 尾部逗號 Async函式 它們的好處 快速示例 連續使用多個Async函式 共享內存和原子操作 ECMAScript 2017是ECMA-262標準的第8版（也常簡稱為ES2017或ES8），於2017年6月定案。 與ES6相比，ES8針對JavaScript來說是一個很小的更新，但它仍然引入了非常有用的功能： 字串填充 Object.values() Object.entries() Object.getOwnPropertyDescriptors() 函式參數列表和呼叫中的尾部逗號 Async函式 共享內存和原子操作 字串填充 字串填充的目的是將字符添加到字串中，使其達到特定長度。 ES2017引入了兩個String方法：padStart()和padEnd()。 padStart(targetLength [, padString]) padEnd(targetLength [, padString]) 範例用法： padStart() ‘test’.padStart(4) ‘test’ ‘test’.padStart(5) ’ test’ ‘test’.padStart(8) ’ test’ ‘test’.padStart(8, ‘abcd’) ‘abcdtest’ padEnd() ‘test’.padEnd(4) ‘test’ ‘test’.padEnd(5) ‘test ’ ‘test’.padEnd(8) ‘test ’ ‘test’.padEnd(8, ‘abcd’) ‘testabcd’ Object.values() 此方法返回包含所有對象自有屬性值的陣列。 用法： const person = { name: 'Fred', age: 87 } Object.values(person) // ['Fred', 87] Object....

ECMAScript是JavaScript所基於的標準，通常被簡稱為ES。了解有關ECMAScript的所有信息，以及ES2018（也稱為ES9）中新增的功能。 Rest/Spread 屬性 異步迭代 Promise.prototype.finally() 正則表達式改進 RegExp 正向匹配斷言：基於前置字符進行匹配 Unicode 屬性逸脫\p{…} 和\P{…} 命名捕獲組 正則表達式的s標記 ES2018是ECMAScript標準的最新版本。 它引入了哪些新功能？ Rest/Spread 屬性 ES6在處理數組解構時引入了“rest”元素的概念： const numbers = [1, 2, 3, 4, 5] [first, second, ...others] = numbers 以及spread元素： const numbers = [1, 2, 3, 4, 5] const sum = (a, b, c, d, e) => a + b + c + d + e const sumOfNumbers = sum(...numbers) ES2018引入了同樣功能，但針對對象。 Rest 屬性： const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 } first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 } Spread 屬性允許通過結合在spread運算符之後傳遞的對象的屬性來創建新對象：...

ECMAScript是JavaScript基於的標準，通常縮寫為ES。了解有關ECMAScript的所有內容，以及在ES2019中添加的功能 ESNext是一個總是指代JavaScript的下一個版本的名稱。 當前的ECMAScript版本是ES2018。它於2018年6月發布。 根據歷史，JavaScript版本通常在夏季進行標準化，因此我們可以預計ECMAScript 2019將於2019年夏季發布。 因此，在撰寫本文時，ES2018已經發布了，而ESNext即為ES2019。 對ECMAScript標準的提案按照階段進行組織。 1至3階段是新功能的孵化器，達到4階段的功能將作為新標準的一部分完成。 在撰寫本文時，我們在第4階段上有許多功能。我將在本節中介紹它們。主要瀏覽器的最新版本應已實現其中的大多數。 Array.prototype.{flat,flatMap}（數組的一階方法） 可選catch綁定 Object.fromEntries()（從對象條目創建對象） String.prototype.{trimStart,trimEnd}（字符串的一階方法） Symbol.prototype.description（Symbol的描述） JSON改進 符合格式的JSON.stringify()（對JSON.stringify()的修復） Function.prototype.toString()（函數的一階方法） 其中一些變更主要是為內部使用而進行的，但也了解一下非常好。 在第3階段還有一些其他功能，這些功能在接下來的幾個月可能被提升到第4階段，您可以在此GitHub存儲庫上查看它們：https://github.com/tc39/proposals。 Array.prototype.{flat,flatMap}（數組的一階方法） flat()是一個新的數組實例方法，可以從多維數組創建一個一維數組。 示例： ;['Dog', ['Sheep', 'Wolf']].flat() //[ 'Dog', 'Sheep', 'Wolf' ] 默認情況下，它僅“展平”到一個級別，但是您可以添加一個參數來設置要將數組展平的級別數。將其設置為Infinity以獲得無限級數： ;['Dog', ['Sheep', ['Wolf']]] .flat() [ //[ 'Dog', 'Sheep', [ 'Wolf' ] ] ('Dog', ['Sheep', ['Wolf']]) ].flat(2) [ //[ 'Dog', 'Sheep', 'Wolf' ] ('Dog', ['Sheep', ['Wolf']]) ].flat(Infinity) //[ 'Dog', 'Sheep', 'Wolf' ] 如果您熟悉數組的JavaScript map()方法，則知道使用它，可以對數組的每個元素執行一個函數。 flatMap()是一個結合了flat()和map()的新的數組實例方法。當在map()回調中調用返回數組的函數時，它非常有用，但是您希望結果數組是平的： ;['My dog', 'is awesome'] .map((words) => words....

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作用域是从上下文继承的。...

DOM事件：stopPropagation vs preventDefault() vs return false 在處理JavaScript中的DOM事件時，總有一件事我經常感到困惑。 在事件處理程序中，應該在什麼時候呼叫event.stopPropagation()？ 在事件處理程序中，應該在什麼時候呼叫event.preventDefault()？ 應該使用return false嗎？ Event.stopPropagation 假設我想要處理某個元素上的點擊事件。 默認情況下，DOM元素上的事件在特定元素上觸發(比如按鈕)，並且會向上傳遞到其所有父元素樹中，除非被停止。 我希望確保事件在我的事件處理程序中完全處理，並且在那裡“停止”。 你可以在事件處理程序的末尾調用Event對象的stopPropagation()方法來停止傳播： const link = document.getElementById('my-link') link.addEventListener('mousedown', event => { // 處理事件 // ... event.stopPropagation() }) Event.preventDefault 調用事件對象的preventDefault()方法將取消瀏覽器預設執行的處理。 例如，在單擊a元素時，會打開新頁面。 或者在提交事件上提交表單。 調用preventDefault()是您需要完全自定義操作的時候。也許通過創建一個fetch請求來加載一些JSON，而不是在點擊鏈接時打開新頁面。 對於同一元素定義的其他事件處理程序將被執行。除非您調用event.stopImmediatePropagation()。 返回false 這對於以前（或現在）使用jQuery的開發人員來說尤其令人困惑。在jQuery中，從事件處理程序返回false會自動為我們調用event.preventDefault和event.stopPropagation。 在普通的JavaScript中，在事件處理程序中返回false什麼都不做。

如何使用sessions在請求之間識別用戶 預設情況下，Express請求是依序處理的，並且無法將請求相互關聯起來。除非使用某種機制來實現，否則無法知道該請求是否來自先前已執行請求的客戶端。 這就是sessions的作用。 一旦實施，您的API或網站的每個用戶將被分配一個唯一的session，這使您可以存儲用戶狀態。 我們將使用由Express團隊維護的express-session模塊。 您可以使用以下命令進行安裝 npm install express-session 一旦安裝完成，您可以在應用程序中實例化它 const session = require('express-session') 這是一個中間件，所以您需要在Express中安裝它 const express = require('express') const session = require('express-session') const app = express() app.use(session({ 'secret': '343ji43j4n3jn4jk3n' })) 完成後，應用程序路由的所有請求都將使用sessions。 secret是唯一的必需參數，但還有很多其他可用的參數。它應該是您應用程序的隨機唯一字符串。 session附加到請求上，所以您可以在這裡使用req.session進行訪問： app.get('/', (req, res, next) => { // req.session } 此對 象可用於從session獲取數據，並用於設置數據： req.session.name = 'Flavio' console.log(req.session.name) // 'Flavio' 在存儲時，此數據序列化為JSON，因此您可以安全使用嵌套對象。 您可以使用sessions將數據傳遞給稍後執行的中間件，或者在後續的請求中檢索數據。 會話數據存儲在哪裡？這取決於您如何設置express-session模塊。 它可以將會話數據存儲在 內存，不適用於生產環境 如MySQL或Mongo之類的 數據庫 如Redis或Memcached之類的 內存緩存 在 https://github.com/expressjs/session 中有一個支持各種不同兼容緩存存儲的第三方包列表 所有解決方案都將會話ID存儲在cookie中，並在服務器端保存數據。客戶端將在cookie中接收會話ID，並將其與每個HTTP請求一起發送。 我們將在服務器端引用這個會話ID，以將其與本地存儲的數據關聯起來。 內存是默認選項，您無需進行特殊設置，但它只適用於開發目的。 最佳選擇是像Redis這樣的內存緩存，您需要設置它自己的基礎架構。 在Express中管理會話的另一個流行包是cookie-session，它的一大不同之處在於它將數據客戶端存儲在cookie中。我不建議這樣做，因為將數據存儲在cookie中意味著它存儲在客戶端，並在用戶發出的每個請求中來回傳輸。它的大小也受限制，因為它只能存儲4KB的數據。 Cookie還需要進行安全配置，但默認情況下它們並未進行安全配置，因為安全Cookie僅適用於HTTPS站點，如果有代理，則需要對其進行配置。

中间件（Middleware）是一种钩入路由过程的函数，它在链中的某一点执行任意操作（取决于我们想要它执行的操作）。 中间件常用于编辑请求或响应对象，或在到达路由处理程序代码之前终止请求。 添加中间件到执行堆栈的方式如下： app.use((req, res, next) => { /* */ }) 这类似于定义路由，但除了请求和响应对象实例之外，我们还有一个对下一个中间件函数的引用，我们将其分配给变量 next。 我们总是在我们的中间件函数的结尾调用 next()，以便将执行传递给下一个处理程序。除非我们想要提前结束响应并将其发送回客户端。 通常情况下，您会使用预先创建的中间件，以 npm 包的形式存在。可以在 这里 找到可用中间件的大列表。 一个例子是 cookie-parser，它用于将 cookie 解析为 req.cookies 对象。您可以使用 npm install cookie-parser 安装它，并如下使用： const express = require('express') const app = express() const cookieParser = require('cookie-parser') app.get('/', (req, res) => res.send('Hello World!')) app.use(cookieParser()) app.listen(3000, () => console.log('Server ready')) 我们还可以将中间件函数设置为仅对特定路由运行（而非全部）。方法是将其作为路由定义的第二个参数： const myMiddleware = (req, res, next) => { /* ... */ next() } app.get('/', myMiddleware, (req, res) => res....

Express 可以处理服务器端模板引擎。模板引擎允许我们向视图中添加数据，并根据数据动态生成 HTML。 Express 默认使用 Jade 作为模板引擎，但 Jade 是 Pug 的旧版，具体来说是 Pug 1.0。 由于商标问题，该项目在 2016 年发布了 2.0 版本时将名称从 Jade 更改为 Pug。你仍然可以使用 Jade，即 Pug 1.0，但未来最好使用 Pug 2.0。 尽管 Jade 的最后一个版本已经有三年时间了（截至文章撰写时的夏季 2018），但在 Express 中仍然是默认设置，这是为了向后兼容。 在任何新项目中，你应该使用 Pug 或其他你选择的引擎。Pug 的官方网站是 https://pugjs.org/。 你可以使用许多不同的模板引擎，包括 Pug、Handlebars、Mustache、EJS 等。 使用 Pug 首先我们需要安装 Pug: npm install pug 在初始化 Express 应用程序时，我们需要设置 Pug： const express = require('express') const app = express() app.set('view engine', 'pug') 现在我们可以开始在 .pug 文件中编写模板了。 创建一个关于页面的视图： app.get('/about', (req, res) => { res....

＃使用Express管理Cookie 使用Response.cookie()方法來操作Cookie。 範例： res.cookie('username', 'Flavio') 該方法接受第三個參數，其中包含各種選項： res.cookie('username', 'Flavio', { domain: '.flaviocopes.com', path: '/administrator', secure: true }) res.cookie('username', 'Flavio', { expires: new Date(Date.now() + 900000), httpOnly: true }) 你可以設定的最有用的參數有： 值 描述 domain Cookie域名 expires 設定Cookie過期日期。如果缺少或為0，Cookie即為session cookie httpOnly 設定Cookie只能被Web服務器訪問。參考HttpOnly maxAge 相對於當前時間設定Cookie的到期時間，以毫秒為單位 path Cookie路径。默認為’/' secure 標記此Cookie僅使用HTTPS訪問。參考secure signed 設定Cookie為已簽名 sameSite SameSite的值 可以使用以下方法清除Cookie： res.clearCookie('username')

＃使用express-validator在Express中驗證輸入 了解如何驗證Express端點中的輸入數據。 假設你有一個POST端點，接受名字、郵件和年齡參數： const express = require('express') const app = express() app.use(express.json()) app.post('/form', (req, res) => { const name = req.body.name const email = req.body.email const age = req.body.age }) 如何對這些結果進行服務器端驗證，以確保： name是一個至少3個字符的字符串嗎？ email是一個真實的郵件地址嗎？ age是一個介於0和110之間的數字嗎？ 處理Express中從外部輸入的任何類型的驗證的最佳方法是使用express-validator套件： npm install express-validator 您需要從該套件中導入check和validationResult對象： const { check, validationResult } = require('express-validator'); 我們將check()調用的數組作為post()調用的第二個參數傳遞。每個check()調用接受參數名作為參數。然後，我們調用validationResult()來驗證是否有驗證錯誤。如果有，我們將錯誤返回給客戶端： app.post('/form', [ check('name').isLength({ min: 3 }), check('email').isEmail(), check('age').isNumeric() ], (req, res) => { const errors = validationResult(req) if (!errors.isEmpty()) { return res.status(422).json({ errors: errors....