全面总结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设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
4.与数据库的连接
2006/10/09 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
vue下跨域设置的相关介绍
2017/08/26 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
机器学习10大经典算法详解
2017/12/07 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
劳资专员岗位职责
2013/12/27 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
好媳妇事迹材料
2014/12/24 职场文书
沈阳故宫导游词
2015/01/31 职场文书
岗位聘任报告
2015/03/02 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python