Функция стрелки ECMAScript6, которая возвращает объект
При возврате объекта из функции со стрелкой кажется, что необходимо использовать дополнительный набор {} и оператор return из-за неоднозначности в грамматике:
p => { return { foo: 'bar' } }
Если функция стрелки возвращает что-то еще, {} и return не нужны, например:
p => 'foo'
Есть что-то очевидное, чего мне не хватает?
7 ответов
Вы должны обернуть возвращаемый литерал объекта в скобки. В противном случае будут считаться фигурные скобки для обозначения тела функции. Следующие работы:
p => ({ foo: 'bar' });
Вам не нужно заключать любое другое выражение в скобки:
p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;
и так далее.
Вы можете спросить, почему синтаксис действителен (но не работает должным образом):
var func = p => { foo: "bar" }
Это из-за синтаксиса меток JavaScript:
Поэтому, если вы перенесете приведенный выше код в ES5, он должен выглядеть следующим образом:
var func = function (p) {
foo:
"bar"; //obviously no return here!
}
Если тело функции стрелки заключено в фигурные скобки, оно не возвращается неявно. Оберните объект в скобках. Это будет выглядеть примерно так.
p => ({ foo: 'bar' })
Обернув тело в паренсе, функция вернет { foo: 'bar },
Надеюсь, это решит вашу проблему. Если нет, то я недавно написал статью о функциях Arrow, которая более подробно описывает это. Я надеюсь, что вы найдете это полезным. Javascript Arrow Функции
Проблема:
Когда вы делаете:
p => {foo: "bar"}
Интерпретатор JavaScript считает, что вы открываете блок кода с несколькими операторами, и в этом блоке вы должны явно указать оператор возврата.
Решение:
Если в выражении функции стрелки есть один оператор, можно использовать следующий синтаксис:
p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})
Но если вы хотите иметь несколько операторов, вы можете использовать следующий синтаксис:
p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}
В приведенном выше примере первый набор фигурных скобок открывает блок кода с несколькими инструкциями, а второй набор фигурных скобок предназначен для динамических объектов. В блоке кода с несколькими операторами стрелочной функции вы должны явно использовать операторы возврата
Дополнительные сведения см. В документации Mozilla для выражений функций стрелок JS.
правильные пути
- нормальный возвращаемый объект
const getUser = user => {return { name: user.name, age: user.age };};
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
- (выражения js)
const getUser = user => ({ name: user.name, age: user.age });
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
объяснять
Тот же ответ можно найти здесь!
https://github.com/lydiahallie/javascript-questions/issues/220
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript
Стрелочная функция ES6 возвращает объект
правильные пути
- обычная функция возвращает объект
const getUser = user => {
// do something
const {name, age} = user;
return { name, age };
};
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
- (js-выражения)
const getUser = user => ({ name: user.name, age: user.age });
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
объяснять
Если бы вы переписали это функциональное выражение как стрелочную функцию, у вас может возникнуть соблазн просто перевести его, как мы это сделали в предыдущем примере, например:
let square = n => {
square: n * n;
};
Однако когда вы вызываете Square, вы заметите, что функция работает не так, как предполагалось. Независимо от того, какое входное значение вы передаете, в качестве возвращаемого значения вы получите неопределенное значение. Почему это?
Проблема со стрелочной функцией заключается в том, что анализатор интерпретирует две фигурные скобки не как литерал объекта, а как оператор блока. Внутри этого оператора блока синтаксический анализатор видит метку с именем Square, которая принадлежит оператору выражения n * n. Поскольку оператора return вообще нет, возвращаемое значение всегда неопределенно.
Точнее, тело функции состоит из блочного оператора, список операторов которого содержит единственный оператор, помеченный оператор. Его тело представляет собой оператор выражения, содержащий двоичное выражение. Там нет оператора возврата.
ссылки
https://github.com/lydiahallie/javascript-questions/issues/220
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript
Вы всегда можете проверить это, чтобы узнать о других решениях:
x => ({}[x.name] = x);