JavaScript中数组的骚操作

本文只要讲述一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等
注:轻奢版就是便捷的实现方法,原始版是这个方法还没有出现之前是怎么实现的(只列举了前两个)

  • 扁平化n维数组

轻奢版

[1,[2,3]].flat(2) //[1,2,3]
[1,[2,3,[4,5]]].flat(3) //[1,2,3,4,5]
[1,[2,3,[4,5,[6]]]].flat(Infinity) //[1,2,3,4,5,6]

Array.flat(n)是扁平数组的api, n表示维度, n值为 Infinity时维度为无限大。

原始版

function flatten(arr){
    while(arr.some(item=>Array.isArray(item))){
        arr = [].concat(...arr)
    }
    return arr;
}
flatten([1,[2,3]]);//[1, 2, 3]
flatten([1,[2,3,[4,5]]]);//[1, 2, 3, 4, 5]

实质是利用递归和数组合并方法,concat实现扁平


去重

轻奢版

Array.from(new Set([1,2,3,4,3,2,1]));//[1, 2, 3, 4]
[...new Set([1,2,3,4,3,2,1])];//[1, 2, 3, 4]

set是ES6新出来的一种定义不重复数组的数据类型。
Array.from是将类数组转化为数组。
...是扩展运算符,将set里面的值转化为字符串。

原始版

Array.prototype.distinct = function(){
    var arr = this,
    result = [],
    i,
    j,
    len = arr.length;
    for(i = 0;i < len;i++){
        for(j=i+1;j<len;j++){
            if(arr[i] === arr[j]){
                j = ++i;
            }
        }
    result.push(arr[i])
    }
    return result;
}
[1,2,3,4,3,1,2,3,5].distinct();//[4, 1, 2, 3, 5]

取新数组存值,循环两个数组相比较


排序

[1,2,4,3,0].sort();//[0, 1, 2, 3, 4]  默认升序
[1,2,4,3,0].sort((a,b)=>b-a);//[4, 3, 2, 1, 0] 降序

sort是js内置的排序方法,参数为一个函数


最大值

Math.max(...[1,2,3,4]);//4
Math.max.apply(this,[1,2,3,4]);//4
[1,2,3,4].reduce((prev,cur,curIndex,arr) => {
    return Math.max(prev,cur)
},0);//4

Math.max()是Math对象内置的方法,参数是字符串
reduce是ES5的数组api,参数有函数和默认初始值
函数有四个参数:

  • pre :上一次的返回值
  • cur :当前值
  • curIndex :当前值索引
  • arr:当前数组

求和

[1,2,3,4,5].reduce(function(prev,cur){
    return prev + cur;
},0); // 15

合并

[1,2,3,4].concat([5,6]);//[1, 2, 3, 4, 5, 6]
[...[1,2,3,4],...[5,6]];//[1, 2, 3, 4, 5, 6]

判断是否包含值

[1,2,4].includes(3);//false
[1,2,4].indexOf(3);//-1 如果存在返回索引
[1,2,4].find((item)=>item===2);//2 如果数组中无值返回undefined
[1,2,4].findIndex((item)=>item===1);//0 如果数组中无值返回-1

类(伪)数组转化

Array.prototype.slice.call(arguments);//arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments);
Array.from(arguments);
[...arguments]

类(伪)数组:表示length属性,但是不具备数组的方法
call,apply:改变slice里面的this只想arguments,所以arguments也可调用数组的方法
Array.from:将类似数组或可迭代对象创建为数组
...:将类数组拓展为字符串,再定义为数组


每一项都设置值

[1,2,3,4].fill(false);//[false, false, false, false]

每一项是否满足

[1,2,3,4].every(item => {return item > 2});//false

有一项满足

[1,2,3,4].some(item => {return item > 2});//true

过滤数组

[1,2,3].filter(item=>{return item>2});//[3]

对象和数组转化

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

推荐阅读更多精彩内容