08_JavaScript数据操作方法_数组

目录

一、创建一个数组

1.1 数组如何创建

字面量创建

构造函数创建

1.2 数组的长度

数组名.length 

1.3 数组的索引

1.4 数组如何循环遍历

for 循环遍历

for in

for of

二、数组的常用方法 (重点 面试)

push 方法

unshift 方法

pop

shift

splice

reverse

sort

concat

join

slice

练习

作业


 

一、创建一个数组

  • [] 装起来的内容构成了一个数组 比如[2,8,'hello',true] 中间逗号分割

1.1 数组如何创建

分成两种方式

  • 字面量创建

 // 字面量创建 var arr = []; //创建了一个空数组var arr1 = [11,22,33,44,55,99];// 创建了一个有内容的数组
  • 构造函数创建

    //构造函数创建var arr2 = new Array();// 创建了一个空数组 var arr3 = new Array("hello","js","!");// 创建了一个有内容的数组console.log(arr3);

1.2 数组的长度

数组名.length 

  • length 代表长度,数组里有多少个成员,length就是多少

var arr3 = new Array("hello","js","!");// 创建了一个有内容的数组
console.log(arr3.length);

1.3 数组的索引

  • 索引就是下标,是指一个数据在数组里面排在第几个位置

  • 注意:下标从0开始的,所有编程语言里的下标都是从0开始

  • 想获取数组的第几个元素就 数组[索引]

var arr1 = [11, 22, 33, 44, 55, 99];// 创建了一个有内容的数组//构造函数创建
var arr3 = new Array("hello", "js", "!");// 创建了一个有内容的数组
// console.log(arr3.length);// 如何通过下标获取数组的某一项
console.log(arr1[0]);//11
console.log(arr1[5]);//99
console.log(arr3[1]);//js

1.4 数组如何循环遍历

  • for 循环遍历

var arr = ["11","22","33","44","55","66"];
// 1  直接通过for循环遍历
for(var i=0;i<arr.length;i++){//i  0-8  9次console.log(arr[i]); //0-8 的值
}i<arr.length  因为length就是数组的长度,就是一个数字,可以直接把它当成循环的次数
arr[i]  //i 代表 0 1 2 3 4...  相当于arr[0] arr[1] arr[2] arr[3]
  • for in

       // 2  for  in 遍历数组  直接获取到数组的索引for(idx in arr){console.log("数组下标是"+idx);// 可以获取到下标,通过下标拿到数组的每一个元素console.log("数组元素是"+arr[idx]);}
  • for of

        // 3 for of  遍历数组  直接获取到数组的元素for(item of arr){console.log(item); }

二、数组的常用方法 (重点 面试)

  • push 方法

    • 就是在数组的末尾追加一个元素,返回添加之后的数组的长度

    • 会修改原数组的

var arr = [1,2,3,4,5];
var res = arr.push("哈哈哈");
console.log(arr,"添加后");
console.log(res);//6

unshift 方法

  • 就是在数组的最前边添加一个元素,返回添加之后的数组的长度

  • 会修改原素组的

var arr = [1,2,3,4,5,6,8];
var res = arr.unshift("00000");
console.log(arr);
console.log(res);//8

pop

  • 用来删除数组末尾的一个元素,返回删除的元素

  • 会修改原数组

var arr = [1,2,3,4,5];
var res = arr.pop();
console.log(arr); //[1, 2, 3, 4]
console.log(res); //5

shift

  • 删除数组最前边的一个元素,返回删除的元素

  • 会修改原数组

var arr = [1,2,3,4,5];var res = arr.shift();console.log(arr); //[2, 3, 4, 5]console.log(res); //1

splice

  • 用来截取数组中的某些内容,按照数组的索引来截取,返回截取的内容

  • 也会修改原数组

  • 语法1:数组.splice(从哪个索引位置开始截取,截取的个数)

  • 语法2:数组.splice(从哪个索引位置开始截取,截取的个数,替换的新元素) 第三个参数可以不写

    var arr = ["hello","js","heihei","haha","html","Css"];var res = arr.splice(2,3);console.log(arr);//['hello', 'js', 'Css']console.log(res);三个参数var arr = ["正在加载","正在加载","正在加载","正在加载"];//arr.splice(0,1,"加载完成");//console.log(arr); //['加载完成', '正在加载', '正在加载', '正在加载']arr.splice(0,2,"加载完成")console.log(arr);//['加载完成', '正在加载', '正在加载']

reverse

  • 用来翻转数组 把数组反过来

  • 会修改原数组

var arr = [1,2,3,4,5,6];
arr.reverse();
console.log(arr); //[6, 5, 4, 3, 2, 1]// 数组的方法  是可以连用的arr.reverse().splice(0,2);console.log(arr);//[4, 3, 2, 1]

sort

  • 用来给数组排序的 给一个无序的数组排列成有序的

  • 会修改原数组

var arr = [8,2,1,3,6,9];
arr.sort();
console.log(arr); //[1, 2, 3, 6, 8, 9]  从小到大排序
===================================================// 从小到大排序
// arr.sort(function (a,b){
//     return a-b  // 从小到大排序
// })
// console.log(arr);// 从大到小排序
arr.sort(function (a,b){return b-a  // 从大到小排序
})
console.log(arr); //[9, 8, 6, 3, 2, 1]
=====================================================var arr1 = [{name:"张三",age:18
},{name:"李四",age:16
},{name:"王五",age:20
}]// 按照年龄排序
arr1.sort(function(a,b){return b.age - a.age
})
console.log(arr1);

concat

  • 用来数组合并的 把多个数组合在一起

  • 不会改变原来的数组,会返回一个新的合并后的数组

var arr = [1,2,3,4];
var arr1 = ["hello","js"];
var arr2 = [true,false];
var newArr = arr.concat(arr1)
console.log(arr,arr1); // [1, 2, 3, 4]  ['hello', 'js']
console.log(newArr);//[1, 2, 3, 4, 'hello', 'js']

join

  • 是把数组里边的每一项内容连接起来,变成一个字符串

  • 中间的连接符可以自己定义

  • 不会改变原数组 而是返回新的字符串

var arr = [1,2,3,4,5,6];
var str = arr.join();
var str1 = arr.join("");
var str2 = arr.join("-")
console.log(arr);//[1, 2, 3, 4, 5, 6]
console.log(str);//1,2,3,4,5,6
console.log(str1);//123456
console.log(str2);//1-2-3-4-5-6

slice

  • 取出数组的一部分

  • 两参数 arr.slice(开始位置,结束位置) 不包含结束位置

  • 不会改变原数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 两参数 `arr.slice(开始位置下标,结束位置下标)`   不包含结束位置
//var res = arr.slice(0, 3)
var res = arr.slice(4,6);
console.log(res); // [1, 2, 3]
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

练习

1、山上有一口缸可以装50升水,现在有15升水。老和尚让小和尚去挑水,小和尚一次挑5升,问

小和尚挑几次可以把水缸挑满?编程实现

循环  几次  不确定的
一次挑5升  一次往数组里push 5
var arr = [15]// - 次数  可能是多次   多次想到循环
// 次数不确定几次  想写个死循环  符合结束条件停止循环var arr = [15];while(true){// 1- 执行一次就往数组里 push 5arr.push(5)// 2- 等到数组里的数组元素和相加>=50 这个循环该停止var sum = 0;for(var i=0;i<arr.length;i++){sum = sum + arr[i];}if(sum>=50){// 桶满了// 不需要循环了break;}}console.log(arr);console.log("挑了"+(arr.length-1)+"次");二选一var arr = [15]
var sum = 0
for (var i = 0; i < arr.length; i++) {sum += arr[i]if (sum < 50) {arr.push(5)} else {console.log(i);}
}

作业

1、定义一个含有30个整形元素的数组,按顺序分别赋予从2开始的偶数,然后按顺序每五个求出一个平均值,

放在另一个数组中并输出 编程实现

var arr = [2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40...];
不要写死一个数组 定义一个空数组  循环 往空数组里push  每五个求出一个平均值
[6, 16,26, 36,46,56]

2、编写一个函数,把数组中的每一个数都增加30%,返回一个新数组

var arr = [10,100,200];
function fn(){//XXXXX
}

3、编写一个函数 ,判断数组中是否存在55这个元素,返回布尔值 (选做)

var arr = [1,2,3,4,55];
var arr1 = [1,2,3,4,6,7,8];
function fn(){XXXXXX
}
fn(arr,55); //true
fn(arr1,55);//false

 

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

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

相关文章

2025.3.25总结

工作&#xff1a;这两天工作都没啥产出&#xff0c;主要是工作状态不太好&#xff0c;周日晚上两点睡&#xff0c;周一晚上一点睡。熬夜伤身&#xff0c;但就是控制不住自己&#xff0c;睡前总要刷刷手机。本来想睡前看会书的&#xff0c;但这行为及其不稳定&#xff0c;抖音也…

《Python实战进阶》第33集:PyTorch 入门-动态计算图的优势

第33集&#xff1a;PyTorch 入门-动态计算图的优势 摘要 PyTorch 是一个灵活且强大的深度学习框架&#xff0c;其核心特性是动态计算图机制。本集将带您探索 PyTorch 的张量操作、自动求导系统以及动态计算图的特点与优势&#xff0c;并通过实战案例演示如何使用 PyTorch 实现…

初识哈希表

一、题意 给定一个整数数组 nums 和一个目标值 target&#xff0c;要求你在数组中找出和为目标值的那两个整数&#xff0c;并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素不能使用两遍。 示例&#xff1a; 给定 nums [2, 7, …

23种设计模式-创建型模式-单例

文章目录 简介问题1. 确保一个类只有一个实例2. 为该实例提供全局访问点 解决方案示例重构前&#xff1a;重构后&#xff1a; 拓展volatile 在单例模式中的双重作用 总结 简介 单例是一种创建型设计模式&#xff0c;它可以确保一个类只有一个实例&#xff0c;同时为该实例提供…

python裁剪nc文件数据

问题描述&#xff1a; 若干个nc文件储存全球的1850-2014年月尺度的mrro数据(或其他数据)&#xff0c;从1850-1到2014-12一共1980个月&#xff0c;要提取出最后35年1980.1~2014.12年也就是420个月的数据。 代码实现 def aaa(input_file,output_file,bianliang,start_index,en…

深入解析 Spring Framework 5.1.8.RELEASE 的源码目录结构

深入解析 Spring Framework 5.1.8.RELEASE 的源码目录结构 1. 引言 Spring Framework 是 Java 领域最流行的企业级开发框架之一&#xff0c;广泛用于 Web 开发、微服务架构、数据访问等场景。本文将深入解析 Spring Framework 5.1.8.RELEASE 的源码目录结构&#xff0c;帮助开…

数据清洗:基于python抽取jsonl文件数据字段

基于python抽取目录下所有“jsonl”格式文件。遍历文件内某个字段进行抽取并合并。 import os import json import time from tqdm import tqdm # 需要先安装&#xff1a;pip install tqdmdef process_files():# 设置目录路径dir_path r"D:\daku\关键词识别\1623-00000…

Windows 下使用 Docker 部署 Go 应用与 Nginx 详细教程

一、环境准备 1. 安装必要软件 Docker Desktop for Windows 下载地址&#xff1a;Docker Desktop: The #1 Containerization Tool for Developers | Docker 安装时勾选"使用 WSL 2 引擎"&#xff08;推荐&#xff09; WSL 2&#xff08;Windows Subsystem for Li…

C# .net ai Agent AI视觉应用 写代码 改作业 识别屏幕 标注等

C# net deepseek RAG AI开发 全流程 介绍_c# 向量处理 deepseek-CSDN博客 视觉多模态大模型 通义千问2.5-VL-72B AI大模型能看懂图 看懂了后能干啥呢 如看懂图 让Agent 写代码 &#xff0c;改作业&#xff0c;识别屏幕 标注等等。。。 据说是目前最好的免费图片识别框架 通…

Docker多阶段构建:告别臃肿镜像的终极方案

Docker多阶段构建:告别臃肿镜像的终极方案 你是否遇到过这样的问题:一个简单的应用,Docker镜像却高达1GB?编译工具、临时文件、开发依赖全被打包进去,导致镜像臃肿且不安全。 多阶段构建(Multi-stage Build) 就是为解决这一问题而生——它像搬家时“只带必需品”,让生…

大模型应用开发之大模型工作流程

一&#xff1a;大模型的问答工作流程 1.1: 分词和向量化 如上图所示&#xff0c;我们如果让大模型去回答问题&#xff0c;首先我们会输入一些文字给到大模型&#xff0c;大模型本质上是个数学模型&#xff0c;它是理解不了人类的整句话的&#xff0c;所以它会把我们的对应的句…

SpringMVC 请求处理

SpringMVC 请求处理深度解析&#xff1a;从原理到企业级应用实践 一、架构演进与核心组件协同 1.1 从传统Servlet到前端控制器模式 SpringMVC采用前端控制器架构模式&#xff0c;通过DispatcherServlet统一处理请求&#xff0c;相比传统Servlet的分散处理方式&#xff0c;实…

12届蓝桥杯—货物摆放

货物摆放 题目描述 小蓝有一个超大的仓库&#xff0c;可以摆放很多货物。 现在&#xff0c;小蓝有 nn 箱货物要摆放在仓库&#xff0c;每箱货物都是规则的正方体。小蓝规定了长、宽、高三个互相垂直的方向&#xff0c;每箱货物的边都必须严格平行于长、宽、高。 小蓝希望所…

Reactor/Epoll为什么可以高性能?

在 Reactor 模式中使用 epoll_wait 实现低 CPU 占用率的核心原理是 ​事件驱动的阻塞等待机制&#xff0c;而非忙等待。以下通过分步骤解析其工作原理和性能优势&#xff1a; void network_thread() {int epoll_fd epoll_create1(0);epoll_event events[MAX_EVENTS];// 添加U…

批量优化与压缩 PPT,减少 PPT 文件的大小

我们经常能够看到有些 PPT 文档明明没有多少内容&#xff0c;但是却占用了很大的空间&#xff0c;存储和传输非常的不方便&#xff0c;这时候通常是因为我们插入了一些图片/字体等资源文件&#xff0c;这些都可能会导致我们的 PPT 文档变得非常的庞大&#xff0c;今天就给大家介…

Java基础 3.22

1.break练习 //1-100之内的数求和&#xff0c;求当和第一次大于20的当前数i public class Break01 {public static void main(String[] args) {int n 0;int count 0;for (int i 1; i < 100; i) {count i;System.out.println("当前和为" count);if (count &g…

高性能MySQL笔记

高性能MySQL笔记 《高性能MySQL》第1章 MySQL架构**第一章核心知识点总结****多选题**多选题答案**答案与详解总结** 《高性能MySQL》第2章 可靠性程世界中的监控核心知识点多选题答案及解析重点巩固方向 《高性能MySQL》第3章 Performance Schema**第三章核心知识点总结****多…

导游职业资格考试:从迷茫到清晰的备考指南

当你决定报考导游职业资格考试时&#xff0c;可能会感到有些迷茫&#xff0c;不知道从何处入手。别担心&#xff0c;这份备考指南将带你从迷茫走向清晰。​ 第一步&#xff0c;全面了解考试。导游职业资格考试分为笔试和面试。笔试的四个科目各有特点&#xff0c;《政策与法律…

【BFS】《BFS 攻克 FloodFill:填平图形世界的技术密码》

文章目录 前言例题一、 图像渲染二、 岛屿数量三、岛屿的最大面积四、被围绕的区域 结语 前言 什么是BFS&#xff1f; BFS&#xff08;Breadth - First Search&#xff09;算法&#xff0c;即广度优先搜索算法&#xff0c;是一种用于图或树结构的遍历算法。以下是其详细介绍&am…

Linux安装MySQL数据库并使用C语言进行数据库开发

目录 一、前言 二、安装VMware运行Ubuntu 1.安装VMware 2.使用VMware打开Ubuntu 三、配置VMware使用网卡 1.添加NAT网卡 四、Linux下安装MySQL数据库 五、安装MySQL开发库 六、演示代码 sql_connect.c sql_connect.h main.c中数据库相关代码 结尾 一、前言 由于最…