在我之前关于使用map（）的一篇文章中使用标准的if / else块解决了这个问题。但现在我有另一个问题。这是if / else的解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transforming Data</title>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<h1>Transforming Data</h1>
<p>Open the console</p>
<script type="text/babel">
// Editing one object in an array of objects
let schools = [
{name: 'Yorktown'},
{name: 'Stratford'},
{name: 'Washington & Lee'},
{name: 'Wakefield'}
];
const editName = (oldName, newName, arr) =>
arr.map(item => {
if (item.name === oldName) {
return {
...item,
name: newName
}
}
else {
return item
}
});
let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);
console.log(updatedSchools[1]); // {name: "HB Woodlawn"}
console.log(schools[1]); // {name: "Stratford"}
</script>
</body>
</html>
但是，在使用功能箭头时不想为我工作。映射时不会进行替换。但是，我正在使用相同的解决方案 - 即：'name：name'。我究竟做错了什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transforming Data</title>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<h1>Transforming Data</h1>
<p>Open the console</p>
<script type="text/babel">
let schools = [
'Yorktown',
'Stratford',
'Washington & Lee',
'Wakefield'
];
const editName = (oldName, name, arr) =>
arr.map(item => (item.name === oldName) ?
({...item, name: name}) :
item
);
let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);
console.log(updatedSchools[1]); // Stratford
console.log(schools[1]); // Stratford
</script>
</body>
</html>
您的新数组是字符串数组，而不是对象数组，因此没有name属性，这意味着item.name将始终返回undefined。
如果您想继续使用字符串数组，则必须修改函数，如下所示：
let schools = [
'Yorktown',
'Stratford',
'Washington & Lee',
'Wakefield'
];
const editName = (oldName, name, arr) =>
arr.map(item => (item === oldName) ? name : item);
let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);
console.log(updatedSchools[1]); // Stratford
console.log(schools[1]); // Stratford您的原始数组只是一个字符串数组而不是一个对象数组，它没有name属性的对象，因此当您使用.map()访问每个数组元素时，您无法使用当前代码访问name属性。如果你想用你的字符串数组实现相同的结果，那么你可以尝试使用下面的代码，它只迭代每个数组字符串元素并替换所需的元素。在您的原始代码中，item.name返回undefined。
let schools = [
'Yorktown',
'Stratford',
'Washington & Lee',
'Wakefield'
];
const editName = (oldName, name, arr) =>
arr.map(item => (item === oldName) ?
name : item
);
let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);
console.log(updatedSchools[1]); // HB Woodlawn
console.log(schools[1]); // Stratford
对不起，关于这个问题的原始帖子包含一个错误的字符串数组，它应该是一个对象数组。我为浪费每个人的时间而道歉。以下代码确实可以正常工作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transforming Data</title>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<h1>Transforming Data</h1>
<p>Open the console</p>
<script type="text/babel">
let schools = [
{name: 'Yorktown'},
{name: 'Stratford'},
{name: 'Washington & Lee'},
{name: 'Wakefield'}
];
const editName = (oldName, name, arr) =>
arr.map(item => (item.name === oldName) ?
({...item, name: name}) :
item
);
let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);
console.log(updatedSchools[1]); // {name: "HB Woodlawn"}
console.log(schools[1]); // {name: "Stratford"}
</script>
</body>
</html>