Question

我正在尝试编写一个映射数组的函数，并在数组中的每个元素的末尾添加一个文本字符串。当我执行console.log时，我得到undefined。任何帮助将不胜感激。

这是数组：

let arr = ["England","Scotland","Westeros"];

以下是我的尝试：

dragonMapper = (arr) => {
  let newArr = arr.map(function(e) {
    e += '...here be dragons'
  });
  return newArr;
}

console.log(dragonMapper(newArr));

这是执行函数后我想要的数组：

["England...here be dragons","Scotland...here be dragons","Westeros...here be dragons"];

Answer 1

.map的回调函数需要返回值

＆＃13;

let arr = ["England", "Scotland", "Westeros"];

dragonMapper = arr => {
  let newArr = arr.map(function(e) {
    return e + '...here be dragons'; //Return the concatenated value of 2 strings
  });
  return newArr;
}

console.log(dragonMapper(arr));

＆＃13;

更短的版本，使用箭头函数语法：

＆＃13;

let arr = ["England", "Scotland", "Westeros"];

dragonMapper = arr => {
  return arr.map(e => e + '...here be dragons');
}

console.log(dragonMapper(arr));

＆＃13;

Answer 2

您可以使用.map()方法和template literals：

来执行此操作

＆＃13;

let arr = ["England","Scotland","Westeros"];
let result = arr.map(country => `${country}...here be dragons`);
console.log(result);

＆＃13;

Answer 3

您只需执行e += '...here be dragons'而不是e + '...here be dragons'并返回新值。

此外，您使用dragonMapper致电newArr，但需要使用arr

进行调用

＆＃13;

let arr = ["England", "Scotland", "Westeros"];

dragonMapper = (arr) => {
  return arr.map(function(e) {
    return e + '...here be dragons'
  });

}

console.log(dragonMapper(arr));

＆＃13;

Answer 4

正如其他人所说，您可以使用以下代码解决此问题：

let arr = ["England","Scotland","Westeros"];
let dragonLands = arr.map(country => country + '...here be dragons');
console.log(dragonLands);

但同样重要的是要了解为什么您的代码失败。问题是字符串是不可变的。所以这个：

   e += '...here be dragons'

不会更改原始数组中e的值，而是会返回一个新的String，它会立即丢弃，因为您不会将其分配给某个东西或将其返回。

这可能令人困惑，因为这看起来非常相似：

let arr = [
    {name: "England", id: 1}, 
    {name: "Scotland", id: 2}, 
    {name: "Westeros", id: 3}
];
arr.forEach(country => country.name += '...here be dragons');
console.log(arr);

但是存在重要的差异。首先，map返回将函数应用于元素的结果。相反，forEach仅对副作用很重要，在这种情况下会改变提供给它的元素。

其次，country => country.name += '...here there be dragons'做了两件事。它会像您的版本一样创建一个新的String，但随后会将其分配回country.name。对象不不可变。

map是一个非常有用的结构，但在使用它时，必须要理解它调用的函数的结果是非常重要的。

如何使用map将文本添加到每个数组元素的末尾？

4 个答案: