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)

    This is a section from Uncle Bob's book that I find particularly bonkers. It is about the daily standup ritual: Standup Meetings Over the years,…

  • (no subject)

    I am sure he meant endothelial. Only not in the sense that Sars-Cov2 is an endothelial virus; but that full-blown covid is an endothelial disease, as…

  • (no subject)

    On the dreadful state of the style of modern Russian communication. "There is no alternative", writes an author, and then immediately outlines an…

  • 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