标签: spread-syntax

假设我有一个对象和一个函数，它接受一个更新对象并返回一个新对象，其中第一个对象和更新对象如下所示：

const object = {
    id: 1,
    value: 'initial value'
}

const updateFunction = (updates) => {
    return {
        ...object,
        ...updates
    }
}

const updatedObject = updateFunction({
    id: 2,
    value: 'updated value'
})

使用扩展运算符有一种简单的方法可以将 id 排除在扩展之外，从而更新它，因为我知道我绝对不能更改我的 updateFunction 以接受多个参数

编辑：在评论中有人提出了一个简单的解决方案，如下所示：

 return {...object, ...updates, id: object.id};

但是假设由于某种原因我们无法访问第一个对象的 id 值，有没有办法从传播中排除 id 键/值对？

谢谢

我想指定数组的其余部分应该如何显示，而不知道数组将有多少个值。我怎样才能实现这样的目标？（这里是游乐场版本）：

type numStrArr = [number, ...string];

let arr: numStrArr = [1, 'hi', 'other string'];

Type expected.然而，上面的代码在扩展运算符处抛出了错误。

我知道有人对此提出建议，但现在我怎样才能实现类似的行为呢？

So, I was playing around with Proxy objects and while trying to see how they mix with spread syntax and de-structuring, I stubled upon this weird behavior:

const obj = {
  origAttr: 'hi'
}

const handler = {
  get(target, prop) {
    console.log(prop);
    return 1;
  },
  has(target, prop) {
    return true;
  },
  ownKeys(target) {
    return [...Reflect.ownKeys(target), 'a', 'b'];
  },
  getOwnPropertyDescriptor(target, key) {
    return {
      enumerable: true,
      configurable: true
    };
  }
}

const test = new Proxy(obj, handler);
const testSpread = { …

给出以下示例：

// option 1
items.reduce((values, item) => ({
     ...values,
     [item.id]: item.name
}), {})


// option 2
items.reduce((values, item) => {
    values[item.id] = item.name;
    return values;
}, {});

在这种情况下，是否有使用对象扩展语法的最佳实践赞成或反对？

当我们尝试返回字段已更改的对象的副本时，我只是有一个关于在对象上使用扩展运算符的简短问题。我一直在学习 PluralSight 教程，该教程与 React 和 Redux 有很多关系，并且我遇到了扩展运算符的这种用法：

let original = {name: 'Joel', favoriteFood: 'oranges', age: 26};
let happyBirthday = {...original, age: 27};

显然，这不是示例中的确切代码，但这是我有点困惑的用法。我最初的理解是，这将导致一个具有两个age键的对象，这显然不起作用。仅通过覆盖重复的键的值就可以工作吗？我可以说：

let obj = {a: 2, a: 'no actually 3', a: 'nevermind...', a: 2};

然后有obj.a是2？这是我正在寻找的一个非常小的澄清，但当我出于某种原因看到这个时，我被抛弃了！谢谢！

今天更新了一些代码，将可选的 props 返回给 React 组件。我发现即使函数有时会返回null，当返回值被立即解包时它也不会出错。

代码的迂腐总结：

const returnPropsOrDont = (condition) => {
  if (condition) return null;
  return { optionalProp: 'foo' };
}
...
render() {
  const { condition } = props;
  return <SomeComponent
           staticProp="staticProp"
           {...returnPropsOrDont(condition)}
         />
}

意识到这很酷后，我跑到控制台并在对象和数组上试用它。唉——

   > {...null} // {}
   > {...undefined} // {}, which is interesting because null is an object but undefined is not
   > [...null] // Uncaught TypeError: object null is not iterable

我做了一些简单的谷歌搜索，发现一篇文章表明 TypeScript 将其视为一项功能，以确保可选定义的值不会困扰毫无戒心的开发人员。很好，但是 a) 我没有使用 TypeScript，并且 b) 我不知道为什么 …

我期望 4 成为序列数组的一部分，为什么它被跳过了？

function* generate() {
  yield 1;
  yield 2;
  yield 3;
  return 4
}
let sequence = [...generate()];
console.log(sequence); // 1, 2, 3