前言

在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进一步深入了解ES6中的相关语法,毕竟未来ES6是主流。

本章目标

  •  学会数组的解构赋值
  •  学会对象的解构赋值
  •  学会字符串的解构赋值
  •  学会数值和布尔值的解构赋值
  •  学会函数参数的解构赋值
  •     学会解构赋值的用途

本人对解构赋值的理解:模式匹配,匹配成功获取值,匹配不成功则为undefined,好比开心消消乐一样(我没有玩过,但是听过一点点),开心消消乐中只要有相同的就会消失,然后加分,而模式匹配呢?匹配成功加分,匹配不成功则失败。

数组的解构赋值

 数组的解构赋值十分简单,只要等号左右两边模式匹配成功,则获取值,否则为undefined,在讲解数组解构赋值之前,我们先来看下我们以前定义变量的格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let a=1;
            let b=2;
            let c=3;
            //或者
            let a=3,
                b=4,
                c=5;
            //ES6的模式
            let [a,b,c]=[4,5,6];//左右两边相等,a=4,b=5,c=6
        </script>
    </body>
</html>

在这里我们已经使用了数组的解构赋值,即let [a,b,c]=[4,5,6]左右两边进行模式匹配,可得a=4,b=5,c=6

(1)不完全解构

解构除了完全解构之外,还具备不完全解构的特性,即左边的模式只匹配一部分等号右边的数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let [x,y]=[1,2,3];
            console.log(x);//1
            console.log(y);//2
            let [a,[b],d]=[1,[2,3],4];
            console.log(a);//1
            console.log(b);//2
            console.log(d);//4
        </script>
    </body>
</html>

(2)特殊值

如果等号右边不是数组,那么将会报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;

(3)默认值

数组的解构允许有默认值,如果一个数组的成员为null,默认值就不会生效,因为null不严格等于undefined

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let [foo=true]=[];
            console.log(foo);//true
            let [x,y='b']=['a'];
            let [z,w='b']=['a',undefined];
            console.log(x);//a
            console.log(y);//b
            console.log(z);//a
            console.log(w);//b
            let [a=1]=[undefined];
            let [b=2]=[null];
            console.log(a);//1
            console.log(b);//null
        </script>
    </body>
</html>

对象的解构赋值

关于对象的解构赋值我总结了如下三点

  • 数组的元素是按次序排列的,变量的取值有它的位置决定,而对象的属性是没有次序的,变量必须和属性同名,才能取到正确的值
  • 如果解构失败,变量的值等于undefined
  • 对象解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者

示例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>对象的解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            //按顺序排列
//            let {foo,bar}={foo:'foo',bar:'bar'};
//            console.log(foo);//foo
//            console.log(bar);;//bar
            //不按顺序排列
//            let {bar,foo}={foo:'foo',bar:'bar'};
//            console.log(bar);//bar
//            console.log(foo);;//foo
            //解构不成功,值为undefined
            let {baz}={foo:'foo',bar:'bar'};
            console.log(baz);//undefined
        </script>
    </body>
</html>

在这个案例中,我们有按顺序的解构,没有顺序的解构,以及解构不成功的情况

示例二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>对象的解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            let {foo:baz}={foo:'aaa',bar:'bbb'}
            console.log(baz);//aaa
            let obj={first:'hello',last:'world'};
            let {first:a,last:b}=obj;
            console.log(a);//hello
            console.log(b);//world
        </script>
    </body>
</html>

从而可以看出:对象解构赋值的原理是先找到同名属性,然后再赋给对应变量,真正被赋值的是后者而不是前者

字符串的解构赋值

字符串的结构赋值十分简单,和之前的解构赋值一样也是模式匹配,注意:字符串中有length属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            const [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
            let {length:len}='hello';
            console.log(len);//5
        </script>
    </body>
</html>

数值和布尔值的解构赋值

解构赋值原理:只要等号右边的值不是数组或对象,就先将其转为对象,但是也有特殊情况,如:undefined和null无法转为对象,所以对它们进行解构赋值都会报错。这一点非常重要

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数值和布尔值的解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
//            let {toString:s}=123;
//            console.log(s===Number.prototype.toString);
//            let {toString:b}=true;
//            console.log(b===Boolean.prototype.toString);
            let {prototype:x}=undefined;
            let {prop:y}=null;
            console.log(x);//报错
            console.log(y);//报错
        </script>
    </body>
</html>

函数参数的解构赋值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>函数参数解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            function add([x,y]){
                return x+y;
            }
            console.log(add([1,3]));//4
            [[1,2],[3,4]].map(([a,b])=>{
                console.log(a+b);//4,7
            })
            //使用默认值
            function move({x=0,y=0}){
                return [x,y]
            }
            move({x:3,y:10});//[3,8]
            move({x:3})//[3,0]
            move({})//[0,0]
            move();//[0,0]
            function bar({x,y}={x:0,y=0}){
                return [x,y]
            }
            move({x:3,y:8});//[3,8]
            move({x:3});//[3,undefined]
            move({});//[undefined,undefined]
            move();//[0,0]
        </script>
    </body>
</html>

在move方法中函数move的参数是一个对象,通过对这个对象进行解构,得到变量xy的值。如果解构失败,xy等于默认值,而函数bar的参数指定默认值,而不是为变量xy指定默认值,所以会得到与前一种写法不同的结果

解构赋值的实际用途

(1)交换变量的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(1)交换变量的值
            let x=1;
            let y=2;
            [x,y]=[y,x];
            console.log(x);//2
            console.log(y);//1
        </script>
    </body>
</html>

在这里,我们可以看到x和y的值进行了交换,x的值从1变成的2,而y的值从2变成了1

(2)从函数返回多个值

 我们知道javascript中中使用return只能返回一个值,如果需要返回多个值的话就需要将数据放在数组或对象中,然后return回去,但是有了解构赋值,你想要取出这些值就非常方便,我们看下下面的示例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(2)从函数返回多个值
            //返回一个数组
            function bar(){
                return[1,2,3]
            }
            let[a,b,c]=bar();
            console.log(a);//1
            console.log(b);//2
            console.log(c);//3
            //返回一个对象
            function baz(){
                return{
                    x:1,
                    y:2,
                }
            }
            let {x,y}=baz();
            console.log(x);//1
            console.log(y);//2
        </script>
    </body>
</html>

在这里我们返回一个数组之后使用a,b,c进行解构赋值,匹配a=1,b=2,c=3,而返回对象之后我们使用对象来接收,注意:返回对象的键名一定要和需要解构的键名一致,否则取到的值为undefined

(3)函数参数定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(3)函数参数定义
            //参数是一组有次序的值
            function foo([x,y,z]){
                console.log(x);//1
                console.log(y);//2
                console.log(z);//3
            }
            foo([1,2,3]);
            //参数是一组无序的值
            function bar({x,y,z}){
                console.log(x);//10
                console.log(y);//20
                console.log(z);//1
            }
            bar({z:1,x:10,y:20})
        </script>
    </body>
</html>

(4)提取JSON数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(4)提取JSON数据
            let stu={
                name:'一只流浪的kk',
                age:18,
                sex:'male'
            }
            let {name:name,age:age,sex:sex}=stu;
            console.log(name,age,sex);//一只流浪的kk,18,male
        </script>
    </body>
</html>

使用解构赋值可以很方便的提取JSON中的数据

(5)函数参数默认值

 这种方法我们见过很多,再封装ajax的时候经常用到或者是扩张jquery插件的时候,我们都会添加默认值

            //(5)函数参数默认值
            ;
            (function(method) {
                method(window, window.document, jQuery);
            }(function(win, doc, $) {
                $.fn.SuperPlus = function(options) {
                    //默认参数
                    var setting={
                        length:3,
                        color:"blue"
                    };
                    //使用用户的参数覆盖默认参数
                    $.extend(setting,options);

                    return $.each(this, function(index, obj) {
                        $("<span/>").html("+").css("cursor", "pointer").css("color",setting.color).click(function() {
                            $(obj).width($(obj).width() + setting.length);
                        }).insertAfter(obj);
                    });

                }
            }));

在这里我们就是指定了默认值,我们对外开发我们可以让用户进行修改的一些参数,当用户没有传递的时候,我们就使用默认值

(6)遍历Map结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(6)遍历Map结构
            const map=new Map();
            map.set('first','hello');
            map.set('last','world');
            for(let [key,value] of map){
                console.log('键是:'+key,'值是:'+value);//键:first,last,值:hello,world
            }
            //或者
            for(let [key,value] of map.entries()){
                console.log('键是:'+key,'值是:'+value);//键:first,last,值:hello,world
            }
            //如果只想遍历key
            for(let [key,] of map){
                console.log(key);//first,last
            }
            //如果只想遍历value
            for(let [,value] of map){
                console.log(value);//hello,world
            }
        </script>
    </body>
</html>

这里涉及到map的相关知识,关于ES6新增的数据结构,查看博客 https://www.cnblogs.com/jjgw/p/11561169.html

(7)输入模块的指定方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(7)输入模块的指定方法
            const{add,sub}=require('count');
        </script>
    </body>
</html>

这种方法我们之后会用到,关于ES6中模块的加载,例如:AMD,CMD,UMD等等,现阶段只需要了解一下

10-24 14:21