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
  • 相关阅读:
    Java参数传递方式
    C++成员函数的 重载、隐藏、覆盖分析(转)
    回调函数 (一)
    Java之String 专题二
    从10亿个浮点数中找出最大的1万个
    【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
    【页面加载】【九九乘法表】【document.write的功能_】【<script>直接显示数组】【声明新变量】
    Windows10 环境下安装 ElasticSearch
    数据包和数据报有何区别?
    NIO 通道和缓冲区
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4111895.html
Copyright © 2011-2022 走看看