全面总结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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
vue百度地图 + 定位的详解
May 13 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php实现邮件发送并带有附件
2014/01/24 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python采用getopt解析命令行输入参数实例
2014/09/30 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python类的继承super相关原理解析
2020/10/22 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
高中自我评价分享
2013/12/05 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Golang 字符串的常见操作
2022/04/19 Golang
ant design vue的form表单取值方法
2022/06/01 Vue.js
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang