JavaScript数组的创建、属性与常用方法详解
本文详细解析JavaScript中数组的多种创建方式,包括构造函数与字面量语法。介绍如何通过length属性和索引修改数组长度,对比for循环与for...in遍历的区别。最后汇总indexOf、concat、splice等常用数组操作方法,帮助开发者掌握JS数组的核心技巧。
一、数组的创建
第一种方式:
使用var 数组名 = new Array();可以创建一个空数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr=new Array();
console.log(arr)//以日志形式打印到浏览器控制台
</script>
</head>
<body>
</body>
</html>

第二种方式:
使用var arr2 = new Array(10);可以创建一个指定长度(如长度为10)的数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr2 = new Array(10);
arr2[0]="h";
arr2[9]="l"
console.log(arr2)
</script>
</head>
<body>
</body>
</html>

第三种方式:
使用var arr3 = new Array(a,b,c);可以在创建数组时直接指定元素的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr3 = new Array("hello","world","JavaScript",10,true)
console.log(arr3)
</script>
</head>
<body>
</body>
</html>
第四种方式:
使用var arr4 = ["hello","world","Flyme awei"];,这相当于第三种方式的简写形式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr4 = ["hello","world","Flyme awei"]
console.log(arr4)
</script>
</head>
<body>
</body>
</html>

二、数组的元素和长度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = [1,2,3,4,5];
console.log(arr);
console.log(arr[0]);
console.log(arr.length)
</script>
</head>
<body>
</body>
</html>控制台输出示例:

1. 可以通过修改length属性来改变数组的长度。


2. 也可以通过直接操作索引来改变数组的长度。


三、数组的遍历
1. 使用普通的for循环来遍历数组元素。
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr = [0,1,2,3,4,5,6,7,8,9];
for(var i=0;i<=arr.length;i++){
console.log(i)
}
</script>
</head>
<body>
</body>
</html>
2. 使用for each风格遍历数组。
在JS中,for each的写法为:for( var i in 数组),注意这里的i代表的是索引而非元素本身。


四、数组的常用方法
1. 查询元素在数组中的索引。
2. 合并两个数组。
3. 合并多个数组。
4. 将数组元素连接为字符串。
5. 删除数组的最后一个元素。
6. 在数组末尾添加新元素。
7. 反转数组元素的顺序。
8. 删除数组的第一个元素。
9. 向数组的第一个位置添加元素。
10. 截取数组的子集。
11. 删除数组中指定的某些元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = [0,1,2,3,4,5,6,7,8,9];
var index = arr.indexOf(7);//查询元素索引的方法
console.log(index);
//合并两个数组
var hege = ["Cecilie","Lone"];
var stale = ["Email","Tobias","Linus"];
var childer = hege.concat(stale);
console.log(childer);
//合并三个数组
var family = hege.concat(stale,childer);
console.log(family);
//合并字符串
var fruits = ["Banana","Orange","Apple"];
var fs = fruits.join();
console.log(fs);
//删除数组的最后一个元素
fruits.pop();
console.log(fruits);
//在数组结尾增加元素
fruits.push("Grape");
console.log(fruits);
//翻转数组
fruits.reverse();
console.log(fruits);
//删除数组第一个元素
var ss = fruits.shift();
console.log(fruits);
console.log(ss);
//向第一个位置添加元素
fruits.unshift("Per");
console.log(fruits);
//截取子数组;
//从三开始,到六结束
fruits.slice(3,6);
console.log(fruits);
//删除数组中某些元素
//从2开始,删除5个
numbers = [1,2,3,4,5,6,7,8,9]
numbers.splice(2,5);
console.log(numbers);
//如果第二个元素是0,那么就变成在指定索引位置添加元素
numbers.splice(2,0,100);
console.log(numbers);
</script>
</head>
<body>
</body>
</html>
到此这篇关于JavaScript数组的使用详解的文章就介绍到这了,更多相关JS数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
