详解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 有用的脚本函数
May 07 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
jquery 指南/入门基础
2007/11/30 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
使用JavaScript破解web
2018/09/28 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python re正则表达式模块(Regular Expression)
2014/07/16 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
pytorch 共享参数的示例
2019/08/17 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
银行自荐信范文
2013/10/07 职场文书
新学期家长寄语
2014/01/19 职场文书
干部下基层实施方案
2014/03/14 职场文书
优秀护士事迹材料
2014/12/25 职场文书
python中的sys模块和os模块
2022/03/20 Python