JS回顾 你要知道的 ...三点运算符操作对象及数组的各种用法

前言

在JavaScript中，合理使用...运算符对对象和数组 进行解构赋值等，可以让我们写出更加简洁的代码，可以帮我们省下多次重复读取对象下的某个属性的繁琐流程，一定程度上提升了我们的开发效率，但在使用时也有一些注意项，下面我们就来探究一下...运算符在对对象 和数组进行解构赋值的各种用法。

1. 对象解构赋值

1.1 普通对象解构赋值并提供默认值

下面是一个最简单的对象解构赋值的例子：

let user = {
  name: '张三',
  age: 18,
  sex: '男'
}
let { name, age = 0, sex, weight = '180斤' } = user
console.log(name, age, sex, weight) // 张三 18 男 180斤

以上在解构赋值的过程中，我们分别给user对象的age和weight属性提供了默认值，由于在user对象中已经存在age属性，所以使用的是原来的值，weight属性不存在与该对象中，所以应用默认值。

1.2 对象解构属性重命名并提供默认值

下面是在对象进行解构给属性进行重命名后再赋默认值的例子：

let user = {
  name: '张三',
  age: 18,
  sex: '男'
}
let { age: age2, name: name2, sex: sex2, weight: myWeight = '180斤' } = user
console.log(name2, age2, sex2, myWeight)  // 张三 18 男 180斤
console.log(age)  // Uncaught ReferenceError: age is not defined

由于解构赋值的属性名已经变更，所以变更前的属性名为未定义状态。

1.3 对象解构赋值，直接对已有变量进行修改

下面是对外部作用域中，已经存在相同属性名的变量进行直接修改的例子：

let user = {
  name: '张三',
  age: 18,
  sex: '男'
}
let name = 'vilan';
let age = 20;
let sex = '女';
console.log(name, age, sex); // vilan 20 女
// 需要括号包起来形成整体（否则赋值左边会被认为是一个代码块，给代码块进行赋值会报错），并且括号前面需要加分号
({ name, age, sex } = user);
/**
 * error: Declaration or statement expected.  This '=' follows a block of statements, so if you intended to write a destructuring assignment, you might need to wrap the whole assignment in parentheses.
 * 需要声明或陈述。这个'='跟在语句块后面，所以如果您打算编写解构式赋值，可能需要将整个赋值用圆括号括起来。
 */
console.log(name, age, sex) // 张三 18 男

下面是对外部作用域中，已经存在不相同属性名的变量进行直接修改的例子：

let user = {
  name: '张三',
  age: 18,
  sex: '男'
}
let name2 = '马哥';
let age2 = '66';
let sex2 = '女';
console.log(name2, age2, sex2); // 马哥 66 女

({ name: name2, age, sex } = user);
console.log(name2, age2, sex2); // 张三 18 男

以上例子我们通过对象解构重命名为已经存在的变量名进行直接修改该变量值。

note: 在一些团队的eslint验证规范中可能不允许使用;的情况，那么为了可以加个{}代码块包裹解构语句

let user = {
  name: '张三',
  age: 18,
  sex: '男'
}
// 不加分号，可以加个代码块
{
  ({ name, age, sex } = user)
}
console.log(name, age, sex) // 张三 18 男

2.嵌套对象解构赋值

下面是一个基本的嵌套对象解构赋值例子：

const user = {
  name: '张三',
  age: 18,
  sex: '男',
  address: {
    city: '北京',
    street: '朝阳区',
    detail: {
      house: '01',
      room: '302'
    }
  }
}

let { name, age, sex, address: { city, street, detail: { house, room } } } = user
console.log(name, age, sex, city, street, house, room) // 张三 18 男 北京 朝阳区 01 302

当存在嵌套对象时，我们在使用嵌套的对象属性时通常会这样使用user?.address?.city，增加一个可选连操作符(?) ，这是因为没有给对象提供默认值，对象可能为undefined导致报错。

下面这个方法是一个嵌套对象，我们可以像下面这样把里面的所有属性给默认值：

function getLocation({
  name = '李四',
  age = 20, 
  sex = '女',
  address = {
    city = '北京', 
    street = '朝阳区',
    detail = {
      house = '01',
      room = '302'
    } = {}
  } = {}
} = {}) {
  console.log(name, age, sex, city, street, house, room)  // 李四 20 女 北京 朝阳区 01 302
}
// 直接执行不传参数
getLocation()

在getLocation方法参数中，我们给最外层对象提供了一个空对象为默认值，这样就能继续对内部name、age、sex、address进行解构，接着对address赋默认值为空对象，继续对内部属性city、street、detail解构，最后detail内部属性解构也是同理。

3.数组进行解构赋值

1.普通数组进行解构赋值

// 2.1普通数组解构
let list = ['张三', '18', '男']
let [name, age, sex, weight = '保密'] = list
console.log(name, age, sex, weight) // 张三 18 男 保密

2.嵌套数组进行解构赋值

let list2 = [
  ['张三', '18', '男'],
  ['李四', '20', '女']
]
let [
  [name, age, sex],
  [name2, age2, sex2]
] = list2
console.log(name, age, sex) // 张三 18 男
console.log(name2, age2, sex2)  // 李四 20 女

3.使用解构赋值进行数组转对象

let list = ['张三', '18', '男']
let persion = {
  ...list
}
console.log(persion)  // {0: "张三", 1: "18", 2: "男"}

总结

在开发中合理利用...运算符进行解构赋值可以为我们的开发提供诸多便利，但也还是要结合自身开发场景进行使用，只要能够为你的代码阅读起来更清晰，提升代码的可维护性，你可以选择使用它。