全面总结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 相关文章推荐
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python中的Django基本命令实例详解
2018/07/15 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
社区敬老月活动实施方案
2014/02/17 职场文书
cf搞笑广告词
2014/03/14 职场文书
青春寄语大全
2014/04/09 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
开学典礼演讲稿
2014/05/23 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
建筑施工安全责任书
2014/07/24 职场文书
安全目标管理责任书
2014/07/25 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
高三语文复习计划
2015/01/19 职场文书
文艺委员竞选稿
2015/11/19 职场文书
python for循环赋值问题
2021/06/03 Python