UDN-企业互联网技术人气社区

板块导航

浏览  : 415
回复  : 2

[原生js] JavaScript数组常用方法

[复制链接]
刘莉莉11的头像 楼主
发表于 2017-1-3 12:55:02 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JavaScript数组常用方法的相关资料,非常的详细,需要的朋友可以参考下

  判断某个对象是否是数组: instanceof、Array.isArray()
  
  对于一个网页或者一个全局作用域可以使用instanceof操作符。
  
  if(value instanceof Array){  //判断value是否是数组
  
  }
  
  instanceof操作符它假设只有一个全局执行环境,如果网页包含多个框架则使用ECMAScript5新增的Array.isArray()方法。
  
  if(Array.isArray(value)){//判断value是否是数组
  
  }
  
  Array.isArray()方法支持的浏览器有IE9+、Firefor 4+、Safari5+、Opera 10.5+、Chrome。
  
  如果要在未实现这个方法中的浏览器中检查数组,则使用:
  
  if(Object.prototype.toString.call(value)=="[object Array]"){
  
  }
  
  将数组转换为字符串: toLocaleString()、toString()、valueOf()、join()
  
  复制代码 代码如下:


  1. var test=['a','b','c'];

  2. alert(test.toString());//a,b,c

  3. alert(test.toLocaleString());//a,b,c

  4. alert(test.valueOf());//a,b,c

  5. alert(test);//a,b,c 默认调用toString()方法

  6. alert(test.join(','));//a,b,c

  7. alert(test.join('|'));//a|b|c
复制代码
  
  添加和移除数组元素方法:push()、pop()、unshift()、shift()
  
  push()方法可以接受任意数量的参数,把他们逐个加到数组末尾,并且返回数组修改后的数组长度。
  
  pop()方法从数组末尾移除最后一项,然后返回移除的项。
  
  unshift()方法在数组前端添加任意数量的参数并返回新数组长度。
  
  shift()方法能够移除数组中第一个项并返回移除的项。
  
  复制代码 代码如下:


  1. var test=[];

  2. var count = test.push('a','b');//从数组末尾逐个添加

  3. count =test.push('c');

  4. alert(count);//3

  5. alert(test);//

  6. var item = test.pop();

  7. alert(item);//c

  8. alert(test.length);//2
复制代码

  排序方法:reverse()和sort()
  
  reverse()方法会反转数组项顺,操作数组本身。
  
  sort()方法默认按升序排列数组项,操作数组本身。
  
  复制代码 代码如下:


  1. var test=[1,2,3,4,5];

  2. test.reverse();

  3. alert(test);//5,4,3,2,1

  4. var test2=[0,1,5,10,15];

  5. test2.sort();

  6. alert(test2);//0,1,10,15,5    sort()方法会调用每个数组项的toString()方法,比较字符串,以确定排序。所以这里排序是字符串排序
复制代码

  sort()方法还可以传入一个比较函数。
  
  比较函数在第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,第一个参数应该位于第二个之后则返回一个正数。
  
  复制代码 代码如下:


  1. function compare(value1,value2){

  2.     if(value1<value2){

  3.         return -1;

  4.     }else if(value1>value2){

  5.         return 1;

  6.     }else{

  7.          return 0;

  8.     }

  9. }   

  10. var test=[0,1,5,10,15];

  11. test.sort(compare);

  12. alert(test);//0,1,5,10,15  
复制代码

  操作方法:concat()、slice()、splice()
  
  concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。返回一个新的数组。
  
  复制代码 代码如下:


  1. var a = [1,2,3];

  2. alert(a.concat(4,5));//1,2,3,4,5

  3. var arr = new Array(3)

  4. arr[0] = "George"

  5. arr[1] = "John"

  6. arr[2] = "Thomas"

  7. var arr2 = new Array(3)

  8. arr2[0] = "James"

  9. arr2[1] = "Adrew"

  10. arr2[2] = "Martin"

  11. alert(arr.concat(arr2));

  12. //George,John,Thomas,James,Adrew,Martin

  13. var arr = new Array(3)

  14. arr[0] = "George"

  15. arr[1] = "John"

  16. arr[2] = "Thomas"

  17. var arr2 = new Array(3)

  18. arr2[0] = "James"

  19. arr2[1] = "Adrew"

  20. arr2[2] = "Martin"

  21. var arr3 = new Array(2)

  22. arr3[0] = "William"

  23. arr3[1] = "Franklin"

  24. alert(arr.concat(arr2,arr3))

  25. //George,John,Thomas,James,Adrew,Martin,William,Franklin
复制代码

  slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
  
  复制代码 代码如下:


  1. var test =['a','b','c','d','e'];

  2. var arr1=test.slice(1);

  3. var arr2=test.slice(1,4);

  4. alert(arr1);//b,c,d,e

  5. alert(arr2);//b,c,d
复制代码

  splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。操作数组本身。
  
  第一个参数:起始位置、第二个参数:截取的个数、第三个参数:追加的新元素。
  
  复制代码 代码如下:


  1. //删除

  2. var test=['a','b','c'];

  3. var removed=test.splice(0,1)//删除第一项

  4. alert(test);//b,c

  5. alert(removed);//a 返回被删除的项

  6. //插入

  7. var test2=['a','b','c'];

  8. var removed2=test2.splice(1,0,'d','e')//从位置1开始插入d,e

  9. alert(test2);//a,d,e,b,c

  10. alert(removed2)//空数组

  11. //替换

  12. var test3=['a','b','c'];

  13. var removed3=test3.splice(1,1,'d','e')//从位置1开始插入d,e

  14. alert(test3);//a,d,e,c

  15. alert(removed3)//b
复制代码

  位置方法:indexOf()、lastIndexOf()
  
  ECMAScript5提供方法支持浏览器:IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome
  
  indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
  
  lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
  
  一个参数时:表示要查找的值,返回索引位置(从0开始)、两个参数时:第一个参数表示起始位置,第二个参数表示要查找的值。
  
  复制代码 代码如下:


  1. var numbers=[1,2,3,4,5,4,3,2,1];

  2. alert(numbers.indexOf(4));//3

  3. alert(numbers.lastIndexOf(4));//5
  4. alert(numbers.IndexOf(4,4));//5

  5. alert(numbers.lastIndexOf(4,4));//3
复制代码

  迭代方法:every()、filter()、forEach()、map()、some()
  
  ECMAScript5提供方法支持浏览器:IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome
  
  every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
  
  filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
  
  forEach():对数组中的每一项运行给定函数,这个方法没有返回值。
  
  map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  
  some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。
  
  以上函数都不会修改数组中包含的值。
  
  复制代码 代码如下:


  1. var numbers=[1,2,3,4,5,4,3,2,1];

  2. //every()

  3. var everyResult=numbers.every(function(item,index,array){

  4.       return (item>2);

  5. })

  6. alert(everyResult);//false

  7. //some()

  8. var someResult=numbers.some(function(item,index,array){

  9.       return (item>2);

  10. })

  11. alert(someResult);//true

  12. //filter()

  13. var filterResult=numbers.filter(function(item,index,array){

  14.       return (item>2);

  15. })

  16. alert(filterResult);//[3,4,5,4,3]
  17. //map()

  18. var mapResult=numbers.map(function(item,index,array){

  19.       return (item*2);

  20. })

  21. alert(mapResult);//[2,4,6,8,10,8,6,4,2]
  22. //forEach()

  23. numbers.forEach(function(item,index,array){

  24.       //执行操作 无返回值

  25. })
复制代码

  归并方法:reduce()、reduceRight()
  
  ECMAScript5提供方法支持浏览器:IE9+、Firefox 3+、Safari 4+、Opera 10.5+、Chrome
  
  两个方法都会迭代数组的所以项,然后构建一个最终返回的值。reduce()方法从数组第一项开始,reduceRight()方法从数组最后开始。
  
  复制代码 代码如下:


  1. var values=[1,2,3,4,5];

  2. var sum=valuse.reduce(function(prev,cur,index,array){

  3.          prev+cur;

  4. });

  5. alert(sum);//15
复制代码

  以上就是本文的全部内容了,希望大家能够喜欢。
发表于 2017-1-3 12:55:31 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-1-3 12:55:32 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部