详解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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
JS二分查找算法详解
Nov 01 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
js右键菜单效果代码
2007/07/21 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
如何在python中实现线性回归
2020/08/10 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
医学生毕业自我鉴定
2014/03/26 职场文书
论文指导教师评语
2014/04/28 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
自荐信格式范文
2015/03/04 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL