【js】数组学习笔记(7-1)

简介: 【js】数组学习笔记(7-1)


什么是数组?

数组是使用单独的变量名来存出一系列的值

//创建数组
        var arr=['javascript',123,2.5,true,'ok'];//定义数组arr

创建数组的方法:

⏺️采用直接量创建数组

//采用直接量创建数组
        var arr1=[];//先创建一个空数组
        var arr2=["js",123,2.5,true,"ok"];//定义和赋值同时进行,创建一个有5个元素的数组

⏺️采用Array类构造函数

//采用Array类的构造函数创建
        var arr1=new Array();
        var arr2=new Array("js",123,2.5,true,"ok");//创建一个有5个元素的数组
        var arr3=new Array(5);//创建一个长度为5的数组

索引下标:简称下标,以数字表示,默认从0开始一次递增,用于识别元素。

值:元素的内容,可以是任意类型的数据,如数值型、字符型、数组、对象等

数组的基本操作有哪些?

1. 获取数组的长度——length属性:使用Array对象的length属性可以获得数组的长度,该属性的值代表了数组中元素的个数。

语法:arrayObj.length

举个🍐:

//length获取数组长度
        var arr1=[10,20,30,40];
        document.write("数组arr1的长度为"+arr1.length+"<br>");
        var arr2=new Array();
        arr2[0]="john";
        arr2[2]="Wendy";
        document.write("数组arr2的长度为"+arr2.length+"<br>");

输出结果如下:

♦️对于下标不连续的数组而言,length表示的是数组所占内存空间的数目,而不仅仅是数组中元素的个数

数组的length属性在创建数组时可以初始化

2.获取数组元素:按元素的下标获取元素值

语法格式:数组名【下标】

一次只能返回一个元素值

3.数组的遍历:一次对每个元素均做一次且做一次访问,遍历数组就是对数组所有元素依次进行访问

一般使用for循环或for…in循环

举个🍐for循环

//使用for循环依次输出数组arr1中的元素
        var arr=[10,20,30,40];
        for(var i=0;i<arr.length;i++){
            document.write(arr[i]+" ");
        }
        //输出10,20,30,40

举个🍐for…in循环

//for...in循环查找数组最大元素功能
        var arr=new Array(5,20,10,8,32,28);
        var max=arr[0];//假设第一个元素是最大值
        for(var i in arr){
            if(arr[i]>max)
            {
                max=arr[i];//如果当前遍历的元素大于max,则将其设置为max
            }
        }
        document.write("最大值为"+max);//最大值为32

✨注意:for…in是以任意顺序遍历一个对象的可枚举属性,因为迭代的顺序是依靠执行环境,所以数组遍历不一定按次序访问元素。

如何添加数组元素?

(1)unshift方法:

✨unshift方法将一个或多个新元素添加数组起始位置(即头部),数组中的原元素自动后移,并返回数组新长度

语法:

举个🍐

var arr=new Array(5,20,10,8,32,28);
        document.write("unshift前arr数组长度为"+arr.length+"<br>");
        document.write("unshift前arr数组元素为:");
        for(var i=0;i<arr.length;i++)
        {
            document.write(arr[i]+" ");
        }
        arr.unshift("hello","world");
        document.write("<br>unshift后数组长度为"+arr.length+"<br>");
        document.write("unshift后数组元素为:");
        for(var i=0;i<arr.length;i++)
        {
            document.write(arr[i]+" ");
        }

输出结果如下:

(2)push方法

push方法将一个或多个新元素添加到数组结尾,并返回数组新长度

语法:

举个🍐

//push添加数组结尾
        var arr=new Array(5,20,10,8,32,28);
        document.write("push前arr数组长度为"+arr.length+"<br>");
        document.write("push前arr数组元素为:");
        for(var i=0;i<arr.length;i++)
        {
            document.write(arr[i]+" ");
        }
        arr.push("hello","world");
        document.write("<br>push后数组长度为"+arr.length+"<br>");
        document.write("push后数组元素为:");
        for(var i=0;i<arr.length;i++)
        {
            document.write(arr[i]+" ");
        }

输出结果如下:

(3)splice方法

splice()方法用于添加或删除数组中的元素,可以在指定位置添加元素

语法:

举个🍐

//splice方法插入数组
        var arr=new Array(5,20,10,8,32,28);
        document.write("splice前arr数组长度为"+arr.length+"<br>");
        document.write("splice前arr数组元素为:");
        for(var i=0;i<arr.length;i++)
        {
            document.write(arr[i]+" ");
        }
        arr.splice(2,0,"hello","world");
        document.write("<br>splice后arr数组长度为"+arr.length+"<br>");
        document.write("splice后arr数组元素为:");
        for(var i=0;i<arr.length;i++)
        {
            document.write(arr[i]+" ");
        }

输出结果显示:

如何删除数组元素?

(1)shift方法

shifit方法将移除最前一个元素并返回该元素值,数组中元素自动前移

语法:array.shift()

举个🍐 使用shift删除arr第一个元素

//shift元素删除第一个数组
        var arr=new Array(5,20,10,8,32,28);
        arr.shift();//输出【20,01,8,32,28】

(2)pop方法

pop()方法用于删除数组的最后一个元素并返回删除的元素

语法:array.pop()

//pop用于删除最后一个元素,并返回删除的元素
        var arr=new Array(5,20,10,8,32,28);
        arr.pop();

(3)splice方法

splice方法将删除从指定位置deletePos(删除开始的位置)开始的指定数量deleteCount(删除元素的个数)的元素,数组形式返回所移除元素

语法:arry.splice(deletepos,deleteCount)

举个🍐从数组arr中第二个元素开始删除,共删除两个元素

//splice方法从指定数组中删除两个元素
        var arr=new Array(5,20,10,8,32,28);
        arr.splice(1,2);//输出【5,8,32,28】

数组案例-1

举个🍐计算输入的日期是第几天

//数组案例-就算输入日期是第几天
        //使用一维数组判断这一天是当年是第几天并打印
        var daterArr=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
        //输入年月日
        var year=Number(prompt('请输入年份'));
        var month=Number(prompt('请输入月份'));
        var day=Number(prompt('请输入日'));
        var totalDay=0;
        for(var i=0;i<month-1;i++){
            totalDay+=daterArr[i];
        }
        totalDay+=day;
        //判断是否是闰年
        if(month>2&&(year%4==0&&year%100!=0 || year%400==0)){
            totalDay++;
        }document.write('输入的日期是当年日'+totalDay+'天');

输出结果如下:

数组案例-2

举个🍐 计算平均分与总分

//计算平均分与总分
        //提示用户输入学生的人数以及每个学生的考试成绩并打印出来
        //计算该班级的总分和平均分并打印出来
        var num=Number(prompt('请输入学生人数'));
        var score=[];
        for(var i=0;i<num;i++){
            score[i]=prompt('请输入第'+(i+1)+'个学生成绩,范围在0-100之间');
        }
        //计算总分和平均分
        var sum=0;
        for(var i=0;i<score.length;i++){
            document.write('学生成绩'+(i+1)+':'+score[i]+'<br>');
            sum=sum+Number(score[i]);
        }
        //输出
        document.write('总分为:',sum+'<br>');
        document.write('平均分:',(sum/num).toFixed(2));

输出结果如下:


目录
相关文章
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
34 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
28 3
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
39 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
43 1
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
27 5
|
2月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
19 3
|
2月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
51 1
|
2月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
26 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
27 3
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示