旧方法

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 features，那就太好了。

Answer 2

称为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

上获取有关解构的更多信息。

Answer 3

这意味着您所处的状态具有两个键值对，例如tz和msg

因此，只要这样的类型，您就可以直接从中获得价值，然后从那里打印出价值，例如tz和msg。

Answer 4

这在Javascript中称为Object Destructuring。您可以将其与对象和数组一起使用。

就像。

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

语句const {tz，msg} = this.state是什么？在下面的代码中意味着什么？

4 个答案:

旧方法

解构