本文系统介绍JavaScript中数组对象的常用操作方法。涵盖数组的声明方式，以及splice、concat、join、pop、push、shift、slice、sort等核心方法的语法与使用场景。通过具体代码示例，演示如何在指定位置插入元素、连接数组、截取子集及自定义排序，帮助开发者掌握数组处理技巧。
JavaScript数组操作概述
本文主要讲解JavaScript中数组对象的相关操作及具体方法的使用技巧。
数组的声明与创建
在JavaScript中，声明并创建一个数组对象主要有两种常见方式。
var arr = new Array();另一种更简洁的声明方式如下所示。
var arr = [];清空数组数据
若要移除数组中的所有数据，可以通过清空数组长度来实现。
arrayJson.dataList.splice(0,arr.length);数组元素的插入与中间位置处理
如果需要在指定位置向数组添加元素，特别是将元素插入到数组中间位置，可以通过计算索引并使用相应方法实现。
/**
* 假设数组的长度值为偶数，如何将指定元素添加到数组中间位置。
*/
function array_middle_insert() {
var arr = ['1','2','3','4','5','6'];
if(0 == arr.length % 2) { //偶数
arr.splice(arr.length / 2,0,'中间添加');
}
//["1","2","3","中间添加","4","5","6","7"]
console.log(JSON.stringify(arr));
}
数组核心方法详解
以下是JavaScript数组对象常用方法的详细介绍。
concat()方法用于连接两个或多个数组，并返回一个新的数组。
/**
* concat:连接两个或者多个数组，并且返回该数组
* 语法：array.concat(object,object,......);
*/
function array_concat() {
var arr = [{index:'0'},{address:'1'}];
var arr_1 = [{index:'3'},{index:'4'}];
var newArr = arr.concat(arr_1);
//[{"index":"0"},{"address":"1"},{"index":"3"},{"index":"4"}]
console.log(JSON.stringify(newArr));
}
join()方法用于将数组元素使用指定分隔符连接成一个字符串并返回。
/**
* join():通过指定字符对数据进行分割，返回字符串。
* jon(分隔符);
*/
function array_join() {
var arr = ['1','2','3'];
var str = arr.join('-');
//1-2-3
console.log(str);
}
pop()方法用于删除数组的最后一个元素，并返回该被删除的元素值。
/**
* pop():删除数组的最后一个对象，返回该删除元素的值
*/
function array_pop() {
var arr = [{index:'0'},{address:'1'}];
var pop_data = arr.pop();
//{"address":"1"}
console.log(JSON.stringify(pop_data));
//[{"index":"0"}]
console.log(JSON.stringify(arr));
}
push()方法用于向数组末尾添加一个或多个元素，并返回新的数组长度。
/**
* push：向数组末尾添加一个或者多个对象。
* array.push(newObject1,newObject2,.....);
*/
function array_push() {
//实例化一个数组对象
var arr = new Array();
var obj_1 = { index:'1', index:'2'};
var obj_2 = { index:'3', index:'3'};
arr.push(obj_1,obj_2);
//[{"index":"2"},{"index":"3"}]
console.log(JSON.stringify(arr));
}
shift()方法用于删除数组的第一个元素，并返回该被删除的元素。
/**
* shift():该方法用户删除数组的第一个对象，并返回删除的元素
*/
function array_shift() {
var arr = [{index:'0'},{address:'1'}];
var shift_data = arr.shift();
//{"index":"0"}
console.log(JSON.stringify(shift_data));
//[{"address":"1"}]
console.log(JSON.stringify(arr));
}
slice()方法用于从已知数组中返回选定的元素，该操作不会修改原数组。
/**
* slice()：从已知数组中返回指定选中的数据,该操作不会修改原数组的数据
* slice(start,end);
*/
function array_slice() {
var arr = ['1','2','3','4','5'];
var new_array = arr.slice(1,arr.length);
//["2","3","4","5"]
console.log(JSON.stringify(new_array));
//["1","2","3","4","5"]
console.log(JSON.stringify(arr));
}
sort()方法用于对数组元素进行排序，可接受一个比较函数作为参数。
/**
* sort():方法用户对数组的排序
* sort(sortby) sortby可选，必须是函数。如调用方法没有使用参数，则按字母顺序进行排序。
*/
function array_sory() {
var arr = [{index:'500'},{index:'40'},{index:'100'},{index:'50'}];
var new_array = arr.sort(function(a,b) {
var n1 = Number(a.index);
var n2 = Number(b.index);
return n1 - n2;
});
//[{"index":"40"},{"index":"50"},{"index":"100"},{"index":"500"}]
console.log(JSON.stringify(new_array));
}
splice()方法用于向数组中添加或删除元素，并返回被删除的元素组成的数组。
/**
* 向数组中删除/添加对象，并返回被删除的元素。
* splice(index,count,item1,item2,......);
* index:规定删除/添加项目的起始位置，使用负数从数组的结尾处规定位置。
* count:规定要删除项目的数量
* item1,item2...:向项目中添加添加新的对象
*/
function array_splice() {
var arr = ['1','2','3'];
var new_array = arr.splice(0,2,'4','5');
//["1","2"]
console.log(JSON.stringify(new_array));
//["4","5","3"]
console.log(JSON.stringify(arr));
}
unshift()方法用于向数组开头添加一个或多个元素，并返回新的数组长度。
/**
* 向数组开头添加一个或者多个元素，并返回新的长度。
*/
function array_unshift() {
var arr = [{index:'0'},{address:'1'}];
var obj_1 = {index:'2'};
var obj_2 = {index:'3'};
var length = arr.unshift(obj_1,obj_2);
//4
console.log(length);
//[{"index":"2"},{"index":"3"},{"index":"0"},{"address":"1"}]
console.log(JSON.stringify(arr));
}
类型转换与顺序反转方法
toString()方法将数组转换为字符串并返回结果，不改变原数组数据。toLocalString()方法将数组转换为本地字符串格式并返回，元素间用逗号分隔，功能类似toString。reverse()方法用于颠倒数组中元素的顺序。
复杂JSON数组格式示例
以下示例展示了一种较为复杂且灵活的JSON数组字符串声明格式。
[
{
"dateMonth":"05",
"hopeMoney":"12000",
"data":[
{
"brickId":"1",
"brickYear":"2017-05-15",
"brickWeek":"星期二",
"brckInfo":[
{
"bringMoneyOrExpenditure":"5000",
"brickClass":"工资",
"brickIcon":"ion-ios-star-outline"
},
{
"bringMoneyOrExpenditure":"-2000",
"brickClass":"其他",
"brickIcon":"ion-ios-star-outline"
}
]
},
{
"brickId":"1",
"brickYear":"2017-05-02",
"brickWeek":"星期六",
"brckInfo":[
{
"bringMoneyOrExpenditure":"10000",
"brickClass":"工资",
"brickIcon":"ion-ios-star-outline"
}
]
}
]
},
{
"dateMonth":"04",
"hopeMoney":"12000",
"data":[
{
"brickId":"1",
"brickYear":"2017-04-15",
"brickWeek":"星期一",
"brckInfo":[
{
"bringMoneyOrExpenditure":"5000",
"brickClass":"工资",
"brickIcon":"ion-ios-star-outline"
}
]
}
]
}
]
以上即为JavaScript数组操作的详细介绍，希望对读者有所帮助。如有任何疑问，欢迎留言交流，小编将及时回复。感谢大家对本站的支持！