半深入理解7个数组方法 indexOf forEach map filter reduce every some

能工摹形，巧匠窃意。永远保留一颗学习的心，后，得之我幸,失之我幸。

图片来源网络

foreword（前言）

 这是在简书更新的第一篇文章（暂且试更），之后会将微信公众号 ‘雨后的梦溪笔谈’（yuhou5206）的文章挪至简书。

 也同时希望简书对文章感兴趣的读者，可以关注我的个人微信公众号：雨后的梦溪笔谈’（yuhou5206）。

 这篇文章主要对数组的这七个方法，进行简要的解释和一些稍微深入的理解和实际应用，文章相对简单易懂。

start

①indexOf

实质： Array.prototype.indexOf() 实质是返回该数组中第一个找到的元素的位置,如果它不存在就返回-1.
语法：arr.indexOf(searchElement[, fromIndex = 0])
参数：
searchElement : 要查找的元素
fromIndex: 开始查找的位置,这里实际代表的也是一个索引值
如果该索引值大于或等于数组的长度,意味着不查找,返回-1
如果参数中提供的索引是一个负值,则将其作为数组末尾的抵消,但是查找顺序还是从后往前查找
如果抵消后值还是负数,那么其默认值也会转换为0
返回值：返回该数组中第一个找到元素的索引 ,如果不存在返回-1
实际应用


 let arr = [1,2,3,4,5,6,1,2,3,4,5,6]

    console.log(arr.indexOf(2));    //1

    console.log(arr.indexOf(7));    //-1

    console.log(arr.indexOf(5,4));  //4

    console.log(arr.indexOf(5,5));  //10

    console.log(arr.indexOf(5,-1)); //-1

    console.log(arr.indexOf(5,-2)); //10

    //注意这里返回的都是索引,所以是从0开始

②forEach

实质： Array.prototype.forEach() 就是让数组中的每一项做同一件事
语法： array.forEach(callback(currentValue, index, array){ //do something }, this)
参数：
callback:为数组中每个元素执行的函数，该函数接收三个参数：

currentValue(当前值) : 数组中正在处理的当前元素

index(索引): 数组中正在处理的当前元素的索引

array:forEach() 方法正在操作的数组 ,也就是数组对象本身

this|可选当执行回调函数时用作 this的值

返回值：执行后返回undefined
实际应用

//简单理解

let arr2 = [1,2,3,4,5,6];

    arr2.forEach(function (item,index) {
        console.log(index + '--' + item);  //  0--1  1--1 2--3 3--4 4--5 5--6
    });

    var sum = 0;

    arr2.forEach(function (item,index,arr) {
        sum += item;
        console.log(arr);  //打印6次arr2
    });

    console.log(sum); //21

//第二个参数有无比较

 var name = 'Jing'  //这里在window声明的变量不能用let ，let声明的变量不存在与window 对象中
    let obj1= {
        name:'fairy',
        age:26,
        list:[1,2,3,4],
        print:function () {
            this.list.forEach(function (item,index,arr) {
                console.log(this);
                //在forEach遍历中没有声明第二个参数所以this指向window  所以这里打印的是widow对象4次
                console.log(this.name); //打印四次'Jing'
            })
        }
    };

    obj1.print();

 let obj2= {
     name:'fairy',
     age:26,
     list:[1,2,3,4],
     print:function () {
         this.list.forEach(function (item,index,arr) {
             console.log(this);
             //在forEach遍历中声明了this 当执行回调函数是用作当前的this值
             //所以这里打印四次 obj2
             console.log(this.name); //打印四次'fairy'
         }, this)
     }
 };

 obj2.print();

③map

实质： map方法让数组通过某种计算产生新的数组 map可以使用return返回值
语法：arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, this])
参数：

callback:为数组中每个元素执行的函数，该函数接收三个参数：
currentValue(当前值) : 数组中正在处理的当前元素
index(索引): 数组中正在处理的当前元素的索引
array:map 方法正在操作的数组 ,也就是数组对象本身

this|可选: 当执行回调函数时用作 this的值

返回值: 一个新数组，每个元素都是回调函数的结果。
实际应用

 let mapArr = [1,2,3,4]

  var newMapArr = mapArr.map(function (item,index,arr) {
     console.log(arr);
     return Math.pow(item,4) 
 });
 console.log(newMapArr); // [1, 16, 81, 256] 返回数组每个元素的4次方构成的数组

 //这里第二个参数的使用方法 与forEach大同小异

④filter

实质： filter 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法：arr.map(function callback(element, index, array) { }[, this])
参数：
callback：用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素（通过测试），false则不保留。
this|可选: 当执行回调函数时用作 this的值
实际应用

  //filter简单应用
  var filterArr = [1,2,3,4,5,6];
  var newFilterArr = filterArr.filter(function (item,index,arr) {
  console.log(arr); //打印6次filterArr
  return item >= 4
  });
  console.log(newFilterArr); //[4,5,6]

  //filter 巧妙去重
  var arr = ['fairy', 'bitch', 'bitch', 'bitch', 'fairy', 'fairy', 'fariyBitch', 'fariyBitch']
  var newArr = arr.filter(function (item,index,arr) {
  return index === arr.indexOf(item)
  });
  console.log(newArr); // ["fairy", "bitch", "fariyBitch"]

⑤reduce

实质：方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
语法：arr.reduce(function callback(accumulator, currentValue, currentIndex,array) { }[, initialValue])
参数：
callback 执行数组中每个值的函数，包含四个参数：
accumulator 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（如下所示）。
currentValue 数组中正在处理的元素。
currentIndex 数组中正在处理的当前元素的索引。如果提供了initialValue，则索引号为0，否则为索引为1。
array 调用reduce的数组

initialValue [可选] 用作第一个调用 callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

返回值：函数累积处理的结果
注意事项：这里accumulator 其实是一个自带的累加器 ,如果不设置initialValue,那么他的初始值是0,如果设置 initialValue,那么初始值是initialValue. 这个方法很多地方的解释都是错误的,这里前面两个参数并不是前一项后一项，第一个参数是一个累加器,第二个参数是当前的元素,而不是前项后项。
实际应用

var arr = [1,2,3,4,5,6];

 var sum = arr.reduce(function (count,item,index) {
    console.log(count + ' ' + item + ' ' + index);
     //1 2 1 这里并没有提供initialValue 所以索引值是从1开始
     //3 3 2
     //6 4 3
     //10 5 4
     //15 6 5
     return count + item
 });
 console.log(sum);//21

   //计算连加
 var sum1 = arr.reduce(function (count,item,index) {
     console.log(count + ' ' + item + ' ' + index);
     //6 1 0 这里提供initialValue 所以索引值是从0开始 第一count为initialValue
     //7 2 1
     //9 3 2
     //12 4 3
     //16 5 4
     //21 6 5
     return count + item
 },6);
 console.log(sum1);//27

//计算数组中每个元素连乘
 var product = arr.reduce(function (count, item, index) {
     return count*item
 })
 console.log(product);  //720

 //计算字符串中一个字母出现的次数
 var str = 'abcabccbaabab'

 var numObj = str.split('').reduce(function (response,item) {
     response[item]?response[item]++ : response[item]=1;
     return response
 },{});
 console.log(numObj); //{a: 5, b: 5, c: 3}

⑥every

实质: 检查数组中的每一项是否符合条件,必须每一项都符合条件
语法:arr.every(callback[, thisArg])
参数
callback用来测试每个元素的函数。
thisArg 执行 callback 时使用的 this 值。
实际应用

var everyArr = [1,2,3,4,5,6]
var resoult = everyArr.every(function (item,index) {
    return item > 5
})
 console.log(resoult); //false

⑦some

实质:检查数组中是否有某些项符合条件,只要有一个符合条件就可以
语法:arr.every(callback[, thisArg])
参数
callback用来测试每个元素的函数。
thisArg 执行 callback 时使用的 this 值。
实际应用

 var someArr = [1,2,3,4,5,6];
 var flag = someArr.some(function (item,index) {
     return item > 5
 });
 console.log(flag); //true