【JavaScript】阵列方法之map()

【前言】
本系列为个人前端学习之路的学习笔记,在过往的学习过程中累积了很多笔记,如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容,例如【JavaScript】、【Vue】等等。
若内容有误,还麻烦各路大神不吝於点出问题,感激不敬。


在JavaScript中有许多操作阵列的方法,本篇将针对map()
使用map()会产生一个新阵列,阵列.map(callback function)会将阵列中的资料一笔一笔作为参数带入callback function中,经过我们一阵操作之後再将新的结果放到新阵列中
与filter()不同的是,map()每次将阵列中的资料带入callback function时,一定会return一个东西到新阵列,因此新阵列的长度永远与原始阵列相同

阵列方法之filter()中的案例为例
如果改用map()的话会变成这样:

const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(item, index, array){
  return item > 3;
});
console.log(newArray); //(5) [false, false, false, true, true]

当使用filter()时,如果判断式的结果为false就不会回传,因此在阵列方法之filter()中newArray的长度会变得比array还少
但map()无论如何一定会return,因此newArray长度与array完全相同

如果filter()是筛选,那map()可以说是巡房,逐个访问阵列中的每笔资料,之後再妥善的放到新阵列里面

简单的范例

使用map写一个「资料有没有大於3」的阵列

const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {
    return `${item}${item>3 ? "大於3" : "没有大於3"}`
});
console.log(newArray); //(5) ['1没有大於3', '2没有大於3', '3没有大於3', '4大於3', '5大於3']

箭头函式的问题

使用map()时,如果希望return的值是物件的话,要特别注意箭头函式的使用

const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {num: item});
console.log(newArray); //(5) [undefined, undefined, undefined, undefined, undefined]

可以看到并没有正确地回传我们所要的结果
这是因为物件的{ }会被视为箭头函式的片段(无法正确return,导致回传空值)
也就是说我们的程序码被以为是这样

const newArray = array.map((item) => {
  num: item  //没有该有的return,物件也没有{}
});

解决方案就是多使用一个( )包起来

const newArray = array.map((item) => ({num: item}));

这样就可以正常运作了


<<:  7. STM32-结合中断来做个红绿灯吧!

>>:  AWS Academy 简介

Day-2 演算法介绍

演算法(Algorithms) 大致上来说,演算法为具有明确定义的计算过程,根据输入得到不同的输出,...

[Java Day22] 5.2. 取值式 & 设值式

教材网址 https://coding104.blogspot.com/2021/06/java-g...

Day17-"与字串相关的函式-3"

strlen() 字串长度计算 计算长度的方法还有一种是,我们利用宣告变数为0,然後去判断我们字串...

[Day19] SCSS 学习笔记

写 CSS 的时候常常会有些设定是重复出现的,SASS(SCSS)是一个方便的预处理器,提供了变数、...

第一章 之二 两个国外网域

Hostinger网域供应商跟Godaddy类似,除了提供Domain( Domain Name )...