JS之数组基础

数组的定义


  • 数组是一种使用 整数 作为键(integer-key-ed) 属性 和长度 (length) 属性之间关联的特殊对象。
  • Array 对象是 JS 专门用于构造数组的全局对象。
  • 可以通过 字面量表达式Array 构造函数 定义数组。

// 字面量表达式
var arr1 = []; // 空数组
var arr2 = [1, "2", false];
var arr3 = [3];  // 长度为1,元素只有3的数组

// Array构造函数
var arr4 = new Array(); // 空数组
var arr5 = new Array(1,"2", false);
var arr6 = new Array(3);  // 初始化为一个长度为 3 的 空数组 [empty × 3]

数组的方法


  • fill(): 数组填充

    • 参数 (value[, start[, end]])。将数组 start(默认开始) 到 end(默认结束) 索引值替换或填充为 value
      // 创建一个10*10的二维数组,所有值填充为0
      let arr = new Array(10).fill(null).map(() => new Array(10).fill(0));
  • join(): 将数组的元素组起一个字符串。

    • 参数 (separator),以 separator 为分隔符,省略的话则用默认用 , 为分隔符。
      var arr = [1,2,3];
      console.log(arr.join()); // 1,2,3
      console.log(arr.join("-")); // 1-2-3
      console.log(arr); // [1, 2, 3](原数组不变)
  • push()pop():

    • push() 将在数组 尾部 添加一个或多个元素,并返回修改后数组的长度。
    • pop() 将移除数组尾部的第一个元素,并返回这个元素。
      var arr = ["Lily","lucy","Tom"];
      var count = arr.push("Jack","Sean");
      console.log(count); // 5
      console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
      var item = arr.pop();
      console.log(item); // Sean
      console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]
  • shift()unshift() :

    • shift() 将删除数组头部的第一个元素,并返回删除元素的值。如果数组为空则返回 undefined
    • unshift() 将一个或多个元素添加到原数组开头,并返回修改后数组的长度。
      var arr = ["Lily","lucy","Tom"];
      var count = arr.unshift("Jack","Sean");
      console.log(count); // 5
      console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
      var item = arr.shift();
      console.log(item); // Jack
      console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]
  • sort() : 数组项排序,默认升序排列。

    • 无参:将每个数组项 toString() 以后比较。即使数组中的每一项都是数值,sort()方法比较的也是字符串。

    • 有参:支持接收一个比较函数作为参数。比较函数有两个参数(a, b),通过返回 -1a排前面), 0(顺序不变), 1b排前面)来决定顺序。

      var arr1 = ["a", "d", "c", "b"];
      console.log(arr1.sort()); // ["a", "b", "c", "d"]
      arr2 = [13, 24, 51, 3];
      console.log(arr2.sort()); // [13, 24, 3, 51]
      
      arr2 = [13, 24, 51, 3];
      console.log(arr2.sort((a, b) => a - b)); // [3, 13, 24, 51]
  • reverse(): 将原数组项的顺序反转并返回,意味着原数组也会被改变。

      var arr = [13, 24, 51, 3];
      console.log(arr.reverse()); //[3, 51, 24, 13]
      console.log(arr); //[3, 51, 24, 13](原数组改变)
  • concat(): 用于连接两个或多个数组。不会改变现有的数组,返回一个新的数组。

      var arr = [1,3,5,7];
      var arrCopy = arr.concat(9,[11,13]);
      console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
      console.log(arr); // [1, 3, 5, 7](原数组未被修改)
  • slice(): 将原数组的 [begin, end)范围元素生成一个新的数组返回。可以接受一或两个参数,即要截取的 起始索引 和 结束索引。

    • 负参:参数为负数,则表示 从后往前 的位置索引,索引相当于是 length + begin/end( length 是数组长度)。
    • 无参:相当于生成原数组的浅拷贝。
    • 不会改变原数组,而是返回一个新的数组。
      var arr = [1,3,5,7,9,11];
      var arrCopy = arr.slice(1);
      var arrCopy2 = arr.slice(1,4);
      var arrCopy3 = arr.slice(1,-2);
      var arrCopy4 = arr.slice(-4,-1);
      console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
      console.log(arrCopy); //[3, 5, 7, 9, 11]
      console.log(arrCopy2); //[3, 5, 7]
      console.log(arrCopy3); //[3, 5, 7]
      console.log(arrCopy4); //[5, 7, 9]
  • splice(): 可以实现数组元素的 删除、插入和替换。

    • 删除:双参数 (index, n), 将从index索引 位置开始删除 n个 元素。
    • 插入:3个及以上参数(index, n, ...data); 其中n === 0,相当于在index索引位置插入...data
    • 替换:同上,但是 n !== 0。就相当于把index索引开始的n个元素替换为...data
      var arr = [1,3,5,7,9,11];
      var arrRemoved = arr.splice(0,2);
      console.log(arr); //[5, 7, 9, 11]
      console.log(arrRemoved); //[1, 3]
      var arrRemoved2 = arr.splice(2,0,4,6);
      console.log(arr); // [5, 7, 4, 6, 9, 11]
      console.log(arrRemoved2); // []
      var arrRemoved3 = arr.splice(1,1,2,4);
      console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
      console.log(arrRemoved3); //[7]
  • indexOf()lastIndexOf():

    • indexOf(): 查找数组中某元素(第一个参数)首次出现的索引值,没有则返回 -1
    • lastIndexOf(): 查找数组中某元素(第一个参数)最后出现的索引值,没有则返回 -1
    • 第二个参数都表示开始查找的索引,默认是 0,从第一个开始。
      var arr = [1,3,5,7,7,5,3,1];
      console.log(arr.indexOf(5)); //2
      console.log(arr.lastIndexOf(5)); //5
      console.log(arr.indexOf(5,2)); //2
      console.log(arr.lastIndexOf(5,4)); //2
      console.log(arr.indexOf("5")); //-1
  • forEach(): 对数组进行遍历循环。

    • 对数组中的每一项运行处理函数。处理函数有两个参数,分别是 当前数组项 和 索引值。
    • 这个方法没有返回值。
      var arr = [1, 2, 3, 4, 5];
      arr.forEach(function(x, index, a){
      console.log(x + '|' + index + '|' + (a === arr));
      });
      // 输出为:
      // 1|0|true
      // 2|1|true
      // 3|2|true
      // 4|3|true
      // 5|4|true
  • map(): 对数组中的每一项运行给定函数,然后将每次函数调用的结果组成新的数组返回。

      var arr = [1, 2, 3, 4, 5];
      var arr2 = arr.map(function(item){
      return item*item;
      });
      console.log(arr2); //[1, 4, 9, 16, 25]
  • filter(): “过滤”功能,将数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

      var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      var arr2 = arr.filter(function(x, index) {
      return index % 3 === 0 || x >= 8;
      }); 
      console.log(arr2); //[1, 4, 7, 8, 9, 10]
  • every(): 将数组中的每一项运行给定函数,只有所有项都满足条件,才会返回true。

      var arr = [1, 2, 3, 4, 5];
      var arr2 = arr.every(function(x) {
      return x < 10;
      }); 
      console.log(arr2); //true
      var arr3 = arr.every(function(x) {
      return x < 3;
      }); 
      console.log(arr3); // false
  • some(): 将数组中的每一项运行给定函数,只要有一项满足条件,就会返回true。

      var arr = [1, 2, 3, 4, 5];
      var arr2 = arr.some(function(x) {
      return x < 3;
      }); 
      console.log(arr2); //true
      var arr3 = arr.some(function(x) {
      return x < 1;
      }); 
      console.log(arr3); // false
  • reduce()reduceRight(): 用于数组项的迭代

    • reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight() 则从数组的最后一项开始,向前遍历到第一项。
    • 两个参数:一个在每一项上调用的函数和作为归并基础的初始值(可选)。
    • 调用函数接收 4 个参数:前一个值 ( 初始值 或者 前面迭代返回的结果值 )、当前值、项的索引 和 数组对象。
      var values = [1,2,3,4,5];
      var sum = values.reduceRight(function(prev, cur, index, array){
      return prev + cur;
      },10);
      console.log(sum); //25

类数组


  • 类数组定义

    • 拥有 length 属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理)的一个对象
    • typeofobject,不具有数组所具有的方法。
    • JS 中常见的 类数组 有 arguments 对象和 DOM 方法的返回结果,比如 document.getElementsByTagName()
  • 类数组判断

    function isLikeArray(o) {
      if (typeof o === 'object' && isFinite(o.length) &&  o.length >= 0 && o.length < 4294967296){
          // 4294967296: 2^32
          return true
      } else {
          return false
      }
    }

    全局 isFinite() 函数用来判断被传入的参数值是否为一个有限数值(finite number)。在必要情况下,参数会首先转为一个数值。

  • 类数组转换为数组

    • 方法1: args = Array.prototype.slice.call(arguments);, 借助数组的slice() 方法。
    • 方法2: Array.from(arguments), ES6新增方法。

数组转换为数组后可以直接调用数组具有的方法。

参考资料


JS数组方法大全