ES6 中的默认对象值及其在开发中的运用-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要定义对象，然后给对象的属性赋值。在 ES6 中，我们可以使用默认对象值来简化这个过程。

默认对象值的语法

默认对象值的语法非常简单，就是在对象属性定义的时候，使用 = 号给属性设置默认值。例如：

const obj = {
  name: 'Tom',
  age: 18,
  gender: 'male',
  hobby: 'reading',
  phone: null,
};

在上面的代码中，我们给 phone 属性设置了一个默认值 null。

默认对象值的运用

默认对象值可以在很多场景下使用，比如：

函数参数默认值

在 ES6 中，我们可以给函数的参数设置默认值。例如：

function sayHello(name = 'Tom') {
  console.log(`Hello, ${name}!`);
}

sayHello(); // 输出：Hello, Tom!
sayHello('Jerry'); // 输出：Hello, Jerry!

在上面的代码中，我们给 sayHello 函数的 name 参数设置了默认值 Tom。如果调用函数时不传入参数，就会使用默认值 Tom。

解构赋值默认值

在使用解构赋值时，我们也可以给变量设置默认值。例如：

const { name = 'Tom', age } = obj;
console.log(name); // 输出：Tom
console.log(age); // 输出：18

在上面的代码中，我们使用解构赋值从 obj 对象中取出 name 和 age 属性，并给 name 设置了默认值 Tom。如果 obj 对象中没有 name 属性，就会使用默认值 Tom。

对象属性默认值

在定义对象时，我们也可以给属性设置默认值。例如：

const obj = {
  name: 'Tom',
  age: 18,
  gender: 'male',
  hobby: 'reading',
  phone: null,
  email: 'tom@example.com',
  address: {
    city: 'Beijing',
    district: 'Haidian',
  },
  job: {
    company: 'Google',
    position: 'Engineer',
  },
};

const { email = 'tom@example.com', address: { city = 'Beijing', district } } = obj;
console.log(email); // 输出：tom@example.com
console.log(city); // 输出：Beijing
console.log(district); // 输出：Haidian

在上面的代码中，我们使用解构赋值从 obj 对象中取出 email 和 address 属性，并给它们设置了默认值。如果 obj 对象中没有 email 属性，就会使用默认值 tom@example.com。如果 obj.address 对象中没有 city 属性，就会使用默认值 Beijing。

总结

默认对象值是 ES6 中的一个很方便的语法，它可以让我们在定义对象时，给属性设置默认值，从而简化代码。默认对象值还可以在函数参数和解构赋值中使用，让我们的代码更加简洁。在实际开发中，我们可以根据具体情况，灵活使用默认对象值。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bdeb16add4f0e0ff786c27