本文系统梳理JavaScript中Array对象的核心API。涵盖数组创建与长度控制、元素增删(push/pop/shift/unshift)、遍历转换(map/reduce/filter)、查找定位(indexOf/some/every)及切片排序(slice/splice/sort)等关键操作,结合代码示例解析各方法的参数行为与返回值,帮助开发者高效处理数组数据。
JavaScript数组常用方法概览
本节介绍JavaScript中Array数组的常用操作方法,为后续具体API的使用奠定基础。
var colors = ["red", "blue", "green"]; //creates an array with three strings
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors); //red,blue,green
数组遍历与转换:map、reduce与filter
map()方法用于创建一个新数组,其结果是调用一个提供函数的每个数组元素。该函数接收三个参数:当前元素值、当前索引以及原数组引用。例如,将数字数组中的每个元素乘以2,通过map遍历并返回新值,最终生成包含计算结果的新数组,而原数组保持不变。
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
//item 数组元素 index元素对应索引 array原数组
console.log(array === numbers);//true
return item * 2;
});
console.log(mapResult); //[2,4,6,8,10,8,6,4,2]
reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。reducer函数接收四个参数:累加器(prev)、当前值(cur)、当前索引和原数组。注意索引从1开始传递(若提供初始值则从0开始,否则从1开始取第二个元素作为初始累加值),常用于数组求和或扁平化处理。
var values = [1,2,3,4,5];
//接收一个函数,然后从左到右遍历item,直到reduce到一个值。
var sum = values.reduce(function(prev, cur, index, array){
console.log(array === values);
console.log(index);//1,2,3,4 数组的索引从1开始
return prev + cur;//前后两个值相加
});
alert(sum);//15
数组合并与长度控制
concat()方法用于合并两个或多个数组。此操作不会修改现有数组,而是返回一个包含连接后元素的新数组副本。语法支持传入多个数组或值作为参数,例如将字符串和另一个数组追加到原数组后,生成包含所有元素的新数组对象。
//concat() 方法用于连接两个或多个数组。
//该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
//语法
//arrayObject.concat(arrayX,arrayX,......,arrayX)
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown
数组的length属性用于获取或设置数组的长度。通过new Array(n)可创建指定长度的空数组,或通过传入单个字符串元素创建包含该元素的数组。length属性具有动态性,修改它可以直接改变数组大小:增大length不会填充新元素(访问返回undefined),减小length则会截断数组尾部元素。
var colors = new Array(3); //create an array with three items
var names = new Array("Greg"); //create an array with one item, the string "Greg"
alert(colors.length);//3
alert(names.length);//1
var colors = ["red", "blue", "green"]; //creates an array with three strings
var names = []; //creates an empty array
var values = [1,2,]; //AVOID! Creates an array with 2 or 3 items
var options = [,,,,,]; //AVOID! creates an array with 5 or 6 items
alert(colors.length); //3
alert(names.length); //0
alert(values.length); //2 (FF, Safari, Opera) or 3 (IE)
alert(options.length); //5 (FF, Safari, Opera) or 6 (IE)
var colors = ["red", "blue", "green"]; //creates an array with three strings
colors.length = 2;
alert(colors[2]); //undefined
var colors = ["red", "blue", "green"]; //creates an array with three strings
colors.length = 4;
alert(colors[3]); //undefined
var colors = ["red", "blue", "green"]; //creates an array with three strings
colors[colors.length] = "black"; //add a color
colors[colors.length] = "brown"; //add another color
alert(colors.length); //5
alert(colors[3]); //black
alert(colors[4]); //brown
var colors = ["red", "blue", "green"]; //creates an array with three strings
colors[99] = "black"; //add a color (position 99)
alert(colors.length); //100
数组条件测试:every与some
every()和some()方法用于测试数组元素是否满足特定条件。every()要求所有元素都通过测试才返回true;some()只要有一个元素通过测试即返回true。这两个方法常用于数组内容的逻辑判断,如验证所有数值是否大于0或是否存在特定值。
//every()与some()方法都是JS中数组的迭代方法。
//every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。
//some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true
filter()方法创建一个新数组,其中包含所有通过由提供函数实现的测试的元素。与map不同,filter仅保留符合条件的元素,忽略不符合项。它常用于数据过滤场景,例如从用户列表中筛选出活跃状态的用户记录。
//从数组中找到适合条件的元素(比如说大于某一个元素的值)
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]
数组查找与字符串化:indexOf、lastIndexOf及toString
indexOf()和lastIndexOf()用于查找数组中指定元素的索引位置。indexOf从前往后搜索,返回第一个匹配项的索引;lastIndexOf从后往前搜索,返回最后一个匹配项的索引。若未找到元素,均返回-1。这两个方法适用于需要定位元素位置的场景。
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//语法
//stringObject.indexOf(searchvalue,fromindex)
//searchvalue 必需。规定需检索的字符串值。
//fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
/*
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
语法
stringObject.lastIndexOf(searchvalue,fromindex)
searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。
*/
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4)); //5
alert(numbers.lastIndexOf(4, 4)); //3
var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
toLocaleString()和toString()方法将数组转换为字符串。toString()直接返回逗号分隔的元素字符串;toLocaleString()则根据本地语言环境格式化元素(如数字或日期)。两者均不修改原数组,主要用于数组内容的字符串表示。
var person1 = {
toLocaleString : function () {
return "Nikolaos";
},
toString : function() {
return "Nicholas";
}
};
var person2 = {
toLocaleString : function () {
return "Grigorios";
},
toString : function() {
return "Greg";
}
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios
数组增删操作:push、pop、shift与unshift
push()和pop()方法用于数组尾部操作。push()将一个或多个元素添加到数组末尾,并返回新的长度;pop()移除并返回数组最后一个元素。这两个方法实现了栈(LIFO)结构的基本功能,常用于动态添加或移除数据。
var colors = new Array(); //create an array
var count = colors.push("red", "green"); //push two items
alert(count); //2
count = colors.push("black"); //push another item on
alert(count); //3
var item = colors.pop(); //get the last item
alert(item); //"black"
alert(colors.length); //2
unshift()和shift()方法用于数组头部操作。unshift()将一个或多个元素添加到数组开头,并返回新的长度;shift()移除并返回数组第一个元素。它们实现了队列(FIFO)结构的基本功能,适用于需要优先处理头部数据的场景。
//unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
//shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
var colors = new Array(); //create an array
var count = colors.unshift("red", "green"); //push two items
alert(count); //2
count = colors.unshift("black"); //push another item on
alert(count); //3
var item = colors.pop(); //get the first item
alert(item); //"green"
alert(colors.length); //2
数组排序与切片:reverse、sort、slice与splice
reverse()方法将数组中元素的顺序反转。此操作会修改原数组,第一个元素变为最后一个,最后一个变为第一个。常用于需要倒序显示或处理数据的场景,注意其副作用是改变了原始数组结构。
var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1
sort()方法对数组元素进行排序。默认情况下,元素被转换为字符串并按Unicode码点顺序排序。若要按数值大小排序,需传入比较函数。sort()会修改原数组,返回排序后的数组引用。正确理解比较函数的返回值(正负零)是控制排序逻辑的关键。
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var values = [0, 1, 16, 10, 15];
values.sort(compare);
alert(values); //0,1,10,15,16
//sort 改变原数组
slice()方法返回从开始索引到结束索引(不包括结束索引)的子数组。它不会修改原数组,而是返回一个新数组。若省略结束索引,则截取到数组末尾;若索引为负数,则从数组尾部开始计算。常用于提取数组的某一部分数据。
/*
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
*/
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
splice()方法用于添加、删除或替换数组元素。这是最强大的数组修改方法,会直接改变原数组。它接收起始索引、删除数量以及要插入的新元素作为参数,并返回被删除的元素组成的数组。适用于需要动态增删改数组内容的复杂场景。
/*
plice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
注释:该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
*/
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); //remove the first item
alert(colors); //green,blue
alert(removed); //red - one item array
removed = colors.splice(1, 0, "yellow", "orange"); //insert two items at position 1
alert(colors); //green,yellow,orange,blue
alert(removed); //empty array
removed = colors.splice(1, 1, "red", "purple"); //insert two values, remove one
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow - one item array
数组类型检测:isArray
Array.isArray()方法用于确定传递的值是否是一个Array对象。这是ECMAScript 5引入的标准方法,比typeof或instanceof更可靠,因为它能正确识别跨iframe创建的数组。返回布尔值,用于类型检查。
alert(Array.isArray([])); //true
alert(Array.isArray({})); //false
以上内容涵盖了JavaScript数组的核心API。通过掌握这些方法,可以高效地进行数组的创建、修改、查询和转换操作。后续将持续更新更多JavaScript知识点,欢迎持续关注。