我整理了js数组的所有使用方法和案例(应该没少吧)

80 阅读9分钟

如有缺失欢迎补充

修改数组本身的方法:

  • copyWithin(target, start, end)

    • 描述:将指定范围的元素复制到数组中的另一个位置,并返回修改后的数组。

    • 案例:

      let array = [1, 2, 3, 4];
      array.copyWithin(2, 0, 3);
      // 输出: [1, 2, 1, 2]
      
  • fill(value, start, end)

    • 描述:用指定的值填充数组中的元素,并返回修改后的数组。

    • 案例:

      let array = [1, 2, 3, 4];
      array.fill(0, 2, 4);
      // 输出: [1, 2, 0, 0]
      
  • pop()

    • 描述:删除并返回数组的最后一个元素。

    • 案例:

      let array = [1, 2, 3, 4];
      let removedElement = array.pop();
      // 输出: removedElement = 4, array = [1, 2, 3]
      
  • push(element1, ..., elementN)

    • 描述:将一个或多个元素添加到数组的末尾,并返回新的长度。

    • 案例:

      let array = [1, 2, 3, 4];
      let newLength = array.push(5, 6);
      // 输出: newLength = 6, array = [1, 2, 3, 4, 5, 6]
      
  • reverse()

    • 描述:颠倒数组中元素的顺序,并返回修改后的数组。

    • 案例:

      let array = [1, 2, 3, 4];
      array.reverse();
      // 输出: [4, 3, 2, 1]
      
  • shift()

    • 描述:删除并返回数组的第一个元素。

    • 案例:

      let array = [1, 2, 3, 4];
      let shiftedElement = array.shift();
      // 输出: shiftedElement = 1, array = [2, 3, 4]
      
  • sort(compareFunction)

    • 描述:按照字母顺序对数组进行排序,并返回修改后的数组。如果提供了比较函数(compareFunction),则根据比较函数的规则进行排序。

    • 案例:

      let array = [3, 1, 4, 2];
      array.sort();
      // 输出: [1, 2, 3, 4]
      
  • splice(start, deleteCount, item1, ..., itemN)

    • 描述:从指定位置开始,在数组中插入、删除或替换元素,并返回被删除的元素组成的数组。

    • 案例:

      let array = [1, 2, 3, 4];
      let removedElements = array.splice(2, 1, 'a', 'b');
      // 输出: removedElements = [3], array = [1, 2, 'a', 'b', 4]
      

返回新数组的方法:

  • concat(array1, array2, ..., arrayN)

    • 描述:将多个数组合并为一个新数组,并返回新数组。

    • 案例:

      let array1 = [1, 2];
      let array2 = [3, 4];
      let newArray = array1.concat(array2);
      // 输出: [1, 2, 3, 4]
      
  • filter(callback(element, index, array), thisArg)

    • 描述:基于指定条件筛选数组中的元素,并返回由满足条件的元素组成的新数组。

    • 案例:

      let array = [1, 2, 3, 4];
      let filteredArray = array.filter(element => element > 2);
      // 输出: filteredArray = [3, 4]
      
  • flatMap(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行回调函数,并将回调函数返回的结果展平为一个新数组。

    • 案例:

      let array = [1, 2, 3, 4];
      let flatMappedArray = array.flatMap(x => [x, x * 2]);
      // 输出: flatMappedArray = [1, 2, 2, 4, 3, 6, 4, 8]
      
  • map(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行回调函数,并返回由回调函数的返回值组成的新数组。

    • 案例:

      let array = [1, 2, 3, 4];
      let mappedArray = array.map(element => element * 2);
      // 输出: mappedArray = [2, 4, 6, 8]
      
  • slice(start, end)

    • 描述:提取数组中指定范围的元素,并返回一个新数组。

    • 案例:

      let array = [1, 2, 3, 4];
      let slicedArray = array.slice(1, 3);
      // 输出: slicedArray = [2, 3]
      

遍历数组的方法:

  • for...of 循环:

    • 描述:使用 for...of 循环遍历数组中的元素。

    • 案例:

      let array = ["a", "b", "c"];
      for (let element of array) {
        console.log(element);
      }
      // 输出:
      // a
      // b
      // c
      
  • forEach(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行回调函数。

    • 案例:

      let array = [1, 2, 3];
      array.forEach(element => console.log(element));
      // 输出:
      // 1
      // 2
      // 3
      
  • for...in 循环:

    • 描述:使用 for...in 循环遍历数组的索引(键)。

    • 案例:

      let array = ["a", "b", "c"];
      for (let index in array) {
        console.log(index);
      }
      // 输出:
      // 0
      // 1
      // 2
      
  • entries()

    • 描述:返回一个包含数组中每个索引/值对的迭代器对象。

    • 案例:

      let array = ["a", "b", "c"];
      for (let [index, element] of array.entries()) {
        console.log(index, element);
      }
      // 输出:
      // 0 a
      // 1 b
      // 2 c
      

转换数组的方法:

  • toString()

    • 描述:将数组转换为逗号分隔的字符串。

    • 案例:

      let array = [1, 2, 3];
      let str = array.toString();
      // 输出: str = "1,2,3"
      
  • join(separator)

    • 描述:将数组的所有元素转换为一个字符串,使用指定的分隔符进行连接。

    • 案例:

      let array = [1, 2, 3];
      let joinedStr = array.join("-");
      // 输出: joinedStr = "1-2-3"
      
  • toLocaleString()

    • 描述:将数组中的元素转换为本地化格式的字符串。

    • 案例:

      let array = [1, 2, 3];
      let localizedStr = array.toLocaleString();
      // 输出: localizedStr 根据本地化设置可能会有变化
      
  • slice(start, end)

    • 描述:提取数组中指定范围的元素,并返回一个新数组。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let newArray = array.slice(2, 4);
      // 输出: newArray = [3, 4]
      
  • concat(array1, array2, ..., arrayN)

    • 描述:将多个数组或值合并成一个新数组。

    • 案例:

      let array1 = [1, 2];
      let array2 = [3, 4];
      let newArray = array1.concat(array2);
      // 输出: newArray = [1, 2, 3, 4]
      
  • flatMap(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行回调函数,并将回调函数返回的结果展平为一个新数组。

    • 案例:

      let array = [1, 2, 3];
      let flatMappedArray = array.flatMap(x => [x, x * 2]);
      // 输出: flatMappedArray = [1, 2, 2, 4, 3, 6]
      

以上方法允许您转换和操作数组,例如将数组转换为字符串、连接数组、提取特定范围的元素等。根据您的需求,选择适合的方法来转换数组。 排序和修改数组的方法:

  • sort(compareFunction)

    • 描述:对数组元素进行排序,默认按照字符串Unicode码点进行排序,可以通过提供自定义的比较函数来指定排序规则。

    • 案例:

      let array = [3, 1, 4, 2];
      array.sort((a, b) => a - b);
      // 输出: array = [1, 2, 3, 4]
      
  • reverse()

    • 描述:反转数组中的元素顺序,第一个元素变为最后一个,最后一个元素变为第一个。

    • 案例:

      let array = [1, 2, 3, 4];
      array.reverse();
      // 输出: array = [4, 3, 2, 1]
      
  • fill(value, start, end)

    • 描述:用指定的值填充数组中的元素,可以指定开始和结束位置,结束位置不包括在填充范围内。

    • 案例:

      let array = [1, 2, 3, 4];
      array.fill(0, 1, 3);
      // 输出: array = [1, 0, 0, 4]
      
  • splice(start, deleteCount, item1, item2, ...)

    • 描述:从数组中删除、替换或添加元素,并返回被删除的元素组成的新数组。

    • 案例:

      let array = [1, 2, 3, 4];
      let splicedArray = array.splice(1, 2, 'a', 'b');
      // 输出: array = [1, "a", "b", 4], splicedArray = [2, 3]
      
  • pop()

    • 描述:删除数组的最后一个元素,并返回该元素。

    • 案例:

      let array = [1, 2, 3, 4];
      let poppedElement = array.pop();
      // 输出: array = [1, 2, 3], poppedElement = 4
      
  • push(element1, element2, ...)

    • 描述:将一个或多个元素添加到数组的末尾,并返回新数组的长度。

    • 案例:

      let array = [1, 2, 3];
      let length = array.push(4, 5);
      // 输出: array = [1, 2, 3, 4, 5], length = 5
      
  • shift()

    • 描述:删除数组的第一个元素,并返回该元素。

    • 案例:

      let array = [1, 2, 3, 4];
      let shiftedElement = array.shift();
      // 输出: array = [2, 3, 4], shiftedElement = 1
      
  • unshift(element1, element2, ...)

    • 描述:将一个或多个元素添加到数组的开头,并返回新数组的长度。

    • 案例:

      let array = [1, 2, 3];
      let length = array.unshift(0, -1);
      // 输出: array = [0, -1, 1, 2, 3], length = 5
      

这些方法允许您对数组进行排序和修改。您可以使用它们来改变数组元素的顺序、替换或添加元素,以及删除数组中的元素。根据您的需求,选择适合的方法来排序和修改数组。

操作数组的方法:

  • forEach(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行提供的回调函数。

    • 案例:

      let array = [1, 2, 3];
      array.forEach(element => console.log(element));
      // 输出: 1, 2, 3 (分行打印)
      
  • map(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行提供的回调函数,并返回由回调函数的返回值组成的新数组。

    • 案例:

      let array = [1, 2, 3];
      let mappedArray = array.map(element => element * 2);
      // 输出: mappedArray = [2, 4, 6]
      
  • filter(callback(currentValue, index, array), thisArg)

    • 描述:对数组中的每个元素执行提供的回调函数,根据回调函数的返回值进行过滤,并返回通过过滤条件的元素组成的新数组。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let filteredArray = array.filter(element => element % 2 === 0);
      // 输出: filteredArray = [2, 4]
      
  • reduce(callback(accumulator, currentValue, index, array), initialValue)

    • 描述:对数组中的每个元素执行提供的回调函数,将结果累积到一个值上并返回该值。

    • 案例:

      let array = [1, 2, 3, 4];
      let sum = array.reduce((accumulator, element) => accumulator + element, 0);
      // 输出: sum = 10
      
  • reduceRight(callback(accumulator, currentValue, index, array), initialValue)

    • 描述:对数组中的每个元素执行提供的回调函数,从右至左将结果累积到一个值上并返回该值。

    • 案例:

      let array = ['I', 'am', 'learning', 'JavaScript'];
      let reversedString = array.reduceRight((accumulator, element) => `${accumulator} ${element}`);
      // 输出: reversedString = "JavaScript learning am I"
      

这些方法允许您对数组进行迭代、映射、过滤和归约操作。您可以使用它们来处理数组中的每个元素,并根据需要生成新的数组或累积值。选择适合您需求的方法来操作数组。

搜索和查找数组的方法:

  • indexOf(searchElement, fromIndex)

    • 描述:返回第一个与指定值相等的元素在数组中的索引,如果不存在则返回-1。可选参数fromIndex表示开始搜索的索引位置。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let index = array.indexOf(3);
      // 输出: index = 2
      
  • lastIndexOf(searchElement, fromIndex)

    • 描述:返回最后一个与指定值相等的元素在数组中的索引,如果不存在则返回-1。可选参数fromIndex表示开始搜索的索引位置。

    • 案例:

      let array = [1, 2, 3, 4, 3, 5];
      let lastIndex = array.lastIndexOf(3);
      // 输出: lastIndex = 4
      
  • includes(searchElement, fromIndex)

    • 描述:判断数组是否包含某个元素,返回布尔值。可选参数fromIndex表示开始搜索的索引位置。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let includesElement = array.includes(3);
      // 输出: includesElement = true
      
  • find(callback(currentValue, index, array), thisArg)

    • 描述:返回数组中满足测试函数条件的第一个元素的值,如果没有找到则返回undefined

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let foundElement = array.find(element => element > 3);
      // 输出: foundElement = 4
      
  • findIndex(callback(currentValue, index, array), thisArg)

    • 描述:返回数组中满足测试函数条件的第一个元素的索引,如果没有找到则返回-1。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let foundIndex = array.findIndex(element => element > 3);
      // 输出: foundIndex = 3
      
  • some(callback(currentValue, index, array), thisArg)

    • 描述:判断数组中是否至少有一个元素满足测试函数的条件,返回布尔值。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let hasSomeElement = array.some(element => element > 3);
      // 输出: hasSomeElement = true
      
  • every(callback(currentValue, index, array), thisArg)

    • 描述:判断数组中的所有元素是否都满足测试函数的条件,返回布尔值。

    • 案例:

      let array = [1, 2, 3, 4, 5];
      let allElementsPassTest = array.every(element => element > 0);
      // 输出: allElementsPassTest = true
      

这些方法允许您在数组中搜索、查找和验证元素。您可以使用它们来查找元素的索引、判断是否包含特定元素、查找满足条件的元素等。选择适合您需求的方法来搜索和查找数组。

Ending...