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

板块导航

浏览  : 570
回复  : 2

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

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

  (1)基本的数组方法

  1.join()

  Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串。可以自己指定分隔的符号,如果不指定,默认使用逗号
  1. var arr = [1,2,3];
  2. console.log(arr.join());//"1,2,3"
  3. console.log(arr.join("-"));//"1-2-3"

  4. var a = new Array(10); //长度为10的空数组 组成下边字符串
  5. console.log(a.join("-"));//"---------"
复制代码
  
  2.reverse()

  Array.reverse()方法将数组中的元素颠倒顺序,返回逆序的数组(返回的数组是其本身,原始数组已经改变了)
  1. var arr = [1,2,3];
  2. arr.reverse();
  3. console.log(arr.join());//"3,2,1"
复制代码
 
  所以,如果想把一个字符串逆序的话,可以这样
  1. var str = "abcdefg";

  2. console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值
  3. console.log(str); //"abcdefg" 当然了,原始的是不会变的.
复制代码


  3.sort()

  Array.sort()方法将数组中的元素排序并返回排序后的数组。

  当不带参数时,默认按照顺序排序,也就是从小到大。当然,也可以直接给sort加一个比较函数比较
  1. var arr = [1,4,7];
  2. arr.sort();
  3. console.log(arr); //[1,4,7]

  4. arr.sort(function(a,b){
  5. return a-b; //从小到大
  6. });
  7. console.log(arr); //[1,4,7]

  8. arr.sort(function(a,b){
  9. return b-a; //从大到小
  10. });
  11. console.log(arr); //[7,4,1]


  12. var num = new Array('one','three','Six','Five');
  13. num.sort(); //区分大小写排序
  14. console.log(num); // ["Five", "Six", "one", "three"]
  15. num.sort(function(s,t){
  16. var a = s.toLowerCase();
  17. var b = t.toLowerCase();
  18. if(a<b) return -1;
  19. if(a>b) return 1;
  20. return 0;
  21. });
  22. console.log(num); // ["Five", "one", "Six", "three"]
复制代码
 
  4.concat()

  Array.concat()方法创建并返回一个新数组,它的元素包括调用concat()的原始数组的元素和concat()的每个参数。

  如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。

  但要注意,concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。
  1. var arr = [1,2,3];
  2. console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5]
  3. console.log(arr);       // [1, 2, 3]
  4. console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]
  5. console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7]
  6. console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]]
  7. console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]
复制代码


  5.slice()

  Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段开始和结束的位置(a,b)。返回的是从a开始到b的不包括b的数组元素。

  如果只有一个参数(a).则代表从a到数组结尾的元素。

  如果参数中出现负数(-a). 则表示相对于数组中最后一个元素相距a的位置。比如(-3)代表倒数第三个元素到末尾。出现负数就先换算出来,然后按照范围规则找出来

  他也是返回新的数组,不会修改原始数组
  1. var arr = [1,2,3,4,5];
  2. console.log(arr.slice(0,3)); // [1, 2, 3]
  3. console.log(arr); // [1, 2, 3, 4, 5]
  4. console.log(arr.slice(3));//[4, 5]
  5. console.log(arr.slice(-3));// [3, 4, 5]
  6. console.log(arr.slice(-3,-1));// [3, 4]
  7. console.log(arr.slice(2,-1));// [3, 4]
复制代码
 
  6. splice()

  Array.splice()方法是在数组中插入或者删除元素的通用方法。它会修改原始数组的值,并返回一个新的数组序列

  splice()的第一个参数指定了插入或删除的起始位置,第二个参数指定了应该从数组中删除的元素的个数。第二个参数省略则默认删到末尾。
  1. var arr = [1,2,3,4,5,6,7,8];
  2. console.log(arr.splice(4)); //[5, 6, 7, 8]
  3. console.log(arr); // [1, 2, 3, 4]
  4. console.log(arr.splice(1,2));// [2, 3]
  5. console.log(arr); // [1, 4]
复制代码
 
  splice()的前两个参数指定了需要删除的数组元素。紧随其后的任意个数的参数指定了需要插入到数组中的元素,并从第一个参数代表的位置开始插入。

  不同于上边的concat(),splice()是直接把数组插进去,比如下面的[1,2]
  1. var arr = [1,2,3,4,5];
  2. console.log(arr.splice(2,0,'a','b')); // []
  3. console.log(arr); // [1, 2, "a", "b", 3, 4, 5]
  4. console.log(arr.splice(2,1,[1,2],3));// ["a"]
  5. console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]
复制代码


  7.push() pop() unshift() shift()

  把这些方法看成栈操作就行:前两者正常的栈操作,后两者是反向的栈操作

  push()和unshift()往数组中从后面、前面添加元素,并返回新数组的长度

  pop()和shift()删除数组中最后、最前的元素,并返回删除的元素
  1. var arr = [];

  2. console.log(arr.push(1,2,3));//3
  3. console.log(arr);//[1, 2, 3]

  4. console.log(arr.pop());// 3
  5. console.log(arr);//[1,2]

  6. console.log(arr.push([4,5]));//3
  7. console.log(arr);// [1, 2, [4, 5]]

  8. var arr = [];

  9. console.log(arr.unshift(1,2,3));//3
  10. console.log(arr);//[1, 2, 3]

  11. console.log(arr.shift());// 1
  12. console.log(arr);// [2, 3]

  13. console.log(arr.unshift([4,5]));//3
  14. console.log(arr);//[[4, 5], 2, 3]
复制代码
  
  (2)ECMAScript5中的数组方法

  这一类数组方法大多数有统一大致的规则。它们都不会修改原始数组。

  大多数方法的第一个参数接收一个函数,并且对数组的每个元素(或一些元素)调用一次该函数。

  如果是稀疏数组,对不存在的元素不调用传递的函数;

      在大多数情况下,调用的这个函数一般使用三个参数:数组元素、元素的索引、数组本身。通常后两个参数也不需要填写进去。

  除了这里第一个参数(函数)之外,还有第二个参数(它是可选的),如果第二个参数存在,则调用的函数将被看做是第二个参数的方法。

      也就是说,在调用函数时传递进去的第二个参数作为它的this关键字的值来使用。

  1.forEach()

  这个方法从头至尾遍历数组,为每个数组调用指定的函数。
 
  1. var data = [1,2,3,4,5];
  2. var sum = 0;
  3. data.forEach(function(value){ //只使用了第一个参数(函数),调用的函数也只使用了第一个参数数组元素
  4. sum += value;
  5. });

  6. console.log(sum);//15
  7. console.log(data);// [1, 2, 3, 4, 5]

  8. var data = [1,2,3,4,5];
  9. var sum = 0;
  10. data.forEach(function(value,item,data){ //调用的函数具有了三个参数
  11.   data[item] = value*value; //取平方
  12. });

  13. console.log(data);// [1, 4, 9, 16, 25]
复制代码


  2.map()

  这个方法将调用的数组中每个元素传递给指定的函数,并返回一个数组,它包含这个函数的返回值。
  1. var data = [1,2,3,4,5];
  2. var data1 = data.map(function(value){
  3. return ++ value;
  4. });

  5. console.log(data); // [1, 2, 3, 4, 5]
  6. console.log(data1);// [2, 3, 4, 5, 6]
复制代码
 
  3.filter()

  这个方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的,该函数返回true或false。

  如果返回值是true或者能转化为true的值,那么传递给判定函数的元素就是这个子集的成员,它将被添加到一个作为返回值的数组中。
  1. var data = [1,2,3,4,5];
  2. var data1 = data.filter(function(value){
  3. return value <= 3;
  4. });

  5. var data2 = data.filter(function(value){
  6. return value > 3;
  7. });

  8. console.log(data); // [1, 2, 3, 4, 5]
  9. console.log(data1);// [1,2,3]
  10. console.log(data2);// [4,5]
复制代码


  4.every()和some()

  顾名思义,every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true
  1. var data = [1,2,3,4,5];
  2. var data1 = data.every(function(value){
  3. return value < 4;
  4. });

  5. var data2 = data.some(function(value){
  6. return value >4;
  7. });

  8. console.log(data); // [1, 2, 3, 4, 5]
  9. console.log(data1);// false
  10. console.log(data2);// true
复制代码
  
  5.reduce()和reduceRight()

  这两个方法使用指定的函数将数组元素进行组合,生成单个值。

  reduce()有两个参数。第一个是执行化简操作的函数,就是说用某种方法把两个值化简为一个值,并返回化简后的值。

  第二个参数可选,用来传递给第一个参数函数作为初始值。如果第二个参数没有,则初始值就使用数组的第一个元素值。
  1. var data = [1,2,3,4,5];
  2. var sum = data.reduce(function(a,b){
  3. return a+b;
  4. });

  5. var sum1 = data.reduce(function(a,b){
  6. return a+b;
  7. },5);

  8. var min = data.reduce(function(a,b){
  9. return (a<b)?a:b;
  10. });

  11. console.log(data); // [1, 2, 3, 4, 5]
  12. console.log(sum);// 15
  13. console.log(sum1);// 20
  14. console.log(min);// 1
复制代码
 
  sum中没有第二个参数,所以初始值为第一个数组元素,第一步1+2=3,第二步3+3=6... 最后得15

  sum1中有第二个参数,所以初始值为5,第一步5+1=6,第二步6+2=8... 最后得20

  reduceRight()和reduce()差不多,不同的是它按照数组索引从高到低(从右到左)处理数组,而不是正常的从低到高。
  1. var data = ['a','b','c'];
  2. var str = data.reduce(function(x,y){ //顺序
  3. return x+y;
  4. });

  5. var str1 = data.reduceRight(function(x,y){ //逆序
  6. return x+y;
  7. });

  8. console.log(data);// [1, 2, 3]
  9. console.log(str);//"abc"
  10. console.log(str1);//"cba"
复制代码
  
  6.indexOf()和lastIndexOf()

  这个方法搜索整个数组中具有给定值的元素,返回找到的元素的索引(找到了一个就退出了),没有找到则返回-1.

  一个从头至尾,一个从尾至头
  1. var data = ['a','b','a','c','a'];

  2. console.log(data.indexOf('a')); //0
  3. console.log(data.indexOf('d')); //-1
  4. console.log(data.lastIndexOf('a'));//4

  5. console.log(data.lastIndexOf('a',-2));//2 从倒数第二个开始
  6. console.log(data.lastIndexOf('a',1));//0  从顺序第二个往前
复制代码
 
  7.数组类型 isArray()

  判断一个对象是不是数
  1. console.log(Array.isArray([]));//true
  2. console.log(Array.isArray({}));//false

  3. //模拟上边的
  4. var isArray1 = Function.isArray||function(o){
  5. return typeof o === "object" &&
  6.   Object.prototype.toString.call(o) === "[object Array]";
  7. };

  8. console.log(isArray1([]));//true
  9. console.log(isArray1({}));//false
复制代码







相关帖子

发表于 2017-1-3 12:50:10 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“劍武滄穹“
使用道具 举报

回复

发表于 2017-1-8 18:49:39 | 显示全部楼层
前排支持下
使用道具 举报

回复

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

本版积分规则

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