ES6新特性之默认参数的多种用法

🚀默认参数基础用法

在ES6中，我们可以直接在函数参数列表中为参数设置默认值：

// ES5的实现方式
function greet(name) {name = name || 'Guest';console.log(`Hello, ${name}!`);
}// ES6默认参数写法
function greet(name = 'Guest') {console.log(`Hello, ${name}!`);
}greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!

特性说明：

• 默认值仅在参数为undefined时生效
• null会被认为是一个有效值，不会触发默认值
• 默认参数可以是任意表达式

---

🚀默认参数的进阶用法

1. 结合解构赋值

// 对象解构默认值
function setOptions({ width = 100, height = 200, color = '#fff' 
} = {}) {console.log(width, height, color);
}setOptions({ width: 500 }); // 500 200 #fff
setOptions(); // 100 200 #fff// 数组解构默认值
function getFirst([firstItem = 0] = []) {return firstItem;
}

2. 后置参数默认值

function createElement(tag = 'div', content) {const elem = document.createElement(tag);elem.textContent = content;return elem;
}// 必须显式传递undefined才能使用默认值
const div = createElement(undefined, 'Hello');

3. 动态默认值

function generateId(prefix = 'id', random = Math.random().toString(36).slice(2)) {return `${prefix}_${random}`;
}console.log(generateId()); // id_1a2b3c
console.log(generateId('user')); // user_4d5e6f

---

🚀默认参数的作用域

1. 参数顺序依赖

function tricky(a = 1, b = a * 2) {console.log(a, b);
}tricky();     // 1 2
tricky(3);    // 3 6
tricky(2, 4); // 2 4

2. 暂时性死区（TDZ）

function example(a = b, b = 2) {// ❌ 错误：Cannot access 'b' before initialization
}function validExample(a = 2, b = a * 3) {// ✅ 正确
}

---

🚀实际应用场景

1. 配置项合并

function initPlugin(options = {}) {const defaults = {debug: false,maxRetry: 3,timeout: 5000};return { ...defaults, ...options };
}

2. API请求参数处理

async function fetchData({url = '/api/data',method = 'GET',headers = { 'Content-Type': 'application/json' }
} = {}) {try {const response = await fetch(url, { method, headers });return response.json();} catch (error) {console.error('Request failed:', error);}
}

---

🚀注意事项

1. 箭头函数的默认参数：

const multiply = (a = 1, b = 1) => a * b;

2. 默认参数不计入函数length属性：

function demo(a, b = 1, c) {}
console.log(demo.length); // 1

3. 默认值表达式在每次调用时重新计算：

function getTime(now = Date.now()) {return now;
}console.log(getTime() === getTime()); // false