JavaScript总结之18种常用数组方法

本篇文章给大家带来了关于javascript的相关知识,其中主要总结介绍了一些常用的数组方法,整理分成了不会改变原数组的方法和会改变原数组的方法,下面一起来看一下,希望对大家有帮助。

JavaScript总结之18种常用数组方法

【相关推荐:javascript视频教程、web前端】

众所周知,向后端请求数据,处理数据是前端工程师必备的技能,从后端请求回来的数据往往是数组的形式返回到前端,因此数组处理方法的重要性可想而知;数组的处理方法在MDN文档上很多,很多朋友在学习时往往会抓不住重点,导致事倍功半,但是大家不要担心,为大家总结了工作中常用的18种数组处理的方法

不会改变原数组的方法

forEach()方法

forEach()方法传入的参数是一个函数,内部传入的函数的形参第一个是item数组每一项的值,第二个是索引号index,它的返回值是undefined;
运行实例如下:
在这里插入图片描述
控制台输出结果
在这里插入图片描述

立即学习“Java免费学习笔记(深入)”;

filter()方法

filter()方法是筛选数组的方法,传入的参数和forEach方法一样,但是返回值为一个数组,实际应用是用来将获取到的数据中符合条件的数组筛选出来;
运行的实例如下:
在这里插入图片描述
控制台输出结果如下:
在这里插入图片描述

map()方法

map()方法传入的参数也同上,它的返回值也是一个新的数组;map()方法可以对数组的每一项进行相同的处理,运行的实例如下:
在这里插入图片描述

控制台的输出结果:
在这里插入图片描述

findIndex()方法

findIndex()方法顾名思义,是返回数组中的符合条件的第一项的索引号,如果找不到返回-1。传入的参数同上,运行实例如下所示:

let arr = [1, 3, 3, 4, 5, 6, 7]//findIndex方法,返回第一个符合条件哪一项的索引号,找不到返回-1const res = arr.findIndex((item) => item > 5)console.log(res)

登录后复制

控制台输出结果:
在这里插入图片描述

find()方法

find()方法是返回查找到的第一个符合条件的那一项,传入的参数同上。运行实例如下所示:

let arr = [1, 3, 3, 4, 5, 6, 7]//find()查找item,返回第一个符合条件的那一项,找不带返回undefinedconst res2 = arr.find((item) => {  return item > 5})console.log(res2)

登录后复制

控制台运行结果如下:
在这里插入图片描述

some()方法

some()方法传入的参数同上,返回值是布尔值,只要查找到一项符合条件就返回true;示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//some方法返回布尔值const bl = arr.some((item) => {  return item > 5})console.log(bl)

登录后复制

在这里插入图片描述

every()方法

every()方法传入的参数也是同上,返回值是布尔值,但是必须每一项都符合条件才返回true;示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//every()返回值为布尔值需要全部通过筛选条件才返回trueconst bl2 = arr.every((currentValue) => {  return currentValue < 10})console.log(bl2)

登录后复制

在这里插入图片描述

reduce()归纳函数

reduce()函数中的参数第一个参数是函数,第二个参数是暂存变量sum的类型,第一个参数函数有四个参数,不过常用的就是第一个参数为累加暂存变量(return就是这个值),第二个参数item。第三个是index,第四个是数组本身;代码示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//reduce()归纳函数const previousValue = 0const arrSum = arr.reduce((previousValue, currentValue) => {  return previousValue + currentValue}, 0)console.log(arrSum)

登录后复制

控制台输出结果如下:
在这里插入图片描述

concat()数组拼接

concat()将两个数组进行拼接,返回的是拼接完的新数组,不能给多维数组(数组套数组)进行拼接;
代码示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]
//concat 将两个数组进行拼接 , 返回的是一个新的数组
const newArr3 = [2, 5, 5, 6, 6, 8]
const concatArr = arr.concat(newArr3)
console.log(concatArr)

登录后复制

在这里插入图片描述

改变原数组的方法

push()/unshift()

push()/unshift()方法是分别在数组的最后面和最前面添加一个元素,返回值是新数组的长度;

//一下数组处理方法会改变原数组const Arr = [1, 3, 5, 6, 7, 8, 9]Arr.push(1)console.log(Arr)console.log(Arr)const a = Arr.unshift(1)console.log(a)

登录后复制

控制台输出结果如下:
在这里插入图片描述

pop()/shift()

此两种方法pop()是删除数组的最后一个值,shift()是删除数组的第一项的值;返回值是删除的那一项;

arr.pop(1)console.log(arr)arr.shift(1)console.log(arr)

登录后复制

控制台输出结果如下:
在这里插入图片描述

sort()/reverse()

sort()方法是排序,内部的参数是一个函数,function(a , b){ return a – b },通过此函数可以控制排序是降序函数升序,如果参数内部return a – b是降序,return a + b是升序;
reverse()是数组翻转,即将数组的元素倒序排列;代码示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort((a, b) => {  return a - b})console.log(arr)arr.reverse()console.log(arr)

登录后复制

在这里插入图片描述

splice()

splice()方法修改原数组,返回一个删除元素的新数组,负数就是从后往前数索引;传入的第一个参数是删除的起始元素的索引号,第二个参数是删除的元素的个数;

let arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

登录后复制

在这里插入图片描述

其它

flat()

flat()用于多维数组拍平,传入的参数是数组拍平的深度,也可以是infiniy,代表数组拍平的深度是无穷大
代码示例如下:

const Arr2 = [  [1, 2],  [2, 3],  [4, 5],  [5, 6],]console.log(Arr2.flat(Infinity))

登录后复制

控制台输出结果:
在这里插入图片描述

fill()

可以对数组进行填充:写法:Array.fill(1 , 2 , 4)数组中填充1 , 从索引值是2的元素开始, 到元素的索引号是4开始,不包括索引值是4的元素;填充的元素会覆盖原来对应索引号的元素;
代码示例如下:

const Arr2 = [  [1, 2],  [2, 3],  [4, 5],  [5, 6],]console.log(Arr2.fill(1, 0, 4))

登录后复制

控制台输出结果:
在这里插入图片描述

【相关推荐:javascript视频教程、web前端】

以上就是JavaScript总结之18种常用数组方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2700909.html

(0)
上一篇 2025年3月7日 19:10:43
下一篇 2025年3月7日 19:10:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript隐藏机制之垃圾回收知识总结

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了垃圾回收的相关问题,垃圾回收是javascript的隐藏机制,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、web前端】 一、前言 垃圾…

    2025年3月7日 编程技术
    200
  • JavaScript类数组和可迭代对象的实现原理详解

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于类数组和可迭代对象的实现原理,包括了把对象本身构造成迭代器、string的迭代器等等相关内容,下面一起来看一下吧,希望对大家有帮助。 【相关推荐:javascript…

    2025年3月7日 编程技术
    200
  • 一文搞定JavaScript的节点操作

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于节点操作的相关问题,包括了父级节点、子节点、兄弟节点、增加删除复制节点等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、web…

    2025年3月7日 编程技术
    200
  • 11个可以提升效率的chrome调试技巧

    本篇文章给大家分享11个chrome高级调试技巧,学会效率直接提升666%,希望对小伙伴们有帮助! chrome浏览器作为前端童鞋的老婆,相信你一定不陌生。调页面、写BUG、画样式、看php片少了它整个世界都不香了。 不信?一起来看看我们的…

    2025年3月7日 编程技术
    200
  • 简单了解JavaScript数据结构与算法之栈

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于栈的相关问题,包括了面向过程方法源码编写栈以及用面向对象的方法来源码书写等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、we…

    2025年3月7日
    200
  • JavaScript迭代器知识点总结

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于迭代器的相关问题,迭代就是指可以从一个数据集中按照一定的顺序,不断取出数据的过程,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、we…

    2025年3月7日 编程技术
    200
  • 深入聊聊JavaScript

    本篇文章给大家带来了关于javascript的相关知识,其中主要包括了为什么需要javascript引擎、浏览器内核与js引擎的关系、环境变量与记录等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、w…

    2025年3月7日
    200
  • 一篇搞定JavaScript DOM详细操作

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于dom详细操作的相关问题,包括了什么是dom、什么是dom tree、怎么获取dom等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视…

    2025年3月7日 编程技术
    200
  • JavaScript弱映射与弱集合知识详解

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于弱映射与弱集合的相关问题,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、web前端】 简单来讲,如果一个变量、对象是“不可达”的,那…

    2025年3月7日
    200
  • 一文搞定JavaScript字符串对象基本知识

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于字符串对象的相关问题,包括了一些基本概念和实际使用等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascript视频教程、web前端】 基本概念 基…

    2025年3月7日
    200

发表回复

登录后才能评论