地图的粗箭头用法

Question

JavaScript newbie here. While trying to use Arrray.map with fat arrow, I am getting compilation errors. Below is my sample code along with the error.

 var employeesWithComplexLocation = [{ "name": "jon", "location": { "country": "usa", "city": "austin" } }, { "name": "jane", "location": { "country": "usa", "city": "houston" } }, { "name": "mary", "location": { "country": "usa", "city": "dallas" } }]; var employeesWithOnlyCity = employeesWithComplexLocation.map(function(element) { return { name: element.name, location: element.location.city }; }); console.log(employeesWithOnlyCity); console.log('Now using fat arrow:') employeesWithOnlyCity = employeesWithComplexLocation.map(e => { name: e.name, location: e.location.city }); console.log(employeesWithOnlyCity); 

Array.map works as expected with anonymous function, but gives below error when I use fat arrow instead.

employeesWithOnlyCity = employeesWithComplexLocation.map(e => {
  name: e.name,
  location: e.location.city
});

SyntaxError: Unexpected token :

The fat arrow works fine with Array.every, or Array.filter. Not sure what I am missing here with Array.map

Answer 1

The reason your second usage is causing an error is because when using the javascript => operator {} denotes a function body, not an object. The MDN article on Arrow functions mentions this here and provides a link to a more thorough explaination ( here ) that says this

The rule in ES6 is that { immediately following an arrow is always treated as the start of a block, never the start of an object.

If you need to return an object from an arrow function you should wrap the object in parentheses to let Javascript know not to expect a statement block.

 var test = e => ({test: e}); document.getElementById("output").innerHTML = JSON.stringify(test("My Value")); 

 Value: <span id="output">...</span>