全面总结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 相关文章推荐
Opacity.js
Jan 22 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
javascript[js]获取url参数的代码
Oct 17 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
通过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
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Javascript操作URL函数修改版
2013/11/07 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python求素数示例分享
2014/02/16 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
党委书记岗位职责
2013/11/24 职场文书
个人实习生的自我评价
2014/02/16 职场文书
计划生育证明格式范本
2014/09/12 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
女性健康讲座主持词
2015/07/04 职场文书
《实心球》教学反思
2016/02/23 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python