全面总结Javascript对数组对象的各种操作


Posted in Javascript onJanuary 22, 2017

数组

数组定义:简而言之就是一组有序的数据集合,其索引为从0开始且自然增长的整数,其元素值可以是任何js数据!并且包含一个名为length的属性,该属性表示数组元素的个数!

一、定义数组,有三种定义方式:

方式一:

var arr=new Array(); 
arr[0]=“11”; 
arr[1]=“22”; 
arr[2]=“33”;

方式二:

var arr=new Array(“11”,“22”,“33”);

方式三:

var arr=[“11”,“22”,“33”];

二、数组的length属性,可以获取数组的长度,也可以截取,清空数组,如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。

如果设置的值比它的当前值大,数组的长度将增大,新的元素被添加到数组的尾部,它们的值为 undefined:

var arr=[“11″,”22″,”33″]; 
arr.length //3,返回数组的长度 
arr.length = 2 //['11','22'],截取数组前2个 
arr.length = 5 //['11','22',undefined,undefined,undefined],自动添加undefined 
arr.length = 0 //[],清空数组

三、遍历数组:

var arr=[“11”,“22”,“33”]; 
//for循环 
for(var i=0;i<arr.length;i++){ 
 console.log(i) 
} 
//for in循环 
for( i in arr ){ 
 console.log(arr[i]) 
} 
//forEach循环 
arr.forEach(function(i){ 
 console.log(i) 
})

四、数组的添加和删除:

push() 向数组末尾增加一个或多个元素,其返回值为增加元素后数组的长度。

var arr=[1,2,3]; 
arr.push(4) 
console.log(arr) //[1,2,3,4] 
arr.push(5,6,7) 
console.log(arr) //[1,2,3,4,5,6,7]

unshift() 向数组开头增加一个或多个元素,其返回值为增加元素后数组的长度。

var arr=[1,2,3]; 
arr.unshift(4) 
console.log(arr) //[4,1,2,3] 
arr.unshift(5,6,7) 
console.log(arr) //[5,6,7,1,2,3,4]

pop() 从数组的末尾开始删除,返回值为被删除元素的值。

var arr=[1,2,3]; 
arr.pop() 
console.log(arr) //[1,2]

shift() 从数组的开头开始删除,返回值为被删除元素的值。

var arr=[1,2,3]; 
arr.shift() 
console.log(arr) //[2,3]

五、join() 将数组通过指定的分隔符进行分隔,返回值为string类型,不改变原数组:

var arr=[1,2,3,4]; 
arr.join(‘-‘) //”1-2-3-4″ 
arr.join(”) //”1234″ 
arr.join(‘ ‘) //”1 2 3 4″

六、sort() 数组排序:

var arr=[2,8,3,4,12,56]; 
//从小到大排序 
arr.sort(function(a,b){ 
 return a-b; 
}); 
//从大到小排序 
arr.sort(function(a,b){ 
 return b-a; 
}); 
//随机排序 
arr.sort(function(a,b){ 
 return Math.random() ? 0.5 
})

七、reverse() 将数组逆序:

var arr=[2,8,3,4,12,56]; 
arr.reverse() //[56, 12, 4, 3, 8, 2]

八、获取数组中最大和最小的数字:

var arr = [5, 458 , 120 , -215 , 228 , 400]; 
var max = Math.max.apply(Math, arr); 
var min = Math.min.apply(Math, arr);

九、slice() 可从已有的数组中返回选定的元素,不改变原数组

一个参数,从start下标处开始直到结尾处。

有两个参数,从 start下标到end下标(不包括该元素)处的数组元素:

var arr=[2,8,3,4,12,56]; 
arr.slice(1) //[8, 3, 4, 12, 56] 
arr.slice(1,5) //[8, 3, 4, 12]

十、splice()

一个参数,删除从start下标处开始直到结尾处。返回删除的数,这个直接修改原数组。

有两个参数,删除从start下标到end下标处的数组元素,返回删除的数,这个直接修改原数组。

有三个参数,从start下标到end下标的元素替换成第三个参数,如果前两个数相同,则是替换,这个直接修改原数组:

var arr=[2,8,3,4,12,56]; 
//从下标2的位置开始截取 
console.log(arr.splice(2)) // [3, 4, 12, 56] 
console.log(arr)  // [2, 8] 
 
var arr=[2,8,3,4,12,56]; 
//删除下标1到5的位置 
console.log(arr.splice(1,5)) //[8, 3, 4, 12, 56] 
console.log(arr)  // [2] 
 
var arr=[2,8,3,4,12,56]; 
//替换下标1的位置 
console.log(arr.splice(1,1,'qqq')) //[8] 
console.log(arr) //[2, “qqq”, 3, 4, 12, 56] 
 
var arr=[2,8,3,4,12,56]; 
//把下标1到3的位置删除,并插入qqq 
console.log(arr.splice(1,3,'qqq')) //[8, 3, 4] 
console.log(arr) // [2, “qqq”, 12, 56]

十一、concat() 可以将两个数组合并成一个新数组返回:

var arr1=[1,2,3,4,5]; 
var arr2=[6,7]; 
var arr3=arr1.concat(arr2); 
alert(arr1);// [1,2,3,4,5] 
alert(arr2);// [6,7] 
alert(arr3);// [1,2,3,4,5,6,7]

十二、数组去重:

方法一:

function removeRepeat(arr){ 
 return arr.filter(function(elem, pos) { 
  return arr.indexOf(elem) == pos; 
 }); 
}

方法二:

function removeRepeat(a){ 
 var arr=[]; 
 for(var i=0;i<a.length;i++){ 
  if(arr.indexOf(a[i]) === -1){ 
   arr.push(a[i]); 
  } 
 } 
 return arr; 
}

方法三:

function removeRepeat(a){ 
 var arr = []; 
 a.forEach(function(i){ 
   if(arr.indexOf(i) === -1){ 
   arr.push(i); 
  } 
 }); 
 return arr 
}

方法四:

function removeRepeat(arrs){ 
 var newArr = []; 
 var hash = {}; 
 for(var i=0;i<arrs.length;i++){ 
  var key = typeof(arrs[i])+arrs[i]; 
  if(hash[key] !==1){ 
   newArr.push(arrs[i]); 
   hash[key] =1; 
  };  
 }; 
 return newArr; 
}

十二、prototype 属性,直接对数组的原型进行更改或者添加功能:

//比如我们给数组添加一个求和的方法 
Array.prototype.sum= function(){ 
 var n = 0; 
 this.forEach(function(i){ 
  n+=i; 
 }); 
 return n; 
} 
 
var arr = [1,2,3,4] 
alert(arr.sum()) //10

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
javascript对象的创建和访问
Mar 08 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 #Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 #Javascript
node.js基于mongodb的搜索分页示例
Jan 22 #Javascript
利用JS实现文字的聚合动画效果
Jan 22 #Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 #Javascript
jQuery实现的分页功能示例
Jan 22 #Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 #Javascript
You might like
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
Bootstrap精简教程
2015/11/27 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Vuex的实战使用详解
2019/10/31 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
跟单文员岗位职责
2014/01/03 职场文书
教学大赛获奖感言
2014/01/15 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
促销活动方案模板
2014/02/24 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
党员作风建设自查报告
2014/10/23 职场文书
水电工岗位职责
2015/02/14 职场文书
车队安全员岗位职责
2015/02/15 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
python实现自定义日志的具体方法
2021/05/28 Python