前端 js 经典:数组常用方法总结

一:不改变原数组的方法

1. join 数组拼接

let arr = [1, 2, 3];
// 默认拼接
arr.join(""); // 默认 ',' 拼接,返回:'1,2,3'
// 使用 - 拼接
arr.join("-"); // 返回:'1-2-3'

2. concat 尾部插入

let arr = [1, 2, 3];
// 尾部插入 4
arr.concat(4); // 返回:[1,2,3,4]// 尾部插入 5,6
arr.concat(5, 6); // 返回:[1,2,3,5,6]// 尾部插入 7,8
arr.concat([7, 8]); // 返回:[1,2,3,4,5,6,7,8]

3. slice 裁切

slice(start?, end?),start:开始下标,end:结束下标。

结束下标大于开始下标,裁切值不包括结束下标的值。

let arr = [1, 2, 3, 4, 5, 6];// 全部裁切
arr.slice(); // 返回:[1,2,3,4,5,6]// 从下标 1 开始,裁切到尾部
arr.slice(1); // 返回 [2,3,4,5,6]// 从下标 1 开始,裁切到下标 2
arr.slice(1, 2); // 返回 [2]// 从数组倒数第 1 开始,裁切到尾部
arr.slice(-1); // 返回 [6]// 从数组倒数第 2 开始,裁切到数组倒数第 1 位
arr.slice(-2, -1); // 返回 [5]

4. indexOf 查找

indexOf(item, start?),item:查找项,start:从哪个下标开始,如果找到返回元素所在下标

let arr = [1, 2, 3, 1];// 从头开始查找元素 1 所在下标
arr.indexOf(1); // 返回:0// 从下标为 1 开始查找元素 1 所在下标
arr.indexOf(1, 1); // 返回:3// 从最后一项开始查找元素为 1 所在下标
arr.indexOf(1, -1); // 返回:3

5. lastIndexOf 查找

lastIndexOf(item, start?),item:查找项,start:从哪个下标开始,如果找到返回元素所在下标

从数组尾部往头部查找

let arr = [1, 2, 3, 1];// 从尾开始查找元素 1 所在下标
arr.lastIndexOf(1); // 返回:3// 从尾部开始第 2 项开始查找元素 1 所在下标
arr.lastIndexOf(1, 1); // 返回:0// 从下标为 1 开始查找元素 1 所在下标
arr.lastIndexOf(1, -1); // 返回:3

6. reduce 高阶函数

reduce(callback(total, curValue, curIndex?, arr?), initValue?),callback:叠加器,参数:total 叠加值,curValue 当前值,curIndex 当前下标,arr 原数组,initValue:初始值。

当没有 initValue 是,total 的初始值为 arr[0]。

6.1 数组求和

let arr = [1, 2, 3];
arr.reduce((total, curValue) => total + curValue); // 返回:6

6.2 初始值 10,数组求和

let arr = [1, 2, 3];
arr.reduce((total, curValue) => total + curValue, 10); // 返回:16

6.3 数组去重

let arr = [{ id: 1, name: "小明" },{ id: 2, name: "小红" },{ id: 1, name: "小明" },{ id: 2, name: "小红" },
];
arr.reduce((total, curValue) => {const has = total.filter((item) => item.id == curValue.id);if (!has.length) {total.push(curValue);}return total;
}, []); // 返回:[{ id: 1, name: "小明" },{ id: 2, name: "小红" }]

6.4 二维转一维

let arr = [1, [2, 3], [4, 5, 6]];
arr.reduce((total, curValue) => total.concat(curValue), []); // 返回: [1, 2, 3, 4, 5, 6]

6.5 多维转一维

let arr = [1, [2, 3], [4, [5, 6]]];
const flatArr = (arr) => {return arr.reduce((total, curValue) => {return total.concat(Array.isArray(curValue) ? flatArr(curValue) : curValue);}, []);
};
flatArr(arr); // 返回:[1, 2, 3, 4, 5, 6]

7. map 遍历

map(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组

let arr = [1, 2, 3];
arr.map((item) => item + 1); // 返回:[2,3,4]

8. filter 筛选

filter(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。

满足筛选条件,callback 内返回 true,filter 返回满足条件元素组成的数组。

let arr = [1, 2, 3];
arr.filter((item) => item > 1); // 返回:[2,3]

9. every 判断

every(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。

判断所用数组元素满足规定条件,满足返回 true,有一个不满足返回 false

let arr = [1, 2, 3];
arr.every((item) => item > 1); // 返回:false

10. some 判断

some(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。

判断数组元素是否有一个满足规定条件,都不满足返回 false,有满足返回 true

let arr = [1, 2, 3];
arr.some((item) => item > 1); // 返回:true

11. forEach 纯遍历,无返回

forEach(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。

let arr = [1, 2, 3];
arr.forEach(item => {// TODO
})

二:改变原数组的方法

1. push 尾部插入

let arr = [1, 2, 3];// 尾部插入 4
arr.push(4); // arr:[1,2,3,4] 返回:数组长度 4// 尾部依次插入 5,6
arr.push(5, 6); // arr:[1,2,3,4,5,6] 返回:数组长度 6

2. unshift 头部插入

let arr = [1, 2, 3];// 从头部插入 0
arr.unshift(0); // arr:[0,1,2,3] 返回:数组长度 4// 从头部插入 -1,-2
arr.unshift(-2, -1); // arr:[-2,-1,0,1,2,3] 返回:数组长度 6

3. pop 尾部移除

let arr = [1, 2, 3];
arr.pop(); // arr:[1,2] 返回:移除项 3

4. shift 头部移除

let arr = [1, 2, 3];
arr.shift(); // arr:[2,3] 返回:移除项 1

5. splice 删除,添加,替换

5.1 删除

splice(start?, num?),start:开始下标,num:删除长度

// 从下标 0 开始,删除 1 位
let arr = [1, 2, 3];
arr.splice(0, 1); // arr:[2,3] 返回:[1]// 从下标 0 开始,删除到数组尾部
let arr = [1, 2, 3];
arr.splice(0); // arr:[] 返回:[1,2,3]// 从数组最后一位,删除到数组尾部
let arr = [1, 2, 3];
arr.splice(-1); // arr: [1,2] 返回:[3]

5.2 添加

splice(start, 0, arg\*?),start:开始下标,0:删除 0 长度,arg:插入项

// 从下标 0 开始,插入 4
let arr = [1, 2, 3];
splice(0, 0, 4); // arr:[4,1,2,3] 返回:[]// 从下标 2 开始,依次插入 4,5,6
let arr = [1, 2, 3];
splice(2, 0, 4, 5, 6); // arr:[1,2,3,4,5,6] 返回:[]

5.3 替换

splice(start, num, arg\*?),start:开始下标,num:替换长度,arg:替换项,注意:num 替换长度和替换项数目最好一致。

// 将 2,3 替换成 4,5
let arr = [1, 2, 3];
arr.splice(1, 2, 4, 5); // arr:[1,4,5] 返回:[2,3]

6. sort 排序

sort(fn?),fn:可选参数,规定排序顺序,必须是函数。

可用于对数字,字母进行排序,数字优先级高于字母。

如果需要按照其他规则排序,需要提供函数,函数一般有两个参数:a,b。数组中 a 的下标小于 b。比较两个参数,如果需要换位置则返回大于 0 的值。

6.1 默认排序,不会区分各十百位

let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort(); // arr:[1,11,2,21,3,32,4] 返回:[1,11,2,21,3,32,4]

 6.2 从小到大排序

let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort((a, b) => a - b); // arr:[1,2,3,4,11,21,31] 返回:[1,2,3,4,11,21,31]

6.3 从大到小排序

let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort((a, b) => b - a); // arr:[31,21,11,4,3,2,1] 返回:[31,21,11,4,3,2,1]

6.4 按 sort 从小到大排序

let arr = [{ name: "小明", sort: 10 },{ name: "小红", sort: 1 },{ name: "小李", sort: 21 },
];
arr.sort((a, b) => a.sort - b.sort); // arr:[{name: "小红",sort: 1},{name: "小明",sort: 10},{name: "小李",sort: 21}] 返回:[{name: "小红",sort: 1},{name: "小明",sort: 10},{name: "小李",sort: 21}]

7. reverse 顺序颠倒

let arr = [1, 2, 3];
arr.reverse(); // arr:[3,2,1] 返回:[3,2,1]

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis技术学习|实战项目记录|短信登录(重点:拦截器)+ Redis代替session存储用户登录信息

学习资料声明 黑马程序员的Redis学习视频:黑马程序员Redis入门到实战教程 需要用到的知识:linux(推荐韩顺平老师的教程,学到p30,创建好虚拟机和简单的几个命令就好。)SSM。SpringBoot。 还用到了MybatisPl…

富格林:合理规避虚假风险安全盈利

富格林悉知,黄金投资不仅具有强大的保值功能,其剧烈的市场变化也隐含着巨大的盈利潜力,吸引着众多投资者入市。但投资都会存在一定的风险,因此大家在投资的过程中要学习总结一些技巧,以便能在必要时帮助投资者规避虚假…

linux系统kubernetes容器检查和恢复机制

容器检查和恢复机制 容器检查和恢复机制命令模式探针http get方式探针POD 的恢复策略 容器检查和恢复机制 在kubernetes中,可以为容器定义一个健康探针,kubelet 就会根据这个 Probe 的返回值决定这个容器的状态,而不是直接以容器是否运行&…

5G里面NR,gNB,en-gNB,ng-eNB是什么意思

不得不提一个国际组织,叫国际电信联盟(ITU, International Telecommunication Union),简称国际电联。我们先看看国际电联的自我介绍: 国际电信联盟 『国际电联 (国际电信联盟) 是主管信息通信技术事务(ICT)的联合国机…

微信打卡小程序怎么做_用户的每日习惯培养神器

微信打卡小程序:你的每日习惯培养神器 在这个快节奏的现代社会,我们每天都在忙碌中度过,有时候甚至会忘记自己曾经立下的那些小目标、小习惯。然而,随着科技的不断发展,微信打卡小程序的出现,为我们的生活…

Apollo(阿波罗)配置中心

Apollo(阿波罗)配置中心: 采用分布式架构,它能够集中管理不同环境、不同集群的配置,配置修改后能够实时推送到应用端,有可视化界面 和 规范的权限,支持 版本管理、灰度发布、监控 等功能。 主要…

早期零撸项目,预注册即将截止, AI身份项目GenomeFi明牌空投教程

简介:GenomeFi基金会旨在用个人基因信息推动生物产业发展,他们通过AI大数据平台和区块链技术验证身份、保护个人信息、提升收入。GenomeFi和CLINOMICS(一家基于基因组学疾病早期诊断的领先公司)合作提供基因诊断、早期疾病检测、个…

朋友圈之于私域的意义

朋友圈作为社交媒体的一种,是品牌主进行私域流量营销的主要载体,具有推动产品销售、传播信息等多种作用。具体来说,朋友圈在私域中的意义可以体现在以下几个方面: 1. 传播信息:朋友圈可以成为品牌主向其潜在客户传递信…

面试算法-63-全排列

题目 给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 解 class Solution {public List&l…

前端学习笔记|CSS基础

css学习 中文学习网站 https://www.w3school.com.cn/ 非语义化的标签 1.div 2.span 类型选择器 类型选择器有时也叫做“标签名选择器*”*或者是”元素选择器“,因为它在文档中选择了一个 HTML 标签/元素 类选择器 类选择器以一个句点(.&#xff…

Leetcode 202:快乐数

编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为: 对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1,也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&#xff0c…

2024年运维相关面试题

SLA 关键词 负责系统的 SLA 代码维护、迭代更新,保证任务质量和交付及时性;推动提升服务的可靠性、可扩展性以及性能优化,保障系统 SLA为系统提供基础设施 SLA 保障 SLA保障:服务质量保障 sla 保障建设,目前一是将故…

代码随想录阅读笔记-字符串【重复的子字符串】

题目 给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母,并且长度不超过10000。 示例 1: 输入: "abab"输出: True解释: 可由子字符串 "ab" 重复两次构成。 示例 2: 输入: "aba…

爬虫入门系列-HTML基础语法

🌈个人主页:会编辑的果子君 💫个人格言:“成为自己未来的主人~” HTML基础语法 bs4解析比较简单,但是呢,首先你需要了解一丢丢的html知识,然后再去使用bs4去提取,逻辑和编写难度就会非常简…

【笔试】银行校招,信息科技岗 金融科技岗笔试准备方向

【笔试】银行校招,信息科技 & 金融科技岗笔试准备方向 文章目录 1、银行招聘流程(投递)2、笔试内容分析(笔试)3、真题题库(BOC)3.1 职业能力(行测)3.2 英语3.3 信息科…

敏捷开发最佳实践:学习与改进维度实践案例之会诊式培养敏捷教练

自组织团队能够定期反思并采取针对性行动来提升人效,但2022年的敏捷调研发现,70%的中国企业在学习和改进方面仍停留在团队级。本节实践案例将分享“会诊式培养敏捷教练”的具体做法,突出了敏捷以人为本的学习和改进,强调了通过人员…

JNI入门学习 管理和配置的工具选择[二]

在Android开发中,你可以使用 CMake 或者 Android.mk 来编写 JNI 的代码。这两者都是用来管理和配置 JNI 层代码的工具,选择使用哪一个取决于你的喜好以及项目的需求。 使用 CMake 的优点: 现代性:CMake 是一种现代的、跨平台的构建…

大模型-Prompt-API介绍

GPT-3.5 API 提供了一个名为 openai.ChatCompletion.create() 的端点,您可以使用该端点来与 ChatGPT 进行交互。以下是 openai.ChatCompletion.create() 的详细 API 说明: 请求参数: messages:一个数组,包含对话中的消…

javaweb遇到的servlet问题,jar包问题

有时候会遇到这种问题,有的地方会报红 这是因为这个找不到这个包,这个项目缺少jar包 在tomcat9之前还不是Jakarta这个名字,我的运行环境与服务器是jdk17与tomcat10 解决方法: 在项目结构中,找到模块,再…

nacos 更新报错“发布失败。请检查参数是否正确”

文章目录 🔊博主介绍🥤本文内容起因解决方案结果 📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华…