标签: spread-syntax

我正在阅读有关 React 中的unknown-prop警告，特别是因为我正在使用react-bootstrap包并在那里偶然发现了它们。

我读过：“为了解决这个问题，复合组件应该“消耗”任何用于复合组件而不是用于子组件的道具”，在这里：

https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

并给出了一个示例，说明如何使用展开运算符将变量从 props 中取出，并将剩余的 props 放入变量中。

示例代码：

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

问题在于：在给出的示例中，我不明白此代码中的“...rest”代表什么。我知道“...”=展开语法，但是“rest”这个词从哪里来，它代表什么？

我有以下对象

state = {"line": [
   {"media": [1, 2, 3 ]},
   {"media": []},
   {"media": []},
]}

我需要的是删除媒体数组中的元素。

我尝试以下方法

return {
            ...state, line: [{
                ...state.line[line_index], media = [
                        ...state.line[line_index].media.slice(0, action.payload.index),
                        ...state.line[line_index].media.slice(action.payload.index + 1)
                ]
            }]
        }

但它不起作用，它用对象替换了媒体。

我不知道如何正确地做到这一点。有人可以指路并描述一下吗

我有一个像这样的嵌套数组

const names= [[{name: "John"}, {name: "Mary"}],
           [{name: "Paul"}, {name: "Peter"}]];

我想注入country到嵌套对象中

const country = {country :"USA"}

这样输出看起来像

[{name: "John", country : "USA"}, {etc} ,{etc} ]

代码的想法是这样的

const combined = names.map((map)=> 
       Object.assign({}, 
              country, 
              /*something to extract name from nested array names*/),
       {country}
         )

有什么建议我可以如何将对象传播到嵌套数组中以形成所需的输出？

如果可以通过其他方式改进代码，也请告诉我

对于那些不知道的人来说，扩展语法是将不确定数量的参数传递到函数中的一种便捷方法，类似于此示例：

  function debug (mode, string, ...params) {
    if (debug_enabled && window.console) {
      console.log(mode+": "+string+"(",...params,");");
    }
  }

不幸的是，Internet Explorer 和其他旧版本的浏览器不支持此功能。这里有关于扩展语法和浏览器支持的更多信息。

我没有将扩展语法用于任何关键的事情，但是将其出现在网站上会导致 JavaScript 在那些较旧的浏览器上完全失败。

一种选择是我可以为旧版浏览器提供单独的脚本版本，然后根据用户代理传递此脚本。但是，我想避免这种情况，因为维护这两个文件和作为一般浏览器都很痛苦如果使用其他功能，这可能会变得更加复杂。此外，还存在对用户浏览器进行错误分类的风险。

另一种选择是找到一种方法来完全避免在所有功能中使用扩展语法。然而，这可能会增加开发时间并创建更难以理解和使用的代码。这似乎不是一个避免使用新功能的好策略，因为只有极少数的观众无法使用它们。

我希望有人可能拥有或知道一种聪明的方法来检测扩展语法的支持，并在用户浏览器不支持扩展语法的情况下排除部分脚本。通过这种方式，我可以为使用旧版浏览器的用户提供仍然可用的体验，并且只错过一些功能。我一直在网上搜索，但找不到任何执行此操作的代码。我认为这可能是不可能的，因为它是核心语法修改，但是我也找不到任何东西来完全确认这种情况。

标题几乎说明了一切。我有这个代码：

  type testNoArgsF = () => number;
  type testArgsF = (arg1: boolean, arg2: string) => number;
  type unknownArgsF = (...args: unknown[]) => number;
  type anyArgsF = (...args: any[]) => number;

  type testII = testArgsF extends anyArgsF ? true : false; // true
  type testIII = Parameters<testArgsF> extends Parameters<unknownArgsF>
    ? true
    : false; // true

  // unexpected:
  type testIV = testArgsF extends unknownArgsF ? true : false; // false <- why?
  // even though:
  type testV = testNoArgsF extends unknownArgsF ? …

为什么此代码打印Array(7) [ <7 empty slots> ]（或 7 次的数组undefined）而不是包含单个元素的数组7？

const a = [ 7 ];

console.log(new Array(...a));

我尝试用扩展语法编写三元运算符并复制两个对象.是否可以在文字对象中使用带有扩展语法的三元运算符？我的代码工作正常,我只想优化它.

hintStyle: disabled ? {...globalStyles.hint, ...globalStyles.hintDisabled} : globalStyles.hint,

我想这样写:

hintStyle: {...globalStyles.hint, {disabled ? ...globalStyles.hintDisabled : {}}},

我有这个代码。

const elements = [...document.querySelectorAll('.someClass')]

的组合：

• 查询选择器全部
• 点差运算符

我不知道如何将 Typescript 类型添加到这一行。

我从控制台收到错误：

TS2548: Type 'NodeListOf<Element>' is not an array type or does not have a '[Symbol.iterator]()' method that returns an iterator.

如何使用扩展运算符访问对象数组中的元素？

const array = [{ obj: 1},{ obj: 2}]

console.log([...array].obj)
// Output undefined 

console.log([...array.obj])
// Output Uncaught TypeError

我看过这篇文章在对象数组上使用扩展运算符？这非常相似，但它们不会尝试访问元素。

那么是否可以在对象数组上使用扩展运算符来访问元素？如果是这样怎么办？