JavaScript 函数参数怎么用对象解构接收配置项-js教程-PHP中文网

javascript函数参数用对象解构接收配置项，核心是直接解构属性并设默认值（如{text='按钮'}={}），支持嵌套解构（如style:{color='#333'}={}）和剩余属性...rest保留原始对象，需始终加={}防报错。

javascript 函数参数怎么用对象解构接收配置项

JavaScript 函数参数用对象解构接收配置项，核心是把配置对象的属性直接解构到形参中，并支持默认值、嵌套解构和类型安全意识（靠开发者约定或运行时检查）。

基础写法：解构 + 默认值

直接在函数参数位置写对象解构语法，用 { key = defaultValue } 设置默认值，避免访问 undefined 属性报错：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function createButton({ text = '按钮', size = 'medium', disabled = false } = {}) {
  return `<button disabled class="btn-${size}">${text}</button>`;
}
// 调用时传部分配置，未传的自动用默认值
createButton({ text: '提交', size: 'large' }); // text='提交', size='large', disabled=false
createButton({}); // 全部用默认值
createButton(); // 传 undefined，但因有 = {} 不会报错

处理嵌套配置对象

如果配置项本身有层级（如 style.color），可在解构中继续嵌套：

function renderCard({ 
  title, 
  content,
  style: { 
    color = '#333', 
    fontSize = '14px' 
  } = {} 
} = {}) {
  return `<div style="color:${color}; font-size:${fontSize}">${title}: ${content}</div>`;
}

renderCard({
  title: '提示',
  content: '操作成功',
  style: { color: '#090' }
});
// color='#090', fontSize='14px'（默认）

保留原始配置对象（需要时）

有时既要解构常用字段，又想保留整个 config 做透传或校验，可用剩余属性 ...rest：

function initApp({ theme = 'light', debug = false, ...rest }) {
  console.log('主题:', theme);
  console.log('调试模式:', debug);
  console.log('其他配置:', rest); // 如 { apiBase: '/v1', timeout: 5000 }
  // 可继续处理 rest 或传给子模块
}