变量的解构和赋值

自动解构

只有数组和对象能够自动解构

ES6中允许从数组中提取，安装对应的位置，对变量进行赋值，对象也是相同的道理

我们先看一下基本的解构和赋值

数组的解构	对象的解构
var [a,b,c] = [1,2,3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3	var {a,b,c} = {"a":1, "b": 2, "c":3}; console.log(a); //1 console.log(b); // 2 console.log(c); // 3

简单看一下应用场景，比如对象的解构

    <script>
// 函数的形参就是对象的解构
function People({name,age,sex}){
  console.log(name,age,sex)
}
// 赋值
var xiaoming = new People({
  name: "小明",
  age: 18,
  sex: "男",
})
    </script>

 

 

 数组的结构和赋值的应用场景，实现一个换值的场景

    <script>
var a = 100;
var b = 200;
var c = a;
a = b;
b = c;
console.log(a)
console.log(b)
    </script>

 

 

 

数组的解构

<script>
        var [a,b] = [100,200];
        [b,a] = [a,b];
        console.log([a,b])
    </script>

 

 

 

 

解构是一一对应的，无论内部结构多复杂

 结构的过程是一个一一对应的过程，这个过程很复杂也很抽象，注意的一点是数组对数组，对象对对象，下面的写法是错误的

var {a,b,c} = [1,2,3];
console.log(a,b,c)

 

 

 上面的结果是undefined，因为不能解构出内容

案例一

let [t1, [[t2], t3]] = [1, [[2], 3]];
      console.log(t1,t2,t3)

 

 

 

 案例二

    let [ , , t3] = [1, 2, 3];
      console.log(t3)

 

 

 剩余参数

如果变量定义的内容少，赋值部分的内容多

var [a,b,c] = [1,2,3,4,5,6,7,8,9]
console.log(a)
console.log(b)
console.log(c)

 

 

 此时只会输出对应赋值的部分

如果想输出剩余所有的内容，此时需要用到“...”预算符

var [a,b,...c] = [1,2,3,4,5,6,7,8,9]
console.log(a)
console.log(b)
console.log(c)

 

 

 注意：“...”运算符只能放在最后一个参数上，不放在最后一个参数上就回报错

var [a,…b,c] = [1,2,3,4,5,6,7,8,9]

 

 

 强制结构

var arr = [1,2,3];
console.log(...arr)

 

 

 

对象数据也可以实现强制结构，但是不能单独结构，必须要依赖一个结构器

var obj1 = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
var obj2 = {
  ...obj1,
  e: 5
}
console.log(obj2)

 

 

对象解构常用于修改某一个值

比如下面的代码

var obj1 = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
var obj2 = {
  ...obj1,
  a: 5
}
console.log(obj2)

 

 

函数也可以实现强制结构，将函数中arguments类数组对象转换为普通数组

const fun = function() {
  var arr = [...arguments]
  console.log(arr)
}
fun(1,2,3,4,5,6,7)

 

 字符串也可以解构和赋值

var  [a, b, c, d, e] = 'hello';
console.log(a,b,c,d,e)