zoukankan      html  css  js  c++  java
  • 总结:JavaScript数组(Array)常见操作实例

    arguments把所有参数拼接成数组

    若函数中有隐式的不确定个数的参数,则需使用arguments把所有参数拼接成数组。但传进来的参数 arguments 只是类数组对象,代表传给一个function的参数列表。既然是类数组对象,说明它不是真正的数组,没有数组所具有的属性和方法(除了 length 属性)。下面把它转化为真正的数组。

    方法1:

    function unite(arr1, arr2, arr3) {
    	var args = Array.from(arguments);
    	...
    }
    

    方法2:

    function destroyer(arr){
    	var args = [];
    	for (var i = 1; i < arguments.length; i++){
    		args.push(arguments[i]);  //i从1开始,表示把从第二个参数到最后一个参数合并为一个数组
    	}
    }
    destroyer([1, 2, 3, 1, 2, 3], 2, 3);
    

    使用.concat()方法合并2个或多个数组

    合并2个数组:

    arr1.concat(arr2);
    

    合并多个数组(需要用到 Array 的归并方法 reduce()):

    args = [arr1, arr2, arr3, arr4, ...]
    var arr = args.reduce(function(prev, cur, index, array){
        return prev.concat(cur);
      });
    }
    

    使用.reduce()方法求数组各个元素之和

    var sum = list.reduce(function(prev, cur, index, array){
        return prev + cur;
    }, 0);  //累加器起始值为0
    

    array.indexOf(index)方法判断元素在数组中首次出现的位置

    var indexVar = Array.indexOf(array, item, start);
    
    • array —— 要搜索的数组。
    • item —— 要在数组中查找的对象。
    • startIndex ——(可选)指定在数组中搜索的起始元素的索引号。

    如果找到 item,则返回表示该元素在数组中的索引位置的编号;否则返回 -1

    var arr = a.filter(function(item){
    	return b.indexOf(item) < 0;  //返回数组a中不在数组b的元素组成的集合
    });
    
    var newArr = arr.filter(function(item, index, array){
        return arr.indexOf(item) === index;  //去除数组重复项
    });
    

    .filter()方法过滤数组

    var newArr = arr.filter(function(item, index, array){
        return arr.indexOf(item) === index;  //去除数组重复项
    });
    
    var newArr = arr.filter(function(item, index, array){
    	if (item === 1){
    		return false;  //返回false的item项去掉
    	}
    	return true;  //返回true的item项保留
    });
    
    return arr.filter(function(val){
    	return Boolean(val);  //删除数组中所有假值
    });
    
    return arr.filter(Boolean);  //删除数组中所有假值
    

    .map() 方法使用指定函数处理数组中的每个元素,并将处理结果封装为新的数组返回。

    var pair = "";
    arr.map(function(item, index, array){
        switch(item){
          case "A":
            pair = "T"; break;
          case "T":
            pair = "A"; break;
          case "C":
            pair = "G"; break;
          case "G":
            pair = "C"; break;
        }
        return [item,pair];
    }
    

    .forEach()方法为数组中的每个元素执行一次回调函数

    function updateInventory(arr1, arr2) {
      // All inventory must be accounted for or you're fired!
      if(arr1.length === 0){
        arr1 = arr2;
      }
      else{
        arr1.forEach(function(item,index,array){  //forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。
          for(var i = 0; i < arr2.length; i++){
            //货物已存在
            if(item[1] == arr2[i][1]){
               item[0] += arr2[i][0];
               break;
            }
            //无对应货物
            if(array.join().indexOf(arr2[i][1]) < 0){
               array.push(arr2[i]);
            }
          }
        });
      }
      arr1.sort(function(a,b){
        return a[1] > b[1];
      });
      return arr1;
    }
    
    // Example inventory lists
    var curInv = [
        [21, "Bowling Ball"],
        [2, "Dirty Sock"],
        [1, "Hair Pin"],
        [5, "Microphone"]
    ];
    
    var newInv = [
        [2, "Hair Pin"],
        [3, "Half-Eaten Apple"],
        [67, "Bowling Ball"],
        [7, "Toothpaste"]
    ];
    
    updateInventory(curInv, newInv);
    

    .map()方法与.forEach()方法的区别

    • map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,若没有返回值,则新数组的所有元素为undefined。
    • forEach() 方法为数组中的每个元素执行一次回调函数。

    使用.sort()方法为数组的元素进行排序,并返回数组

    arr.sort(function(a, b){
        return a - b;  //按从小到大的顺序排序
    });
    
    arr.sort(function(a, b){
        return b - a;  //按从大到小的顺序排序
    });
    
    arr1.sort(function(a,b){
        return a > b;  //按字母顺序排序
    });
    

    使用.isArray()判断是否为数组

    Array.isArray([1, 2, 3]);  // true
    Array.isArray({foo: 123}); // false
    Array.isArray("foobar");   // false
    Array.isArray(undefined);  // false
  • 相关阅读:
    由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。
    浅析C#中ASP.NET页面的生存周期
    IIS:连接数、并发连接数、最大并发工作线程数、应用程序池的队列长度、应用程序池的最大工作进程数详解
    c#.net 生成清晰缩略图
    类序列化
    jQuery Validate验证框架使用
    XML序列化/反序列化数据库形式保存和读取。
    有关IT的小笑话
    百度富文本编辑器的使用!
    存储过程的使用
  • 原文地址:https://www.cnblogs.com/cq7216/p/6663887.html
Copyright © 2011-2022 走看看