Что означает утверждение const {tz, msg} = this.state; значит в приведенном ниже коде?

Question

Использование этого кажется мне всегда смущающим. Как в приведенном ниже исходном коде. Может кто-нибудь объяснить, что означает утверждение const {tz, msg} = this.state; значит в приведенном ниже коде?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTime: null, msg: 'now', tz: 'PST'
    }
  }

  getApiUrl() {
    **const {tz, msg} = this.state;**
    const host = 'https://andthetimeis.com';
    return host + '/' + tz + '/' + msg + '.json';
  }

export default App;

Answer 1

const {tz, msg} = this.state; эквивалентно

const tz = this.state.tz;
const msg = this.state.msg;

Это называется ES6 Destructuring Assignment. В основном это сократит количество строк кода. Будет хорошо, если вы посмотрите на другие функции ES6.

Answer 2

Это означает, что у вас есть состояние, которое имеет две пары ключ-значение, как tz а также msg

так что всякий раз, когда печатать, как это, вы получаете значение из этого непосредственно тогда, когда вы печатаете значение оттуда, как tz а также msg,

Answer 3

Это называется Object Destructuring в JavaScript Вы можете использовать его с объектами и массивами.

Подобно.

For Array

const [a, b] = [10, 20];

For Object

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

Вы можете прочитать далее здесь https://javascript.info/destructuring-assignment.

Так что в вашем случае это

const {tz, msg} = this.state

похоже на доступ к нему как

const tz = this.state.tz
const msg = this.state.msg

Answer 4

Это называется Object destructuring, Это метод es6.

Синтаксис деструктурирующего присваивания - это JavaScript-выражение, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные.

СТАРЫЙ МЕТОД

var obj = {a:1, b:2, c:3};

var a = obj.a;
var b = obj.b;
var c = obj.c;

console.log("value of a is "+ a);
console.log("value of b is "+ b);
console.log("value of c is "+ b);

деструктурирующие

const obj = {a:1, b:2, c:3};

const { a, b, c } = obj;

console.log("value of a is "+ a);
console.log("value of b is "+ b);
console.log("value of c is "+ b);

вы можете получить больше информации о деструктурировании здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment