Javascript object bracket notation ({ Navigation } =) on left side of assign

后端 未结 4 787
梦谈多话
梦谈多话 2020-11-21 05:53

I haven\'t seen this syntax before and am wondering what it\'s all about.

var { Navigation } = require(\'react-router\');

The brackets on

相关标签:
4条回答
  • 2020-11-21 06:36

    It's called destructuring assignment and it's part of the ES2015 standard.

    The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

    Source: Destructuring assignment reference on MDN

    Object destructuring

     var o = {p: 42, q: true};
     var {p, q} = o;
    
     console.log(p); // 42
     console.log(q); // true 
    
     // Assign new variable names
     var {p: foo, q: bar} = o;
    
     console.log(foo); // 42
     console.log(bar); // true
    

    Array destructuring

    var foo = ["one", "two", "three"];
    
    // without destructuring
    var one   = foo[0];
    var two   = foo[1];
    var three = foo[2];
    
    // with destructuring
    var [one, two, three] = foo;
    
    0 讨论(0)
  • 2020-11-21 06:41

    This is destructuring assignment. It's a new feature of ECMAScript 2015.

    var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
    } = React;
    

    Is the equivalent to:

    var AppRegistry = React.AppRegistry;
    var StyleSheet = React.StyleSheet;
    var Text = React.Text;
    var View = React.View;
    
    0 讨论(0)
  • 2020-11-21 06:44
    var { Navigation } = require('react-router');
    

    ... uses destructuring to achieve the same thing as ...

    var Navigation = require('react-router').Navigation;
    

    ... but is far more readable.

    0 讨论(0)
  • 2020-11-21 06:45

    It's a new feature in ES6 to destructure objects.

    As we all know that there is an assignment operation taking place here, Which means right side value is getting assigned to left side variable.

    var { Navigation } = require('react-router');
    

    In this case require('react-router') method returns an object with key value pair some thing like

    { Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }.

    And if we would like to take one key in that returned object say Navigation to a variable we can use Object destructing for that.

    This will only be possible only if we have the key inhand.

    So, after the assignment statement, local variable Navigation will contain function a(){}

    Another example looks like this.

    var { p, q } = { p: 1, q:2, r:3, s:4 };
    console.log(p) //1;
    console.log(q) //2;
    
    0 讨论(0)
提交回复
热议问题