ES6入門之變量的解構賦值(二)

時間 2019-11-05

原文原文鏈接

前言

在上一章 ES6入門之let和const命令中咱們對ES6的相關語法已經有了初步瞭解，上一章中咱們主要學習了三大部分的內容，let命令的使用，塊級做用域，const命令的使用，那麼從本篇博客將進一步深刻了解ES6中的相關語法，畢竟將來ES6是主流。javascript

本章目標

　學會數組的解構賦值
　學會對象的解構賦值
　學會字符串的解構賦值
　學會數值和布爾值的解構賦值
　學會函數參數的解構賦值
學會解構賦值的用途

本人對解構賦值的理解：模式匹配，匹配成功獲取值，匹配不成功則爲undefined，比如開心消消樂同樣(我沒有玩過，可是聽過一點點)，開心消消樂中只要有相同的就會消失，而後加分，而模式匹配呢？匹配成功加分，匹配不成功則失敗。css

數組的解構賦值

數組的解構賦值十分簡單，只要等號左右兩邊模式匹配成功，則獲取值，不然爲undefined，在講解數組解構賦值以前，咱們先來看下咱們之前定義變量的格式html

<!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=6java

(1)不徹底解構jquery

解構除了徹底解構以外，還具有不徹底解構的特性,即左邊的模式只匹配一部分等號右邊的數組ajax

<!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)默認值jquery插件

數組的解構容許有默認值，若是一個數組的成員爲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的參數是一個對象，經過對這個對象進行解構，獲得變量x和y的值。若是解構失敗，x和y等於默認值，而函數bar的參數指定默認值，而不是爲變量x和y指定默認值，因此會獲得與前一種寫法不一樣的結果

解構賦值的實際用途

(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等等，現階段只須要了解一下

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。