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
  • 相关阅读:
    RecyclerView 数据刷新的几种方式 局部刷新 notify MD
    【图片】批量获取几万张图片
    RV BaseRecyclerViewAdapterHelper 总结 MD
    RecyclerView.ItemDecoration 间隔线
    Kotlin【简介】Android开发 配置 扩展
    Kotlin 特性 语法糖 优势 扩展 高阶 MD
    一个十分简洁实用的MD风格的UI主框架
    折叠伸缩工具栏 CollapsingToolbarLayout
    FloatingActionButton FAB 悬浮按钮
    Glide Picasso Fresco UIL 图片框架 缓存 MD
  • 原文地址:https://www.cnblogs.com/cq7216/p/6663887.html
Copyright © 2011-2022 走看看