JavaScript的数组(一维数组、二维数组、数组常用的方法调用)

天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


玉阶生白露,夜久侵罗袜。却下水晶帘,玲珑望秋月。


文章目录

  • 一、数组(一维数组)
    • 1. 定义语法
      • 1.1 语法1
      • 1.2 语法2
      • 1.3 语法3
    • 2. 注意事项
    • 3. 常用方法
    • 4. 示例代码
    • 5. 控制台结果
  • 二、二维数组
    • 1. 定义语法
      • 1.1 语法1
      • 1.2 语法2
    • 2. 示例代码
    • 3. 浏览器页面输出
  • 三、示例代码下载


JS系列篇:
JS(JavaScript)入门学习指南
JS(JavaScript)学习专栏


一、数组(一维数组)

1. 定义语法

定义的语法有三种方式如下

1.1 语法1

先声明后赋值

        var arr1 = new Array();
        arr1[0] = 0;
        arr1[1] = 1;
        arr1[2] = 2;

1.2 语法2

声明时直接赋值,如赋值1,2,3

        var arr2 = new Array(1,2,3);

1.3 语法3

声明时直接赋值,如赋值1,2,3

        var arr3 = [4,5,6];

2. 注意事项

数组长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取数组的长度

3. 常用方法

数组可调用的函数方法,常用的有以下几种

方法描述
sort()排序,默认按字符编码的顺序排列,非string类型会自动转换为string,可自定义比较规则
reverse()反转,将数组元素倒序排列
join(separator)将数组中元素使用指定的分隔符连接成字符串,默认通过都好进行连接
indexOf()返回指定元素在数组中首次出现的位置
slice(begin,end)截取数组中索引从begin到end的元素,左闭右开,如果省略第二个参数,则表示截取到末尾
toString()将数组转换为字符串

4. 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组</title>

    <script>

        //语法1
        var arr1 = new Array();
        arr1[0] = 0;
        arr1[1] = 1;
        arr1[2] = 2;
        //语法2
        var arr2 = new Array(1,2,3);
        //语法3
        var arr3 = [4,5,6];

        console.log(arr1[1]);
        console.log(arr2[2]);
        //索引为3的值并没有,故返回undefined
        console.log(arr3[3]);
        console.log(arr3.length);

        //举例
        var list = [];
        for(var i=0;i<10;i++){
            if(i%2==0){
                list[i/2]=i;
            }
        }
        console.log("小于10且整除2的数的集合:",list);

        console.log("----------------------------------------------------------------------------------------------");

        var strList = ["libai","dufu","baijuyi","lishangyin","dumu","menghaoran"];
        console.log(strList);
        
        strList.sort();
        console.log("将数组排序:",strList);
        
        strList.reverse();
        console.log("将数组反转:",strList);

        newst = strList.join();
        console.log("将数组以逗号连接:",newst);

        newstr = strList.join("=");
        console.log("将数组以=连接:",newstr);

        var index = strList.indexOf("libai");
        console.log("值为libai的索引:", index);

        var newList1 = strList.slice(1,3);
        console.log("索引为1到3的值:",newList1);
        var newList2 = strList.slice(1);
        console.log("索引为1到最后一个的值:",newList2);
        
    </script>

</head>
<body>
    
</body>
</html>

5. 控制台结果

浏览器控制台打印
在这里插入图片描述

二、二维数组

二维数组是一维数组的变形,相当于每个元素都是一个一维数组

1. 定义语法

1.1 语法1

先声明对象在填充值

        var arr1 = new Array();
        arr1[0] = new Array(1,2,3);
        arr1[1] = [4,5,6];
        arr1[2] = [7,8,9];

1.2 语法2

直接填充值

        var arr2 = [
            [1,2,3],
            [4,5,6],
            [7,8,9]
        ];

2. 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维数组</title>

    <script>

        //二维数组就是特殊的一维数组,二维数组中的每个元素是一个一维数组

        //语法1
        var arr1 = new Array();
        arr1[0] = new Array(1,2,3);
        arr1[1] = [4,5,6];
        arr1[2] = [7,8,9];
        console.log(arr1[1][2]);

        //语法2
        var arr2 = [
            [1,2,3],
            [4,5,6],
            [7,8,9]
        ];
        console.log(arr2[2][2]);

        //打印二维数组中的元素,由于控制台打印无法满足换行,故使用页面打印
        for(var i=0;i<arr2.length;i++){
            for(var j=0;j<arr2[i].length;j++){
                //页面打印数组
                document.write(arr2[i][j]+"&nbsp;&nbsp;");
            }
            //换行
            document.write("<br>");
        }

    </script>

</head>
<body>
    
</body>
</html>

3. 浏览器页面输出

浏览器页面打印结果
在这里插入图片描述

三、示例代码下载

示例代码已上传至CSDN资源库
下载地址:JavaScript 选择结构和循环结构 示例代码


感谢阅读,祝君暴富!

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

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

相关文章

eclipse 老的s2sh(Struts2+Spring+Hibernate) 项目 用import导入直接导致死机(CPU100%)的解决

1、下载Apache Tomcat - Apache Tomcat 8 Software Downloads 图中是8.5.100的版本&#xff0c;下面的设置用的是另一个版本的&#xff0c;其实是一样。 2、先将Server配好&#xff0c;然后再进行导入操作。 2、选择jdk 当然&#xff0c;这里也可以直接“Download and instal…

无公网IP与服务器完成企业微信网页应用开发远程调试详细流程

文章目录 前言1. Windows安装Cpolar2. 创建Cpolar域名3. 创建企业微信应用4. 定义回调本地接口5. 回调和可信域名接口校验6. 设置固定Cpolar域名7. 使用固定域名校验 前言 本文主要介绍如何在企业微信开发者中心通过使用内网穿透工具提供的公网域名成功验证回调本地接口服务! …

Solr7.4.0报错org.apache.solr.common.SolrException

文章目录 org.apache.solr.common.SolrException: Exception writing document id MATERIAL-99598435990497269125316 to the index; possible analysis error: cannot change DocValues type from NUMERIC to SORTED_NUMERIC for field "opt_time"Exception writing…

为什么说掌握心理学知识成为产品经理一门必修课?

大家好&#xff0c;我是herosunly。985院校硕士毕业&#xff0c;现担任算法研究员一职&#xff0c;热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名&#xff0c;CCF比赛第二名&#xff0c;科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的…

uniapp地图导航

我们只需要给图标加一个点击事件 我这里的数据都是动态的&#xff0c;想测试的朋友可以写固定值 然后跳转之后首先会调到选择软件导航 点击导航之后会显示使用哪个app 最后我们选择之后将会直接跳转到app进行导航

【启明智显彩屏应用】Model3A 7寸触摸彩屏的充电桩应用方案

一、充电桩概述 &#xff08;一&#xff09;充电桩诞生背景 随着社会的进步和人们生活质量的提升&#xff0c;汽车已逐渐融入每个家庭的日常生活中。然而&#xff0c;汽车数量的激增也带来了严重的环境污染问题&#xff0c;特别是尾气排放。为了应对这一挑战&#xff0c;新能源…

Modbus协议转Profinet协议网关与气体监测系统配置案例

一、背景&#xff1b;Modbus协议和Profinet协议作为工业领域常见的两种通讯协议&#xff0c;各自具有一定的特点和应用范围。Modbus转Profinet网关&#xff08;XD-MDPN100/300&#xff09;在工业自动化控制系统中&#xff0c;可以将Modbus协议转换为Profinet协议&#xff0c;以…

认识线性调频信号(LFM)和脉冲压缩

目录 1. 线性调频&#xff08;LFM&#xff09;信号&#xff1a;2.Matlab仿真3.脉冲压缩 微信公众号获取更多FPGA相关源码&#xff1a; 1. 线性调频&#xff08;LFM&#xff09;信号&#xff1a; 在时域中&#xff0c;一个理想的线性调频信号或脉冲持续时间为T秒&#xff0c;…

加码多肤色影像技术 这是传音找到的“出海利器“?

全球化时代&#xff0c;市场竞争愈演愈烈&#xff0c;产品差异化已然成为了企业脱颖而出的关键。在黄、白肤色长期占据人像摄影主赛道的背景下&#xff0c;传音就凭借独一无二的多肤色影像技术走出非洲&#xff0c;走向了更广阔的新兴市场。 聚焦深肤色人群拍照痛点&#xff0c…

web端使用高德地图

web端使用高德地图 一、申请高德key和秘钥二、在项目中引入所需功能js、css文件三、实现地图选点、回显选点四、自定义地图 一、申请高德key和秘钥 申请高德key 申请成功后可以得到key 二、在项目中引入所需功能js、css文件 <script src"https://webapi.amap.com/m…

【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】感知器

感知器是一种非常早期的线性分类模型&#xff0c;作为一种简单的神经网络模型被提出。感知器是一种模拟生物神经元行为的机器&#xff0c;有与生物神经元相对应的部件&#xff0c;如权重&#xff08;突触&#xff09;、偏置&#xff08;阈值&#xff09;及激活函数&#xff08;…

在项目中使用Volta控制node版本

在项目中使用Volta控制node版本 前端的技术很多年前就已经是井喷的状态了&#xff0c;基本每一年都有技术的迭代&#xff0c;而node作为前端基石之一也是一年一个样&#xff0c;这就导致了不同年代的版本使用不同的项目会经常出问题&#xff0c;高版本的node无法用于老的项目。…

【设计模式】行为型-模板方法模式

方法千变万化&#xff0c;心灵如潮&#xff0c;模板如画&#xff0c;画出生活的韵味。 文章目录 一、茶与咖啡二、模板方法模式三、模板方法模式的核心组成四、运用模板方法模式五、模板方法模式的应用场景六、小结推荐阅读 一、茶与咖啡 场景假设&#xff1a;我们需要完成茶…

测试开发面经分享,面试七天速成 DAY2

1. TCP和UDP的区别 a. TCP是面向连接的协议&#xff0c;而UDP是无连接的协议。 b. TCP提供可靠的数据传输&#xff0c;保证数据的有序性和完整性&#xff0c;而UDP则不提供这些保证。 c. TCP使用流控制和拥塞控制机制&#xff0c;以确保数据的可靠传输&#xff0c;而UDP没有这…

HCIE-QOS基本原理

QOS基本原理 QOS概述什么是QOSQoS服务模型区分服务模型QoS常用技术 (DiffServ模型)QoS数据处理流程 (DiffServ模型) QoS流分类和流标记QoS数据处理流程为什么需要流分类和流标记 简单流分类外部优先级 - VLAN报文外部优先级 - MPLS报文外部优先级 - IP报文各外部优先级间的对应…

Kafka集成flume

1.flume作为生产者集成Kafka kafka作为flume的sink&#xff0c;扮演消费者角色 1.1 flume配置文件 vim $kafka/jobs/flume-kafka.conf # agent a1.sources r1 a1.sinks k1 a1.channels c1 c2# Describe/configure the source a1.sources.r1.type TAILDIR #记录最后监控文件…

计算机视觉基础课程知识点总结

图像滤波 相关: 核与图像同向应用&#xff0c;不翻转。 卷积: 核在应用前翻转&#xff0c;广泛用于信号处理和深度学习&#xff08;现在常说的二维卷积就是相关&#xff09;。 内积: 向量化的点积操作&#xff0c;是相关和卷积的一部分。 模板匹配&#xff1a;通过在图像中…

Go变量作用域精讲及代码实战

1. 变量的作用域概述 在编程中&#xff0c;变量的作用域&#xff08;Scope&#xff09;定义了变量在程序中的可见性和生命周期。理解变量的作用域对于编写健壮且可维护的代码至关重要。Go语言&#xff08;简称Go&#xff09;提供了几种不同的作用域类型&#xff0c;使得开发者可…

13600KF+3060Ti,虚拟机安装macOS 14,2024年6月

距离上次装macOS虚拟机已经有一段时间了&#xff0c;macOS系统现在大版本升级的速度也是越来越快了&#xff0c;由于Office只支持最新三个版本的macOS&#xff0c;所以现在保底也得安装macOS 12了&#xff0c;我这次是用macOS 14做实验&#xff0c;13和12的安装方式和macOS 14一…

Word同行内的文字如何左右分别对齐

先打开标尺&#xff08;视图-标尺&#xff09; 开右边&#xff0c;选一个制表位置&#xff0c;比如我选34 切回开始&#xff0c;点段落段落右下角 然后 然后 我修改为35&#xff08;因为“6月13日”总共3个字符&#xff09; 在文字中间按下Tab键&#xff0c;效果如下