ES6精解:变量的解构赋值

小霞
• 阅读 2083

1.数组的解构赋值

我们知道以前我们给一个变量赋值要这样如下:

let a = 1;
let b = 2;
let c = 3;

但是ES6出来之后,我们可以这样:

let [a, b, c] = [1, 2, 3]

以上就是从数组中提起值,一一对应赋值,a、b、c分别为1、2、3

 let [aa, [[bb], cc]] = [1, [[2], 3]]

aa,bb,cc分别对应1,2,3

     let [,,d] = [10, 20, 30];
     console.log(d);

d的值为30

  let [e, ...f] = [1, 2, 3, 4, 5];

e为1, f为[2,3,4,5]

let [x, y, ...z] = [1];

x为1,y为undefined,z为[],如果没有对应值会等于undefined

解构赋值也允许默认值, 如下:

let [ x = '默认值'] = [];

x的值为默认值

  let [ a = 123 ] = [ undefined ];
  let [ b = 321 ] = [ null ];

a的值为123,b的值为321,因为ES6中是严格遵循(===),所以只有当数组对应的值为undefined的时候,才能等于默认值

默认值可以引用解构赋值的其他变量,但是这个变量必须得声明过的,如下:

 let [ a = 0, b = a] = [];

这里a、b分别为0,0

但是如果这个变量没有声明,就会报错,如下:

  let [ a = b, b = 1] = [];

这里就会报错:Uncaught ReferenceError: b is not defined

2.对象的解构赋值

 let { a, b } = { a: 1, b: 2 };

a,b的值为1,2

对象解构赋值可以无需按照顺序一一对应,但是括号两边的变量名称和属性名称要相同,才能取到正确值

let { a, b } = { a: 1, c : 2};

a为1,b为undefined,这里b在右边括号中没有对应的属性值与其对应,所以此时b为undefined

如果变量名和属性名不一样,则要按照如下写:

 let { aa: fa, bb: fb } = { aa: 1, bb: 2 };

fa为1,fb为2

这里可以说明,对象解构赋值实际上是如下的简写:

let { aa: aa, bb: bb } = { aa: 1, bb: 2}

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

 let { aa: fa } = { aa: 1 }
 
 //fa为 1
 //aa为 Uncaught ReferenceError: aa is not defined

这里就说明了,fa是真正被赋值的,此时的aa是模式而不是变量,如果你要让aa为变量,则如下:

  {
       let { aa: fa, aa } = { aa: 1 };
       // aa 为 1
       // fa 为 1
     }

此时aa为1,bb为1,此时aa就是变量了

当然对象也可以多层嵌套如下:

   {
        let obj = {
          p: [1, { y: 2 }]
        }

        let { p: [x, { y }]} = obj;
        console.log(x); // 1
        console.log(y); // 2
      }
   {
        let obj = {};
        let arr = [];
        ({a: obj.name, b: arr[0] } = { a: 321, b: 123});

        console.log(obj); // { name: 321 }
        console.log(arr); // [123]
      }

对象解构默认值:

  {
         let { x = 1 } = {};
         console.log(x); //1
       }

       {
         let { x : y = 4 } = {};
         console.log(y); //4
       }

       {
        let { x : y = 4 } = { x: 5};
         console.log(y); //5
       }

默认属性生效条件必须是对象的属性严格等于undefined,如果是null就不会生效,如下:

   {
      let { x = 1 } = { x : null};
      console.log(x); //null
   }

已声明的变量解构赋值:

  {
    let x;
    ({ x } = { x : 1 });
    console.log(1); // 1
  }

得要加个小括号才可以,否则会报错;

数组对应对象属性的解构:

   {
     let arr = [1, 2, 3];
     let  { 0 : one, [arr.length-1] : three } = arr;
     console.log(one); // 1
     console.log(three); // 3
   }

3.字符串的解构赋值

字符串也可以解构赋值,因为字符串可以转换成一个类似数组的对象

  {
      let [a, b, c, d] = 'hero';

      console.log(a); //h
      console.log(b); //e
      console.log(c); //r
      console.log(d); //o
    }

类似数组的对象都有一个length属性,可以对这个属性解构赋值

  {
    let { length: len } = 'hero';
    console.log(len); // 4
  }

4.数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值或者布尔值时,则会先转换成对象

 {
    let { toString: s } = 123;
    console.log(s === Number.prototype.toString); //true
  }

   {
    let { toString: s } = true;
    console.log(s === Boolean.prototype.toString); //true
  }

解构赋值的规则:如果等号右边的值不是对象或者数组则会先转为对象,由于undefined和null无法转为对象,所以无法对它们进行解构赋值,会报错,如下:

{
    let { props: x} = undefined; //报错
    let { props: y} = null; //报错
}

5.函数参数的解构赋值

{
  const arr = [[1,2],[3,4]].map(([a, b])=> a+b);
  console.log(arr); //[3,7]
}

函数参数默认值:

function func({x = 0, y = 0} = {}) {
  return [x, y];
}

console.log(func({x:5,y:6})); //[5,6]
console.log(func({x:5})); //[5,0]
console.log(func({})); //[0, 0]
console.log(func()); //[0, 0]

如果按照以下定义就不同了,如下:

function fn({x, y} = { x: 1, y: 2}) {
  return [x, y];
}
console.log(fn({ x: 11, y: 22})); // [11, 22]
console.log(fn({ x: 11 })); // [11, undefined]
console.log(fn({})); // [undefined, undefined]
console.log(fn()); // [1, 2]

undefined会触发函数参数的默认值,如下:

{
  const a = [1, undefined, 3].map((x = 'noundefine') => x);
  console.log(a); //[1, "noundefine", 3]
}

6.圆括号问题

圆括号只能一种情况才能使用:赋值语句的非模式部分,可以使用圆括号

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。

本文参考链接:http://es6.ruanyifeng.com/#do...
主要是看了阮一峰老师的文章,自己整理了一下,供后期自己看笔记用的

点赞
收藏
评论区
推荐文章
翼
4年前
ES6的解构赋值是深拷贝or浅拷贝?
面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?我们先来看一下深拷贝和浅
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
盘点JavaScript中解构赋值,数组解构常用的数组操作
大家好,我是进阶学习者。前言解构赋值:是一种特殊的语法,它使可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。一、数组解构下面是一个将数组解构到变量中的。例://有一个存放了名字和姓氏的数组letarr现在就可以针对这些变量
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Lua 学习记录
Lua可以对多个变量同时赋值,变量列表和值列表的各个元素用逗号分开赋值语句右边的值会依次赋给左边的变量a,b  1,2赋值语句会先计算右边所有的值然后再执行赋值操作x  1;y  2x, y  y, x变量个数\值的个数按变量个数补足nil变量个数<值的个数多余的值会被忽略a
Stella981 Stella981
3年前
Python基础(二)
1.赋值语句(1)作用:定义赋值(2)复合与链式赋值ab2a2(3)特殊类型的赋值序列的赋值:a,b,c(1,2,3)print(a,b,c)变量交换:a
Easter79 Easter79
3年前
SpringBoot使用@Value给静态变量注入值,不能正确读取相应的值
今天在调试代码的时候发现SpringBoot中使用@Value()给变量赋值,给普通变量赋值是可以的,但是给静态变量即static变量赋值的时候,读取不到相应的值,如果是字符串会读取为null,数字值会读取为0.网上查了一下才发现不能直接给static变量赋值。1、SpringBoot中使用@Value()给普通变量注入值:在applica
Wesley13 Wesley13
3年前
ES6新语法(二)
1.解构在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。解构:自动解析数组或对象中的值,并赋值给指定的变量。、1.1数组解构vararr3,4,5;vara,b,carr;
Wesley13 Wesley13
3年前
ES6解构赋值常见用法
解构赋值出现的契机:letobj{a:1,b:2}//取值letaobj.aletbobj.b问题核心:每次取值既要确定对象属性名,还得重新定义一个变量占用多一
Stella981 Stella981
3年前
SpringBoot使用@Value给静态变量注入值,不能正确读取相应的值
今天在调试代码的时候发现SpringBoot中使用@Value()给变量赋值,给普通变量赋值是可以的,但是给静态变量即static变量赋值的时候,读取不到相应的值,如果是字符串会读取为null,数字值会读取为0.网上查了一下才发现不能直接给static变量赋值。1、SpringBoot中使用@Value()给普通变量注入值:在applica
可莉 可莉
3年前
20个常用的JavaScript简写技巧
任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的目标。让我们一个个来看看JavaScript的简写技巧吧。1\.声明变量//Longhandlet x;let y20;//Shorthandlet x,y20;2\.给多个变量赋值我们可以使用数组解构来在一行中给