3.JavaScript中的解构赋值

解构赋值（数组）

我们当然可以进行数值的交换，这样就不需要多一个值进行传递

方式如下

    let a = 'b';
    let b = 'a';
    console.log(a,b);//b a
    [a, b] = [b, a];
    console.log(a, b);//a b

当然，我们也可以取某个位置的元素

const array = ["张三","李四","王五","赵六"];
const [, ,num3,num4] = array
console.log("我写的第三个名字是：",num3,"第四个名字是:",num4)
//输出：我写的第三个名字是： 王五 第四个名字是: 赵六

//上面的写法可以改成花括号，用类似于数组的形式进行
const array = ["张三","李四","王五","赵六"];
const [, ,num3,num4] = array
console.log("我写的第三个名字是：",num3,"第四个名字是:",num4)
//输出：我写的第三个名字是： 王五 第四个名字是: 赵六

// 如果我们不需要前面的几个数值，那我们就可以用到上节课说的 rest
const array = ["张三","李四","王五","赵六"];
const [num1,...args] = array
console.log("输入的最后三个人是",args)

//浏览器输出的是：
//   输入的最后三个人是 (3) ['李四', '王五', '赵六']
// 	 0: "李四"
//   1: "王五"
//   2: "赵六"
//   length: 3
//   [[Prototype]]: Array(0)

解构赋值（对象）
这是一个让操作更为简单的赋值方法

首先我们先看一个案例

//解构赋值
// 我现在想要创建一个对象并赋值
const obj = {
  name: "小天",
  age: "18",
  school: "GUET",
  hobbies: {
    hobby1: "听歌",
    hobby2: "刷剧",
  }
}
// 如果我们想要调用函数里的值，需要分别创建不同的变量
// 下面的这段代码我创建了name，age，school三个变量，用于接收obj中的属性值
 const name = obj.name;
 const age = obj.age;
 const school = obj.school;
console.log(name, age, school);
// 可是上面这种写法非常的臃肿，于是我采用了一个全新的方式对于数值进行引入
//我们创建一个相同的obj对象
const obj = {
  name: "小天",
  age: "18",
  school: "GUET",
  hobbies: {
    hobby1: "听歌",
    hobby2: "刷剧",
  }
}

const { name, age, school } = obj;
console.log(name, age, school);//小天 18 GUET

 

上面可以看见，我在const后面加了个花括号，并在其后直接将obj函数进行导入

这样就省了很多事

当然，对象中的hobbies中的内容也是可以导出的

方式如下：

const obj = {
  name: "小天",
  age: "18",
  school: "GUET",
  hobbies: {
    hobby1: "听歌",
    hobby2: "刷剧",
  }
}
const { name, age, school,hobbies:{hobby1,hobby2}} = obj;
console.log(name, age, school,hobby1,hobby2);//小天 18 GUET 听歌 刷剧

除此之外，我们还有很多别的方法使用

将对象取一个新的名字

 const obj = {
        name: "小天",
        age: "18",
        school: "GUET",
        hobbies: {
            hobby1: "听歌",
            hobby2: "刷剧",
        }
    }
    let {name:stuname,age:stuage}= obj;
    console.log(stuname,stuage)

遍历解构赋值

我们首先有一串数组，里面有很多值需要进行遍历

const array =[
  {name:"张三",age:"18",id:"0001"},
  {name:"李四",age:"19",id:"0002"},
  {name:"王五",age:"20",id:"0003"}
]
array.forEach(({name,age,id}) => {
  console.log('姓名:',name,'年龄：',age,'id:',id)
});
// 浏览器输出结果：
// 姓名: 张三 年龄： 18 id: 0001
// 姓名: 李四 年龄： 19 id: 0002
// 姓名: 王五 年龄： 20 id: 0003