2. 程式人生 > >ES6的 結構賦值----簡單demo

ES6的 結構賦值----簡單demo

阿新 • • 發佈：2018-11-02

<script type="text/javascript">

// 解構賦值
{
    let [a,b,c] = [1,2,3];
    console.log(a,b,c); //1 2 3
}

//巢狀
{
    let [a,[b,c,[d,e,f]]] = [1,[2,3,[4,5,6]]];
    console.log(a,b,c,d,e,f); //1 2 3 4 5 6 
}

// ... (三點運算子) 
// 剩餘運算子，聲譽的部分放在陣列中賦值
{
    let [a,...b] = [1,2,3,4,5];
    // console.log(a,b[3]);
    let [c,d,e,f] = b;
    console.log(a+"|"+b+"|"+c,d,e,f); //1 | 2,3,4,5 | 2 3 4 5
    // console.log(a);
    // console.log(b);
    // console.log(c,d,e,f);
}
// 展開運算子，
{
    let a = [1,2,3,4,5];
    let b = [0,...a]
    console.log(b); // (6) [0, 1, 2, 3, 4, 5]
}

// 結構不成功
{
    let [a,b,c] = [1,2];
    console.log(a,b,c);//c = undefined（不會報錯）
}

//不完全解構
{
    let [a,b,c] = [1,2,3,4,5];
    console.log(a,b,c);// 1 2 3    4,5 還有沒有解構
}

//允許預設值
//必須 ===undefined 時才會使用預設值，用 ‘=’設定預設值，預設值可以使用變數，但是變數必須是被宣告過的==>注意解構的執行順序。
{
    let [a=1,b=a,c] = [,,3];
    console.log(a,b,c); // 1 1 3
}

//物件（鍵值對）的解構
//與陣列的用法一樣
{
    let user = {
        name:"栓單",
        age:"21"
    }    
    // name 屬性，a 變數 ，age 屬性  b 變數
    // 等同於 {
    //             let {name,age} = {name:"栓單",age:"21"}     //簡寫：屬性名和變數名相同；
    //          }
    let {name:a,age:b} = user;  //正常寫法 屬性：變數；
    console.log(a,b); //栓單 21
}

// 物件的 巢狀

{
    let {a,b,c} = {
        a:"1",
        b:{aa:"aa"},
        c:"3"
    };
    console.log(a, b.aa ,c); //1 aa 3
}

// 變數的交換
// Es5的寫法：
// {
//         var a = 1; var b = 2;
//         console.log(a,b) // 1 2
//         //變數交換 -- 需要再宣告一個空的媒介
//         var c = null;
//         //進行交換
//         c = a ; a = b ; b = c ;
//         console.log(a,b) // 2 1
//         //很神奇吧！就是程式碼有點多，在Es6裡三行就搞定。 
// }
// Es6的寫法：
{
    let a = 1;
    let b = 2;
    let c = 3;
    console.log(a,b,c); //1 2
    //a,b進行交換
    [a,b,c] = [c,b,a];
    console.log(a,b,c); //2 1
}

// 函式的返回值
{
    function fn(){
        return {
            name:"栓單",
            age:"21",
            timer:"2018",
        }
    }
    // 第一種寫法==>直接賦值個給物件
    let {name,age,timer} = fn();
    console.log(name,age,timer); //栓單 21 2018
    // 第二種寫法==>賦值給變數，在呼叫變數（物件.鍵  得出 值）
    user = fn();
    console.log(user.name,user.age,user.timer);//栓單 21 2018
}

// json 資料的解構
{
    // 模擬資料
    let obj = {
        title:"標題",
        info:"扒拉扒拉扒拉",
        spans:[
            {
                s_title:"標籤1",
                s_info:"標籤1-巴拉巴"
            },
            {
                s_title:"標籤2",
                s_info:"標籤2-巴拉巴"
            }
        ],
    }
    //結構資料
    let {title,info,spans} = obj;
    console.log(title,info,spans);//標題 扒拉扒拉扒拉 (2) [{…}, {…}]

    console.log(spans[0]); // let.html:146 {s_title: "標籤1", s_info: "標籤1-巴拉巴"}
    console.log(spans[1]); // let.html:147 {s_title: "標籤2", s_info: "標籤2-巴拉巴"}

    let [a,b] = spans;
    console.log(a);// let.html:150 {s_title: "標籤1", s_info: "標籤1-巴拉巴"}
    console.log(b);// let.html:151 {s_title: "標籤2", s_info: "標籤2-巴拉巴"}
}
</script>

<script type="text/javascript">


// 解構賦值
{
    let [a,b,c] = [1,2,3];
    console.log(a,b,c); //1 2 3
}

//巢狀
{
    let [a,[b,c,[d,e,f]]] = [1,[2,3,[4,5,6]]];
    console.log(a,b,c,d,e,f); //1 2 3 4 5 6 
}

// ... (三點運算子) 
// 剩餘運算子，聲譽的部分放在陣列中賦值
{
    let [a,...b] = [1,2,3,4,5];
    // console.log(a,b[3]);
    let [c,d,e,f] = b;
    console.log(a+"|"+b+"|"+c,d,e,f); //1 | 2,3,4,5 | 2 3 4 5
    // console.log(a);
    // console.log(b);
    // console.log(c,d,e,f);
}
// 展開運算子，
{
    let a = [1,2,3,4,5];
    let b = [0,...a]
    console.log(b); // (6) [0, 1, 2, 3, 4, 5]
}

// 結構不成功
{
    let [a,b,c] = [1,2];
    console.log(a,b,c);//c = undefined（不會報錯）
}

//不完全解構
{
    let [a,b,c] = [1,2,3,4,5];
    console.log(a,b,c);// 1 2 3    4,5 還有沒有解構
}

//允許預設值
//必須 ===undefined 時才會使用預設值，用 ‘=’設定預設值，預設值可以使用變數，但是變數必須是被宣告過的==>注意解構的執行順序。
{
    let [a=1,b=a,c] = [,,3];
    console.log(a,b,c); // 1 1 3
}

//物件（鍵值對）的解構
//與陣列的用法一樣
{
    let user = {
        name:"栓單",
        age:"21"
    }    
    // name 屬性，a 變數 ，age 屬性 b 變數
    // 等同於 {
    //             let {name,age} = {name:"栓單",age:"21"}     //簡寫：屬性名和變數名相同；
    //          }
    let {name:a,age:b} = user;  //正常寫法 屬性：變數；
    console.log(a,b); //栓單 21
}

// 物件的 巢狀
{
    let {a,b,c} = {
        a:"1",
        b:{aa:"aa"},
        c:"3"
    };
    console.log(a, b.aa ,c); //1 aa 3
}

// 變數的交換
// Es5的寫法：
// {
//         var a = 1; var b = 2;
//         console.log(a,b) // 1 2
//         //變數交換 -- 需要再宣告一個空的媒介
//         var c = null;
//         //進行交換
//         c = a ; a = b ; b = c ;
//         console.log(a,b) // 2 1
//         //很神奇吧！就是程式碼有點多，在Es6裡三行就搞定。 
// }
// Es6的寫法：
{
    let a = 1;
    let b = 2;
    let c = 3;
    console.log(a,b,c); //1 2
    //a,b進行交換
    [a,b,c] = [c,b,a];
    console.log(a,b,c); //2 1
}

// 函式的返回值
{
    function fn(){
        return {
            name:"栓單",
            age:"21",
            timer:"2018",
        }
    }
    // 第一種寫法==>直接賦值個給物件
    let {name,age,timer} = fn();
    console.log(name,age,timer); //栓單 21 2018
    // 第二種寫法==>賦值給變數，在呼叫變數（物件.鍵  得出 值）
    user = fn();
    console.log(user.name,user.age,user.timer);//栓單 21 2018
}

// json 資料的解構
{
    // 模擬資料
    let obj = {
        title:"標題",
        info:"扒拉扒拉扒拉",
        spans:[
            {
                s_title:"標籤1",
                s_info:"標籤1-巴拉巴"
            },
            {
                s_title:"標籤2",
                s_info:"標籤2-巴拉巴"
            }
        ],
    }
    //結構資料
    let {title,info,spans} = obj;
    console.log(title,info,spans);//標題 扒拉扒拉扒拉 (2) [{…}, {…}]

    console.log(spans[0]); // let.html:146 {s_title: "標籤1", s_info: "標籤1-巴拉巴"}
    console.log(spans[1]); // let.html:147 {s_title: "標籤2", s_info: "標籤2-巴拉巴"}

    let [a,b] = spans;
    console.log(a);// let.html:150 {s_title: "標籤1", s_info: "標籤1-巴拉巴"}
    console.log(b);// let.html:151 {s_title: "標籤2", s_info: "標籤2-巴拉巴"}
}
</script>

 

瞭解更多；

原創地址：https://blog.csdn.net/china_dou  

轉載請註明出處~

相關推薦

ES6的 結構賦值----簡單demo

<script type="text/javascript"> // 解構賦值 {     let [a,b,c] = [1,2,3];     console.log(a,b,c); //1 2 3 } //巢狀

c++11 移動拷貝、移動賦值簡單Demo

#include <iostream> using namespace std; class A { public: A() : p_(new int(3)){ cout << "constructor numbers = :

JS ES6的變量的結構賦值

req style fir 語句 多個 cti turn 清晰 rst 變量的結構賦值用戶很多 1、交換變量的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的代碼交換變量x和變量y的值，這樣的寫法不僅簡潔，易讀，語義非常清

es6學習筆記之環境搭建與結構賦值

全域性安裝Babel-cli 在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶映象的cnpm來進行安裝。安裝cnpm的方法，大家自己百度吧。 npm install -g babel-cli 雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，如果你不相信可以輸入下邊的命令

JavaScript中 ES6變數的結構賦值

變數的結構賦值使用者很多 1、交換變數的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的程式碼交換變數x和變數y的值，這樣的寫法不僅簡潔，易讀，語義非常清晰 2、從函式返回多個值 函式只能返回一個值，如果要返回多個值，只能講他們放在陣列或者物件裡返回。瞭解 解構賦值 ，取值

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

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

ES6 物件解構賦值和陣列結構賦值

1、解構物件     1.1、解構單層物件         1.1.1、解構單層物件——不賦值 let data = { id: 1, name: 'Jack' } let { id, name } = data

ES6的陣列結構賦值

基本用法 * ES允許按照一定模式，從事狐族和物件中提取值，對變數進行賦值。這被稱之為結構。* 通常，我們賦值一般都會採用以下的這種方式 var a = 3; var b = 'string'; // es6寫法 v

ES6 變數結構賦值筆記

變數的解構賦值 其實是挺好理解的，用一條式子可以很容易明白 let [foo, [[bar], baz]] = [1, [[2], 3]]; let [a, b, c] = [1, 2, 3]; 類似於模式匹配的賦值模式，長得一樣的就可以完美賦值

day46homework常量字符串拼接結構賦值擴展運算符for-of循環map函數默認值

html javascript css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定義常量.html</title>

es6陣列賦值

1.陣列的解構賦值 //以前給變數賦值 let a=1,b=2,c=3 //在es6裡 可以這樣    // let [a,b,c]=[1,2,3]    // console.l

使用結構賦值與擴充套件運算子，讓你的程式碼更優雅

解構賦值 解構的作用是可以快速取得陣列或物件當中的元素或屬性，而無需使用arr[x]或者obj[key]等傳統方式進行賦值 字串的解構 字串也可以解構賦值。這是因為此時，字串被轉換成了一個類似陣列的物件 const [a,b,c,d,e] = hello; a //"h" b //"e" c //"l

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

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

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 新增解構賦值

等價 gin let 一個 函數返回 部分 syntax 解析器 求值 1.數組的解構賦值 基本用法 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。 要想實現解構，就必須是容器，或者具有可遍歷的接口。 以

函數外面對單個結構體成員進行賦值出錯

類型 自動 構造 不能 結構體成員 bsp 入口 出錯 進入 關於“為什麽整型的就可以，結構體類型的就不能這麽賦值呢？”——整形等常規數據類型由編譯器自動識別，而自定義的數據類型（樓主自定義的結構體類型），編譯器在編譯階段無法識別，故出錯。 關於“在函數外單個初始化”——在

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

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

ES6變量的解構賦值

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

ES6解構賦值

所有 含義 提取 處理 s函數 事情 數據結構 無法 defined 前面的話 　　我們經常定義許多對象和數組，然後有組織地從中提取相關的信息片段。在ES6中添加了可以簡化這種任務的新特性：解構。解構是一種打破數據結構，將其拆分為更小部分的過程。本文將詳細介紹ES6解構賦值

復合賦值和簡單復制的區別

強制 effect 不能 包裝 操作 操作符 限制 通過 編寫一個程序 編寫一個程序 使得x+=i合法， x = x+i； 不合法。 許多人會認為第一個表達式和第二個表達式是完全等價的，這是錯誤的。 在java 中 復合賦值 Ｅ1 op= E2 等價於簡單賦值