【ES6新特性】默认参数常见用法

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