【ES6】-解构赋值

159 阅读2分钟

1.什么是结构赋值?主要作用在于?

  • 在语法上,就是赋值的作用,解构为(左边一种解构。右边一种解构,左右一一对应进入赋值)

  • 主要作用在于字符串、函数、交换变量的值、提取 JSON 数据、遍历 Map 结构等等

1.字符串
var [a,b,c,d,e] = "hello";
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o
2.函数
function move({x = 0, y = 0} = {}) {
    console.log([x, y]);
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
3.交换变量的值
let x = 1;
let y = 2;

[x, y] = [y, x];
4.提取json数据
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
5.遍历 Map 结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

解构赋值分解有:

  • ES6允许按照一定模式从数组和对象中提取值对变量进行赋值,这被称为解构(Destryc tyruing)
  • 基本用法
  • 对象的结构赋值
  • 数组的结构赋值
  • 基本类型的解构赋值 代码如下:
 //1.基本用法
//   let name='张三',age=18,sex='男';
/*  let [name,age,sex]=['李四',20,'女'];
    name='hahha';
    console.log(name);
    console.log(age);
    console.log(sex);*/


    //2.对象的解构赋值
/*
    let {name,age,sex}={name:'张三',age:55,sex:'男'};
    console.log(name);
    console.log(age);
    console.log(sex);
*/

  /*let {name,age,friends,pet}={name:'张三',age:55,friends:['qqqq','ssss'],pet:{name:'土豆',age:5}};
    console.log(name);
    console.log(age);
    console.log(friends);
    console.log(pet);
    */

/*   let {name:str}={name:'张三'};
     console.log(name);//空
     console.log(str);//张三*/


    //03.数组的结构赋值
  /*  let [arr1,[arr2,arr3,[arr4,arr5]]]=[1,[2,3,[4,5]]];
      console.log(arr1,arr2,arr3,arr4,arr5);//1 2 3 4 5
    */

  /*  let [arr1]=[];
      console.log(arr1);*/

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

    //04.基本类型的解构赋值
    let[a,b,c,d,e]='我是中国人';
//  let[a,b,c,d,e]=12312;//如果改数字12312,这样报错了,因为number类型里面没有一个构造器,不存在。
    console.log(a);//我
    console.log(b);//是
    console.log(c);//中
    console.log(d);//国
    console.log(e);//人