当前位置： 首页 > news >正文

JS数组的详解与使用

news 2025/12/21 10:01:46

什么是数组？

数组是一种有序的集合，有长度和索引，以及身上有许多的API方法
面试题：数组和伪数组的区别：数组和伪数组都有长度和索引，区别是数组身上有许多的API方法 而伪数组身上不存在这些API方法

创建数组的几种方式

方式1：利用字面量创建
let arr = []
方式2：利用new 关键字创建
let arr1 = new Array()

数组身上常用的属性和方法

let arr = []
arr.length :属性是数组的长度
遍历数组：我们可以使用For循环进行遍历，等到在ES6中我们可以使用map以及forEach()等方法进行遍历
面试题：forEach()和map()的区别：
forEach()是没有返回值的，
而map()是存在返回值的

深拷贝与浅拷贝

学习数组，我们可以了解到简单数据类型和复杂数据类型（引用数据类型）
简单数据类型一般存储在栈中
复杂数据类型一般存储在复杂数据类型中
浅拷贝只是复制某个对象的指针（地址），导致它们都指向了堆内存中同一个数据，互相影响。
经过赋值操作，两个对象都指向了堆内存中的同一个数据，所以其中一个发生变化时，另一个也会随着变化。let arr = [1, 2, 3, 4];let arr1 = arr;// console.log(arr1, arr);arr[4] = 5;console.log(arr1, arr);
深拷贝是赋值的内容
深拷贝是在堆内存中创建一个一模一样的数据，然后把新数据的内存地址赋给新变量，这样旧变量和新变量就指向了不同的数据，也就不会互相影响。
let arr = [1,2,3,4,5]
let arr1 = []
for(let i = 0;i<arr.length;i++){arr1[i] = arr[i];
}
arr[4] = 6;
console.log(arr1)
console.log(arr)

数组常用的API方法

unshift()在头部添加 会改变原数组 返回值是新数组的长度
shift() 删除头部元素 会改变原数组 返回值是删除对应的元素
push()在尾部添加 会改变原数组 返回值是新数组的长度
pop()删除尾部的元素 会改变原数组  返回值是删除对应的元素
splice()可以删除也可以修改还可以添加
有两个参数 1参： 索引  2参： 长度  如果不写 删除到尾部  如果第二个参数是0则不删除   3参：用于替换的数值删除   两个参数  并且第二个参数不能为0    返回值：删除的数据  数组添加   三个参数  并且第二个参数只能为0    返回值：空数组修改   三个参数  并且第二个参数不能为0    返回值：被替换的数组  数组
slice() // 截取    深拷贝     不会修改原数组    返回值：被截取的数据   数组    
join()数组转字符串
concat() 数组拼接 会返回一个新的数组
reverse()数组反转
indexOf()数组查找

数组排序

可以使用冒泡排序和sort进行排序let arr = [10, 5, 7, 3, 8, 1, 14];冒泡排序for (let i = 0; i < arr.length - 1; i++) {for (let j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {// let temp = 0;// temp = arr[j];// arr[j] = arr[j + 1];// arr[j + 1] = temp;[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];}}}
console.log(arr);sort()//sort排序
console.log(arr.sort((a, b) => {return a - b
}));

数组迭代

迭代就是遍历，进行循环
1.使用for循环
2.使用forEach 没有返回值
3.使用filter 过滤筛选
4.使用every 全部都为true 结果就为true  逻辑与
5.使用some 如果有一个为true 结果就为true    逻辑或
6.使用map 存在返回值
7.使用for of  内部存在迭代器 不同于forEach 它可以配合break continue return一起使用

课堂练习

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片排序</title><style>.all {box-sizing: border-box;width: 1190px;border: 1px solid black;margin: 20px auto;}h2 {text-align: center;color: purple;}.btn {width: 100%;text-align: center;margin-top: 20px;}button {background-image: linear-gradient(90deg, green, skyblue);border: 1px solidblack;outline: none;}.imgs-div {width: 100%;width: 1190px;padding: 20px;}ul {width: 100%;height: 500px;}li {margin: 5px 10px;float: left;width: 251px;height: 230px;list-style: none;text-align: center;}img {width: 100%;height: 90%;}</style>
</head><body><div class="all"><h2>亚索所有皮肤免费来袭</h2><div class="btn"><button>从大到小</button><button>随机排序</button></div><div class="imgs-div"><ul><li> <img src="./img/1.png"> <span>西部牛仔8</span> </li><li> <img src="./img/2.png"> <span>原计划2</span> </li><li> <img src="./img/3.png"> <span>猩红之月3</span> </li><li> <img src="./img/4.png"> <span>黑夜使者1</span> </li><li> <img src="./img/5.png"> <span>奥德赛5</span> </li><li> <img src="./img/6.png"> <span>战场boss7</span> </li><li> <img src="./img/7.png"> <span>真实伤害6</span> </li><li> <img src="./img/8.png"> <span>灵魂莲华4</span> </li></ul></div></div><script>// 1.点击第一个按钮  从大到小排序  然后button字体变成从小到大// 2.再次点击 再变回来  一直切换// 3.点击第二个按钮进行随机排序var arr = [{"src": "./img/1.png","title": "西部牛仔8",id: '8'}, {"src": "./img/2.png","title": "原计划2",id: '2'}, {"src": "./img/3.png","title": "猩红之月3",id: '3'}, {"src": "./img/4.png","title": "黑夜使者1",id: '1'}, {"src": "./img/5.png","title": "奥德赛5",id: '5'}, {"src": "./img/6.png","title": "战场boss7",id: '7'}, {"src": "./img/7.png","title": "真实伤害6",id: '6'}, {"src": "./img/8.png","title": "昼夜莲华4",id: '4'}];// 获取元素let btns = document.querySelectorAll('.btn button')let img = document.querySelectorAll('.imgs-div li img')let sps = document.querySelectorAll('.imgs-div li span')let flag = truebtns[0].onclick = function () {if (flag) {flag = !flagbtns[0].innerHTML = '从小到大'arr.sort((a, b) => {return b.id - a.id})} else {flag = !flagbtns[0].innerHTML = '从大到小'arr.sort((a, b) => {return a.id - b.id})}render(arr)}// 随机排序btns[1].onclick = function () {let arr1 = arr.sort(() => {return Math.random() - 0.5})render(arr)console.log(arr1);}// 渲染函数function render(arr) {arr.forEach((item, index) => {// console.log(item); img[index].src = item.srcsps[index].innerHTML = item.title})}</script>
</body></html>

相关文章：

JS数组的详解与使用

什么是数组&#xff1f; 数组是一种有序的集合&#xff0c;有长度和索引&#xff0c;以及身上有许多的API方法 面试题&#xff1a;数组和伪数组的区别&#xff1a;数组和伪数组都有长度和索引&#xff0c;区别是数组身上有许多的API方法 而伪数组身上不存在这些API方法创建数组…...

编程日记 2023/8/2 5:03:05

c++ / python / java / PHP / SQL / Ruby / Objective-C / JavaScript 发展史

c发展史 C是由丹尼斯里奇和肯汤普森在1970年代早期开发的C语言的扩展。C最初被称为“C with Classes”&#xff0c;是在1980年代初期由比雅尼斯特劳斯特鲁普开发的。 1983年&#xff0c;斯特劳斯特鲁普将C with Classes重新命名为C。在1985年&#xff0c;C编译器的第一个版本被…...

编程日记 2023/8/2 5:02:03

Linux第一个小程序－进度条(缓冲区概念)

1.\r和\n C语言中有很多字符 a.可显字符 b.控制字符 对于回车其实有两个动作&#xff0c;首先换行&#xff0c;在将光标指向最左侧 \r &#xff1a;回车 \n&#xff1a;换行 下面举个例子&#xff1a; 把\n去掉会怎样 什么都没输出。为什么&#xff1f; 2.缓冲区概念 观察下两个…...

编程日记 2023/8/2 5:01:02

CentOS7环境安装tomcat

环境准备 由于是在练习&#xff0c;为了方便&#xff0c;我们可以 1.关闭防火墙 systemctl disable firewalld.service systemctl stop firewalld.service 2.关闭selinux 在/etc/selinux/config中&#xff0c;设置&#xff1a; SELINUXdisabled 3.准备jdk---》jdk-8u333-li…...

编程日记 2023/8/2 5:00:00

C# 中使用ValueTask优化异步方法

概要 我们在开发过程中&#xff0c;经常使用async的异步方法&#xff0c;但是有些时候&#xff0c;异步的方法中&#xff0c;可能包含一些同步的处理。本文主要介绍通过ValueTask这个struct&#xff0c;优化异步处理的方法性能。 代码及实现 有些时候我们会缓存一些数据在内…...

编程日记 2023/8/2 4:58:59

KVM创建新的虚拟机（图形化）

1.启动kvm管理器 [rootlocalhost ~]# virt-manager2.点击创建虚拟机 3.选择所需os安装镜像 4.选择合适的内存大小和CPU 5.创建所需磁盘 6.命名创建的虚拟机...

编程日记 2023/8/2 4:57:58

正则表达式在格式校验中的应用以及包装类的重要性

文章目录 正则表达式&#xff1a;做格式校验包装类&#xff1a;在基本数据类型与引用数据类型间的桥梁总结 在现代IT技术岗位的面试中&#xff0c;掌握正则表达式的应用以及理解包装类的重要性是非常有益的。这篇博客将围绕这两个主题展开&#xff0c;帮助读者更好地面对面试挑…...

编程日记 2023/8/2 4:56:56

Docker使用之java项目工程的部署

同样本文的基础建立在已在目标服务器&#xff08;以linux为示例&#xff09;上安装了docker&#xff0c;安装教程请移步度娘 若容器存在请先停止&#xff0c;在删除&#xff0c;然后删除镜像重新编译 //停止容器 sudo docker stop datatransfer//删除容器 sudo docker rm dat…...

编程日记 2023/8/2 4:55:55

3ds Max如何进行合成的反射光泽通道渲染

推荐&#xff1a; NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 准备场景 步骤 1 打开 3ds Max。smart_phone.max打开已 随教程提供。 打开 3ds Max 步骤 2 按 M 打开材质编辑器。选择空材料 槽。单击漫射通道。它将打开材质/贴图浏览器窗口。选择位图&#xff0…...

编程日记 2023/8/2 4:54:54

114、Spring AOP是如何实现的？它和AspectJ有什么区别？

Spring AOP是如何实现的？它和AspectJ有什么区别？ 一、AOP的理解1、spring aop：动态代理实现2、spring aop 和 AspectJ的区别3、小图一、AOP的理解 其实，AOP只是一种编程思想，表示面向切面编程，如果想实现这种思想，可以使用动态代理啊，第三方的框架 AspectJ啊等等。 1…...

编程日记 2023/8/2 4:53:52

正则表达式速通

简介 正则表达式&#xff0c;我们可以看作通配符的增强版&#xff0c;可以帮我们匹配指定规则的字符串&#xff0c;在计算机中应用广泛&#xff0c;比如说爬虫、网站的登录表单等。 原视频&#xff1a;https://www.bilibili.com/video/BV1da4y1p7iZ 学习正则表达式的常用工具…...

编程日记 2023/8/2 4:52:51

数据可视化（5）热力图及箱型图

1.热力图 #基本热力图 #imshow&#xff08;x&#xff09; #x&#xff0c;数据 x[[1,2],[3,4],[5,6],[7,8],[9,10]] plt.imshow(x) plt.show() #使用热力图分析学生的成绩 dfpd.read_excel(学生成绩表.xlsx) #:表示行号 截取数学到英语的列数 xdf.loc[:,"数学":英语].…...

编程日记 2023/8/2 4:51:50

React 组件通信-全面解析

父子组件通信 // 导入 import { useState } from "react";import "./App.scss"; import { defaultTodos } from "./components/module/contentData";// 子组件 const Module ({ id, done, text, onToggle, onDelData }) > {return (<div…...

编程日记 2023/8/2 4:50:48

“深入理解Spring Boot：快速构建微服务架构的利器“

标题&#xff1a;深入理解Spring Boot&#xff1a;快速构建微服务架构的利器 摘要&#xff1a;Spring Boot是一种基于Spring框架的开源项目&#xff0c;它通过自动化配置和约定优于配置的原则&#xff0c;使得开发者能够快速构建微服务架构。本文将深入介绍Spring Boot的特点和…...

编程日记 2023/8/2 4:49:45

SpringBoot超级详解

1.父工程的父工程 在父工程的父工程中的核心依赖&#xff0c;专门用来版本管理的 版本管理。 2.父工程 资源过滤问题&#xff0c;都帮解决了&#xff0c;什么配置文件&#xff0c;都已经配置好了&#xff0c;资源过滤问题是帮助&#xff0c;过滤解决让静态资源文件能够过滤到…...

编程日记 2023/8/2 4:48:43

手机的python怎么运行文件,python在手机上怎么运行

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;手机上的python怎么运行程序&#xff0c;手机的python怎么运行文件&#xff0c;今天让我们一起来看看吧&#xff01; 1、python程序怎么在手机上运行 python语言应用很广泛&#xff0c;自己也很喜欢使用它&#xff0c;其…...

编程日记 2023/8/2 4:47:42

RBAC三级树状菜单实现（从前端到后端）未完待续

1、表格设计 RBAC 2、前端路由 根据不同的用户id显示不同的菜单。 根据路由 3、多级菜单 展示所有权限&#xff0c;并且根据当前用户id展示它所属的角色的所有菜单。 前端树状展示 思路&#xff1a; 后端&#xff1a;传给前端map&#xff0c;map里1个是所有菜单&am…...

编程日记 2023/8/2 4:46:41

牛客网Verilog刷题——VL41

牛客网Verilog刷题——VL41 题目答案 题目 请设计一个可以实现任意小数分频的时钟分频器&#xff0c;比如说8.7分频的时钟信号&#xff0c;注意rst为低电平复位。提示&#xff1a;其实本质上是一个简单的数学问题&#xff0c;即如何使用最小公倍数得到时钟周期的分别频比。设小…...

编程日记 2023/8/2 4:45:41

大整数截取解决方法（java代码）

大整数截取解决方法&#xff08;java代码&#xff09; 描述输入描述输出描述输入示例输出示例前置知识&#xff1a;代码 解题思路来自这个博客&#xff1a;简单^不简单 https://blog.csdn.net/younger_china/article/details/126376374 描述 花花有一个很珍贵的数字串&#xf…...

编程日记 2023/8/2 4:44:39

Spring Boot使用@Async实现异步调用：自定义线程池

一、定义线程池 第一步&#xff0c;先在Spring Boot主类中定义一个线程池&#xff0c;比如&#xff1a; SpringBootApplication public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}EnableAsyncConfigurat…...

编程日记 2023/8/2 4:43:37

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/12/20 21:21:16

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/12/7 12:19:22

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/12/15 11:25:33

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/12/21 9:09:26

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/16 17:13:34

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50