解构赋值学习

• 代码片段 1：
  首先展开 ruleForm.value 对象的所有属性，然后再添加或覆盖 labelList 属性。这意味着先将 ruleForm.value 里的所有属性都放入新对象，接着把 labelList 转换为字符串后的结果赋值给新对象的 labelList 属性。

  const ruleForm = {
      value: {
          labelList: ['a', 'b', 'c'],
          otherProp: 'other value'
      }
  };
  
  console.log({
      ...ruleForm.value,
      labelList: ruleForm.value.labelList.toString(),
  });
  

  {
      labelList: 'a,b,c',
      otherProp: 'other value'
  }
  

• 代码片段 2：
  先添加或设置 labelList 属性为转换后的字符串，然后再展开 ruleForm.value 对象的所有属性。这可能会导致如果 ruleForm.value 中原本就有 labelList 属性，那么展开时会覆盖之前设置的 labelList 属性值。

  const ruleForm = {
      value: {
          labelList: ['a', 'b', 'c'],
          otherProp: 'other value'
      }
  };
  
  console.log({
      labelList: ruleForm.value.labelList.toString(),
      ...ruleForm.value,
  });
  

   

  {
      labelList: ['a', 'b', 'c'],
      otherProp: 'other value'
  }
  

2. 同名属性覆盖情况

• 代码片段 1：新的 labelList 属性值会覆盖展开 ruleForm.value 时的 labelList 属性值，最终对象中的 labelList 是转换后的字符串。
• 代码片段 2：展开 ruleForm.value 时的 labelList 属性值会覆盖之前设置的 labelList 属性值，最终对象中的 labelList 是原始的数组。

综上所述，在使用对象展开语法进行属性合并时，属性的添加顺序很重要，它会影响同名属性的最终取值。通常，如果想要确保某个属性的值是最新设置的，应该将其放在展开操作之后。