美文网首页
ES6-变量的解构赋值

ES6-变量的解构赋值

作者: 阳光少年lxx | 来源:发表于2018-10-26 18:13 被阅读0次

1,什么是解构?为什么要使用解构?

          ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。

2,数组的解构赋值

        (1)简单的数组解构:

             之前我们为一些变量赋值的方法:let a=0;let b=1;let c=2;

             使用数组解构赋值:let [a,b,c] = [0,1,2];可以简单的理解为等号左边为数组模式,右边为赋值    模式;赋值模式要与数组模式在形式上统一,let [a,[b,c],d]=[1,[2,3],4]; 否则解构失败;

        (2)解构的默认值:

             解构赋值是允许使用默认值的,例如:let[foo=true]=[];console.log(foo);//true;

            let[foo=true]=[]  可以理解为  let[foo=true]=[undefined];

             栗子:

                 let [a,b="JSPang"]=['技术胖'] console.log(a+b); //“技术胖JSPang”

                   let[a,b="JSPang"]=['技术胖',undefined]console.log(a+b);//“技术胖JSPang”

                   let [a,b="JSPang"]=['技术胖',null]console.log(a+b); //“技术胖null”

         (3)null与undefined的区别:

                     undefined表示什么都没有;null表示有值,但值为null;

3,对象的解构赋值

          栗子:let{foo,bar}={foo:'JSPang',bar:'技术胖'};

                        console.log(foo+bar);//控制台打印出了“JSPang技术胖”

          与数组解构的区别:数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

4,解构的应用场景      

           (1)变量交换:

                        ES5:采用中间变量的方式进行存储;

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

               (2)  函数返回值是数组,需要获取数组内某个值:

                       ES5:先给一个变量获取函数的返回结果,再按索引获取两个值;

                       ES6: function f(){return [1,2]};  let [a,b]=f();  console.log(a,b);//

             (3) 返回多个值,选择性的接受某值:

                      ES5:先给一个变量获取函数的返回结果,再按索引获取两个值;

                      ES6: function f(){return [1,2,3,4,5]};  let [a,,,b]=f();  console.log(a,b);//1,4

             (4) 不知道函数返回的数组的长度是多少,只关心第一个,其余的放到一个数组中

                      ES5:先给一个变量获取函数的返回结果,再按索引操作;

                      ES6: function f(){return [1,2,3,4,5]};  let a,b; [a,...b]=f();   console.log(a,b);//1,[2,3,4,5]

          未完待续。。。。

相关文章

  • ES6-变量的解构赋值

    1,什么是解构?为什么要使用解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。...

  • es6-变量的解构赋值

    1:数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。 本质上...

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 变量的解构赋值

    数组的解构赋值: 解构,就是从数组和对象中提取值,然后对变量进行赋值 解构赋值: 解构不成功,变量的值就等于und...

  • ES6系列之变量的解构赋值

    本篇目录: 数组的解构赋值变量声明并赋值时的解构变量先声明后赋值时的解构不完全解构默认值交换变量解析一个从函数返回...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6的解构赋值

    一、前言 什么是“解构赋值”呢?就是从数组或者对象中取值,对变量进行赋值,这就是变量的解构赋值。 二、数组的解构赋...

  • 名词

    1 解构: 从数组或对象中提取值,给变量赋值这被称为解构解构赋值的变量都会重新声明解构赋值的规则是,只要等号右边的...

网友评论

      本文标题:ES6-变量的解构赋值

      本文链接:https://www.haomeiwen.com/subject/uwjltqtx.html