arrow-functions | 易学教程

ES6 immediately invoke recursive arrow function

阅读更多关于 ES6 immediately invoke recursive arrow function

问题 This is my current code: const fn = parameter => { // if, else ... fn(X); }; fn(0); Now, I can't use this approach as I need to call the function with a parameter and it must be callable recursively. How to refactor the above arrow function to be immediately invoked and recursively callable? 回答1: First, let me put the disclaimer that Immediately-Invoked-Function-Expressions (IIFE) are considered bad practice in ES6, and this is tail-recursion and personally I would change it to a for loop.

Do ES6 arrow functions still close over “this” even if they don't use it?

阅读更多关于 Do ES6 arrow functions still close over “this” even if they don't use it?

问题 I'm trying to understand the rules of when this is lexically bound in an ES6 arrow function. Let's first look at this: function Foo(other) { other.callback = () => { this.bar(); }; this.bar = function() { console.log('bar called'); }; } When I construct a new Foo(other) , a callback is set on that other object. The callback is an arrow function, and the this in the arrow function is lexically bound to the Foo instance, so the Foo won't be garbage collected even if I don't keep any other

How to build a menu list object recursively in JavaScript?

阅读更多关于 How to build a menu list object recursively in JavaScript?

问题 With an array of ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium']; I'd like to construct an map object that looks like: { 'social': { swipes: { women: null, men: null } }, 'upgrade': { premium: null } } const menu = ['/social/swipes/women', '/social/likes/men', '/upgrade/premium']; const map = {}; const addLabelToMap = (root, label) => { if(!map[root]) map[root] = {}; if(!map[root][label]) map[root][label] = {}; } const buildMenuMap = menu => { menu // make a copy of menu //

ES6 Difference between arrow function and method definition [duplicate]

阅读更多关于 ES6 Difference between arrow function and method definition [duplicate]

问题 This question already has an answer here : Are 'Arrow Functions' and 'Functions' equivalent / exchangeable? (1 answer) Closed 3 years ago . What is the difference between next functions module.exports = utils.Backbone.View.extend({ handler: () => { console.log(this); } }); and module.exports = utils.Backbone.View.extend({ handler() { console.log(this); } }); Why in first case this === window ? 回答1: Because arrow functions do not create their own this context, so this has the original value

ESLint Airbnb ES6 and Redux Async Action Unexpected block statement surrounding arrow body

阅读更多关于 ESLint Airbnb ES6 and Redux Async Action Unexpected block statement surrounding arrow body

问题 What am I doing wrong? I have like three other async actions that have the same issue and can't fix it. 回答1: When you take a look at the Arrow Function Documentation (param1, param2, …, paramN) => expression // equivalent to: => { return expression; } the "Unexpected block statement surrounding arrow body" just means that you don't need a { return expression; } block for your arrow function here, as the arrow function does return by default. const getOptions = () => (dispatch, getState) => {}

How to run ES6 code with arrow functions in Safari?

阅读更多关于 How to run ES6 code with arrow functions in Safari?

问题 For some reason, ES6 code that runs well in the current Chrome or Firefox cannot run in Safari - for example, arrow functions. As I know, Safari has ok support for ES6. Is there something that needs to be done? Example: var arr = [1,3,5].map((i) => i*i); console.log(arr); Or if it is a full .html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> "use strict"; var arr = [1,3,5].map((i) => i*i); console.log(arr); </script> </body> </html> Safari

Difference of .bind() to arrow function () => usage in React

阅读更多关于 Difference of .bind() to arrow function () => usage in React

问题 Suppose that I have a function generateList() that updates the state and mapping it to an onClick to a <li>. <li className="some-classname"} onClick={this.generateList('product')}> Product </li> There are times that I encounter errors like: Warning: setState(...): Cannot update during an existing state transition (such as within render ). Render methods should be a pure function of props... And such. I mined the internet for answers for this, and came upon such answer like: <li className=

Coffeescript classes and scope and fat and thin arrows

阅读更多关于 Coffeescript classes and scope and fat and thin arrows

问题 In a fat arrowed function of a coffeescript class, how can I access the scope of the class as well as the function? Example: class Example foo: -> $('.element').each => # or -> @bar($(this)) # I want to access 'bar' as well as the jquery element bar: (element) -> element.hide() So in this example, if I use a => then the @ refers to the this of the class but the 'this' is then wrong, whereas if I use a -> for the each, then the 'this' is correctly scoped but but then how do I reference the

Babel Plugin Class Properties – React Arrow Functions

阅读更多关于 Babel Plugin Class Properties – React Arrow Functions

I am running a React project using npm. After hours of research and experimenting, everywhere says I have to add the following code to my ".babelrc" file, which I do not have in my directory and cannot create: { "plugins": [ ["@babel/plugin-proposal-class-properties", { "loose": true }] ] } But this leads to the following error when I run the code: ERROR in ./src/components/NavBar/Menu.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/ymoondhra/Desktop/yt-web/src/components/NavBar/Menu.js: Support for the experimental syntax 'classProperties' isn't

arrow functions: destructuring arguments and grabbing them as a whole at the same time

阅读更多关于 arrow functions: destructuring arguments and grabbing them as a whole at the same time

Can we do both destructuring: ({a, b}) => ( a + b ) and grab the arguments: (...args) => ( f({...args}) ) , at the same time for arrow functions in ES6. Looking for something like (...args = {a, b}) => ( a + b + f({...args}) ) . My curent solution is to do something like: ({a, b}) => { const {...args} = {a, b} return a + b + f({...args}) } But it is redundant or (thanks to nnnnnn & Dmitry) (args) => { const {a, b} = args return a + b + f({...args}) } which is less redundant and definitely better but still not entirely satisfactory. You can use default parameters and object rest at target of