详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
(编辑:jimmy 日期: 2024/11/16 浏览:3 次 )
js对数组对象的操作以及方法的使用
如何声明创建一个数组对象:
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)); }
数组对象方法的是使用介绍:
cancat()
/** * 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():将数组转换成字符串,并返回该结果。不会改变原数组的数据。
toLocaleString():将数组装换成本地字符,并返回结果,用“,”分割。类似toString 方法。
reverse():该该方法颠倒数组的顺序
一下举栗声明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对数组操作详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:vue slot与传参实例代码讲解