返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript数组常见操作技巧(二)
  • 178
分享到

JavaScript数组常见操作技巧(二)

2024-04-02 19:04:59 178人浏览 安东尼
摘要

目录一、出数组中的重复元素或非重复元素二、数组扁平化 / 数组降维二维数组:双重循环二维数组:循环 + concat二维数组:reduce + concat二维数组:展开 / app

前言:

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

今天主要介绍:

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

一、出数组中的重复元素或非重复元素

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

function search(arr){
    let res = []
    let flag = 0
    for(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)
        }
    }
    // 找出重复元素,即出现次数大于1
    return [...map.entries()].filter(item => item[1] > 1).map(item => item[0])
    // 找出非重复元素,即出现次数等于1
    return [...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 数组常见操作技巧 (二)的文章就介绍到这了,更多相关JavaScript 数组操作技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript数组常见操作技巧(二)

本文链接: https://lsjlt.com/news/138263.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript数组常见操作技巧(二)
    目录一、出数组中的重复元素或非重复元素二、数组扁平化 / 数组降维二维数组:双重循环二维数组:循环 + concat二维数组:reduce + concat二维数组:展开 / app...
    99+
    2024-04-02
  • JavaScript数组常见操作技巧
    目录一、创建数组二、判断是不是数组三、类数组和数组的转换四、数组去重1.利用 set 去重2.双重循环 + splice3.新建数组 + includes4.reduce + inc...
    99+
    2024-04-02
  • JavaScript数组常见操作技巧有哪些
    这篇文章主要介绍“JavaScript数组常见操作技巧有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript数组常见操作技巧有哪些”文章能帮助大家解决问题。一、创建数组创建数组是基...
    99+
    2023-06-29
  • JavaScript中数组常见的操作技巧分享
    这篇文章主要讲解了“JavaScript中数组常见的操作技巧分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中数组常见的操作技巧分享”...
    99+
    2024-04-02
  • PHP数组常见操作技巧大揭秘
    PHP是一种常用的服务器端脚本语言,被广泛用于开发Web应用程序。在PHP中,数组是一种非常常见且重要的数据类型,经常用于存储和操作一组数据。本文将揭秘PHP数组常见操作技巧,通过具体...
    99+
    2024-03-14
    技巧 php 数组操作
  • JavaScript数组操作技巧有哪些
    这篇“JavaScript数组操作技巧有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript数组操作技巧有...
    99+
    2023-06-27
  • JavaScript数组常见操作有哪些
    这篇文章主要为大家展示了“JavaScript数组常见操作有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript数组常见操作有哪些”这篇文章吧...
    99+
    2024-04-02
  • 总结20个常见的JavaScript数组操作
    JavaScript中的Array对象与其他编程语言中的数组一样,是一组数据的集合。在JavaScript中,数组里面的数据可以是不同类型的,并具有用于执行数组常见操作的方法。声明数组有三种不同的声明方式1. 常规方式const hobby...
    99+
    2023-05-14
    前端
  • 20个常见的JavaScript数组操作总结
    目录声明数组1. 常规方式2. 简洁方式3. 字面Array 对象方法1. forEach2. map3. concat4. push5. unshift6. pop7. shift...
    99+
    2024-04-02
  • JavaScript中二维数组的创建技巧
    Js中二维数组的创建: 首先JavaScript只支持 一维数组 ,但我们可以通过一些方法实现矩阵以及多维数组 其中普通的创建方法并不会出现什么问题: (1) 利用一维数组嵌套一维数...
    99+
    2024-04-02
  • JavaScript数组操作之旋转二维数组
    目录一、题目描述二、思路与实现三、总结一、题目描述 给定一个 n × n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90...
    99+
    2024-04-02
  • PHP数组的常见操作和常用函数
    一.数组遍历 在操作数组时,经常需要依次访问数组中的每个元素,这种操作称为数组的遍历。 在PHP中,通常使用foreach语句实现数组的遍历,其语法格式有两种,具体如下:  以上两种语法格式都是通过foreach语句来实现对数组的遍历,不同...
    99+
    2023-09-05
    php 开发语言
  • Python中字符串的常见操作技巧总结
    本文实例总结了Python中字符串的常见操作技巧。分享给大家供大家参考,具体如下: 反转一个字符串 >>> S = 'abcdefghijklmnop' >>> S[...
    99+
    2022-06-04
    字符串 操作技巧 常见
  • Python中文件操作的常见问题及技巧
    Python中文件操作的常见问题及技巧一、文件操作的常见问题文件路径问题:当我们需要操作文件时,首先需要确保我们对文件的路径是正确的。常见的问题包括:文件路径不存在:当我们指定的文件路径不存在时,Python会抛出FileNotFoundE...
    99+
    2023-10-22
    文件拷贝 文件路径处理 常见问题:文件读写 文件不存在处理 技巧:文件追加写入
  • Python中最常见的文件操作技巧有哪些
    本篇内容介绍了“Python中最常见的文件操作技巧有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!打开&关闭文件读取或写入文件前...
    99+
    2023-06-16
  • C#中的字符串操作常见技巧是什么
    在C#中,常见的字符串操作技巧包括: 字符串连接:使用“+”运算符或String.Concat()方法将多个字符串连接起...
    99+
    2024-04-03
    C#
  • Java中数组的常见操作合集
    目录数组的常见操作数组越界异常数组空指针异常数组遍历数组获取最大值元素数组反转数组作为方法参数和返回值数组作为方法参数数组作为方法返回值数组的常见操作 数组越界异常 public s...
    99+
    2024-04-02
  • MySQL数据库的常用操作和技巧
    本篇内容主要讲解“MySQL数据库的常用操作和技巧”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“MySQL数据库的常用操作和技巧”吧!  使用MySQL数据库,...
    99+
    2024-04-02
  • winxp 的常用操作及技巧
    <清除 WinXP Shared Folders--就是在“我的计算机“里那些碍眼的分享数据夹> --请从registry删掉以下code-- HKEY_LOCAL_MACHINE ...
    99+
    2023-05-23
    winxp 的常用 技巧 操作
  • Python数组操作有哪些高级技巧?
    Python是一种功能强大的编程语言,广泛应用于数据科学和机器学习领域。在Python中,数组是一种常见的数据结构,它可以存储多个元素,并且可以进行各种操作。本文将介绍Python数组操作中的一些高级技巧。 使用numpy库 Numpy...
    99+
    2023-10-17
    数组 laravel spring
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作