详解JavaScript对数组操作(添加/删除/截取/排序/倒序)


Posted in Javascript onApril 28, 2019

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对数组操作详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
很可爱的输入框
Aug 03 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 #Javascript
详解vue更改头像功能实现
Apr 28 #Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
You might like
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
React组件生命周期详解
2017/07/03 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python的requests网络编程包使用教程
2016/07/11 Python
Django admin组件的使用
2020/10/24 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
几个常见的软件测试问题
2016/09/07 面试题
电子信息工程专业推荐信
2014/02/14 职场文书
小学生演讲稿大全
2014/04/25 职场文书
预防传染病方案
2014/06/14 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
公司联欢会主持词
2015/07/04 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫