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

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"];

- stoney_24

---

可能是Javascript add text to beginning of each array element的重复问题。投票关闭。 - Ivan

这将解决问题。而且，你的代码中还没有声明 newArr。 - Dheeraj Chelaramani

Answer 1

就像其他人说的一样，您可以使用以下代码来解决此问题：

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

但是，理解代码失败的原因同样重要。问题在于字符串是不可变的。所以这个：

   e += '...here be dragons'

该方法不会改变原始数组中e的值，而是返回一个新字符串，但由于您没有将其分配给任何变量或返回它，所以该字符串会立即被丢弃。

这可能会让人感到困惑，因为它看起来与下面的代码非常相似：

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'做了两件事情。它创建了一个新的字符串，就像您的版本一样，但然后又将其赋回到country.name上。对象是不可变的。

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

- Scott Sauyet

Answer 2

.map的回调函数期望返回一个值。

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));

---

使用箭头函数语法，简化代码：

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

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

console.log(dragonMapper(arr));

- Eddie

Answer 3

你可以使用 .map() 方法和 模板字面量 来实现此功能：

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

- mickl

Answer 4

你可以直接使用 e + '...here be dragons' 来替代 e += '...here be dragons'，并返回新的值。

另外，你正在使用 newArr 调用 dragonMapper，但应该使用 arr 调用。

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

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

}

console.log(dragonMapper(arr));

- brk