javascript之数组方法总结

javascript之数组方法总结

  • forEach遍历数组(不返回数组)
  • map迭代数组(返回新数组)
  • join方法
  • reduce累计器(返回累计处理结果)
  • filter过滤数组(返回新数组)
  • sort排序
  • splice删除
  • find查找元素
  • every检测
  • some检测
  • 伪数组转换为真数组
  • pop删除末尾元素
  • shift删除首位元素
  • push新增末尾
  • unshift新增开头

forEach遍历数组(不返回数组)

forEach方法用于调用数组的每个元素,并将元素传递给回调函数
语法:

被遍历的数组.forEach(function(当前数组元素,当前元素索引号){
//函数体
})

注意:
1.forEach主要是遍历数组
2.参数当前数组元素是必须要写的,索引号可选。

 //forEach就是遍历,不返回数组,加强版的for循环,适合遍历数组对象
 const arr=['red','green','pink']
 const result=arr.forEach(function(item,index){
   console.log(item)//数组元素red green pink
   console.log(index)//索引号
 })

map迭代数组(返回新数组)

map可以遍历数组处理数据,并且返回新数组
map也称为映射,指两个元素的集之间元素相互对应的关系。
map重点在于有返回值,forEach没有返回值

 const arr = ['red', 'blue', 'green']
    // map 方法也是遍历  处理数据  可以返回一个数组
    const newArr = arr.map(function (item, i) {
      // console.log(item)  // 数组元素  'red'
      // console.log(i)  // 下标
      return item + '老师'
    })
    console.log(newArr)
    // ['red老师', 'blue老师', 'green老师']


    const arr1 = [10, 20, 30]
    const newArr1 = arr1.map(function (item) {
      return item + 10
    })
    console.log(newArr1)

join方法

join()方法用于把数组的所有元素转换一个字符串
参数:
数组元素是通过参数里面指定的分隔符进行分隔,空字符串(’’),则所有元素之间都没有任何字符

<!DOCTYPE html>
  const arr = ['red', 'blue', 'green']
    // 把数组元素转换为字符串
    console.log(arr.join('*')) //red*blue*green
    console.log(arr.join('')) //redbluegreen
    console.log(arr.join()) //red,blue,green
    

reduce累计器(返回累计处理结果)

reduce()经常用于求和
语法:

arr.reduce(function(){},起始值)
arr.reduce(function(上一次值,当前值){},初始值)

参数:
1.如果有初始值,则把初始值累加到里面

执行过程:
1.如果没有起始值,则上一次值以数组的第一个数组元素的值
2.每一次循环,把返回值给作为下一次循环的上一次值
3.如果有起始值,则起始值作为上一次值

   1.有初始值
    // arr.reduce(function (prev, item) {
    //   // console.log(11)
    //   // console.log(prev)
    //   return prev + item
    // }, 0)
   2.没有初始值  
    // arr.reduce(function (prev, item) {
    //   console.log(11)
    //   // console.log(prev)
    //   return prev + item
    // })
  3.箭头函数的写法
    const arr = [1, 2, 3]
    const re = arr.reduce((prev, item) => prev + item)
    console.log(re)

filter过滤数组(返回新数组)

此方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

被遍历的数组.filter(function(currentValue,index){
return 筛选条件
})
//筛选数组中大于30的元素
const score=[10,50,3,40,33]
const re=score.filter(function(item){
return item>30
})
console.log(re)//[50,40,33]

返回值:返回数组,包含了符合条件的所有元素。如果没有符合的元素则返回空数组
参数:currentValue必须写,index可选
因为返回新数组,所以不会影响原数组

sort排序

默认按照升序排列

    // sort 升序排列
    // arr.sort(function (a, b) {
    //   return a - b
    // })
    // sort() 降序
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr)

splice删除

数组.splice()方法,删除指定元素

arr.splice(起始位置,删除几个元素)
arr.splice(start,deleteCount)
deleteCount如果省略,表示从指定的起始位置删除到最后
 splice 删除指定元素 
 splice(起始位置-索引号, 删除几个)
arr.splice(1, 1)  // 是从索引号1的位置开始删, 只删除1个
// arr.splice(1) // 从green 删除到最后

find查找元素

返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回undefined

  const arr = ['red', 'blue', 'green']
     const re = arr.find(function (item) {
       return item === 'blue'
     })
    console.log(re)
   console.log(item.name)  


  const arr = [
    {
      name: '小米',
      price: 1999
    },
    {
      name: '华为',
      price: 3999
    },
  ]
  // 找小米 这个对象,并且返回这个对象
  // const mi = arr.find(function (item) {
  //   // console.log(item)  //
  //   // console.log(item.name)  //
  //   console.log(111)
  //   return item.name === '华为'
  // })

every检测

检测数组中所有元素是否都符合指定条件,如果所有元素都通过检测则返回true,否则返回false

 // 2. every 每一个是否都符合条件,如果都符合返回 true ,否则返回false
 const arr1 = [10, 20, 30]
 const flag = arr1.every(item => item >= 20)
 console.log(flag)

some检测

检测数组中d的元素是否满足指定条件,如果数组中有元素满足条件则返回true,否则返回false

伪数组转换为真数组

 Array.from(lis) 把伪数组转换为真数组
 const lis = document.querySelectorAll('ul li')
 // console.log(lis)
 // lis.pop() 报错
 const liss = Array.from(lis)
 liss.pop()
 console.log(liss)

pop删除末尾元素

数组.pop()方法从数组中删除最后一个元素,并返回该元素的值

 let arr = ['red', 'green', 'blue']
    // console.log(arr.pop()) // blue
    // pop() 删除最后一个元素
    // arr.pop()
    // console.log(arr)
    

shift删除首位元素

数组.shift()方法从数组中删除第一个一个元素,并返回该元素的值

//  shift() 删除第一个元素
    // arr.shift()
    // console.log(arr)

push新增末尾

数组.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度

<!DOCTYPE html>
 let arr = ['pink', 'hotpink']
    // 新增  push 推末尾
    console.log(arr.push('deeppink'))  // 3
    // arr.push('deeppinnk', 'linghtpink')
    // console.log(arr)
   

unshift新增开头

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

 // 开头追加
    arr.unshift('red')
    console.log(arr)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/576880.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MQTTX工具获取及使用

工具获取地址&#xff1a;百度网盘 请输入提取码 新建连接 订阅主题

Redis分布式锁手动实现

Redis分布式锁手动实现 java中锁机制 在 Java 中&#xff0c;锁是用来同步并发访问共享资源的机制。它确保了在一个时间点&#xff0c;只有一个线程可以执行某个代码块或方法&#xff0c;从而防止了数据的不一致和竞态条件。Java 提供了多种锁机制&#xff0c;包括内置锁&…

全国各地级市财政收入支出明细统计数据2003-2022年

01、数据简介 全国各地级市财政统计主要是按地级市财政支出和财政收入两项统计&#xff0c;反映地区财政资金形成、分配以及使用情况的统计&#xff0c;​是由地区各地级市统计局统计公布&#xff0c;是加强财政资金管理使用的依据&#xff0c;研究国民收入分配和再分配的重要…

山东省2024年首版次测试报告具体的要求是什么?

山东省首版次测试报告的具体要求可能会根据每年的政策调整、行业变化以及申报的具体产品而有所不同。但一般而言&#xff0c;山东省首版次测试报告需要满足以下一些基本要求和标准&#xff1a; 1.完整性&#xff1a;测试报告应涵盖所有关键的测试环节&#xff0c;包括但不限于测…

张小泉签约实在智能,用实在Agent打造自动化高

在不少老杭州人的童年记忆里&#xff0c;妈妈裁剪衣服、料理食材、修剪各种物品&#xff0c;用的都是张小泉刀剪。 近日&#xff0c;实在智能与“刀剪第一股”张小泉&#xff08;股票代码&#xff1a;301055.SZ&#xff09;正式达成合作&#xff0c;实在Agent数字员工助力张小…

AM解调 FPGA(寻找复刻电赛电赛D题的)

设计平台 Quartus II10.3mif产生工具modelsimSE &#xff08;仿真用&#xff09; DDS&#xff08;直接数字式频率合成器&#xff09; 从前面的内容可知&#xff0c;我们需要产生一个载波&#xff0c;并且在仿真时&#xff0c;我们还需要一个较低频率的正弦波信号来充当我们的…

划重点:用这个技巧,抖音粉丝涨不停!

在这个信息爆炸的时代&#xff0c;如何在抖音上脱颖而出&#xff0c;吸引大量粉丝&#xff0c;成为了每一个创作者心中的痛。你是否曾经在发布作品后焦急等待评论&#xff0c;期待着每一次互动&#xff1f;如果你有这样的困扰&#xff0c;那么这篇文章将为你打开一扇新的大门&a…

【Claude 3 Opus】Claude 3 Opus 模型正式上线抢先体验

文章目录 1. Claude 3 Opus介绍2. Claude 3 Opus 支持的应用场景3. 申请Claude 3 Opus访问4. Claude 3 Opus初体验5. 『云上探索实验室』Bedrock 体验又更新啦6. 参考链接 1. Claude 3 Opus介绍 近期&#xff0c;亚马逊云宣布 Anthropic 的 Claude 3 Opus 模型已在 Amazon Bed…

大数据分析与应用实验(黑龙江大学)

实验一 Hadoop伪分布式实验环境搭建与WordCount程序 一、实验目的 1、学习搭建Hadoop伪分布式实验环境 2、在伪分布式实验环境下运行WordCount程序 二、实验内容 1、搭建Hadoop伪分布式实验环境&#xff0c;并安装Eclipse。 2、在Eclipse环境下&#xff0c;编写并执行Wor…

【JVM】从i++到JVM栈帧

【JVM】从i到JVM栈帧 本篇博客将用两个代码例子&#xff0c;简单认识一下JVM与栈帧结构以及其作用 从i与i说起 先不急着看i和i&#xff0c;我们来看看JVM虚拟机&#xff08;请看VCR.JPG&#xff09; 我们初学JAVA的时候一定都听到过JAVA“跨平台”的特性&#xff0c;也就是…

西瓜书学习——线性判别分析

文章目录 定义LDA的具体步骤1. 计算类内散布矩阵&#xff08;Within-Class Scatter Matrix&#xff09;2. 计算类间散布矩阵&#xff08;Between-Class Scatter Matrix&#xff09;3. 求解最佳投影向量4. 数据投影5. 分类 定义 线性判别分析&#xff08;Linear Discriminant A…

安装svn网络有问题怎么办?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

【C++进阶之路】C++11(下) —— 线程库

序言 本篇文章主要是填之前C11留下的坑以及了解与熟悉线程库&#xff0c;有读者感兴趣之前的内容的话可见「C进阶之路」专栏中标题为「C11」的内容&#xff0c;废话不多说&#xff0c;先来概括一下本文的内容&#xff0c;首先我们会从历史的角度分别谈及Linux以及Windows下的线…

JetBrains GoLand v2024.1 激活版 (Go语言集成开发IDE)

前言 JetBrains GoLand是一款专门为Go语言开发人员构建的跨平台的集成开发环境。动态错误检测和修复建议、快速安全重构、智能代码完成、无效代码检测和文档提示可以帮助新手和有经验的Go开发人员高效地创建可靠的代码。GoLand还支持JavaScript&#xff0c;TypeScript&#xf…

AIX7环境上一次艰难的Oracle打补丁经历

系统环境 AIX &#xff1a;7200-05-03-2148 Oracle&#xff1a;11.2.0.4 PSU: 11.2.0.4.201020&#xff08;31718723&#xff09; perl:5.28 问题一&#xff1a;AUTO patch #/u01/app/11.2.0/grid/OPatch/opatch auto /tmp/31718723 错误信息如下&#xff1a;匹配mos 2516761.1…

K8s: 公有镜像中心和私有镜像中心的搭建

公有镜像中心的搭建和使用 1 &#xff09;在 官方docker镜像中心推送 在 hub.docker.com 上注册账号 (国内一般访问不了&#xff0c;原因不多说) 找到 Create Repository 按钮就行仓库的创建 这样就在官方创建了一个仓库&#xff0c;比如地址为: xx/y-y xx 是我的账户名y-y 是…

MATLAB - 机器人动力学 - 质心(Center of Mass)

系列文章目录 前言 一、用法 com centerOfMass(robot) com centerOfMass(robot,configuration) [com,comJac] centerOfMass(robot,configuration) 二、说明 com centerOfMass(robot) 计算机器人模型在原点构型处相对于基础坐标系的质心位置。com centerOfMass(robot,conf…

TCP关闭连接时的一些思考

TCP协议是TCP/IP栈中最复杂的协议&#xff0c;它最大的优点是传输的可靠性&#xff0c;这通过面向连接、按序传输、超时重传、流量控制等机制保证其传输的可靠性。但这并不是我们今天要讨论的重点&#xff01; TCP通信的过程分别是三个阶段&#xff1a;建立连接、传输数据、关…

VMware ESXi虚拟机备份的方法和步骤

关于虚拟机备份 VMware ESXi 是 VMware vSphere 企业虚拟化套件的核心组件。在版本4.1之前&#xff0c;它一直被称为ESX。ESXi是一种裸机管理程序&#xff0c;直接安装在物理服务器上&#xff0c;它提供对底层资源的直接访问和控制&#xff0c;允许您在单个物理主机上创建和运…

私有化部署 Llama3 大模型, 支持 API 访问

私有化部署 Llama3 大模型, 支持 API 访问 视频 https://www.bilibili.com/video/BV1wD421n75p/ 前言 原文 https://ducafecat.com/blog/llama3-model-api-local 通过 ollama 本地运行 Llama3 大模型其实对我们开发来说很有意义&#xff0c;你可以私有化放服务上了。 然后通…
最新文章