详解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 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JS跨域问题详解
Nov 25 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
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
PHP的栏目导航程序
2006/10/09 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
浅析PHP文件下载原理
2014/12/25 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
javascript 节点排序 2
2011/01/31 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python 实现插入排序算法
2012/06/05 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Django框架模板用法入门教程
2019/11/04 Python
python中常见错误及解决方法
2020/06/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
优秀小学生家长评语
2014/01/30 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang