解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,给我们编程带来便利。

let [a,b,c] = [1,2,3]
左右结构一样
右边要是个合法的东西
必须声明和赋值一次完成

        let [a,b,c]=['李四',20,'男']
        console.log(a)         //李四
        console.log(b)         //20
        console.log(c)         //男

解构赋值语法是JavaScript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。

解构的分类

  1. 对象解构

  2. 数组解构

  3. 混合解构

  4. 解构参数

解构赋值的用途

/*
    1.左右两边结构必须一样
    2.右边必须是个东西
    3.声明和赋值不能分开(必须在一句话里完成)
            */
        //let arr4 = [1,2,3];
        /*太麻烦
        let a0 = arr4[0];
        let a1 = arr4[1];
        let a2 = arr4[2];
        console.log(a0,a1,a2)
        */
        // let [a,b,c] = [1,2,3];//右边的给左边
        // console.log(a,b,c)

        //json
        //let {a,b,c}={a: 12, b: 5, c: 8};
        //console.log(a,b,c);
        // let [{a,b,c},[num1,num2,num3],str]=[{a:11,b:22,c:33},[2,3,4],'hello'];
        // console.log(a,b,c,num1,num2,num3,str);
        //可以不拆
        let [json,[num1,num2,num3],str]=[{a:11,b:22,c:33},[2,3,4],'hello'];
        console.log(json,num1,num2,num3,str);
  • 解构对象:

获取数组中的值

从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。

var foo = [“one”, “two”, “three”, “four”];

var [one, two, three] = foo;
console.log(one); // “one”
console.log(two); // “two”
console.log(three); // “three”

//如果你要忽略某些值,你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // “one”
console.log(last); // “four”

//你也可以这样写
var a, b; //先声明变量

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

如果没有从数组中的获取到值,你可以为变量设置一个默认值。

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

通过解构赋值可以方便的交换两个变量的值。

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

对象解构

const obj = {
  str,
  arr:[1,2]
}

const {str = 'power',arr} = obj;
//解构可传默认值
console.log(str,arr); //power,[1,2]
1.交换变量的值var x = 1;var y = 2;[x,y] = [y,x];//成功交换x,y的值。2.提取函数返回的多个值(实现快速的提取对应的值)function demo(){ return {"name":"张三","age":21}}var {name,age} = demo();console.log(name);//结果:张三console.log(age);//结果:213.定义函数参数(方便提取JSON对象中想要的参数)function demo({a,b,c}){ console.log("姓名:"+ a); console.log("身高:"+ b); console.log("体重:"+ c);}demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});4.函数参数的默认值function demo({name="张三"}){ console.log("姓名:"+name);//结果:姓名:张三}demo({});

1.数组的解构赋值var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量;console.log(a);//a的值为1console.log(b);//b的值为2console.log(c);//c的值为31).结构赋值可以嵌套的var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];console.log(c1);//结果:c1的值为3.1console.log(c2);//结果:c2的值为3.22).不完全解构var [a,b,c] = [1,2];console.log(a);//结果:a的值为1console.log(b);//结果:b的值为23).赋值不成功,变量的值为undefinedvar [a,b,c] = [1,2];console.log(a);//结果:a的值为1console.log(b);//结果:b的值为2console.log(c);//结果:c的值为undefined4).允许设定默认值var [a,b,c=3] = [1,2];console.log(a);//结果:a的值为1console.log(b);//结果:b的值为2console.log(c);//结果:c的值为35).覆盖默认值3var [a,b,c=3] =[1,2,4];console.log(a);//结果:a的值为1console.log(b);//结果:b的值为2console.log(c);//结果:c的值为4注意:当新的值为undefined的时候,是不会覆盖默认值的。2.对象的解构赋值 var { a,b,c } = {"a":1,"c":3,"b":2};console.log(a);//结果:a的值为1console.log(b);//结果:b的值为2console.log(c);//结果:c的值为3var { a } = {"b":2};console.log(a);//结果:a的值为undefinedvar { b:a,} = {"b":2};console.log(a);//结果:a的值为21)对象解构赋值也可以嵌套var {a:{b}} = {"a":{"b":1}};console.log(b);//结果:b的值为12)可以指定默认值var {a,b=2} = {"a":1};console.log(b);//结果:b的值为默认值23.字符串的解构赋值var [a,b,c,d,e,f] = "123456";console.log(a);//1console.log(b);//2console.log(c);//3console.log(d);//4console.log(e);//5console.log(f);//6

解构赋值

let business = {
  a:1,
  b:2
},
a = 3,
b = 3;
//解构赋值
({a,b} = business);
console.log(a,b);//1,2
        let {name,age,sex} = {name:'张三',age:55,sex:'女'}
        console.log(name)       //张三
        console.log(age)        //55
        console.log(sex)        //女
——————————
        let {name,friends,pet} = {name:'张三',friends:['lulu','xixi'],pet:{name:'dog',age:5}}
        console.log(friends)    //["lulu", "xixi"]
        console.log(pet)        //{name: "dog", age: 5}

嵌套对象解构

let obj = {
  a:{
    b:{
      c:{
        d:5
      }
    }
  }
};
const {a:{b:{c:{d}}}} = obj;
console.log(d);//5
  • 解构对象:

数组解构

数组解构

选择性的解构元素,不需要解构的元素就使用逗号代替(,)。不需要像对象解构一样使用key属性。

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

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

解构赋值

如果你没有看明白上面说到的对象解构赋值的含义,那么看完下面的数组解构赋值,或许你会有比较清晰的理解。

这个例子中,正常情况下打印a的值是haha,但是将数组arr的第一个元素解构赋值给a,a的值就变成了1。

//初始化一个变量a
let a = "therefore";
//定义一个数组
let arr = [1, 2, 3];
//解构赋值a,将arr数组的第一个元素解构赋值给a,
[a] = arr;
console.log(a); // 1

使用解构赋值,还可以调换2个变量的值。

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
  • 解构字符串:

嵌套数组解构

let arr = [1,[11,22,33],2,3]
const [a,[b,c,d]] = arr
console.log(a,b,c,d);//1,11,22,33


//同于
"use strict";

var arr = [1, [11, 22, 33], 2, 3];
var a = arr[0],
    _arr$ = arr[1],
    b = _arr$[0],
    c = _arr$[1],
    d = _arr$[2];

console.log(a, b, c, d);//1,11,22,33
//so easy

不定元素解构

//使用扩展运算符解构赋值
let arr = [1,2,3,4]
const [...a] = arr
console.log(a);//[1,2,3,4]这种做法就是克隆arr数组
        let [a,b,c,d,e]='我是中国人';
        console.log(c)         //中
———————————
        let [a,b,c,d,e]=12306;
        console.log(c)    //number类型不能这样解构

混合解构

let obj = {
  a:{
    aa:1
  },
  b:[2,3]
}
const {
  a:{aa},
  b:[...arr]
} = obj
console.log(aa,b)//1,[2,3]
  • 解构使得函数声明和函数的调用更加可读:

解构参数

当给函数传递参数时,我们可以对每个参数进行解构,我给option的参数设置了默认值,这样可以防止没有给option传参导致的报错情况。

function Ajax(url, options) {
  const {timeout = 0, jsonp = true} = options
  console.log(url, timeout, jsonp)
};
Ajax('baidu.com', {
  timeout: 1000,
  jsonp: false
}) // "baidu.com" 1000 false

总结

本章讲解了对象解构赋值和数组解构赋值,以及对象和数组混合情况下的解构赋值操作,最后一个知识点是解构函数的参数。每一个都是重点,特别是最后一个,解构参数恐怕你经常在用了,只是通常你没发现。

// 我们尝尝使用的写法
const getStuffNotBad = (id, force, verbose) => {
  ...do stuff
}
// 当我们调用函数时, 明天再看,尼玛 150是啥,true是啥
getStuffNotBad(150, true, true)

// 看完本文你啥都可以忘记, 希望够记住下面的就可以了
const getStuffAwesome = ({id, name, force, verbose}) => {
  ...do stuff
}
// 完美
getStuffAwesome({ id: 150, force: true, verbose: true })

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图