JavaScript数组Array属性与方法详解
本文详细介绍JavaScript中Array数组类型的核心属性与方法。涵盖数组的字面量与构造函数创建方式，区分instanceof与Array.isArray的检测差异。深入讲解toString、toLocaleString转换，栈（push/pop）与队列（shift/unshift）操作，reverse与sort排序机制。重点解析concat、slice、splice三种操作方法的区别，indexOf与lastIndexOf位置查找，以及every、filter、forEach、map、some五种迭代器和reduce、reduceRight两种缩小器的用法与参数说明。
Array数组类型详解
Array数组类型详解
在ECMAScript规范中，除了object类型外，Array数组是使用最为频繁的数据结构。与许多其他编程语言不同，ECMAScript数组具有动态长度特性，其内部可以存储任意类型的值，且无需预先指定数组长度，数组大小会随数据增加而自动扩展。
数组的创建方法
1.数组的创建方法
数组字面量方式
var arr = [1,2,3,4,5];// 简单直接用中括号包裹构建数组
数组构造函数
var arr = new Array(1,2,3,4,5);// 通过内置Array对象构建数组
检测数组
2.检测数组
使用instanceof操作符可以在全局环境下检测对象是否为数组实例，但在包含多个框架（iframe）的页面中，由于存在多个全局执行环境，该方法可能失效。例如：console.log(arr instanceof Array); // true
Array.isArray()方法解决了上述多框架环境下的检测问题，能够准确判断对象是否为数组。例如：console.log(Array.isArray(arr)); // true
转换方法
3.转换方法
调用toString()方法可将数组转换为字符串形式返回。
var arr = [1,2,3,4];
console.log(arr.toString()); // 1,2,3,4
toLocaleString()方法同样可以实现数组到字符串的转换，结果可能受本地环境设置影响。
var arr = [1,2,3,4];
console.log(arr.toLocaleString()); // 1,2,3,4
栈方法
4.栈方法
ECMAScript为数组提供了类似其他语言中栈数据结构的操作方法，遵循先进后出（LIFO）的原则。
- push()方法用于向数组末尾添加一个或多个元素。
- pop()方法用于从数组末尾删除最后一个元素，每次仅能删除一项。
var arr = [1,2,3,4];
arr.push(5,6,7); // 向末尾添加5,6,7
console.log(arr); //输出[1,2,3,4,5,6,7]
arr.pop(); // 删除最后一项
console.log(arr); //输出[1,2,3,4,5,6]
队列方法
5.队列方法
队列方法遵循先进先出（FIFO）原则，即在列表末尾添加元素，在列表开头删除元素。
- push()方法已在栈方法中介绍，用于在末尾添加一项或多项。
- shift()方法用于从数组开头删除第一个元素。
var arr = [1,2,3,4];
arr.push(5,6,7); // 向末尾添加5,6,7
console.log(arr); //输出[1,2,3,4,5,6,7]
arr.shift(); // 删除第一项
console.log(arr); //输出[2,3,4,5,6,7]
- pop()方法用于删除数组末尾的最后一项。
- unshift()方法用于向数组开头添加一个或多个元素。
var arr = [1,2,3,4];
arr.unshift(5,6,7); // 向开头添加5,6,7
console.log(arr); //输出[1,2,3,4,5,6,7]
arr.pop(); // 删除最后一项
console.log(arr); //输出[5,6,7,1,2,3]
重排序方法
6.重排序方法
reverse()方法用于反转数组中元素的顺序，直接修改原数组。
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); //输出[5,4,3,2,1]
sort()方法默认按字符串字典顺序进行比较，导致数值排序时可能出现非预期结果（如数值小的排在前面或后面取决于字符串比较规则）。
var arr = [1,6,13,40,15];
arr.sort();
console.log(arr); //输出[1, 13, 15, 40, 6]
操作方法
7.操作方法
concat()方法基于当前数组创建一个副本，并将新添加的对象或数组元素追加到副本末尾，最后返回新数组。该方法不会修改原数组。
var arr = [1,6,13,40,15];
var arr2 = arr.concat(2,2,2);
console.log(arr); //输出[1, 6, 13, 40, 15]
console.log(arr2); //输出[1, 6, 13, 40, 15,2,2,2]
slice()方法接受一个或两个参数，分别表示起始位置和结束位置（不包含结束位置）。该方法返回从起始到结束的数组片段，且不影响原数组。
var arr = [1,6,13,40,15];
var arr2 = arr.slice(2);
var arr3 = arr.slice(1,3);
console.log(arr); //输出[1,6,13,40,15]
console.log(arr2); //输出[13, 40, 15]
console.log(arr3); //输出[6, 13]
splice()方法被认为是数组中最强大的操作方法，可接受三个参数：起始位置、要删除的项数、以及要添加或替换的对象。利用该方法可以实现数组的删除、添加和替换操作，且会直接修改原数组。
var arr = [1,2,3,4,5];// 删除操作
var arr2 = arr.splice(1,3); // 从下标为1开始删除3项
console.log(arr); //输出[1,5] 原数组只剩下第一位和最后一位
console.log(arr2); //输出[2,3,4] 被删除的对象生成数组
var arr = [1,2,3,4,5]; // 插入
var arr2 = arr.splice(1,0,2,2);// 从下标1开始插入2,2两个对象
console.log(arr); //输出[1,2,2,2,3,4,5]
console.log(arr2); //输出[] 因为没有删除对象所以返回空数组
var arr = [1,2,3,4,5]; // 替换
var arr2 = arr.splice(1,2,2,2); // 从下标1开始先删除两项然后替换为2,2
console.log(arr); //输出[1,2,2,4,5]
console.log(arr2); //输出[2,3] 被删除的元素
位置方法
8.位置方法
查找数组中元素位置的方法主要有两种：indexOf()和lastIndexOf()。两者均可接收两个参数：要查找的项和可选的起始索引位置。indexOf()从前往后搜索，lastIndexOf()从后往前搜索。
var arr = [1,2,3,4,5];
console.log(arr.indexOf(2)); //1 返回下标的位置
console.log(arr.indexOf(2,3)); //-1 从下标3位置开始往后找，没有找到2返回-1
console.log(arr.lastIndexOf(2,3)); //1 从下标3位置开始往前找
迭代方法
9.迭代方法
ECMAScript5为数组提供了五种迭代方法，每种方法均接受两个参数：在每一项上运行的函数和可选的作用域对象（影响this指向）。传入的函数接收三个形参：数组项的值、该项在数组中的位置索引、以及数组对象本身。
every()方法：若给定函数对数组中每一项都返回true，则该方法返回true。
var arr = [1,2,3,4,5];
var arr2 = arr.every(function(item,index,array){
return item > 3;
});
console.log(arr2); // false 必需每项都满足条件才可以
filter()方法：若给定函数返回true，则将该项组成新数组返回。
var arr = [1,2,3,4,5];
var arr2 = arr.filter(function(item,index,array){
return item > 3;
});
console.log(arr2); // 4,5 只有4,5满足条件
forEach()方法：给定函数后执行，无返回值。其功能本质上与for循环相同。
var arr = [1,2,3,4,5];
arr.forEach(function(item,index,array){
console.log(item); // 1,2,3,4,5
});
console.log(arr); // [1,2,3,4,5] 不会改变原数组也没有返回值
map()方法：给定函数后，返回由每次函数调用结果组成的新数组。
var arr = [1,2,3,4,5];
var arr2 = arr.map(function(item,index,array){
return item * 2;
});
console.log(arr2); // [2,4,6,8,10]
some()方法：若给定函数对数组中任意一项返回true，则该方法返回true。
var arr = [1,2,3,4,5];
var arr2 = arr.some(function(item,index,array){
return item > 4;
});
console.log(arr2); // true 5>4返回true
缩小方法
10.缩小方法
ECMAScript5新增了两个数组缩小方法：reduce()和reduceRight()。两者均迭代数组所有项，reduce()从第一项到最后一项迭代，reduceRight()则相反。它们接收两个参数：执行的函数和可选的作为缩小基础的初始值。执行函数可接收四个参数：前一个值、当前值、数组对象索引、数组对象本身。
var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(prev,cur,index,array){
return prev * cur;
});
console.log(arr2); // 120 前一项乘后一项
总结
总结
本文介绍了JavaScript数组类型Array相关的属性与方法。更多相关js数组Array的属性与方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58