标签: arrow-functions

我发起了一个JavaScript/jQuery点击监听器,如下所示:

$("#test").on("click", () => {
   console.log("test");
});

这段代码在Firefox中完美运行,但在Chrome中,这似乎给我一个语法错误.这是为什么,因为这对我来说看起来像'ok'语法.

您可以通过操作在控制台中快速测试

 var a = () => {return 0;}
 a();

在Firefox 27.0.1中,它返回0 In Chrome返回 SyntaxError: Unexpected token )

我试图用箭头功能node v0.10.33下Ubuntu 14.04(我运行与节点--harmony标志),但我得到这个错误:

console.log( [1,2,3,4].map(x => x*x) );
                          ^
SyntaxError: Unexpected token >
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

我有这个代码

async function addFiles(dir,tree) {
  return (await readDir(dir))
    .map(async (name) => {await readDir(dir); return name;})
}

但不幸的是,它只返回了一堆承诺,因为没有等待map中的异步函数.我想知道是否有任何方法可以等待上面代码中的映射函数.

通过 webpack 运行我的代码后，它包含箭头函数。我需要代码在 ie11 中工作，所以我需要摆脱箭头函数。

我正在为所有 .js 文件使用 babel-loader。

我写了一个加载器来检查箭头函数的代码，并在 babel-loader 之后运行它，但没有得到任何箭头函数，所以我知道 babel 的输出是好的。

我还尝试了 babel-polyfill 和用于转换箭头功能的 babel 插件。

我知道 babel-loader 输出好的代码，我怀疑它可能是一个插件，但我不能只是禁用它们进行测试，因为这会破坏构建。

开发中使用的 Webpack 插件：

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

这个问题也出现在 prod 中，但是在 …

这是我目前的代码:

const fn = parameter => {
    // if, else ...
    fn(X);
};
fn(0);

现在,我不能使用这种方法,因为我需要使用参数调用函数,并且它必须可递归地调用.

如何重构上面的箭头函数,以便立即调用和递归调用？

什么是“让 x= something1 => something2 => something3”？

我有这段代码，但我无法理解它的作用。

const myReducers = {person, hoursWorked};
const combineReducers = reducers => (state = {}, action) => {
  return Object.keys(reducers).reduce((nextState, key) => {
    nextState[key] = reducers[key](state[key], action);
    return nextState;
  }, {});
};

您需要的完整代码：

//Redux-Style Reducer
const person = (state = {}, action) => {
  switch(action.type){
    case 'ADD_INFO':
      return Object.assign({}, state, action.payload)
    default:
      return state;
  }
}

const infoAction = {type: 'ADD_INFO', payload: {name: 'Brian', framework: 'Angular'}}
const anotherPersonInfo = person(undefined, infoAction);
console.log('***REDUX STYLE PERSON***: …

很简单,如果我在ES6中有一个类,可以在其中使用箭头功能.

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}

我问的原因是我的控制台出现错误,即使使用Babel,虽然看起来互联网上有很多资源说明你可以做到这一点(其中大部分是关于使用React进行开发).

这是巴贝尔应该做的事情,并最终会得到本地支持吗？

我得到的错误是意外=符号,就在parens之前.

编辑:我忘了提到,我希望这样做的原因是在Class的上下文中使用'this'关键字,如果我使用常规函数 - 对我的理解 …

我正在学习文档https://facebook.github.io/react/docs/state-and-lifecycle.html之后的反应组件

为什么我们需要在这里使用箭头功能:

this.timerID = setInterval(() => this.tick(), 1000);

为什么我不能说(显然它不起作用)

this.timerID = setInterval(this.tick(), 1000);

用户定义类型保护的打字稿手册定义了一个示例类型保护为

function isFish(pet: Fish | Bird): pet is Fish {
    return (<Fish>pet).swim !== undefined;
}

箭头函数是否有相应的语法？

Say I have a function:

handleChange = (e) => {
  this.setState({ [e.target.id]: e.target.value });
}

What is the difference between the following:

1.

<FormControl value={this.state.password} onChange={this.handleChange} />

<FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} />