详解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 文档的编码问题解决
Mar 01 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
node使用async_hooks模块进行请求追踪
Jan 28 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP操作xml代码
2010/06/17 PHP
关于PHP开发的9条建议
2015/07/27 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vue实现文字加密功能
2019/09/27 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
几个数据库方面的面试题
2016/07/01 面试题
配置管理计划的主要内容有哪些
2014/06/20 面试题
就业推荐表自我鉴定
2014/03/21 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
活动总结报告格式
2014/05/09 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
邀请函格式范文
2015/02/02 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书