带大括号的 JavaScript const，其中有 2 个用冒号分隔的变量

Question

我正在开发一个反应本机项目，我在互联网上找到了解决我问题的方法，但我不明白函数中的一行

componentDidUpdate(propsOld) { // line 1
    const { fill } = this.props;  // line 2
    const { fill:fillOld } = propsOld; // line 3

    if (fill !== fillOld) { // line 4
      Animated.timing(this.anim, { toValue:fill, duration:2000 // line 5 }).start();
    }
}

我不明白的行是第 3 行：

const { fill:fillOld } = propsOld;

我理解当存在单个变量或用逗号“，”分隔的多个变量时使用大括号，

有人可以向我解释一下用冒号“：”分隔时的含义吗？

Answer 1

基本上就是在解构对象时重命名变量。

如果你有一个这样的对象：

const obj = {
    prop1: 'prop1',
    prop2: 'prop2',
    prop3: 'prop3',
}

如果你想得到你的变量prop2，你可以这样做：

const { prop2 } = obj;

但是如果您已经定义了同名的东西怎么办？像这样的块，您已经在其中prop4定义了并且您想在解构时获取该变量？

const prop4 = 'something';
const obj = {
    prop1: 'prop1',
    prop2: 'prop2',
    prop3: 'prop3',
    prop4: 'else'
}

你不能这样做：const { prop4 } = obj;因为prop4已经存在，而且它是一个const

所以基本上你可以像这样重命名它：

const { prop4: prop4duplicated } = obj;

基本上，在你的代码上：

const { fill } = this.props;
const { fill:fillOld } = propsOld;

它生成 2 个变量，fill并且fillOld，这是因为fill已经存在，然后它被重命名为fillOld