面试官:Javscript数组的常用方法有哪些?

news2025/2/23 4:25:15

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

一、操作方法

push()

unshift()

splice

concat()

pop()

shift()

splice()

slice()

splice()

indexOf()

includes()

find()

二、排序方法

reverse()

sort()

三、转换方法

join()

四、迭代方法

some()

every()

forEach()

filter()

map()


一、操作方法

数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会

下面对数组常用的操作方法做一个归纳

下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响

  • push()
  • unshift()
  • splice()
  • concat()
push()

push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度

let colors = []; // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count) // 2
unshift()

unshift()在数组开头添加任意多个值,然后返回新的数组长度

let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2
splice

传入三个参数,分别是开始位置、0(要删除的元素数量)、插入的元素,返回空数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []
concat()

首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]

下面三种都会影响原数组,最后一项不影响原数组:

  • pop()
  • shift()
  • splice()
  • slice()
pop()

pop() 方法用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项

let colors = ["red", "green"]
let item = colors.pop(); // 取得最后一项
console.log(item) // green
console.log(colors.length) // 1
shift()

shift()方法用于删除数组的第一项,同时减少数组的 length 值,返回被删除的项

let colors = ["red", "green"]
let item = colors.shift(); // 取得第一项
console.log(item) // red
console.log(colors.length) // 1
splice()

传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red,只有一个元素的数组

slice()

slice() 用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原始数组

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors)   // red,green,blue,yellow,purple
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow

即修改原来数组的内容,常用splice

splice()

传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值,删除一个元素
console.log(colors); // red,red,purple,blue
console.log(removed); // green,只有一个元素的数组

即查找元素,返回元素坐标或者元素值

  • indexOf()
  • includes()
  • find()
indexOf()

返回要查找的元素在数组中的位置,如果没找到则返回-1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3
includes()

返回要查找的元素在数组中的位置,找到返回true,否则false

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
find()

返回第一个匹配的元素

const people = [
    {
        name: "Matt",
        age: 27
    },
    {
        name: "Nicholas",
        age: 29
    }
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

二、排序方法

数组有两个方法可以用来对元素重新排序:

  • reverse()
  • sort()

reverse()

顾名思义,将数组元素方向排列

let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()

sort()方法接受一个比较函数,用于判断哪个值应该排在前面

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15

三、转换方法

常见的转换方法有:

join()

join() 方法接收一个参数,即字符串分隔符,返回包含所有项的字符串

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

四、迭代方法

常用来迭代数组的方法(都不改变原数组)有如下:

  • some()
  • every()
  • forEach()
  • filter()
  • map()

some()

对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.every((item, index, array) => item > 2);
console.log(someResult) // true

every()

对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false

forEach()

对数组每一项都运行传入的函数,没有返回值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
    // 执行某些操作
});

filter()

对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3

map()

对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2

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

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

相关文章

uview组件库的安装

更多的请查看官方文档uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com) // 如果您的根目录没有package.json文件的话&#xff0c;请先执行如下命令&#xff1a; // npm init -y 安装 npm install uview-ui2.0.36 // 更新 // npm update uvie…

生产数据追溯产线管理看板助力企业实现产品质量追踪

在现代制造业中&#xff0c;企业对于产品质量的追踪和管理变得越来越重要。产品质量的好坏直接关系到企业的声誉和客户满意度。然而&#xff0c;传统的生产管理方式往往无法提供足够的数据和信息来进行全面的质量追踪。生产看板管理系统的出现为企业解决了这一难题。通过实时的…

大模型LLM深入浅出、主打通俗易懂

AI(人工智能)是通过机器来模拟人类认识能力的一种科技能力。AI最核心的能力就是根据给定的输入做出判断或预测。对数据进行分析&#xff0c;从而总结得到研究对象的内在规律。一般通过使用适当的统计、机器学习、深度学习等方法&#xff0c;对收集的大量数据进行计算、分析、汇…

【FAQ】安防监控系统/视频云存储EasyCVR平台安全检查Proxy出现sql injection的漏洞,该如何修改?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。 最近有用户反馈&…

安卓系列机型 框架LSP 安装步骤 支持多机型 LSP框架通用安装步骤【二】

​​​​​​安卓玩机教程---全机型安卓4----安卓12 框架xp edx lsp安装方法【一】 低版本可以参考上个博文了解相关安装方法。 LSP框架优点 简单来说装lsp框架的优点在于可以安装各种模块。包括 但不限于系统优化 加速 游戏开挂等等的模块。大致相当于电脑的扩展油猴 Lspos…

《思维与智慧》简介及投稿邮箱

《思维与智慧》自1982年创刊&#xff0c;经国家新闻出版署批准&#xff0c;由河北省教育厅主管&#xff0c;河北行知文化传媒有限责任公司主办的益智励 志类大众文化期刊。 《思维与智慧》办刊宗旨是&#xff1a;“开发思维&#xff0c;启迪智慧&#xff0c;滋润心灵”&#x…

C# OpenCvSharp Yolov8 Detect 目标检测

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace Open…

全球南方《乡村振兴战略下传统村落文化旅游设计》八一新枝——2023学生开学季许少辉瑞博士生辉少许

全球南方《乡村振兴战略下传统村落文化旅游设计》八一新枝——2023学生开学季许少辉瑞博士生辉少许

全能电子地图下载器3.0-下载离线地图瓦片

前言 vue项目要部署到局域网内&#xff0c;不使用在线地图&#xff0c;而是离线地图&#xff0c;寻求了很多的解决方案&#xff0c;最终决定使用离线地图瓦片leaflet.js实现效果&#xff01; 正文 首先需要下载正版的软件&#xff0c;目前我实用的是V3.0版本的&#xff0c;可能…

gateway之断言的使用详解

文章目录 gateway产生的背景&#xff0c;为什么要是用gateway什么是网关gateway 带来的好处功能特征gateway在项目中使用的依赖 什么是断言断言分类内置自定义示例 断言和过滤器的不同 gateway产生的背景&#xff0c;为什么要是用gateway 一个系统会被拆分为多个微服务&#x…

Android OpenGL 做了一个修图(P 图)功能,对标 PS

P 图功能与 OpenGL 玩过 P 图软件的朋友一定对这个功能有所了解,P 图我们可以简单地看做把一个区域的像素按照某一方向进行移动,产生一定形变效果,基于这个原理,我们可以手动实现瘦脸、长腿、瘦腰、大眼、丰胸等等一系列效果,从而达到美颜、美型的目的。 我们将一个区域的…

四轴无人机-飞行控制原理(PID)

控制目标&#xff1a; 1、稳定/平衡 【最核心】&#xff1a;四旋翼微型飞行器的控制就是以地理坐标系为参考&#xff0c;做三维飞行姿态控制。控制目标是使其在 无动作指令时保持稳定悬停状态&#xff0c;有动作指令 时有效完成指定动作。 2、准确 3、快速 4、鲁棒 控制方法…

【李沐深度学习笔记】线性代数实现

课程地址和说明 线性代数实现p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 这节就算之前内容的复习&#xff0c;后面以截图形式呈现 标量由只有一个元素的张量表示 import torch x torch.tensor([3.0]) y …

时序分解 | Matlab实现CEEMD互补集合经验模态分解时间序列信号分解

时序分解 | Matlab实现CEEMD互补集合经验模态分解时间序列信号分解 目录 时序分解 | Matlab实现CEEMD互补集合经验模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现CEEMD互补集合经验模态分解时间序列信号分解 1.分解效果图 &#xff0…

hive3.X的HiveServer2 内存泄漏问题定位与优化方案(bug)

参考文档&#xff1a; https://juejin.cn/post/7141331245627080735?searchId20230920140418F85636A0735C03971F71 官网社区&#xff1a; https://issues.apache.org/jira/browse/HIVE-22275 In the case that multiple statements are run by a single Session before bein…

金蝶云星空与旺店通·旗舰奇门对接集成收料通知单查询连通新增采购订单(金蝶收料通知单-旺店通采购订单开单)

金蝶云星空与旺店通旗舰奇门对接集成收料通知单查询连通新增采购订单(金蝶收料通知单-旺店通采购订单开单) 数据源平台:金蝶云星空 金蝶K/3Cloud结合当今先进管理理论和数十万家国内客户最佳应用实践&#xff0c;面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司…

Linux学习-HIS系统部署(2)

GitLab服务器搭建 使用rpm包本地部署GitLab服务器 # 确认GitLab主机硬件配置&#xff0c;注GitLab服务器至少要有4G内存&#xff0c;关闭SWAP分区 [rootgitlab ~]# free -mtotal used free shared buff/cache available Mem: 4021 1…

“高级前端开发技术探索路由的使用及Node安装使用“

目录 引言1. Vue路由的使用2. VueNode.js的安装使用总结 引言 在当今互联网时代&#xff0c;前端开发技术日新月异&#xff0c;不断涌现出各种新的框架和工具。作为一名前端开发者&#xff0c;我们需要不断学习和探索新的技术&#xff0c;以提升自己的开发能力。本文将深入探讨…

Windows AD域使用Linux Samba

Windows AD域使用Linux Samba 1. 初始化配置 1.1 初始化配置 配置服务器名 hostnamectl set-hostname samba.sh.pana.cnhosts文件配置,确保正常解析到本机和域控 [rootcentos7 ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loc…

微信小程序商城怎么弄

微信小程序商城怎么弄&#xff1f;这是一个常见的问题&#xff0c;对于那些想要在微信上创建一个自己的商城的人来说。下面为您介绍一些基本的步骤和注意事项&#xff0c;帮助您轻松地创建一个微信小程序商城。 首先&#xff0c;要创建一个微信小程序商城&#xff0c;您需要注册…