详解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 3D 标签云示例代码
Jun 12 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
javascript iframe跨域详解
Oct 26 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
jQuery实现增删改查
Dec 22 jQuery
JavaScript实现点击出现子菜单效果
Feb 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
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
JS中 用户登录系统的解决办法
2013/04/15 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python获取array中指定元素的示例
2019/11/26 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
编写python代码实现简单抽奖器
2020/10/20 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
教师推荐信范文
2013/11/24 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
2015教师年度考核评语
2015/03/25 职场文书
行政介绍信范文
2015/05/04 职场文书
功夫熊猫观后感
2015/06/10 职场文书
党课主持词大全
2015/06/30 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
python三子棋游戏
2022/05/04 Python