Question

我遇到了一些以前从未见过的语法。当我处理对象以及使用React时，您可以通过以下方式简化命名空间：

let {someProp} = prevProps

这样做可以避免每次我想使用prevProps.someProp的情况。

我不明白的是这种语法

let {someProp: oldData} = prevProps

console.log(someProp)将显示prevPros.someProp的值，但 WHERE oldData的来源是？

此行上方的

console.log(olddata)将显示undefined，但下方的console.log(oldData)将显示先前的道具。

Answer 1

let {someProp: myAlias} = prevProps

此语法允许您使用别名，例如，可以在代码中使用myAlias，而不是someProp，这称为对象分解

如@FelixKling here is the official reference的评论中所述。

提供的链接中的示例：

let o = {p: 42, q: true};
let {p: foo, q: bar} = o;

console.log(foo); // 42 
console.log(bar); // true

Answer 2

是：

let {someProp} = prevProps

与此类似：

let someProp = prevProps.someProp;

这：

let {someProp: oldData} = prevProps

将与此类似：

let oldData = prevProps.someProp

Answer 3

看看这个link

基本上，您正在解构 prevProps，在这种情况下，oldData的值将为someProp

Answer 4

此语法是ES6中称为对象解构的闪亮新事物之一。

这是一个详尽的示例，说明了如何以不同方式使用解构

const person = {
  first: 'Jack',
  last: 'Daniels',
  address: {
    city: 'Dallas',
  }
};

// destructure as it is
const { first, last } = person;

// destructure with custom name
const { first: firstName, last: lastName } = person;

// destructure with default value
const { first, last, middle = 'The Boss' } = person;

// destructure with custom name and default value
const { first, last, middle: middleName = 'The Boss' } = person;

// destructure nested keys
const { first, last, address: { city } } = person;

// destructure nested keys with custom name
const { first, last, address: { city: myCity } } = person;

// destructure nested keys safely
const { first, last, address: { city } = {} } = person;

// destructure rest of the values
const { first, ...rest } = person; // => rest will have all keys but first

ES6对象的命名空间

4 个答案: