JavaScript数组

最新推荐文章于 2024-09-25 14:00:00 发布
最新推荐文章于 2024-09-25 14:00:00 发布
阅读量144 收藏
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l2423282916/article/details/115359180
版权

文章目录

前言

数组也是一个对象，它和普通对象的功能类似，也是用来存储一些值的

一、创建数组

1.使用构造函数创建数组

在使用构造函数创建数组时，可以同时添加元素，将要添加的元素作为构造函数的参数传递，元素间使用“ ,”隔开

 		var arr=new Array(10,20,30);
        console.log(arr);//[10, 20, 30]

2.使用字面量创建数组

语法：[]

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

注：

  1. 数组中的元素可以是任意的数据类型（可以是对象，函数，数组）
 		
 		var arr=new Array();
        var obj=new Object();
        arr=["hello",1,true,null,undefined];
        console.log(arr);//["hello", 1, true, null, undefined]
        // 数组元素是对象
        arr[arr.length]=obj;
        console.log(arr);//["hello", 1, true, null, undefined, {…}]
        // 数组元素是函数
        arr=[function(){alert()},function(){alert(2)}];
        console.log(arr);//[ƒ, ƒ]
        // 数组元素是数组
        arr=[[1,2,3],[3,4,5],[5,6,7]];
        console.log(arr);//[Array(3), Array(3), Array(3)]
  1. 创建只有一个元素10的数组
     	var arr=[10];
     	console.log(arr);//[10]
  1. 创建一个长度为10的数组
 		var arr2=new Array(10);
        console.log(arr2);//[empty × 10]
        console.log(arr2.length);//10

二、数组的基本操作

普通对象使用字符串作为属性名   eg: obj.name="孙悟空"
数组则使用数字来作为索引操作元素  eg: Array[0]
  • 索引：从0开始的整数
  • 数组的存储性能比普通对象好，在开发中我们经常使用数组来存储一些数据
  • 使用typeof检查一个数组时，会返回object
    	var arr=new Array();
        console.log(typeof arr);//object

1.向数组中添加元素

语法：
		数组[索引]=值

  		var arr=new Array();
        console.log(typeof arr);//object
        //向数组中添加元素
        arr[0]=10;
        console.log(arr);//[object Array][10]
        console.log(arr[0]);//10

2.读取数组中的元素

语法：
		数组[索引]

如果读取不存在的索引，不会报错而是返回undefined

  		var arr=new Array();
        console.log(typeof arr);//object
        arr[0]=10;
        console.log(arr);//[object Array][10]
        console.log(arr[0]);//10
        //arr[1]不存在
        console.log(arr[1]);//undefined

3.获取数组的长度

可以使用length属性来获取数组的长度（元素的个数）

语法：
		数组[索引]
  • 对于连续的数组，使用length可以获取到数组的长度
  • 对于非连续的数组，使用length会获取到数组的最大索引+1，尽量不要创建非连续的数组
 		var arr1=new Array();  
        arr1[0]=10,arr1[1]=20,arr1[2]=30,arr1[3]=40,arr1[4]=50;
        var arr2=new Array();
        arr2[0]=0,arr2[10]=11,arr2[20]=22,arr2[30]=33,arr2[40]=44;
        console.log(arr1.length);//5
        console.log(arr2.length);//41

4.修改length

如果修改的length大于原长度，则多出部分会空出来
如果修改的length小于原长度，则多出的元素会被删除

 		var arr1 = new Array();
        arr1[0] = 10, arr1[1] = 20, arr1[2] = 30, 
        arr1[3] = 40, arr1[4] = 50;
        var arr2 = new Array();
        arr2[0] = 0, arr2[1] = 1, arr2[2] = 2, arr2[3] = 3, arr2[4] = 4;
        arr1.length=10;
        arr2.length=2;
        console.log(arr1);//[10, 20, 30, 40, 50, empty × 5]
        console.log(arr2);//[0, 1]

5.向数组的最后一个位置添加元素

语法：
	数组[数组.length]=值;

 		var arr=new Array();
        arr[0]=10;
        // 向数组中最后一个位置添加元素
        arr[arr.length]=33;
        // 向数组中最后一个位置添加元素
        arr[arr.length]=45;
        console.log(arr[1]);//33
        console.log(arr[2]);//45

三、数组的遍历

遍历数组，就是将数组中所有的元素都去取出来

1.for循环

 		var arr1=[1,2,3,4,5];
        for(var i=0;i<arr1.length;i++){
            console.log(arr1[i]);//1,2,3,4,5
        }

2.foreach()

foreach()方法需要一个函数作为参数

  • 由我们创建但是不由我们调用的，我们称为回调函数
  • 数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参，来读取这些内容
  • 浏览器会在回调函数中传递3个参数：
    第一个参数：当前正在遍历的元素
    第二个参数：当前正在遍历元素的索引
    第三个参数：正在遍历的数组对象
  		var arr=["孙悟空","猪八戒","沙和尚","唐僧"];
        arr.forEach(function(value,index,obj){
        console.log(value);//孙悟空,猪八戒,沙和尚,唐僧
        console.log(index);//0,1,2,3
        console.log(obj);//["孙悟空", "猪八戒", "沙和尚", "唐僧"],
        				 //["孙悟空", "猪八戒", "沙和尚", "唐僧"],
        				 //["孙悟空", "猪八戒", "沙和尚", "唐僧"],
        				 //["孙悟空", "猪八戒", "沙和尚", "唐僧"]
        });

IE8以下浏览器均不支持该方法，如需兼容IE8，则不要使用foreach

四、数组的方法

1.push()

——该方法可以向数组的末尾添加一个或多个元素，并返回数组新的长度
——可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
——该方法会将数组新的长度作为返回值返回

		var arr=[1,2,3,4,5];
		//向数组中添加元素10
        var x=arr.push(10);
        console.log(arr);//[1, 2, 3, 4, 5, 10]
        console.log(x);//6

2.pop()

——该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

		var arr=[1,2,3,4,5];
		//删除数组中最后一个元素
        var x=arr.pop();
        console.log(arr);//[1, 2, 3, 4]
        console.log(x);//5

3.unshift()

——向数组开头添加一个或多个元素，并返回新的数组长度
——向前边插入元素后，其他元素会依次调整

 		var arr=[1,2,3,4,5];
 		//向数组开头添加元素10
        var x=arr.unshift(10);
        console.log(arr);//[10, 1, 2, 3, 4, 5]
        console.log(x);//6

4.shift()

——可以删除数组的第一个元素，并将被删除的元素作为返回值返回

  		var arr=[1,2,3,4,5];
  		//删除数组的第一个元素
        var x=arr.shift();
        console.log(arr);//[2, 3, 4, 5]
        console.log(x);//1

5.slice()

——可以用来从数组中提取指定元素
——该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回
——参数：
	1.截取开始的位置的索引（包含开始索引）
	2.截取结束的位置的索引（不包含结束索引），若省略不写，则截取从开始索引往后的所有元素
——索引可以传递一个负值，如果传递一个负值，则从后往前计算
	eg： -1（倒数第一个）
		 -2（倒数第二个）

  		var arr=["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
        var result=arr.slice(1,4);
        console.log(result);//猪八戒,沙和尚,唐僧
        result=arr.slice(3);
        console.log(result);//唐僧,白骨精
        result=arr.slice(1,-1);
        console.log(result);//猪八戒,沙和尚,唐僧

6.splice()

——可以用于删除数组中的指定元素
——使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
——参数：
	第一个：表示开始位置的索引
	第二个：表示删除的数量
	第三个及以后：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

  		var arr=["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
        var result=arr.splice(0,1);
        console.log(arr);//["猪八戒", "沙和尚", "唐僧", "白骨精"]
        console.log(result);//["孙悟空"]

 		var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
        var result = arr.splice(0, 1,"牛魔王","铁扇公主","红孩儿");
        console.log(arr); // ["牛魔王", "铁扇公主", "红孩儿", "猪八戒", "沙和尚", "唐僧", "白骨精"]
        console.log(result); //["孙悟空"]

7.concat()

——可以连接两个或多个数组，并将新的数组返回
——该方法不会对原数组产生影响

   		var arr1=["孙悟空","猪八戒","沙和尚"];
        var arr2=["白骨精","玉兔精","蜘蛛精"];
        var arr3=["二郎神","太上老君","玉皇大帝"];
        var result=arr1.concat(arr2,arr3,"牛魔王","红孩儿");
        console.log(result);//["孙悟空", "猪八戒", "沙和尚", "白骨精", "玉兔精", "蜘蛛精", "二郎神", "太上老君", "玉皇大帝", "牛魔王", "红孩儿"]

8.join()

——该方法可以将数组转换为一个字符串
——该方法不会对原数组产生影响，只是转换为字符串，作为结果返回
——在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用“,”作为连接符

 		var arr=["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
        var result=arr.join("@_@");
        console.log(typeof result);//string
        console.log(result);//孙悟空@_@猪八戒@_@沙和尚@_@唐僧@_@白骨精
        result=arr.join();
        console.log(result);//孙悟空,猪八戒,沙和尚,唐僧,白骨精

9.reverse()

——该方法用来反转数组（前边的去后边，后边的去前边）
——该方法会直接修改原数组

		var arr = ["b", "d", "e", "a", "c"];
        var result = arr.reverse();
        console.log(arr);//["c", "a", "e", "d", "b"]
        console.log(result);//["c", "a", "e", "d", "b"]

10.sort()

——可以用来对数组中的元素进行排序
——会影响原数组，默认会按照Unicode编码进行排序

  		var arr = ["b", "d", "e", "a", "c"];
        arr.sort();
        console.log(arr);//["a", "b", "c", "d", "e"]

对于纯数字的数组，使用sort()排序时，会按照Unicode编码来排序。所以对数字排序时，可能会得到错误的结果

		var arr=[3,5,11,2,7];
        arr.sort();
        console.log(arr);// [11, 2, 3, 5, 7]

所以我们需要自己来指定排序的规则，我们可以在sort()中添加一个回调函数，来指定排序规则

  		var arr=[5,4,2,1,3,6,8,7,14,22];
        arr.sort(function(a,b){
            if(a<b){
                return -1;
            }else if(a>b){
                return 1;
            }else{
                return 0;
            }
        })
        console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 14, 22]

回调函数中定义了两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数（使用哪个元素调用不确定，但是a一定在b的前边）

浏览器会根据回调函数的返回值来决定元素的顺序：

  • 返回一个大于0的值，元素会交换位置
  • 返回一个小于0的值，元素位置不变
  • 返回一个等于0的值，两个元素相等，元素位置不变
    于是，更简便的我们可以：
 		var arr=[5,4,2,1,3,6,8,7,14,22];
        arr.sort(function(a,b){
           return a-b;
        })
        console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 14, 22]

五、数组去重

   		var arr=[1,2,3,2,2,1,3,4,2,5];
        for(var i=0;i<arr.length;i++){
            for(var j=i+1;j<arr.length;j++){
                if(arr[i]==arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        console.log(arr);//[1, 2, 3, 4, 5]
离殇人一曲
关注
专栏目录
JavaScript数组的长度
猿码互联
12-10 1004
在上面的代码示例中，我们首先定义了一个空数组。然后，使用pop()方法删除了一个元素，使用unshift()方法在数组开头添加了一个元素，再使用shift()方法删除了开头的元素。需要注意的是，通过修改数组的length属性可以增加或减少数组中元素的数量。如果将数组的length属性设置为小于当前元素数量的值，则数组末尾的元素将会被删除，否则将会在数组末尾添加undefined元素，直到数组长度等于设置的值。JavaScript数组的长度可以通过数组对象的length属性来获取，长度表示数组中元素的数量。
JavaScript数组练习题
qq_58492621的博客
07-18 2981
JavaScript数组方面的练习题，非常详细的练习题，对于新手学习JavaScript数组非常有帮助哦！
JavaScript 数组【详解】
Jin_Xiang123的博客
12-25 3940
在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。数组中的元素可以通过索引来访问和修改，索引从0开始。JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。操作示例描述创建数组。
JavaScript 数组
qq_55503600的博客
03-16 1472
数组是由对象发展而来，对象包含数组； 数组是一种有序的数据集合，数组中各个成员之间使用逗号进行分隔，它们被称为数组元素。 ['数组元素1','数组元素2','数组元素3','数组元素4'] 1、创建数组 （1）构造函数创建数组 语法格式：var 变量名 = new Array(元素 0，元素 1，...，元素 n); var array = new Array(1,2,3,4); （2）数组直接量创建数组 语法格式：var 变量名 = [元素 0，元素 1，...，元素 n]; va
『JavaScript』全面掌握JavaScript数组的操作、方法与高级技巧
老陈聊架构
12-26 1744
📣读完这篇文章里你能收获到：学习JavaScript中数组的基本操作，掌握JavaScript数组的多种内置方法，了解JavaScript中的数组扩展运算符、Array.from()和Array.of()等实用技巧，熟悉如何在JavaScript中使用数组方法进行数据处理
【JavaScript】数组 ③ ( JavaScript 数组长度 | 修改数组长度 | 数组案例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-29 1960
一、JavaScript 数组长度 1、数组长度 2、修改数组长度 二、数组案例 1、求数组元素平均值 2、求数组元素最大值
JavaScript数组基础练习题
欢迎来到长风沛雨的博客
11-13 3806
JavaScript数组基础练习题。
JavaScript 数组交集
six6de6的博客
11-16 5319
JavaScript 数组交集
JavaScript中的数组方法总结+详解
热门推荐
qq_43223007的博客
11-28 5万+
在JS中,数组方法是非常重要且常用的的方法.在此整理总结一番. JavaScript 数组的力量隐藏在数组方法中。 1. js常用数组方法 方法名 功能 返回值 是否改变原数组 版本 push() 在数组最后一位添加一或多个元素 返回长度 Y ES5- unshift() 在数组前添加一或多个元素 返回长度 Y ES5- 2.方法详解 1.push .........
JavaScript 数组- Array的方法总结(推荐)
12-10
以下是对JavaScript数组方法的详细总结： **一、创建数组** 1. 使用构造函数创建数组： ```javascript var colors = new Array(); // 创建空数组 var colors = new Array(3); // 创建长度为3的数组，但不包含...
Javascript数组Array方法解读
10-22
首先，需要了解的是，JavaScript数组的所有方法都定义在Array.prototype上，这意味着所有数组的实例都可以使用这些方法。Array.prototype本身也是一个数组，它包含了数组的原型方法。 1. concat方法 concat方法用于...
JavaScript数组常用操作技巧汇总
12-09
JavaScript数组是编程中常见且重要的数据结构，尤其在前端开发中扮演着不可或缺的角色。这篇文章将汇总JavaScript数组的一些常用操作技巧，帮助开发者更好地理解和利用数组功能解决问题。 ### 一、数组的性质 在...
JavaScript 数组的深度复制解析
01-19
对于javascript而言，数组是引用类型，如果要想复制一个数组就要动脑袋想想了，因为包括concat、slice在内的函数，都是浅层复制。也就是说，对于一个二维数组来说，用concat来做复制，第二维的数组还是引用，修改了...
JavaScript数组（源代码）
05-31
JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4355
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 307
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
vue上传预览CAD文件
只会写bug
09-24 513
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
最新发布
m0_59480939的博客
09-25 184
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
javascript 数组
05-26
JavaScript 数组是用于存储多个值的变量，它们可以存储字符串、数字和对象等数据类型。JavaScript 数组是动态的，意味着您可以随时添加或删除元素。数组的元素可以通过索引号（下标）来访问和修改，而索引号从0开始。 创建一个数组的语法：var array_name = [item1, item2, ...]; 例如： ``` var fruits = ["apple", "banana", "orange"]; ``` 数组中的每个元素都可以通过其索引号访问。例如，要访问数组中的第一个元素，您可以使用以下语法： ``` var first_fruit = fruits; // "apple" ``` 您还可以使用数组的内置方法来操作数组，例如push（）和pop（）方法用于在数组的末尾添加和删除元素，shift（）和unshift（）方法用于在数组的开头添加和删除元素，splice（）方法用于在任何位置添加或删除元素，sort（）方法用于对数组进行排序等等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值