javascript - 无法使用为 vue cli 3 设置添加的 babel-plugin-transform-object-rest-spread 传播对象

Question

这是部分代码，我正在努力让它工作

const myarr = [
        {a: 'haha',},
        {b: 'yoyo',}
      ];
      const myobj = {
        a: 'some',
        b: 'kind',
      };
      console.log(myarr);
      play(...myobj);
      console.log(props);

所以传播数组不会有问题但是当我传播一个对象时我会收到错误

TypeError: Invalid attempt to spread non-iterable instance

我在配置中添加了 babel-plugin-transform-object-rest-spread 插件，但是，同样的错误。

这是怎么回事？

这是我要复制的 repo 协议(protocol):https://github.com/adamchenwei/vue-hoc-playground 检查文件 /src/components/decorator/withCustomComponent.js 代码:

export default function withCustomComponent(InnerComponent) {
  return {
    mounted() {
      console.log('withCustomComponent is mounted');
    },
    render() {
      const myarr = [
        {a: 'haha',},
        {b: 'yoyo',}
      ];
      const myobj = {
        a: 'some',
        b: 'kind',
      };
      console.log(myarr);
      play(myobj);
      console.log(props);
      return <InnerComponent
        class="myinner"
        data-event="load"
        />;
    }
  }
}

export const WithCustom = {
  name: 'WithCustom',
  render() {
    const Slott = this.$slots.default[0];
    // return  <Slott />;
    return this.$slots.default[0];
    // return <h1>slott</h1>;
  }
};

function play({a,b}) {
  console.log('play')
  console.log(JSON.stringify(a));
  console.log(`${a} ${b}`);
}

function fakeCall(params, callback) {
  setTimeout(() => {
    callback('https://avatars0.githubusercontent.com/u/6078720?s=200&v=4')
  }, 1000);
}

关于对象展开运算符的文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals

Answer 1

据我所知，您不能使用扩展运算符将对象作为参数传递给函数；这背后的原因之一是 Javascript 函数没有对命名参数的原生支持，这导致无法通过名称匹配参数；一种解决方法是在 play 函数中使用解构语法，如下所示:

function play({ a, b }) {
  console.log('play')
  console.log(JSON.stringify(a));
  console.log(`${a} ${b}`);
}

然后你可以调用它:play(myobj)。