ES5 数组扩展 indexOf()、lastIndexOf()、forEach()、map()、filer()方法详解

朴灿烈づ我的快乐病毒、 2021-12-05 14:49 363阅读 0赞

**Array.prototype** 属性表示 [`Array`][Array] 构造函数的原型，并可以向所有 Array 对象添加新的属性和方法。

##### Array.prototype.indexOf() #####

*  `Array.prototype.indexOf(searchElement[, fromIndex = 0])` 返回在数组中找到给定元素的第一个索引，如果不存在，则返回-1。
    
     *  `searchElement` 需要查找的元素。
     *  `fromIndex` 开始查找的位置。
    
        // 创建数组
        var arr = ['妲己', '小狐狸', 16, 'girl', '古筝','妲己', '小狐狸', 16, 'girl', '古筝']
        // 获取数组的下标
        var index  = arr.indexOf('小狐狸')
        console.log(index) // 结果为: 1
        console.log(arr.indexOf('小狐狸', 4)) // 结果为：6

##### Array.prototype.lastIndexOf() #####

*  `Array.prototype.lastIndexOf(searchElement[, fromIndex = arr.length - 1])` 获取指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找。
    
     *  `searchElement` 需要查找的元素。
     *  `formIndex` 从此位置开始逆向查找。默认为数组的长度减 1。
    
        var arr = ['妲己', '小狐狸', 16, 'girl', '古筝','妲己', '小狐狸', 16, 'girl', '古筝']
        var index = arr.lastIndexOf('girl')
        console.log(index) // 结果为：8
        console.log(arr.lastIndexOf('girl', 7)) // 结果为：3

##### Array.prototype.forEach() #####

*  `Array.prototype.forEach(callback[, thisArg])` 调用数组的每个元素，并将元素传递给回调函数(callback)。
    
     *  `callback` 为数组中每个元素执行的函数，该函数接收三个参数：
        
         *  `currentValue` 正在处理的当前元素（第一个参数）
         *  `index` 正在处理的当前元素的索引（第二个参数）
         *  `array` 正在操作的数组（第三个参数）
     *  `thisArg` 当执行回调函数时用作 `this` 的值
     *  返回值：undefined
    
    示例：
    
        var arr = ['妲己', '小狐狸', 16, 'girl', '古筝']
        arr.forEach(function (item, index, arr) { 
            console.log('索引为：'+index+'，元素为：'+item, arr)
        })
    
    执行结果：
    
        索引为：0，元素为：妲己 ["妲己", "小狐狸", 16, "girl", "古筝"]
        索引为：1，元素为：小狐狸 ["妲己", "小狐狸", 16, "girl", "古筝"]
        索引为：2，元素为：16 ["妲己", "小狐狸", 16, "girl", "古筝"]
        索引为：3，元素为：girl ["妲己", "小狐狸", 16, "girl", "古筝"]
        索引为：4，元素为：古筝 ["妲己", "小狐狸", 16, "girl", "古筝"]

##### Array.prototype.map() #####

*  `Array.prototype.map(callback[, thisArg])` 遍历数组中的元素，通过回调函数加工；加工后返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
    
     *  参数同 `Array.prototype.forEach()`
    
    示例：
    
        var arr = ['妲己', '小狐狸', 16, 'girl', '古筝']
        // 接收加工后的新数组
        var newArr = arr.map(function (item, index, arr) { 
            return item + index
        })
        console.log(newArr)
    
    执行结果：
    
        ["妲己0", "小狐狸1", 18, "girl3", "古筝4"]

##### Array.prototype.filter() #####

*  `Array.prototype.filter(callback(element[, index[, array]])[, thisArg])` 返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
    
     *  参数同上
    
    示例：
    
        var arr = [12,54,5,3,165,46,5,48,56,4,7,5,79,4,5,94,65,87]
        // 使用变量 newArr 保存返回的数组
        var newArr = arr.filter(function (item, index) { 
            return item>20
        })
        console.log(newArr)
    
    执行结果：
    
        [54, 165, 46, 48, 56, 79, 94, 65, 87]

[Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Array