我流理解---JavaScript ES6---3(常用阵列方法)

人生就是如此捉摸不定吧...我好像大概可能应该是找到工作了吧~
但为什麽等HR联络可以等这麽久呢...虽然从确定核薪也才过三四天就是了...


以下的几种函式基本上都会直接把阵列内的各项跑一次,等於是for函式的作法,所以在对阵列的部份基本可以取而代之,但像是做费先生无聊的兔子繁殖算术的这种不针对既定资料或阵列的时候,for还是很好用的

这边先说我自己的整理:
forEach:用来对原阵列进行添加或删减等等,会改定原阵列的值。
map:一样是用来对原阵列进行添加或者删减等等,但会产生新阵列,保留原阵列状态。
filter:用来对原阵列资料进行筛选,产生新阵列,例如添加我的最爱的呈现方式。
every跟some:用来做true或false的判断,差别在是否全部项都要符合,应可用於对状态做判断
reduce:结构与上述几个较为不同,常用大概是加总或者大小判断,自己理解是从不断依序执行函式,将项目逐项聚焦的一种作法。

结构大致为:(其实上forEach、map、filter跟find、some基本都是一样的,reduce另说)

arr.map(function( 原阵列的各项值 , 各项的索引值, 执行里面函数时的this值 ){
函式内容
})

其中的参数,後两项用不到也可以不写。

先设定好一个阵列

const people = [
  {
    name: '阿喵',
    money: 10
  },
  {
    name: '狗勾',
    money: 20
  },
  {
    name: '老张',
    money: 8000
  }
];

.forEach

依序将阵列的值带入函数去执行函式,可以改变原本的函式,不需要新的变数阵列去储存return的值

people.forEach(function(a){
a.money = a.money+100 //等於把各项中的money这个数值加上100
});
console.log(people); 
//则原本people阵列的每个money都会加上100,直接影响原本阵列

.map

依序将阵列的值带入函数并回传一个新阵列 (回呼函式),会做return,传回新阵列值,可创造一个新的变数来储存。

const mapPeople = people.map(function(a){
    return{
      ...a,
      icash:a.money+500
    }
});
//mapPeople就会是一个新的阵列,与原阵列的差别就是每个money都是+500的状态

若是有条件式,即原阵列部份的值可能会不符合条件导致不return资料,可能就要考虑不要使用map,不然新阵列中就会有undefined的值,此时可考虑用filter。
若是不希望组成新阵列,而只是在原阵列进行增减或者运算,则可改用forEach。
适合将原阵列的资料做一定的处理时使用,将新结果丢到新阵列,保持原阵列的状态。

.filter

同样会将阵列的值带入函数,主要是用来做过滤,在有设定条件的情况下若不符合,则不会回传,比map更适合用来做不需对值做改动的单纯筛选动作。

const filterPeople = people.filter(function(a){
    if (a.money >= 20){
    return true;
    }
});
//filterPeople的结果会是一个只有狗勾跟老张这两个符合条件的物件组成的新阵列。

最适合的就是拿来做过滤产生新阵列,这样也不会影响到原阵列的内容,方便将原始资料做筛选後区分成不同的阵列来用在不同地方。

.find

基本跟filter差不多,不过只会回传一次且为第一次,所以适合搜寻特定值。

const findPeople = people.find(function(a){
    if (a.money >= 20){
    return true;
    }
});
//findPeople的结果会是只有第一个符合条件的狗勾物件组成的新阵列,没有老张。

如果找到的对象是物件就回传物件,字串就回传字串,适合用来做较为精密的搜寻,找寻id之类的非重复字样。

.every

类似运算子中&&的概念,阵列的值都会做一次return後面的条件判断,如果全部符合会回传true,但只要其中一项不符就是false。

const everyPeople = people.every(function(a){
    return a.money >= 20;
});
//everyPeople的结果会是false,因为必须要全部条件都符合才行。

最大不同在於return直接写判断式,单纯判断符合与否,可以用作某些条件的判断,比如v-if的显示切换之类的。

.some

类似运算子中||的概念,阵列的值都会做一次return後面的条件判断,只要有一个符合就会回传true,否则就是false。

const somePeople = people.some(function(a){
    return a.money >= 200;
});
//somePeople的结果会是true,因为老张是符合的。

与every的差异就在各项是部份符合还是全部符合的判断,从英文单字就能简单区分,一样可以用在v-if这种判断,当有部份条件满足时即可。

.reduce

适合做阵列内数字上的操作,可用做加总或比大小等。
结构也有所不同:

arr.map(function( 最初的参数值或後续函式的前一个参数,若无特别指定,就会是这个fuction的}後面的起始值 , 原阵列的各项值 , 各项的索引值 ){
函式内容
},起始值)

若是对某数值做加总可写成

const newNumber = people.reduce(function (prev,a) {
    return prev + a.money;
},0);
//这边的newNumber结果就会是各项money的加总

理解上可想成,先以後面的起始值作为开始,加上第一个a.money的值,再以加总完的的值作为下一轮的起始值重复加总。
所以比大小的写法变成

const newNumber = people.reduce(function (prev,a) {
    return Math.max(prev,a.money);
},0);
//这边的newNumber结果就会是显示money中最大的值。

概念上就是跟起始值做比较,大的就变成起始值,再与下一个比较,最大的就会一直是起始值,然後回传这个值。



<<:  [Report] 怎麽插入图片

>>:  Outlook 开启後,工作管理员内的记忆体使用率一直增加

MLOps 带给商业与技术流程的5个好处与13个指标 | MLOps落地指南 - 流程篇

MLOps除了ML之外,另一部分则是DevOps(develop operations)。事实上,技...

[D03] 取样与量化(1)

我们在用电脑处理影像时,由於电脑只看得懂数字,所以影像必须要以离散(discrete)的形式处理,也...

前言:从零开始的程序学习之旅

第一次参与铁人赛真是兴奋阿! 我原本从事传统产业,在四年多的日子里总是觉得很痛苦, 这让我想转换跑道...

职位描述 (job description)

职位描述是职位设计的输出之一,它考虑了“分工”的原则,需要人力资源部和研发部进行协作。职位描述是确定...

2.4.8 Design System - Icon

因为疫情的关系 体会到很多事情都要持之以恒 在突然被打乱的生活节奏中 要怎麽找回另一个习惯的步调 ...