zoukankan      html  css  js  c++  java
  • [ES6] 08. Destructuring Assignment -- 1

    Here is the way you get value from an object:

    var obj = {
        color: "blue"
    }
    console.log(obj.color);  //blue

    Destructuring Assignment:


    Object

    Destructuring Assignment is somehow different: 

    var {color} = {
        color: "green"
    }
    console.log(color); //green

    It tells to looking for color property, so I get "green".

    If I have muli pros (color, name, position, state): And I want to get color, and position properties.

    var {color, position} = {
        color: "green",
        name: "Great",
        position: "Finland",
        state: "Who knows"
    }
    console.log(color); //green
    console.log(position); //Finland

    Function

    If I have a fn which return an object: And from the object, I just want name and state.

    function getObj(){
        return{
            color: "green",
            name: "Great",
            position: "Finland",
            state: "Who knows"
        };
    }
    
    var {name, state} = getObj();
    console.log(name); //Great
    console.log(state); //Who knows

    From the example, if you want to name something else:

    {name: who, state: where} 
    function getObj(){
        return{
            color: "green",
            name: "Great",
            position: "Finland",
            state: "Who knows"
        };
    }
    
    var {name: who, state: where} = getObj();
    console.log(who); //Great
    console.log(where); //Who knows

    Array

    If I have an array, from which I just want the first and the third element from the array:

    var [first,,third] = ['first', 'second', 'third', 'forth'];
    console.log(first);  //first
    console.log(third);  //third

    If I want to forEach of array: and get the firstName

    var people = [
        {
            firstName: "Allen",
            secondName: "Hook",
            email: "allen@abc.com"
        },
        {
            firstName: "Anton",
            secondName: "Tee",
            email: "tee@abc.com"
        },
        {
            firstName: "Yui",
            secondName: "Gegg",
            email: "gegg@abc.com"
        }
    ];
    
    people.forEach(({firstName}) => console.log(firstName));
    
    /*
     Allen
     Anton
     Yui
     * */

    To make it clear:

    people.foreach(function(person){
        console.log(person.firstName);
    });
    
    //Destructuring 
    people.foreach(function( {firstName} ){
        console.log(firstName);
    });
    
    //Destructuring  + Allow
    people.foreach( ( {firstName} ) => console.log(firstName); )

    or:

    var [, secondPerson] = people;
    function logEmail({email}){
        console.log(email);
    }
    logEmail(secondPerson); //tee@abc.com
  • 相关阅读:
    SuperSocket 日志接口
    SuperSocket 中的日志系统
    supersocket为动态命令增加命令过滤器
    如何让 jQuery Mobile 不显示讨厌的 loading 界面
    腾讯推出微信公众平台企业服务平台风铃
    微信公众平台开发(47)公交查询
    微信公众平台开发(48)星座运势
    微信公众平台开发(45)食物营养及热量查询
    微信公众平台开发(46)在线电影/移动影院
    微信公众平台开发(44)历史上的今天
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4111895.html
Copyright © 2011-2022 走看看