Array方法——集合

181 阅读14分钟

arr.indexOf()

  • ES5新增

作用:

  • arr.indexOf()用于查找指定元素在数组中的索引位置。它接受一个参数,即要查找的元素,并返回该元素在数组中首次出现的索引位置。如果数组中不存在该元素,则返回-1。

示例:

const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];

console.log(fruits.indexOf('apple'));  // 输出: 0
console.log(fruits.indexOf('banana')); // 输出: 1
console.log(fruits.indexOf('mango'));  // 输出: -1

  • 注意:
  • fruits.indexOf('apple'),找的第一个出现的'apple' 元素的索引位置
  • 找不到返回 -1

arr.lastIndexOf()

  • ES5新增

作用:

  • arr.lastIndexOf()是一个数组方法,用于查找指定元素在数组中的最后一个出现的索引位置。它接受一个参数,即要查找的元素,并返回该元素在数组中最后一次出现的索引位置。如果数组中不存在该元素,则返回-1。

示例:

const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];

console.log(fruits.lastIndexOf('apple'));  // 输出: 3
console.log(fruits.lastIndexOf('banana')); // 输出: 1
console.log(fruits.lastIndexOf('mango'));  // 输出: -1

  • 注意:
  • 找的是元素在数组中的最后一个出现的索引位置。
  • 找不到返回 -1

arr.map()

  • arr.map()
  • ES5新增

作用:

  • map方法创建一个新数组;新数组由原数组 每个元素都调用一次提供的函数后的返回值组成
  • 从数组第一个元素开始遍历的调用回调函数, 每次都返回一个值,最后组成一个新的数组

参数:

  • arr.map(cbFn) 接收一个函数cbFn
  • cbFn的第一个参数:正在处理的当前的元素 item , el 变量自己命名, 最好语义化。
  • cbFn的第二个参数 正在处理的元素的索引号 index , i

返回值:

  • 由原数组每个元素都调用回调函数的结果组成的新数组。
  • 返回的数组是真数组

注意:

  • map() 中传入的函数, 一般都需要写return

演示:

  • image.png
  • 输出结果
  • image.png

arr.join()

  • arr.join(‘分隔符’)

作用:

  • 将数组转为字符串; 用分隔符连接
  • 把数组的所有元素连接成一个字符串, 并返回这个字符串。

参数:

  • 可以传一个分割符, 也可以省略
  • 分隔符加引号

演示:

image.png

  • 输出结果:
  • image.png
  • 传空的字符串, 直接将数组中的元素无间隙的连接在一起

arr.forEach()

  • arr.forEach(cbFn)
  • ES5新增

作用:

  • forEach遍历数组
  • forEach() 方法对数组的每个元素执行一次给定的函数。
  • forEach接收一个回调函数cbFn, cbFn又接收两个参数

参数:

    1. cbFn的第一个参数,el ==> 表示数组里面的元素
    1. cbFn的第二个参数,i ==> 表示数组中每个元素的索引号

返回值:

  • 无返回值

语法:

  • forEach(function(element) { /* … */ })
  • forEach(function(element, index) { /* … */ })

arr.push()

作用:

  • 将一个或多个元素添加到数组的末尾

返回值:

  • 该数组的新长度会修改原数组

注:

  • 如果一次添加多个数组用逗号隔开即可 image.png

arr.unshift()

作用:

  • 将一个或多个元素添加到数组的开头

返回值:

  • 该数组的新长度会修改原数组

注:

  • 如果一次添加多个数组用逗号隔开即可 image.png

arr.pop()

作用:

  • 从数组中删除最后一个元素,修改原数组

返回值:

  • 该元素的值

例:

image.png

arr.shift()

作用:

  • 从数组中删除第一个元素,修改原数组

返回值:

  • 该元素的值

例:

image.png

arr.splice()

作用:

  • 可以添加也可以删除数组元素
  • 可以从指定位置删除或者增加的数组元素,注意它修改原数组

删除数组用法:

  • 语法:splice(start, deleteCount)
  • start起始位置:指定修改的开始位置(从0计数)
  • deleteCount删除个数:可选的。 如果省略则默认从指定的起始位置删除到最后

增加数组用法:

  • splice(start, deleteCount, item1...)
  • start起始位置:指定修改的开始位置(从0计数)
  • deleteCount删除个数: 参数必写,不写会有很多问题,如不想删除可 填 0

例:

image.png

  • 输出结果:
  • image.png

arr.reverse()

基本语法:

  • arr.reverse()

作用:

  • reverse()方法是 JavaScript 数组对象的一个方法,用于反转(颠倒顺序)数组中元素的顺序。它会改变原始数组,将数组中的第一个元素放置在最后一个位置,第二个元素放置在倒数第二个位置,以此类推,达到颠倒数组顺序的效果。

注意:

  • reverse() 方法对原始数组进行修改,不会创建新的数组。它直接改变了原始数组的顺序,因此需要小心使用,确保不会对其他地方引用同一数组的代码造成意外的影响。

示例:

  • image.png

arr.filter()

  • ES5新增

作用:

  • filter() 是一个数组方法,用于筛选数组中满足特定条件的元素,并返回一个新数组,其中包含符合条件的元素。

基本语法:

  • array.filter(callback(element[, index[, array]])[, thisArg])
  • 其中,array 是要进行筛选的数组,callback 是一个回调函数,用于定义筛选的条件。callback 函数可以接收三个参数:element 表示当前正在处理的数组元素,index 表示当前元素的索引(可选),array 表示调用 filter() 方法的数组(可选)。thisArg 参数是可选的,用于指定 callback 函数内部的 this 值。

示例:

  • image.png
  • 在上述示例中,filter() 方法会遍历 numbers 数组的每个元素,并将每个元素传递给回调函数。回调函数中的条件 number % 2 === 0 用于判断当前元素是否为偶数。如果条件返回 true,则将当前元素添加到新数组 evenNumbers
  • 可以使用箭头函数简化
  • image.png

arr.reduce()

作用:

  • 在 JavaScript 中,reduce() 是一个数组方法,用于将数组中的所有元素通过指定的累加器函数(reducer function)进行累积计算,返回一个单一的值。

语法:

  • reduce() 需要传入一个回调函数和一个可选的初始值。回调函数接受四个参数:累加器(accumulator)、当前值(current value)、当前索引(current index)和原数组(array)。回调函数必须返回累加器的值(即本次操作的结果),累加器的初始值可以通过第二个参数指定。
  • arr.reduce(callbackFn, initialValue)

示例:

  • 下面的代码使用 reduce() 方法来计算数组 [1, 2, 3, 4, 5] 中所有元素的和:
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15
  • 在上面的代码中,回调函数 (accumulator, currentValue) => accumulator + currentValue 对累加器和当前值求和,初始值为 0reduce() 方法首先将累加器设置为初始值 0,然后依次将数组中的每个元素和累加器传入回调函数,依次计算出 1+0=12+1=33+3=64+6=105+10=15,最终得到总和 15

arr.find()

  • ES5新增

作用:

  • 在 JavaScript 中,find() 方法是用于找到数组中第一个满足给定条件的元素并返回该元素的值。它接受一个回调函数作为参数,该函数会对每个数组元素进行调用,直到找到一个满足条件的元素为止。如果没有找到符合条件的元素,则返回undefined

示例:

  • 以下代码查找一个数组中第一个大于 10 的数
const arr = [5, 8, 12, 16, 3];
const result = arr.find(num => num > 10);
console.log(result); // 输出: 12
  • 在此示例中,回调函数 num => num > 10 用于检查数组中的每个元素是否大于 10。由于第一个满足条件的元素是 12,因此 find() 方法返回 12。
  • 可以封装一个回调函数实现相同效果
 const arr = [5, 8, 12, 16, 3];
   function cf(el){
    return el > 10
   }
   const p = arr.find(cf)
   console.log(p) // 输出 12

arr.findIndex()

  • ES5新增

作用:

  • findIndex() 方法返回数组中第一个满足给定条件的元素的索引,如果没有满足条件的元素,则返回 -1

语法:

  • arr.findIndex(cbFn)
  • cbFn: 第一个参数: item 当前数组, 第二个参数: Index 索引 (可选).
  • 与上面用法find()类似,可参考上面语法

arr.every()

  • ES5新增

作用:

  • every() 方法是 JavaScript 数组的一个方法,它会检查数组中的所有元素是否都满足指定条件。如果数组中的所有元素都满足条件,every() 方法将返回 true,否则返回false

示例:

  • every() 方法接受一个回调函数作为参数该回调函数会被传递数组中的每个元素和相应的索引。回调函数应该返回一个布尔值,表示元素是否满足条件。
  • 该示例使用 every() 方法检查数组中的所有元素是否为偶数:
const arr = [2, 4, 6, 8];
const allEven = arr.every(num => num % 2 === 0); // true
  • 在上述代码中,every() 方法会对数组中的每个元素进行求模运算,并检查结果是否等于 0(即是否为偶数)。由于所有元素都是偶数,因此 every() 方法返回 true。

arr.some()

  • ES5新增

作用:

  • some() 方法是 JavaScript 数组的一个内置方法,用于判断数组中是否至少有一个元素满足指定的条件,如果满足,则返回 true,否则返回 false。它接受一个回调函数作为参数,该回调函数可以对数组中的每个元素进行测试,如果有任一元素通过测试,则 some() 方法返回 true。

示例:

  • 检查数组中是否包含特定元素:
const numbers = [2, 4, 6, 8, 10];
const hasSix = numbers.some(num => num === 6);

console.log(hasSix); // true

arr.includes()

  • ES5新增

作用:

  • includes() 是 JavaScript 中的一个方法,它用于检查一个数组字符串是否包含指定的元素或字符串,并返回布尔值表示是否包含

语法:

  • arr.includes(searchValue, fromIndex)
  • searchValue == 要搜索的元素
  • fromIndex ==可选; 从那个索引号开始搜索,默认为0

示例:

  • 在数组中使用 includes() 方法时,它将检查数组中是否存在一个特定元素,并返回 true 或 false。例如:
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(34)); // false
console.log(numbers.includes(6)); // false

arr.flat()

作用:

  • 拍平数组。
  • flat() 是 JavaScript 数组的方法,它用于将多维数组(嵌套数组)展平为一维数组。 该方法返回一个新数组,其中包含原始数组的所有元素,这些元素按照在原始数组中出现的顺序排列在一维数组中。flat() 方法可以接受一个可选参数,用于指定应该展开的嵌套层数,默认值为 1

示例:

  • 示例1:将嵌套数组展平为一维数组
const arr = [1, 2, [3, 4], 5];
const flattenedArr = arr.flat();
console.log(flattenedArr); // [1, 2, 3, 4, 5]
  • 示例2:将二维数组展平为一维数组
const arr = [[1, 2], [3, 4], [5, 6]];
const flattenedArr = arr.flat();
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]
  • 示例3:将三维数组展平为一维数组
const arr = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
const flattenedArr = arr.flat(2);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6, 7, 8]
  • 在示例3中,我们传递了一个参数 2,表示应该展开两层嵌套的数组。如果不指定参数,则默认值为 1,只展开一层嵌套的数组。
  • 注:全部拍平,传入Infinity

arr.fill()

作用:

  • fill() 是一个 JavaScript 数组的方法,用于将数组中所有元素替换为指定的值。可以传递一个参数作为要填充到数组中的值,也可以传递两个参数来指定要填充的起始和结束位置该方法会修改原始数组,并返回修改后的数组

语法:

  • arr.fill(val, start, end)
  • val === 用于将数组中所有元素替换为指定的值
  • start end ===可选; 指定要填充的起始和结束的索引位置

示例:

  1. 使用单个参数
const arr = [0, 1, 2, 3, 4];
arr.fill(5); // 将数组所有元素替换为 5
console.log(arr); // 输出 [5, 5, 5, 5, 5]
  1. 使用两个参数
const arr = [0, 1, 2, 3, 4];
arr.fill(5, 1, 4); // 将数组下标从 1 到 3
  1. end不写,从start直到最后
const array1 = [1, 2, 3, 4];
console.log(array1.fill(5, 1)); // [1, 5, 5, 5]

arr.sort

作用:

  • 在 JavaScript 中,sort() 是一个数组方法,用于对数组元素进行排序。它会改变原始数组并返回排序后的数组
  • 默认情况下,sort() 方法将把数组元素转换为字符串并按照 Unicode 编码顺序进行排序。如果想要按照其他顺序进行排序,则可以传递一个比较函数作为参数

示例:

// 排序数组元素(默认按照 Unicode 编码顺序)
const fruits = ['banana', 'pear', 'apple', 'orange'];
fruits.sort(); // ['apple', 'banana', 'orange', 'pear']

// 按照数字升序排序
const numbers = [3, 1, 5, 2, 4];
numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5]

// 按照数字降序排序
const numbers = [3, 1, 5, 2, 4];
numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

// 按照字符串长度排序
const words = ['dog', 'cat', 'elephant', 'bird'];
words.sort((a, b) => a.length - b.length); // ['cat', 'dog', 'bird', 'elephant']

  • 比较函数接受两个参数(通常称为 ab),它们代表待比较的数组元素。如果返回值小于 0,则 a 排在 b 前面;如果返回值大于 0,则 b 排在 a 前面;如果返回值等于 0,则 ab 在排序后的数组中相对位置不变。

Array.from()

作用:

  • Array.from() 是 JavaScript 中的一个静态方法,它可以用来将类数组(伪数组)对象或可迭代对象(如字符串、Set、Map 等)转换为数组。
  • 伪数组转为真数组。静态方法。
  • 类数组:指的是具有数字索引和 length 属性,但不具备数组对象所拥有的方法(如 push、pop、slice 等)的对象。
  • 可迭代对象:指的是可以使用 for...of 循环遍历的对象,例如数组、字符串、Map、Set 等。

示例:

  1. 假设有一个类数组对象 arguments 和一个 Set 对象 mySet,可以使用 .from() 方法将它们转换为数组:
function myFunction() {
  const args = Array.from(arguments); // 将 arguments 转换为数组
  console.log(args);
}

const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet); // 将 Set 转换为数组
console.log(myArray);
  1. .from() 方法也可以接受第二个参数,用于对数组中每个元素进行处理后再返回新的数组。例如:
const myArray = ['1', '2', '3'];
const myNewArray = Array.from(myArray, x => parseInt(x)); // 将字符串数组转换为数字数组
console.log(myNewArray); // [1, 2, 3]

Array.isArray()

作用:

  • Array.isArray() 是一个 JavaScript 的内置方法,用于检测一个值是否为数组。它接受一个参数,即要进行检测的值,然后返回一个布尔值。如果该值是一个数组,则返回 true;如果不是数组,则返回 false

示例:

console.log(Array.isArray([]));                // true
console.log(Array.isArray([1, 2, 3]));         // true
console.log(Array.isArray(new Array()));       // true
console.log(Array.isArray({}));                // false
console.log(Array.isArray(null));              // false
console.log(Array.isArray(undefined));         // false
console.log(Array.isArray("array"));           // false

arr.concat()

作用:

  • arr.concat()是一个数组方法,用于将多个数组或值合并成一个新数组。它接受任意数量的参数,可以是数组或值,并返回一个新的数组,其中包含了原始数组和参数中的元素。

示例1:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3);  // 输出: [1, 2, 3, 4, 5, 6]

示例2:

  • arr.concat()还可以接受单个的值作为参数,并将其合并到新数组中。例如:
const arr1 = [1, 2, 3];
const arr2 = arr1.concat(4, 5, 6);
console.log(arr2);  // 输出: [1, 2, 3, 4, 5, 6]

示例3:

  • arr.concat()方法还可以用于合并多个数组,不仅限于两个数组。例如
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray);  // 输出: [1, 2, 3, 4, 5, 6]

arr.slice()

作用:

  • arr.slice()是一个数组方法,用于从原数组中提取指定范围的元素,创建一个新的数组并返回。它接受两个参数,即起始索引和结束索引(不包含结束索引),并返回一个包含了原数组中相应范围的元素的新数组。

示例1:

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits);  // 输出: ['banana', 'orange', 'grape']
  • 注意:
  • 如果省略第二个参数,则arr.slice()将提取从起始索引到数组末尾的所有元素。
  • arr.slice()方法不会修改原始数组,而是返回一个新的切片(子数组)。原始数组保持不变。
  • 提供的索引参数超出了数组的范围,arr.slice()会自动调整索引,返回有效范围内的切片

示例2:

  • 如果起始索引大于等于结束索引,则返回一个空数组。
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(3, 1);
console.log(slicedFruits);  // 输出: []
  • 在上述示例中,由于起始索引(3)大于等于结束索引(1),所以返回一个空数组。