相关疑难解决方法(0)

什么是...做这个阵营(使用JSX)代码,什么是它叫什么名字？

<Modal {...this.props} title='Modal heading' animation={false}>

在ECMAScript规范的SpreadElement描述

SpreadElement[Yield]:
...AssignmentExpression[In, ?Yield]

这与Spread语法相同

扩展语法允许在可能需要零个或多个参数(用于函数调用)或元素(用于数组文字)的位置扩展数组表达式或字符串等可迭代的值,或者在零或更多的位置扩展对象表达式键值对(对象文字)是预期的.

句法

对于函数调用:

myFunction(...iterableObj);

Run Code Online (Sandbox Code Playgroud)

对于数组文字:

[...iterableObj, 4, 5, 6]

Run Code Online (Sandbox Code Playgroud)

在MDN文档中描述？

什么是SpreadElement和/或扩展语法的用例; 如果SpreadElement和传播语法不同,它们的具体方式有何不同？

请考虑以下示例代码

var x = ["a", "b", "c"];
var z = ["p", "q"];

var d = [...x, ...z];

var e = x.concat(z);

在这里,价值d和e是完全相同且等于 ["a", "b", "c", "p", "q"],所以,

1. 这两者究竟有什么区别？
2. 哪一个更有效率,为什么？
3. 扩展语法的用途究竟是什么？

难道你不认为用正式的广泛语言引入这些小捷径可能会留下一些未被注意的错误,我的意思是要么是非常不必要的,要么我没有意识到它是否需要正确.

为什么不能多次使用传播运算符？

let arr = [[[1, 2, 3]]];

console.log(arr); // Array [ Array[1] ]
console.log(...arr); // Array [ Array[3] ]
console.log(...(...arr));
// SyntaxError: expected '=>' after argument list, got ')'

我希望:

console.log(...(...arr)); // Array [ 1, 2, 3 ]

在Javascript中阅读此语法对我来说真的很混乱:

router.route('/:id')
.put((...args) => controller.update(...args))
.get((...args) => controller.findById(...args));

什么... args意味着什么？

在ECMAScript 6中添加的rest参数的用途是什么？

例如,在ECMAScript 5中,您可以执行以下操作以从第二个元素开始获取参数数组:

// ES 5
store('Joe', 'money');
store('Jane', 'letters', 'certificates');
function store(name) {
  var items = [].slice.call(arguments, 1); //['money'] in first case
  items.forEach(function (item) {
    vault.customer[name].push(item);
  });
}

这将等同于ECMAScript 6中的以下代码:

// ES 6
store('Joe', 'money');
store('Jane', 'letters', 'certificates');
function store(name, ...items) {
  items.forEach(function (item) {
    vault.customer[name].push(items)
  });
}

它们之间的区别仅仅是语法还是存在性能问题？

也适用于传播运营商(...)

//in ecmascript5
var max = Math.max.apply(null, [14, 3, 77]);
//but in ecmascript6
var max = Math.max(...[14, 3, 77]);

这只是语法更改还是性能问题？

假设我有这个简单的JavaScript函数:

function returnArray(){
    return [1, 2, 3];
}

进一步假设我接着说

var test = [0, ...returnArray()];

你期望测试等于[0,1,2,3],你是对的.我试过了,当然有效.

现在我有这个练习,我想构建一个名为double的函数,它将一个数组作为参数,并返回另一个包含所有原始数组值的数组.所以,如果我调用double([1,2,3]),我应该得到[2,4,6].练习的限制是我必须只使用数组解构,递归和其余/扩展运算符来构建我的函数.不允许使用数组助手.所以我想出了这个:

function double(array){
  if (array.length===1) return 2*array[0];
  var [num, ...rest] = array;  
  if (rest.length!=0) return [2*num, ...double(rest)];  
}

如果我使用任何大小至少为2的数组运行此函数,我会收到一条错误消息,指出double不是函数.如果我在double之前删除了...运算符,那么神奇的double再次是一个函数,除了当然double([1,2,3])的结果是[2,[4,6]],这是不完全的与[2,4,6]相同.

我的第一个想法是,也许,出于一些奇怪的原因,你不能在函数前使用...,即使函数返回一个数组,所以我用上面的returnArray()函数测试了这个假设,并找到了它工作得很好.我不知道它为什么会在练习中崩溃.我只能猜测递归可能与它有关,但我不知道为什么它会如此.任何人都可以指出我的代码有什么问题吗？

编辑:谢谢大家,这是一个非常愚蠢的错误!我应该看到它.我在你的一些答案中添加了评论.

我一直在阅读ES6中介绍的解构分配.

这种语法的目的是什么,它为什么被引入,以及它在实践中如何使用的一些例子？

我在一些示例代码中遇到了这个,我完全迷失了.

const addCounter = (list) => {
    return [...list, 0];  // This is the bit I am lost on, and I don't know about [...list, 0]
}

显然以上等于以下内容:

const addCounter = (list) => {
    return list.concat([0]);
}

任何建议或解释都非常感谢.

const peopleList = this.state.people.map( x => {

    return <Person key={x.name} {...x} />
})

这段代码的"{... x}"是什么意思？

问题简而言之:

这两个版本有什么区别:

const A = ({ children, ...rest }) => React.cloneElement(children, rest);

VS

const B = ({ children, ...rest }) => React.cloneElement(children, {...rest});

两个版本似乎都以相同的方式工作.

此版本不起作用:

const C = ({ children, ...rest }) => React.cloneElement(children, { rest });

问题更详细:

......休息与休息

...rest 在组件函数定义中声明的作为rest参数的语法表示传递给组件的其余props.

例如: const B = ({ children, ...rest })

但是,...rest这是作为参数传递的:

例如: React.cloneElement(children, {...rest})

代表传播语法.在这里,我们似乎也只是使用组件函数定义中的相同道具克隆子元素.

但是组件A如何工作？

const A = ({ children, ...rest }) => React.cloneElement(children, rest);

我们是怎么...rest来的rest？

最后,为什么当用C组件括起来时它不起作用

我已经阅读了关于React和ES6文档的文档,但是没有很好的文档可以使用togetherReact API 来使用它们.

我遇到了我应该使用的代码问题.我找到了一个我不熟悉的语法,我在google文档时遇到了麻烦:

export const Something = class Something {
    constructor(someObject = {}) {
        this.someObject = {...Something.someObjectDefaultAsStaticMethod,...someThing};
    };
// The rest of the class
};

我在理解参数前面的三个点(...)时遇到了问题.而"参数javascript中的点"是一个糟糕的搜索词.有人可以帮助我,也许告诉我这个语法实际上是什么调用,或者直接将我链接到文档？

我从这篇文章中了解到了这一点.

function StoreMixin(...stores) { // what is "..."
  var Mixin = {
    getInitialState() {
      return this.getStateFromStores(this.props);
    },
    componentDidMount() {
      stores.forEach(store =>
        store.addChangeListener(this.handleStoresChanged)
      );
      this.setState(this.getStateFromStores(this.props));
    },
    componentWillUnmount() {
      stores.forEach(store =>
        store.removeChangeListener(this.handleStoresChanged)
      );
    },
    handleStoresChanged() {
      if (this.isMounted()) {
        this.setState(this.getStateFromStores(this.props));
      }
    }
  };
  return Mixin;
}

请用示例代码解释什么是"...".谢谢!