1-2 解构赋值

解构赋值

解构赋值 语法是一种Javascript表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

数组解构

假设我们有一个数组传统方式怎么拿到里面的值

let arr = [1, 2, 3]

let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a, b, c) // 1 2 3

如果使用解构赋值怎么写呢？

let [a, b, c] = [1, 2, 3]
console.log(a, b, c)

代码就变得非常的简洁了。 以上代码比较简单，下面我们来写一个稍微复杂的，假设里面有一个数组怎么对应呢？

let [a, b, [c, d]] =  [1,2 [3, 4]]
console.log(a, b, c, d) // 1 2 3 4

我们可以看到输出结果也是一 一 对应的，那么我们再来看一种情况

let [a, b, c] =  [1,2 [3, 4]]
console.log(a, b, c, d) // 1 2 [3, 4]

以上例子里的c 就等于后面这个内部数组 [3, 4], 那么如果我们继续往里面添加呢？

let [a, b, c, d] =  [1, 2 [3, 4], 5]
console.log(a, b, c, d) // 1 2 [3, 4], 5

对象解构

如果我们这个值是一个对象呢？传统方法是不是这样写也能拿到啊

let user = {
  name: '小白',
  age: 4
}
let name = user.name
let age = user.age
console.log(name, age)  // 小白 4

如果我们通过解构赋值怎么写呢？

let user = {
  name: '小白',
  age: 4
}

let {name, age} = user
console.log(name, age) // 小白 4

• 对于对象来说，右边是什么，左边也是什么，就能取到对应的值

如果反过来写又有什么表现呢？

let user = {
  name: '小白',
  age: 4
}
let {age, name} = user
console.log(name, age) // 小白 4

• 在ES6 里面对象的key 是唯一的，在对象解构的时候，他们是通过key的名称去对应的，而不是通过顺序

如果需要更换其他的名字可以使用 ： 的方式进行修改

let user = {
  name: '小白',
  age: 4
}
let { name: username, age: userage } = user
console.log(username, userage) // 小白 4

字符串解构

我们可以把字符串的解构理解为数组的解构

let str = 'xiaobai'
//for (let i = 0; i < str.length; i++ ){
//   console.log(str[i]) // x i a o b a i
//}
let [a, b, c, d, e, f, g] = str
console.log(a, b, c, d, e, f, g)

以上就是对解构赋值的全部内容，欢迎大家点赞，关注，转发，一键三连，比心♥