正文

巧用ES6展开运算符，给对象属性默认值更便捷

/0 浏览量
0419

在ES6中，展开运算符（Spread Operator）是一个非常强大且灵活的特性，它可以将数组或对象中的元素或属性扩展到另一个数组或对象中。今天，我们就来探讨如何巧妙地使用展开运算符来为对象属性设置默认值，从而让代码更加简洁和高效。

一、传统方法设置对象属性默认值

在ES6之前，为对象属性设置默认值通常有以下几种方法：

  1. 显式赋值：
const obj = {
  name: '张三',
  age: 18,
  gender: '男'
};

if (obj.age === undefined) {
  obj.age = 20;
}
  1. 使用函数返回默认值：
const obj = {
  name: '张三',
  age: 18,
  gender: '男'
};

obj.age = obj.age || 20;
  1. 利用对象展开运算符：
const obj = {
  name: '张三',
  age: 18,
  gender: '男'
};

const newObj = { ...obj, age: obj.age || 20 };

二、ES6展开运算符设置对象属性默认值

利用ES6的展开运算符，我们可以更便捷地设置对象属性默认值。以下是一些具体的应用场景：

1. 为对象属性设置默认值

const defaults = {
  age: 20,
  gender: '男'
};

const obj = {
  name: '张三',
  ...defaults
};

console.log(obj); // { name: '张三', age: 20, gender: '男' }

2. 为对象属性设置多个默认值

const defaults = {
  age: 20,
  gender: '男',
  hobby: '打篮球'
};

const obj = {
  name: '张三',
  ...defaults
};

console.log(obj); // { name: '张三', age: 20, gender: '男', hobby: '打篮球' }

3. 结合条件运算符设置默认值

const defaults = {
  age: 20,
  gender: '男',
  hobby: '打篮球'
};

const obj = {
  name: '张三',
  age: 18,
  ...defaults,
  age: obj.age > 18 ? obj.age : defaults.age
};

console.log(obj); // { name: '张三', age: 18, gender: '男', hobby: '打篮球' }

4. 结合解构赋值设置默认值

const defaults = {
  age: 20,
  gender: '男',
  hobby: '打篮球'
};

const { age = 18 } = defaults;

const obj = {
  name: '张三',
  age,
  ...defaults
};

console.log(obj); // { name: '张三', age: 18, gender: '男', hobby: '打篮球' }

三、总结

通过使用ES6展开运算符，我们可以更加方便地为对象属性设置默认值，使代码更加简洁、易读。在实际开发中，我们可以根据具体场景灵活运用展开运算符，提高开发效率。

-- 展开阅读全文 --