详解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 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 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
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
node.js基础知识小结
2018/02/26 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python3解释器知识点总结
2019/02/19 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python字符串的修改方法实例
2019/12/19 Python
酒店管理专业学生求职信
2013/09/27 职场文书
小松树教学反思
2014/02/11 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
详解Vue的options
2021/05/15 Vue.js
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android