Andrey (azangru) wrote,
Andrey
azangru

ES6 and Object Destructuring

Пример из реакт-роутера:

const User = ({ params: { userID }, location: { query } }) => {
  let age = query && query.showAge ? '33' : ''

  return (


    <div classname="User">
       <h1>User id: {userID}</h1>
      {age}
    </div>
)
}

Сходный пример из mdn.io:

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user); // "jdoe is John"


Я, наверное, полчаса на это таращился, вникая, что происходит. А происходят вложенные объекты. В примере из реакт-роутера функции говорят: вот, ты получишь аргумент (он обычно называется props) — и это будет объект, у которого есть свойство params. Вытащи свойство params — получишь объект, у которого есть свойство userID. Так вот, возьми значение свойства userID и присвой его переменной userID.

Ну и тыпы. В зайце утка, в утке яйцо, в яйце игла...

Такая штука, с непривычки изрядно вштыривает.
Subscribe

  • (no subject)

    A Google docs presentation file from a recent event. With a script in the bottom — at least, I assume that this is script; I doubt it's a transcript…

  • (no subject)

    Twitter is an unending fount of amusement today. The creator and former maintainer of Babel is attacking the current maintainer of Babel for slacking…

  • (no subject)

    This is interesting: the quotes from the article, cited in the tweets, are complimentary to the skeptics; the conclusion puts them in the camp of…

  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 1 comment