对象及函数参数解构让编程更加优雅

2024-01-09 18:03:23

在 JavaScript 中，对象和函数参数的解构是 ES6 引入的新特性，它允许我们从对象或函数参数中提取变量并赋值给新变量，从而简化了代码并使其更具可读性。

对象解构

对象解构可以将对象中的属性值赋给变量，而无需逐个赋值。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// ES5
const name = person.name;
const age = person.age;
const city = person.city;

// ES6
const { name, age, city } = person;

在 ES6 中，我们可以使用大括号 {} 来解构对象，并使用变量名来指定要提取的属性。

对象解构还可以用于嵌套对象和数组。

const person = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY'
  },
  hobbies: ['basketball', 'football', 'tennis']
};

// ES5
const name = person.name;
const age = person.age;
const street = person.address.street;
const city = person.address.city;
const state = person.address.state;
const hobbies = person.hobbies;

// ES6
const { name, age, address: { street, city, state }, hobbies } = person;

函数参数解构

函数参数解构可以将函数参数赋给变量，而无需在函数内部声明变量。

function greet(name, age) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

// ES5
greet('John', 30);

// ES6
greet(...['John', 30]);

在 ES6 中，我们可以使用 ... 运算符来解构函数参数，并将它们赋给变量。

函数参数解构还可以用于嵌套对象和数组。

function greet({ name, age }, hobbies) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
  console.log(`Your hobbies are: ${hobbies.join(', ')}.`);
}

// ES5
greet({ name: 'John', age: 30 }, ['basketball', 'football', 'tennis']);

// ES6
greet(...[{ name: 'John', age: 30 }], ...['basketball', 'football', 'tennis']);