解构和函数参数

在过去的几年中，JavaScript语言已经受益于一些非常出色的新功能，包括箭头函数，扩展运算符和默认函数参数值。即使您的浏览器尚不支持建议的JavaScript API语法添加，您也可以在Node.js应用中使用Babel之类的工具来立即利用它们。

我最喜欢的JavaScript新功能之一是对象分解。如果您不熟悉JavaScript解构，那么它基本上提供了一种较短的语法来提取对象键的值，而不会引起点符号混乱：

// A sample object const myObject = { x: 1, y: 2 }; // Destructuring const { x, y } = myObject; // x is 1, y is 2

销毁的基本语法非常简单，但是当这些自变量值应具有默认值时，将其与函数自变量一起使用会更加困难。以下是带有默认值的参数的函数：

function myFunction(text = "", line = 0, truncate = 100) {     // With default values, we can avoid a bunch of:     text = text || "";     line = line || 0;     truncate = truncate || 100; }

无论使用哪种语言，如果一个函数使用的参数超过约3个，则最好传递一个对象名称options 或config 包含可能的键/值的对象。等效形式如下：

function myFunction(config) { } // Usage myFunction({     text: "Some value",     line: 0,     truncate: 100   } )

但是，如果您想在JavaScript函数参数中使用解构怎么办？以下功能签名将变为：

function myFunction({ text, line, truncate }) { }

如果要在功能配置中定义默认值，请使用以下命令：

function myFunction({    text = "",    line = 0,    truncate = 100  } = {}) {  // Even if the passed in object is missing a given key, the default is used! }

设置默认值= { }很重要；如果没有默认值，则以下示例将出错

TypeError: Cannot destructure property `key` of 'undefined' or 'null'

销毁是一种很棒的语言功能，但可能导致混乱甚至错误。希望本指南中提供的基础知识可以帮助您使用带有功能的JavaScript解构进行导航！