我确信这是相对简单的,我错过了一些明显的东西.我正在阅读Mozilla关于ES6 的教程,他们关于解构的章节包含以下模式:

功能参数定义

作为开发人员,我们通常可以通过接受具有多个属性作为参数的单个对象来展示更符合人体工程学的API,而不是强迫我们的API使用者记住许多单个参数的顺序.每当我们想要引用它的一个属性时,我们可以使用解构来避免重复这个单个参数对象:

function removeBreakpoint({ url, line, column }) {   
    // ... 
}

Run Code Online (Sandbox Code Playgroud)

这是Firefox DevTools JavaScript调试器(也在JavaScript-yo dawg中实现)的简化现实代码片段.我们发现这种模式特别令人愉悦.

我不明白这与解构有何关系.您是否允许将对象传递给此函数的想法,只要它包含所有项目,即可以按任意顺序进行,即{ line: 10, column: 20, url: 'localhost' }？

如果是这样,那么有什么好处呢

 function removeBreakpoint(params) {   
     // ... 
 }

其中params为与对象url,line和column？是否只是强制Javascript在通过显式定义它们时在析构化上下文中使用时验证函数的参数？

如果我想调用这样的函数：

moo({ a: 4 });

通常，我必须这样表达我的函数定义：

function moo(myArgObj) {
    print(myArgObj.a);
}

但是，这种出色的语法在spidermonkey中对于定义函数完全有效：

function moo({ a, b, c }) { // valid syntax!
    print(a); // prints 4
}

这是什么功能？

我一直在关注使用Redux设置React 这个教程,我注意到了一些我不熟悉的语法.函数参数定义里面的花括号是做什么的？

例:

function Stream({ tracks = [], onAuth }) { #what is going on here?
  return (
    <div>
      ... #component stuff here
    </div>
  );
}

这个React具体吗？或者这与Babel或其他图书馆有关？我是这个技术的新手,所以不确定发生了什么.

(在javascript中)在这种情况下: const component = ({ name, value }) => <span></span>

其中箭头函数的第一个参数与其成员分开.props=>({ name, value })

这个叫什么？我见过有些人用巴贝尔这样做,但不知道正确的用语是什么.

目前尚不清楚此语法的含义

const { headers, method, url } = request;

在此tut中找到https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/

我学习了关于 udemy 的反应课程。我无法理解以下代码。const InputGroup = (, 之后的这个对象是什么？我看过教程使用道具，但这里没有使用道具。而是使用了一个对象。

const InputGroup = ({
  name,
  placeholder,
  value,
  error,
  icon,
  type,
  onChange,
  autoComplete,
}) => {
  return (
    <div className="input-group mb-3">
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className={icon} />
        </span>
      </div>
      <input
        type={type}
        className={classnames('form-control form-control-lg', {
          'is-invalid': error,
        })}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        autoComplete={autoComplete}
      />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
  )
}

如果我单击一个按钮,它会调用handleClick它将按钮的值从0增加1.我已经使handleClick代码在两种不同的场景中工作.我理解第一个,我似乎没有掌握第二个.

我写了这个.它有效.

handleClick = () => {
    this.setState({count: this.state.count + 1})
  }

教程显示了这个,它也有效.

handleClick = () => {
    this.setState(({count}) => ({
      count: count + 1
    }))
  }

如果我将代码更改为此,这也适用.

handleClick = () => {
    this.setState(() => ({
      count: this.state.count + 1
    }))
  }

使用第二个代码体做同样的事情但比第一个代码更复杂的优点是什么？

我理解我正在返回一个对象文字,这基本上是我写的,而不是在第一个代码体中生成它.但是,{count}当我可以将参数保持为空并且仅this.state.count在身体中使用时,为什么我作为参数传递？