ES6常用数组方法(第一篇),学到就是赚到

95 阅读4分钟

ES6

1. Array.from

  Array.from() 方法可以将类数组对象或可迭代对象(比如 Set、Map、字符串等)转换成一个真正的数组。这在处理 DOM 元素集合或类数组对象时非常有用。同时,Array.from() 方法还接受一个映射函数作为第二个参数,用于对数组中的每个元素进行操作,并返回新的数组
  举个例子,使用 Array.from() 可以将一个字符串转换成包含每个字符的数组,也可以将 Set 或 Map 转换为数组。这样可以方便地对数组进行遍历、筛选或其他操作。

    // 将字符串转数组
    const str = 'hello';
    const arr1 = Array.from(str);
    console.log(arr1); // 输出:['h', 'e', 'l', 'l', 'o']

    // 将类数组对象转换成数组
    const arrayLikeObj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
    const newArray = Array.from(arrayLikeObj); // ['a', 'b', 'c']

    // 使用映射函数
    const set = new Set([1, 2, 3]);
    const newArray2 = Array.from(set, x => x * x); // [1, 4, 9]

  总的来说,Array.from() 在 ES6 中为处理类数组对象或可迭代对象提供了更灵活的方式,让我们能够方便地将它们转换成数组来进行进一步的操作。

2. Array.find

  Array.find()方法可以用于在数组中查找满足指定条件的第一个元素,并返回该元素。它接受一个回调函数作为参数,该函数会遍历数组中的每个元素,当找到满足条件的元素时,会立即返回该元素否则返回 undefined
  以下是 Array.find() 方法的使用示例

    const numbers = [1, 2, 3, 4, 5];
    // 查找第一个大于 3 的元素
    const found = numbers.find(num => num > 3);
    console.log(found); // 4

    // 查找第一个能被 2 整除的元素
    const evenNumber = numbers.find(num => num % 2 === 0);
    console.log(evenNumber); // 2

  Array.find() 方法非常有用,在需要查找数组中符合特定条件的第一个元素时,可以方便地使用这个方法。它可以用于各种场景,比如查找对象、字符串或符合自定义条件的元素。值得注意的是,Array.find() 方法只会返回匹配到的第一个元素,如果需要找到所有符合条件的元素,可以使用 Array.filter() 方法。

3. Array.filter

  Array.filter() 方法可以用于筛选数组中满足指定条件的所有元素,并返回一个新的数组,该数组包含符合条件的元素。
  以下是 Array.filter() 方法的使用示例

    const numbers = [1, 2, 3, 4, 5];
    // 筛选出所有大于 3 的元素
    const filteredNumbers = numbers.filter(num => num > 3);
    console.log(filteredNumbers); // [4, 5]

    // 筛选出所有能被 2 整除的元素
    const evenNumbers = numbers.filter(num => num % 2 === 0);
    console.log(evenNumbers); // [2, 4]

  Array.filter() 方法非常有用,当需要根据特定条件筛选数组元素并生成新的数组时,可以方便地使用这个方法。它可以用于各种场景,比如筛选对象、字符串或符合自定义条件的元素。
  需要注意的是Array.filter() 不会改变原始数组,而是返回一个新的数组,其中包含符合条件的元素。

4. Array.findIndex

Array.findIndex() 方法可以用于在数组中查找满足指定条件的第一个元素,并返回该元素的索引值。它接受一个回调函数作为参数,该函数会遍历数组中的每个元素,当找到满足条件的元素时,会立即返回该元素的索引值否则返回 -1
  以下是 Array.findIndex() 方法的使用示例

    const numbers = [1, 2, 3, 4, 5];
    // 查找第一个大于 3 的元素的索引
    const index = numbers.findIndex(num => num > 3);
    console.log(index); // 3

    // 查找第一个能被 2 整除的元素的索引
    const evenIndex = numbers.findIndex(num => num % 2 === 0);
    console.log(evenIndex); // 1

  Array.findIndex() 方法在需要查找数组中符合特定条件的第一个元素的索引时非常有用。它可以用于各种场景,比如查找对象、字符串或符合自定义条件的元素的索引。
  值得注意的是,Array.findIndex() 方法只会返回匹配到的第一个元素的索引。

5. Array.includes

  Array.includes() 方法用于检查数组是否包含指定的元素,并返回一个布尔值。它可以用于判断数组中是否存在某个元素,而不必使用循环或其他方法进行遍历。
  以下是 Array.includes() 方法的语法:

    array.includes(searchElement[, fromIndex]);

  其中,searchElement 是要搜索的元素,fromIndex 是可选的起始搜索索引,默认为 0。若指定了 fromIndex,则从该索引开始搜索元素。如果 fromIndex 是一个负数,则表示从末尾开始计算的偏移量。 Array.includes() 方法会返回一个布尔值,如果数组中包含指定元素,则返回 true,否则返回 false
  以下是 Array.includes() 方法的使用示例

    //1.  判断数组中是否包含某个元素
    const fruits = ['apple', 'banana', 'orange'];
    console.log(fruits.includes('banana')); // true
    console.log(fruits.includes('grape')); // false
    
    //2.搜索元素时指定起始索引
    const numbers = [1, 2, 3, 4, 5];
    console.log(numbers.includes(3, 2)); // true,从索引 2 开始搜索,找到元素 3
    console.log(numbers.includes(3, 3)); // false,从索引 3 开始搜索,未找到元素 3

  Array.includes() 方法提供了一种简单且直观的方式来检查数组中是否包含指定元素。它在需要判断某个元素是否存在于数组中时非常有用,并且可以消除编写循环或使用其他方法进行遍历的复杂性。