前言

数组是 JavaScript 中常见数据类型之一,关于它的一些操作方法,我在这里做一下简单记录和总结。

今天主要介绍:

  • 如何找出数组中的重复/非重复元素
  • 数组扁平化方法

找出数组中的重复元素或非重复元素

双重循环 + slice,找出重复的元素。虽然只要求找出重复元素,但应该注意要顺便去重,否则外循环还是会对重复元素进行一遍检查;用 flag 记录重复次数,只在第一次重复的时候将元素放入新数组

function search(arr){let res = []let flag = 0for(let i = 0;i < arr.length;i++){for(let j = i+1;j<arr.length;j++){if(arr[i] === arr[j]){flag++if(flag == 1) res.push(arr[i])arr.splice(j,1)}    }flag = 0}return res
}

map + filter,记录每个元素出现的次数。有了重复次数,就可以筛选出重复元素、重复次数最多元素或者非重复元素:

function search(arr){const map = new Map()for(item of arr){if(!map.has(item)){map.set(item,1)} else {map.set(item,map.get(item)+1)}}// 找出重复元素,即出现次数大于1return [...map.entries()].filter(item => item[1] > 1).map(item => item[0])// 找出非重复元素,即出现次数等于1return [...map.entries()].filter(item => item[1] == 1).map(item => item[0])// 找出重复次数最多的元素return [...map.entries()].filter(item => item[1] == Math.max(...map.values())).map(item => item[0])
}

数组扁平化 / 数组降维

二维数组,以 [[],[{a:1}],[],[3,4],5] 为例,降维后得到 [{a:1},3,4,5]

二维数组:双重循环

需要检查是否每个元素都是数组

function flatten(arr){const res = []for(let i = 0;i < arr.length; i++){if(Array.isArray(arr[i])){for(let j = 0;j < arr[i].length;j++){res.push(arr[i][j])}            } else {res.push(arr[i])}      }return res
}

二维数组:循环 + concat

concat 本身就可以给数组降维一次

function reduceDiemension(arr){const res = []for(let i = 0;i < arr.length;i++){res = res.concat(arr[i])}return res
}

二维数组:reduce + concat

上面的过程本身是一种归并,所以考虑使用 reduce

function flatten(arr){return arr.reduce((acc,cur) => acc.concat(cur),[])
}

二维数组:展开 / apply + concat

通过展开原数组或者将其作为 apply 的第二个参数,把数组转化为一个参数列表

function flatten(arr){// return [].concat([],arr)return [].concat(...arr)
}

多维数组,以下面的数组为例:

const arr = [1,[2,[3],[4,5,6],[7,8,9],10,11],12,13,[15,16,17]
]

降维后得到 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17]

多维数组:toString + split

数组降维可以看作是把所有的括弧都去掉,而数组的 toString 方法刚好可以做这个事,之后再调用字符串的 split 把字符串转换回数组即可。但这个方法很局限,要求数组元素的数据类型都相同。

function flattern_numberArray(arr){return arr.toString().split(",").map(x => Number)
}

多维数组:forEach + 递归

function flatten(arr){const res = []arr.forEach(item => {if(Array.isArray(item)){flatten(item)} else {res.push(item)}})return res
}

多维数组:reduce + 递归

同理,上面的过程是一种归并,可以使用 reduce 完成。需要注意的是,reduce 的回调函数必须返回一个数组,所以不要再用 push 了

function flatten(arr){return arr.reduce((acc,cur) => {if(Array.isArray(cur)){return [...acc , ...flatten(cur)]    } else {return [...acc,cur]}},[])
}

多维数组:while + some

只要数组中还有数组,就使用 concat 给这个数组降维。这个方法可以不使用递归

function flatten(arr){    while(arr.some(item => Array.isArray(item))){arr = [].concat(...arr)}return arr
}

不确定维数的数组: flat

数组降维,直接用之前讲过的 flat 是最简单的。默认传参 1,表示降维一次;可以传参 Infinity,实现完全降维,最终得到一个一维数组。

~
本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

JavaScript 数组常见操作 (二)相关推荐

  1. Java数组常见操作

    Java数组常见操作 文章目录 Java数组常见操作 7.0 数组的遍历 1.使用foreach循环访问数组中每个元素. 2.使用简单的for循环(多层循环嵌套)来遍历数组. 7.1 数组长度 7.2 ...

  2. Javascript数组常见的方法

    分为两种:原型(实例)方法和静态函数 第一类:原型方法: 栈方法(后进先出) push 参数:任意个 作用:将任意数量的参数逐个添加到数组尾部 返回值: 新数组的长度 影响:破坏了原数组 pop 参数 ...

  3. php 读取mysql 二维数组_PHP操作 二维数组模拟mysql函数

    PHP操作 二维数组模拟mysql函数 public function monimysqltest(){ $testarray=array( array('ss'=>'1','dd'=>' ...

  4. JAVA-初步认识-第五章-数组-常见操作-最值

    一. 最值 数组的操作是对数组中的元素进行操作,有时需要对元素的位置重新进行安排,有时仅需要提供题目需要的那个数据. 在视频没有讲解怎么做之前,我先提供一个思路.得出最值肯定是一个一个地比较出来的,这 ...

  5. JavaScript数组常用操作大全

    头部添加 unshift var arr=[12,5,'bmw']: var tmp = arr.unshift('qq'); document.write(tmp); //返回数组长度 ------ ...

  6. JAVA-初步认识-第五章-数组-常见操作-进制转换(查表法)

    一. 数组的常见应用 数组在开发中什么时候用? 举例说明: 需求:获取一个整数的十六进制表现形式(要明白十六进制的表现形式是什么样子,有数字有字母) 本来应该返回一个字符串,但是还没有学到返回字符串, ...

  7. javascript数组的操作

    数组的标准定义是:一个存储元素的线性集合(collection),元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量. 而在javascript中,数组是一组特殊的对象. 1 ...

  8. Java 数组常用操作二(扩充、扩容、重复数据、动态数组、数组差集、数组交集、查找指定元素、判断是否相同、数组合并)

    数组扩容(扩充) public class Main {public static void main(String[] args) {String[] names = new String[] { ...

  9. 数组常见操作:数组中元素的查找

    package day4;/*** 数组中元素的查找*/ public class ArrDemo10 {public static void main(String[] args) {int[] a ...

最新文章

  1. sql 多行转成一行
  2. 在ubuntu 下 利用svn命令导出 两个版本之间更改的文件
  3. 1060. [ZJOI2007]时态同步【树形DP】
  4. 十进制中正整数N中1的个数(2)
  5. kafka解决了什么问题?
  6. 高频hf调制方式_收藏!AM的三种调制电路
  7. Java编程中值得注意的对象引用现象
  8. 京东面试官:呦,你对中间件 Mycat了解的还挺深~
  9. 买不起房怕什么,本田说自动驾驶房车才是未来趋势
  10. zabbix4.2中163邮箱25端口无法发送邮件
  11. Python - shutil模块(2)——压缩目录、文件
  12. 龙星计划机器学习笔记
  13. linux中telnet工具,linux中telnet工具的介绍和使用
  14. 毕业论文Word排版专题
  15. php中文离线手册 chm_PHP官方中文手册2017最新完整版 带用户注释 chm
  16. win7窗口颜色没有透明的解决方法
  17. Matlab【光学】波动光光学系统
  18. xp计算机护眼模式,xp系统桌面上老是显示护眼模式!(图)
  19. TCP/IP协议是什么计算机网络基础理论
  20. YAPI简单使用教程

热门文章

  1. fastclick.js解决移动端(ipad)点击事件反应慢问题
  2. Ubuntu14.04安装中文输入法以及解决Gedit中文乱码问题
  3. dill:解决python的“AttributeError: Can‘t pickle local object”及无法pickle lambda函数的问题
  4. 使用jQuery在AJAX请求中添加标头
  5. 在C#中将字符串转换为字节数组
  6. Linux下redis的安装及部署
  7. 远程打开其他电脑的computer management
  8. 聊天机器人mysql数据_自己动手开发智能聊天机器人完全指南(附完整源码)
  9. gulp html页面路径,通过gulp-connect部署静态页面,html页面中include路径无法get!
  10. mysql第二天无法连接_jdbc 连接mysql 第二天就连接不成功,什么原因?-问答-阿里云开发者社区-阿里云...