2. 程式人生 > >ES6入門之變數的解構賦值(二)

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

阿新 • • 發佈：2019-10-24

前言

在上一章 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的引數是一個物件，通過對這個物件進行解構，得到變數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等等，現階段只需要瞭解一下

&n

相關推薦

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

前言 在上一章 ES6入門之let和const命令中我們對ES6的相關語法已經有了初步瞭解，上一章中我們主要學習了三大部分的內容，let命令的使用，塊級作用域，const命令的使用，那麼從本篇部落格將進一步深入瞭解ES6中的相關語法，畢竟未來ES6是主流。 本章目標 　學會陣列的解構賦值

es6變數解構賦值（1）

es6陣列解構賦值： let a = 1; let b = 2; == let [a, b, c] = [1, 2, 3]; let c = 3; console.log(a,b,c) /

es6 變量的解構賦值

.com pre syntax data defined math對象 b+ syn 內容 一、數組的解構賦值 數組解構賦值，索引很重要，即順序很重要 1、解構[1,2,3] //把1,2,3分別賦值給a,b,c var [a,b,c]=[1,2

ES6新特性：解構賦值(上)

變量賦值 什麽 模式 註意 只需要 一個數 html 代碼 內容 1:什麽是解構賦值 按照一貫的套路，接下來的內容是解釋：什麽是解構賦值？ 來看看官方的解釋： ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（

ES6變量的解構賦值

def 對象 ons aov aaa let es6 define 等號 // -------------------------------------------------------------------/** * 基本概念： * 本質上就是一種匹配模式，只

es6--變量的解構賦值

表達 element ... ava 進行 解構賦值 .get java 獲取元素 基本用法： 以前為變量賦值只能直接指定值; var a = 1; var b = 2; var c = 3; 　而es6允許寫成下面這樣： var [a, b, c] = [1,

Es6 -- 對象的解構賦值

bar java bsp true 例子 div pre aaa log 解構不僅可以用於數組,還可以用於對象。 var {foo, bar} = {foo: "aaa", bar: "bbb"}; console.log(foo); //aaa console.log(

ES6 對象的解構賦值

obj 位置 bar foo 不同 屬性 它的 排列 wro 對象的解構賦值 解構不僅可以用於數組，還可以用於對象。 let {foo,bar} = {foo:"aaa",bar:"bbb"}; console.log(foo); /

ES6中的陣列解構賦值

解構賦值： 解構賦值語法是一個Javascript表示式，這使得可以將資料從陣列或物件提取到不同的變數中(這段話是mdn中關於解構賦值的定義，注意這裡的定義，可以看出解構主要用在陣列和物件上)。 說白了就是解析等號兩邊的結構，然後把右邊的對應賦值給左邊。如果解構不成功，變數的值就等於

es6 陣列擴充套件，解構賦值和新的api

陣列的擴充套件 擴充套件運算子 含義 擴充套件運算子（spread）是三個點（...）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。 console.log(...[1, 2, 3]) // 1 2 3 consol

ES6小技巧 - 使用解構賦值設定函式引數預設值

本文要說的並不是下面這種ES6的函式引數預設值： function fn(a = 0, b = 1) {} 複製程式碼 很多時候，我們在寫一個建構函式時，可能需要傳入很多引數，這時候就不可能使用函式引數一個一個的傳入，而是傳入一個物件當作引數。 舉個例子：一個函式，引數傳入一個物件，物件裡可以設定兩個屬性

nodejs中的變數解構賦值

所謂的解構賦值，就是把 某個物件中的屬性，當作變數，給解放出來，這樣，今後就能夠當作變數直接使用了 可以使用 : 為解構出來的變數重新命名 const person = { name: 'zs', age: 22, gender:

【ES6】物件的解構賦值

物件的解構賦值 解構不僅可以用於陣列（陣列解構賦值），還可以用於物件。 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" 物件的解構與陣列的解構的區別： 陣列的元素是按次序排列的，變

ES6新特性：解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構以前，為變數賦值，只能直接指定值。let x=1;let y=2;let z=3;ES6允許如下寫法let[x,y,z]=[1

ES6標準入門之變數的解構賦值簡單解說

　　首先我們來看一看解構的概念，在ES6標準下，允許按照一定模式從陣列和物件中提取值，然後對變數進行賦值，這被稱作解構，簡而言之粗糙的理解就是變相賦值。 　　解構賦值的規則是，只要等號右邊的值不是物件或者陣列，就先將其轉為物件。 　　一、陣列的結構賦值 　　以前為變數賦值只能直接指定。而ES6允許從陣列

ES6系列_3之變數的解構賦值

ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。 解構有三種類型： 1.陣列的解構賦值 （1）簡單的陣列解構 以前，我們給變數賦值是直接單個指定值，比如： let a=0; let b=1; let c=2; 陣列解構的方式來進行賦值，如下： le

ES6學習之變數的解構賦值

前言：什麼是ES6？ECMAScript 6（簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。其中相比較於ES5新增了諸多的特性，並且ES6可轉換為ES5的語法。->線上ES6轉換為ES5工具。 本系列學習隨筆參考了阮一峰老師的《ES6標準入門

ES6之——變數的解構賦值

一、陣列的結構賦值 1>、什麼是解構？ ES6允許我們隊陣列和物件中提取值，對變數進行賦值，這被叫做“解構”。 通常我們像下面這樣為變數賦值： var a = 1; b = 2; c = 3; 但是，ES6允許我們像下面這樣

學習es6之(變量的解構賦值)

返回 blog 成了 所在 asc 對象 expected 正弦 peer 數組的解構賦值 ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。 以前，為變量賦值，只能直接指定值。 let a = 1; let b = 2; let c = 3;

ES6學習之變量的解構賦值

iter 內部使用 位置 fine 嚴格 true red 組成 個數 1.數組的解構賦值 let [a, b, c] = ["hello", 1, 2] console.log(a) //hello console.log(b) //1 console.log(c) /