数组映射到对象

<!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>

posted on 2021-11-01 23:18 PerfectData 阅读(225) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Perfect Data

数组映射到对象

导航

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜