记录数组的一些高阶方法

分成以下两类:会改变原数组的和不会改变原数组的

一、会改变原数组的

1 .sort()
之前写过一篇 点击这里查看

二、不会改变原数组的

  1. concat
    连接两个数组,并且返回一个新数组
  var arr = [1,2,32,23,4,2,2,2]
  var arr2 = [6,7,8]
  var c = arr.concat(arr2)
  console.log(c)   //  [1, 2, 32, 23, 4, 2, 2, 2, 6, 7, 8]

如果是传一个空数组,那么会复制原来的数组,并且返回一个新数组;如果不加[ ],直接在里面写arr.concat(1,2,3),和写一个数组进去是一样的效果,估计是浏览器自动纠错的功能
这个不算高阶。。。

  1. map和forEach

map有地图的意思,还有映射的意思,可以这样理解,地图上的每一个点在真实世界里面都有一个对应的映射。

在map和forEach这些数组的方法里面,会传进去一个函数作为map方法的一个参数,这个函数里面的第一个参数指的是数组的value,第二格参数指的是数组的key,有时也会有第三个参数,指的是数组本身。

如下函数是map的一个用法

let score = [29,50,62,95,59]

let result = score.map(function(x,y){
  return x >= 60 ? '及格':'不及格'
})

console.log(result) // ["不及格", "不及格", "及格", "及格", "不及格"]

上面的map返回的是三元运算符的结果

  var arr = [1,2,32,23,4,2,2,2]
  var c = arr.map(function(x,y){
    return x*2
  })
  console.log(c)    //  [2, 4, 64, 46, 8, 4, 4, 4]

可以确定的是map会使遍历原数组,需要一个变量来接住map运算产生的结果,并且原数组是不会改变的。

阮一峰的教程上是这样解释的:

map方法对数组的所有成员依次调用一个函数,根据函数结果返回一个新数组。

map和forEach类似,区别是map会返回一个数组,内置的函数会传三个参数,第一个是value,第二个是key,第三个是这个数组本身,如果单纯的return 第三个参数,那么会打印length次,因为内部会循环length次。而forEach则不会返回。

下面来一个forEach的例子

let score = [29,50,62,95,59]

score.forEach(function(x,y){
  console.log(x*2)     // 29, 50, 62, 95, 59  在控制台上分行显示
})

console.log(score)  // [29, 50, 62, 95, 59]

forEach方法默认不会生成一个新数组,它是针对数组进行某项操作,最后的return 的结果是undefined

但是,也可以稍微改装一下,让它和map变成一样的结果,也可以间接地返回一个数组,但是仍然是有区别的

let score = [29,50,62,95,59]
let c = []
score.forEach(function(x,y){
  c.push(x * 2)
})

console.log(c)  // [58, 100, 124, 190, 118]
  1. filter
    和map类似,return 一个结果,返回符合这个结果的所有值
  var arr = [1,2,32,23,4,2,2,2]
  var c = arr.filter(function(x,y){
    return x % 2 == 0
  })
  console.log(c)  // [1, 32, 4, 2] 

filter本身有过滤的意思,它只会返回符合条件的结果,并且把这个结果扔进一个数组

  1. reduce
var arr = [1,2,3,1,2,2,2,1,2]
console.log(arr.reduce(function(x,y){
  return x +y
},0))  // 16

reduce会在函数后再跟一个参数,默认从这个参数开始计算,用来接收每次遍历计算出来的结果,上面的结果是表示从0开始,计算arr这个数组的和。如果return是用来计算乘法的,后面就用1来接收;也可以一个用空数组来接收。y代表当前值,x代表之前的一个值、一般都是代表用来做每次遍历接收值用的数。

上面的代码全部都是用x和y之类的作为变量名,把他们都换一个名字,就比较好理解了。

var arr = [1,2,3]
let a = arr.reduce(function(temp,item,index){
  return temp + item
},0)
console.log(a)

reduce里面的函数有三个参数,第一个参数是运算时的中间变量,第二个参数是数组里面的value,第三个是数组的下标。

在运算时,内部会像一个递归一样,执行多次,temp的初始值默认是undefined,也可以给它一个初始值,就像上例一样,在初始值处给它0,后面就递归的完成temp = temp + item的计算,计算完成后temp被返回出去。

比喻一下,范伟在打劫的时候,手上会拿一个袋子,这时候他说:“打打打打打... 劫,ip 、ic 、IQ卡,统统告诉我密码”,然后,他就拿着这个袋子去收东西,这个袋子,就是中间变量temp,默认里面是没有的(undefined),当然,范伟也可能会把自己的钱包放里面(函数后面再给一个数),范伟会往车厢里面走,别人的卡会依次被他收进袋子里面,收到最后最后一个人,就是最终范伟打劫所得的财产

再练习一个reduce
求下面这个数组里面奇数的和
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
如下:

let arr2 = arr1.reduce(function(temp, value){
  if(value % 2 === 1){
    temp = temp + value
  }
  return temp
})

值得一提的是 ,但我这样写的时候:

let arr2 = arr1.reduce(function(temp, value){
  if(value % 2 === 1){
    temp = temp + value
    return temp
  }
})

得出的结果是 NaN,后来才想明白,如果只在符合条件的时候return temp,那么这个函数会在不符合条件的时候默认添加一个 return undefined,undefined 和 前面 temp里面的数字相加,就会得出NaN的结果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容