总结20个常见的JavaScript数组操作

javascript中的array对象与其他编程语言中的数组一样,是一组数据的集合。在javascript中,数组里面的数据可以是不同类型的,并具有用于执行数组常见操作的方法。

声明数组

有三种不同的声明方式

1. 常规方式

const hobbys = new Array()hobbys[0] = 'Basketball'hobbys[1] = 'Badminton'hobbys[2] = 'swimming'console.log(hobbys)// [ 'Basketball', 'Badminton', 'swimming' ]

2. 简洁方式

const hobbys = new Array('Basketball', 'Badminton','swimming')console.log(hobbys)// [ 'Basketball', 'Badminton', 'swimming' ]

3. 字面

const hobbys = ['Basketball','Badminton','swimming']console.log(hobbys)// [ 'Basketball', 'Badminton', 'swimming' ]

Array 对象方法

1. forEach

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。没有返回值,本质上等同于 for 循环,对每一项执行 function 函数。不会改变原数组。

// currentValue:必需,当前元素 index:可选,当前元素的索引值 arr:可选,当前元素所属的数组对象。array.forEach(function(currentValue, index, arr))
let array = ['a', 'b', 'c']let func = (currentValue, index, arr) => {  currentValue += 's'    console.log('currentValue:' + currentValue + ' index:' + index + ' arr:' + arr)}array.forEach(func)console.log(array)// 控制台输出:// currentValue:as index:0 arr:a,b,c// currentValue:bs index:1 arr:a,b,c// currentValue:cs index:2 arr:a,b,c// [ 'a', 'b', 'c' ]

2. map

通过指定函数处理数组的每个元素,并返回处理后的数组。

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。方法按照原始数组元素顺序依次处理元素。不会改变原数组。

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

// currentValue:必须,当前元素的值  index:可选,当前元素的索引值 arr:可选,当前元素属于的数组对象array.map(function(currentValue,index,arr))
let array = [1, 2, 3, 4, 5]let result = array.map((item) => {   return item += 5})console.log(array)console.log(result)// [ 1, 2, 3, 4, 5 ]// [ 6, 7, 8, 9, 10 ]

3. concat

JavaScript中的 concat() 方法用来连接两个或更多的数组,并返回结果。

// array1, array2, ..., arrayN 必需,该参数可以是具体的值,也可以是数组对象,可以是任意多个array1.concat(array2,array3,...,arrayN)
const array1 = ['a', 'b', 'c']const array2 = ['d', 'e', 'f']const array3 = array1.concat(array2)console.log(array3)const array4 = array1.concat('123')console.log(array4)// [ 'a', 'b', 'c', 'd', 'e', 'f' ]// [ 'a', 'b', 'c', '123' ]

4. push

Javascript数组中的 push() 方法用来向数组的末尾添加一个或更多元素,并返回新的长度。

let fruits = ["Banana", "Orange", "Apple", "Mango"]let length = fruits.push("Kiwi")console.log(fruits)console.log(length)// [ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]// 5

5. unshift

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

let fruits = ["Banana", "Orange", "Apple", "Mango"]let length = fruits.unshift("Lemon", "Pineapple")console.log(fruits)console.log(length)// [ 'Lemon', 'Pineapple', 'Banana', 'Orange', 'Apple', 'Mango' ]// 6

6. pop

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

let sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu']let result = sites.pop()console.log(sites)console.log(result)// [ 'Google', 'Runoob', 'Taobao', 'Zhihu' ]// Baidu

7. shift

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

let fruits = ["Banana", "Orange", "Apple", "Mango"];let result = fruits.shift()console.log(fruits)console.log(result)// [ 'Orange', 'Apple', 'Mango' ]// Banana

8. splice

splice() 方法用于添加或删除数组中的元素,并返回删除的元素数组

// 参数 Values: index: 必需,规定从何处添加/删除元素// howmany: 可选,规定应该删除多少元素 必须是数字,但可以是 "0"// item1, ..., itemX 可选,要添加到数组的新元素array.splice(index,howmany,item1,.....,itemX)
let fruits = ["Banana", "Orange", "Apple", "Mango"]let result = fruits.splice(1, 2, "Lemon", "Kiwi")console.log(fruits)console.log(result)// [ 'Banana', 'Lemon', 'Kiwi', 'Mango' ]// [ 'Orange', 'Apple' ]

9. slice

slice() 方法可从已有的数组中返回选定的元素。也可提取字符串的某个部分,并以新的字符串返回被提取的部分。不会改变原数组。

先见AI 先见AI

数据为基,先见未见

先见AI 95 查看详情 先见AI

// start: 可选,规定从何处开始选取 若为负值,表示从原数组中的倒数第几个元素开始提取// end: 可选,规定从何处结束选取 如果没有指定该参数,那么切分的数组包含从start到数组结束的所有元素array.slice(start, end)
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]let result1 = fruits.slice(1, 3)let result2 = fruits.slice(2)console.log(fruits)console.log(result1)console.log(result2)// [ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ]// [ 'Orange', 'Lemon' ]// [ 'Lemon', 'Apple', 'Mango' ]

10. join

join() 方法可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是您还可以规定分隔符

// separator: 可选,指定要使用的分隔符 如果省略该参数,则使用逗号作为分隔符array.join(separator)
let fruits = ["Banana", "Orange", "Apple", "Mango"];let energy1 = fruits.join();let energy2 = fruits.join('-');console.log(energy1)console.log(energy2)// Banana,Orange,Apple,Mango// Banana-Orange-Apple-Mango

11. every

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

array.every(function(currentValue,index,arr))
let ages = [32, 33, 16, 40]let nums = [32, 33, 19, 40]function checkAdult(age) {  return age >= 18}function checkNums(num) {  return num >= 18}// 16不满足大于18,故结果falselet result1 = ages.every(checkAdult)// 每一项都满足条件,故结果truelet result2 = nums.every(checkNums)console.log(result1)console.log(result2)// false// true

12. filter

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。不会改变原数组。

array.filter(function(currentValue,index,arr), thisValue)
let ages = [32, 33, 16, 40];function checkAdult(age) {  return age >= 18;}let result = ages.filter(checkAdult)console.log(result)// [ 32, 33, 40 ]

13. indexOf

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。没有找到会返回-1

// searchvalue: 必需。规定需检索的字符串值。// start: 可选的整数参数。规定在字符串中开始检索的位置。值:0~array.length-1string.indexOf(searchvalue,start)
let str = "Hello world, welcome to the universe.";// 输出w所在的下标索引13(空格也算),没有找到会返回-1let n = str.indexOf("welcome");console.log(n)console.log(str[n])// 13// w

14. reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
let numbers = [2, 3, 5, 6]function getSum(total, num) {  return total + num}let result = numbers.reduce(getSum, 0)console.log(result)// 16

15. reverse

reverse() 方法用于颠倒数组中元素的顺序。会改变原数组,并返回改变顺序的数组。

let fruits = ["Banana", "Orange", "Apple", "Mango"]let resut = fruits.reverse()console.log(fruits)console.log(resut)// [ 'Mango', 'Apple', 'Orange', 'Banana' ]// [ 'Mango', 'Apple', 'Orange', 'Banana' ]

16. sort

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。

// sortfunction: 可选。规定排序顺序。必须是函数。array.sort(sortfunction)
let fruits = ["Banana", "Orange", "Apple", "Mango"]let ages = [9, 3, 4, 5, 7, 10]// 升序let agesFunAsc = function (ag1,ag2) {  return ag1 - ag2}// 降序let agesFunDes= function (ag1,ag2) {  return -(ag1 - ag2)}fruits.sort()ages.sort(agesFunAsc)console.log(fruits)console.log(ages)ages.sort(agesFunDes)console.log(ages)// [ 'Apple', 'Banana', 'Mango', 'Orange' ]// [ 3, 4, 5, 7, 9, 10 ]// [ 10, 9, 7, 5, 4, 3 ]

17. toString

toString() 方法用于把数字转换为字符串。

number.toString(radix)
let num = 15let n = num.toString()// 也可以使用不同的进制把一个数字转换为字符串// 2进制let b = num.toString(2);// 8进制let c = num.toString(8);// 16进制let d = num.toString(16);console.log(n)console.log(b)console.log(c)console.log(d)// 15// 1111// 17// f

18. at

at()方法接受整数值并返回at索引的值,正整数和负整数皆可。负整数表示从数组的最后一项开始倒数。

array.at(index)
let str = 'helso word'let item1 = str.at(2)let item2 = str.at(-1)console.log(item1)console.log(item2)// l// d

19. find

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

array.find(function(currentValue, index, arr),thisValue)
let ages = [3, 10, 18, 20];function checkAdult(age) {  return age >= 18;}let value = ages.find(checkAdult)console.log(value)// 18

20. some

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

array.some(function(currentValue,index,arr),thisValue)
let ages = [3, 10, 19, 20];function checkAdult(age) {  return age > 18;}let result = ages.some(checkAdult)console.log(result)// true

以上就是总结20个常见的JavaScript数组操作的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
智学网app怎么查看错题本_智学网app错题本功能使用与个人错题查看方法
上一篇 2025年11月9日 15:29:32
iphone16如何开启开发者模式_iPhone 16开发者选项开启教程
下一篇 2025年11月9日 15:29:40

相关推荐

  • 修复Django电商项目中AJAX过滤产品列表图片不显示问题

    在Django电商项目中,当使用AJAX动态加载过滤后的产品列表时,常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式(如data-setbg属性结合JavaScript库)与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片,确保浏览…

    2026年5月10日
    000
  • 前端缓存策略与JavaScript存储管理

    根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑,能显著提升前端性能;合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API,结合缓存策略与定期清理机制,可在保证用户体验的同时避免安全与性能隐患。 前端缓存和JavaScript存…

    2026年5月10日
    200
  • JavaScript 高效判断页面所有复选框状态的技巧与实践

    本文旨在提供一套高效且专业的javascript方法,用于判断网页中所有复选框的选中状态。我们将探讨如何利用`array.some()`快速确定是否有未选中的复选框(进而判断是否全部选中),以及如何使用`array.filter()`统计选中和未选中的复选框数量。通过优化dom元素选择和数组操作,提…

    2026年5月10日
    100
  • 从 JavaScript 获取 URL 并在 PHP DataGrid 中使用

    本文档旨在指导开发者如何从 JavaScript 函数中获取 URL,并将其动态应用于 PHP DataGrid。通过前端 JavaScript 动态生成 API 地址,并将其传递给后端的 PHP DataGrid,实现数据根据用户会话动态加载。 动态配置 DataGrid 的 URL 在构建动态 …

    2026年5月10日
    100
  • 控制HTML Canvas颜色空间输出24位深度TIFF图像

    本教程详细介绍了如何在web前端环境中,特别是结合`html2canvas`和`canvas-to-tiff`库时,通过明确设置html canvas的颜色空间为`srgb`,从而确保输出24位深度的tiff图像。文章将提供具体的javascript代码示例,并解释其原理,帮助开发者解决canvas…

    2026年5月10日
    200
  • HTML中如何实现MathML

    答案是利用HTML5原生支持MathML,只需将MathML代码嵌入标签即可,现代浏览器能直接渲染,无需插件;通过CSS可美化公式样式,如字体、颜色、间距等,提升显示效果;对于老旧浏览器,推荐使用MathJax作为兼容方案,支持LaTeX输入并渲染为高质量公式,兼顾可访问性与跨浏览器兼容性。 在HT…

    2026年5月10日
    000
  • JavaScript Electron桌面应用

    答案:使用JavaScript开发%ignore_a_1%桌面应用需结合Web技术与Node.js,通过主进程管理窗口、渲染进程展示界面,并利用IPC通信,调用系统功能如文件对话框,最后用electron-builder打包发布,注意安全与进程职责分离。 用JavaScript开发Electron桌…

    2026年5月10日
    000
  • 如何通过浏览器扩展实现快速HTML代码编辑的处理方法

    答案:通过浏览器扩展可实现快速HTML编辑,提升开发效率。首先选择如EditThisPage、Live HTML Editor、Web Developer或Scratchpad for Chrome等工具,安装后启用扩展的页面内编辑功能,直接修改DOM并实时预览;修改仅限当前会话,刷新即失效,适合临…

    2026年5月10日
    000
  • PHP代码注入检测日志分析_PHP代码注入日志检测方法详解

    答案:日志分析是发现PHP代码注入的关键手段,主要通过Web服务器访问日志、PHP错误日志、PHP-FPM日志及应用自定义日志等多源数据,结合grep、ELK、WAF等工具识别含eval()、system()、Base64编码、目录遍历等特征的异常请求,并建立基线、设置检测规则与自动化告警,配合事件…

    2026年5月10日
    000
  • JavaScript中为动态列表元素创建唯一悬停描述的教程

    本教程旨在解决如何为动态生成的列表或数组元素分配唯一悬停描述(tooltip)的问题。文章将深入探讨使用javascript对象和map数据结构来高效地管理名称与描述的映射关系,并提供具体的代码示例,以实现每个列表项在鼠标悬停时显示不同的自定义信息,同时兼顾性能与数据顺序的需求。 在网页开发中,我们…

    2026年5月10日
    000
  • Go语言与Microsoft SharePoint集成指南

    Go语言可以有效集成Microsoft SharePoint,主要通过两种途径:一是利用SharePoint提供的RESTful API进行数据交互,Go的标准HTTP客户端库即可轻松实现;二是通过SharePoint应用模型开发自托管应用,这种模型支持使用包括Go在内的任何语言编写后端逻辑。 1.…

    2026年5月10日
    000
  • javascript生命周期钩子是什么_组件有哪些关键阶段?

    JavaScript原生无生命周期钩子,这是Vue、React等框架为组件设计的机制;Vue按创建、挂载、更新、卸载四阶段提供对应钩子,React类组件有明确生命周期方法,函数组件则通过useEffect模拟,其核心价值在于精准控制执行时机以避免DOM操作错误和内存泄漏。 JavaScript 本身…

    2026年5月10日
    100
  • 如何安全有效地从外部网页获取HTML元素数据并应用于自身页面

    本教程旨在解决如何在不同域名下,通过javascript获取并使用另一个网页的html元素数据。文章将深入探讨同源策略的限制,并提供两种主要解决方案:使用` 在现代Web开发中,有时我们需要从外部网站获取特定的HTML内容或属性值,并将其整合到我们自己的网页中。例如,从XYZ.COM/B.html页…

    2026年5月10日
    100
  • 怎么安装html5_HTML5开发环境安装与配置详细步骤

    答案是配置HTML5开发环境需三步:1. 安装VS Code等编辑器并配置插件;2. 使用Chrome或Firefox测试页面;3. 可选搭建本地服务器,如Live Server或http-server;最后创建index.html文件验证环境。 安装HTML5开发环境其实并不复杂,因为HTML5本…

    2026年5月10日
    000
  • JavaScript动态下拉菜单:实现日期选项与价格计算关联

    在现代web应用中,动态生成表单元素并使其具备交互逻辑是常见的需求。特别是在需要根据用户选择调整价格或服务参数的场景下,下拉菜单()常被用来展示一系列选项。本教程将指导您如何利用javascript动态生成一个包含日期选项的下拉菜单,并为每个选项关联一个具体的数值(如剩余天数),进而实现一个基于用户…

    2026年5月10日
    000
  • 从视频链接中提取视频时长的前端实现教程

    从视频链接中提取视频时长的前端实现教程从视频链接中提取视频时长的前端实现教程从视频链接中提取视频时长的前端实现教程从视频链接中提取视频时长的前端实现教程

    本文详细介绍了如何在%ignore_a_1%通过javascript从html “ 元素中提取视频时长。核心方法是利用视频元素的 `loadeddata` 事件,确保视频元数据加载完成后,再访问其 `duration` 属性。教程将提供完整的html和javascript代码示例,并讨论相关注意事…

    2026年5月10日 用户投稿
    100
  • 使用SMTP.js发送邮件:客户端集成、常见问题与最佳实践指南

    本文深入探讨了使用SMTP.js库在前端发送邮件时可能遇到的问题,特别是与Elastic Email集成时的挑战。我们将分析代码中常见的异步处理错误、条件函数定义陷阱,并提供修正后的代码示例和最佳实践。重点强调了正确处理Promise链、确保函数可访问性以及客户端邮件发送的安全考量,帮助开发者构建更…

    2026年5月10日
    000
  • 前端性能监控如何量化JavaScript的加载时间?

    通过Performance API可精确量化JavaScript加载时间,首先调用performance.getEntriesByType(‘resource’)获取资源加载记录,筛选出mimeType为application/javascript或URL含.js的条目,提取…

    2026年5月10日
    000
  • 使用CSS Grid实现不规则列布局:告别传统表格的限制

    本教程详细阐述如何利用css grid实现复杂的、不规则的列布局,尤其适用于那些传统html表格难以实现的块状结构。文章将通过具体的css属性和html结构示例,指导读者如何定义网格、控制子项的跨度与位置,以及优化自动布局流程,从而高效构建灵活且响应式的页面布局。 1. 传统表格的局限与CSS Gr…

    2026年5月10日
    000
  • 如何在仅表单ID唯一时精确选择表单内部元素进行CSS样式定制

    当网页中存在多个结构相似的表单,且其内部元素(如输入框、按钮)的类名或标签名不唯一时,通过css为特定表单进行独立样式定制会面临挑战。本文将详细介绍如何利用表单的唯一id作为父选择器,结合后代选择器,精确地定位并样式化目标表单内的任意元素,从而避免样式冲突,实现精细化控制。 精准定位表单元素的CSS…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信