ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

数组映射到对象

2021-11-01 23:32:26  阅读:200  来源: 互联网

标签:surname name 映射 对象 let user 数组 fullName id


<!DOCTYPE html>
<head>
	<meta charset="utf-8"/>
</head>
<p>
	你有一个 user 对象数组,每个对象都有 name,surname 和 id。
	
	编写代码以该数组为基础,创建另一个具有 id 和 fullName 的对象数组,其中 fullName 由 name 和 surname 生成。
	
	例如:
	
	let john = { name: "John", surname: "Smith", id: 1 };
	let pete = { name: "Pete", surname: "Hunt", id: 2 };
	let mary = { name: "Mary", surname: "Key", id: 3 };
	
	let users = [ john, pete, mary ];
	
	let usersMapped = /* ... your code ... */
	
	/*
	usersMapped = [
	  { fullName: "John Smith", id: 1 },
	  { fullName: "Pete Hunt", id: 2 },
	  { fullName: "Mary Key", id: 3 }
	]
	*/
	
	alert( usersMapped[0].id ) // 1
	alert( usersMapped[0].fullName ) // John Smith
	所以,实际上你需要将一个对象数组映射到另一个对象数组。在这儿尝试使用箭头函数 => 来编写。
</p>

<script type="text/javascript">
	'use strict';
	
	let john = { name: "John", surname: "Smith", id: 1 };
	let pete = { name: "Pete", surname: "Hunt", id: 2 };
	let mary = { name: "Mary", surname: "Key", id: 3 };
	
	let users = [ john, pete, mary ];
	
	let usersMapped = users.map( user => (
	{
		fullName : `${user.name} ${user.surname}`,
		id : user.id
	}))
	
	/*
	usersMapped = [
	  { fullName: "John Smith", id: 1 },
	  { fullName: "Pete Hunt", id: 2 },
	  { fullName: "Mary Key", id: 3 }
	]
	*/
	
	alert( usersMapped[0].id) // 1
	alert( usersMapped[0].fullName ) // John Smith
	
	
</script>
<p>
	请注意,在箭头函数中,我们需要使用额外的括号。
	
	我们不能这样写:
	
	let usersMapped = users.map(user => {
	  fullName: `${user.name} ${user.surname}`,
	  id: user.id
	});
	我们记得,有两种箭头函数的写法:直接返回值 value => expr 和带主体的 value => {...}。
	
	JavaScript 在这里会把 { 视为函数体的开始,而不是对象的开始解决方法是将它们包装在普通括号 () 中:
	
	let usersMapped = users.map(user => ({
	  fullName: `${user.name} ${user.surname}`,
	  id: user.id
	}));
	这样就可以了。
</p>

  

标签:surname,name,映射,对象,let,user,数组,fullName,id
来源: https://www.cnblogs.com/perfectdata/p/15496709.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有