js高阶函数之map、reduce、filter、sort、some、every、find、findIndex、from方法

目录

map方法

reduce方法

filter方法

every方法

some方法

find方法

findIndex方法

from方法

map方法

定义和用法：

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

语法：

array.map(function(currentValue,index,arr), thisValue)

参数说明：

 返回值：

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

示例：

由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果。

返回一个数组，数组中元素为原始数组的平方:

    let arr = [2, 4, 5]
    function pow (x) {
      return x * x
    }
    var result = arr.map(pow);//[4, 16, 25]

reduce方法

定义和用法：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明：

实例解析initialValue参数：

 例子一：没有初始值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
// 输出结果
// 1 2 1
// 3 3 2
// 6 4 3
// [1,2,3,4] 10

由此可见，如果没有给初始值，arr的第一个值会被作为初始值，因此arr长度是4，而reduce只能循环3次。

例子二：有初始值：

let  arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0) //这里设置初始值为0
console.log(arr, sum);
// 输出结果
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1,2,3,4] 10

有初始值时，arr长度是4，reduce循环4次。

注意: reduce() 对于空数组是不会执行回调函数的。 当不给初始值且arr为空数组是会报错，所以通常建议设置初始值。

reduce()的简单用法：

1.用reduce求和、求积

let  arr = [1, 2, 3, 4];
let sum = arr.reduce((prev,cur) => prev + cur)
let mul = arr.reduce((prev,cur) => prev * cur)
console.log( sum ); //求和，10
console.log( mul ); //求积，24

2.对象中的属性求和

var result = [
    {
        food: '薯片',
        calories: 1000
    },
    {
        food: '薯条',
        calories: 800
    },
    {
        food: '薯粉',
        calories: 200
    }
];
let sumCalories = arr.reduce((prev,cur)=>{
  return prev + cur.calories
},0)
console.log( sumCalories ); // 2000

reduce()的进阶用法：

1.计算数组中每个元素出现的次数

let animal = ['dog', 'cat', 'mouse', 'fish', 'cat'];
    let animalNum = animal.reduce((prev, cur) => {
      if (prev[cur]) {
        prev[cur]++
      } else {
        prev[cur] = 1
      }
      return prev
    }, {})
    console.log(animalNum);//{dog: 1, cat: 2, mouse: 1, fish: 1}

2.数组去重

    let arr = [1, 3, 4, 4, 2, 1, 1, 8]
    let newArr = arr.reduce((prev, cur) => {
      if (!prev.includes(cur)) {
        return prev.concat(cur)
      } else {
        return prev
      }
    }, [])
    console.log(newArr);//[1, 3, 4, 2, 8]

3.将二维数组转为一维数组

    let arr = [[0, 1], [2, 3], [4, 5]]
    let newArr = arr.reduce((prev, cur) => {
      return prev.concat(cur)
    }, [])
    console.log(newArr);//[0, 1, 2, 3, 4, 5]

4.将多维数组转为一维数组

    let arr = [[0, 1], [2, 3], [4, [5, 6, 7]]]
    const newArr = function (arr) {
      return arr.reduce((prev, cur) => {
        return prev.concat(Array.isArray(cur) ? newArr(cur) : cur)
      }, [])
    }
    console.log(newArr(arr));//[0, 1, 2, 3, 4, 5, 6, 7]

filter方法

定义和用法：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter() 不会对空数组进行检测

注意：filter() 不会改变原数组

语法：

array.filter(function(currentValue,index,arr), thisValue)

参数说明：

返回值： 

返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

示例：

1.保留数组arr中>5的元素：

    let arr = [1, 9, 4, 7, 2]
    let arrFilter = arr.filter(item => item > 5)
    console.log(arrFilter);// [9, 7]

2.保留数组中的奇数元素：

    let arr = [1, 9, 4, 7, 2]
    let arrFilter = arr.filter(item => item % 2 !== 0)
    console.log(arrFilter);// [1, 9, 7]

3.去掉数组中的空字符串：

    let arr = ['A', '', 'B', null, undefined, 'C', '  ']
    let arrFilter = arr.filter(item => item && item.trim())
    console.log(arrFilter);// ['A', 'B', 'C']

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身。

4.数组去重

    let arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']
    let arrFilter = arr.filter((item, index, self) => self.indexOf(item) === index)
    console.log(arrFilter);// ['apple', 'strawberry', 'banana', 'pear', 'orange']

去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

every方法

定义和用法：

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

语法：

array.every(function(currentValue,index,arr), thisValue)

参数说明：

 返回值：

布尔值。如果所有元素都通过检测返回 true，否则返回 false。

示例：

1.给定一个包含若干字符串的数组，判断所有字符串是否满足指定的测试条件

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.every(function (s) {
    return s.length > 0;
})); // true, 因为每个元素都满足s.length>0

console.log(arr.every(function (s) {
    return s.toLowerCase() === s;
})); // false, 因为不是每个元素都全部是小写

some方法

定义和用法：

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

语法：

array.some(function(currentValue,index,arr),thisValue)

参数说明和 every() 相同。

返回值：

布尔值。如果数组中有元素满足条件返回 true，否则返回 false。

示例： 

1.给定数组age，判断数组中是否有满足>100的元素

    let age = [22, 40, 18, 60]
    let checkAge = age.some(x => {
      return x > 100
    })
    console.log(checkAge);//false

find方法

定义和用法：

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

语法：

array.find(function(currentValue, index, arr),thisValue)

参数说明：

 返回值：

返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined

示例：

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.find(function (s) {
    return s.toLowerCase() === s;
})); // 'pear', 因为pear全部是小写

console.log(arr.find(function (s) {
    return s.toUpperCase() === s;
})); // undefined, 因为没有全部是大写的元素

findIndex方法

定义和用法：

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

语法：

array.findIndex(function(currentValue, index, arr), thisValue)

参数说明和find()方法相同。

返回值：

回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。

示例：

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.findIndex(function (s) {
    return s.toLowerCase() === s;
})); // 1, 因为'pear'的索引是1

console.log(arr.findIndex(function (s) {
    return s.toUpperCase() === s;
})); // -1

from方法

定义和用法：

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

如果对象是数组返回 true，否则返回 false。

语法：

Array.from(object, mapFunction, thisValue)

参数说明：

 返回值：数组对象

示例：

1.将类数组对象转成数组

    let arrayLike = {
      0: 'jack',
      1: '24',
      2: 'man',
      3: ['tom', 'jerry', 'anne'],
      'length': 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr);//['jack', '24', 'man', ['tom', 'jerry', 'anne']]

这里将代码改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

    let arrayLike = {
      'name': 'jack',
      'age': '24',
      'sex': 'man',
      'friend': ['tom', 'jerry', 'anne'],
      'length': 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr);//[undefined, undefined, undefined, undefined]

会发现结果是长度为4，元素均为undefined的数组.

由此可见，要将一个类数组对象使用from（）转换为一个真正的数组，必须具备以下条件：

该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

该类数组对象的属性名可以加引号，也可以不加引号。

2.将set结构的数据转为数组

    let arr = [23, 35, 25, 767, 45]
    let set = new Set(arr)
    console.log(Array.from(set));//[23, 35, 25, 767, 45]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

    let arr = [23, 35, 25, 767, 45]
    let set = new Set(arr)
    console.log(Array.from(set, item => item + 1));//[24, 36, 26, 768, 46]

3.将map结构的数据转为数组

    const map = new Map()
    map.set('one', 'html')
    map.set('two', 'javascript')
    map.set('three', 'css')
    console.log(Array.from(map));//[['one', 'html'],['two', 'javascript'],['three', 'css']]

4.将字符串转为数组

    let str = "Hello World"
    console.log(Array.from(str));//['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

5.使用Array.from()+set实现数组去重

    let arr = [1, 2, 1, 4, 4, 3, 5]
    let arrCheck = Array.from(new Set(arr))
    console.log(arrCheck);//[1, 2, 4, 3, 5]