学习笔记——数组方法整理(包含ES6—ES13的更新)

玖月晴空
4,768 阅读21分钟

前言：

定义：数组是值的有序集合。 JS的数组是无类型的，数组元素可以是任意类型，并且同一个数组的不同元素也可能有不同的类型，每一个值叫做元素（数组元素），每个元素在数组中有一个位置。数组在平常的coding中是比较常用的数据格式，尤其式在解析后台数据时。每个方法我都配有示例，希望能通过示例的解析，让大家对方法能有更清晰对理解。除此之外，字符串和对象的方法的直通车在下面👇 ，大家自取喽。希望能对您有些许帮助，这将是我莫大的荣幸！

更新日期：2022,12,20

学习笔记：string - 字符串

学习笔记：object - 对象

一、创建数组

常规创建数组 x=[ ]

let a=["333","999"];        // 直接写在[ ]中

let aa=new Array(4,8,9);    // 通过实例传入Array中

let aaa=new Array(5);       // 生成[,,,,] 个数为5的空数组

    aaa[0]=6;               // 给aaa的第0个赋值为6

console.log(aaa);           //  [6,,,,,]

console.log(aa);            //  [4,8,9]

Array.of() 创建数组实例

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array区别：

区别在于处理整数参数：Array.of(7)****创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意： 这是指一个有 7 个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7)   // [7]

new Array(7)  // [empty × 7]

Array的不确定性

// 参数个数不同的情况下，返回的结果也不同：

Array()          // []
Array(3)         // [empty × 3]
Array(3, 11, 8)  // [3, 11, 8]

Array.of的确定性

// 无论参数多少，返回的都是数组
Array.of()          // []
Array.of(3)         // [3]
Array.of(3, 11, 8)  // [3, 11, 8]

将一组值转换为数组:

Array.of(1,2,3)     //  [1, 2, 3]

Array.of(undefined) //  [undefined]

Array.from： 方法用于将两类对象转为真正的数组

Array.from 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

Array.from([1, 2, 3]);  // [1, 2, 3]

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

// 
Array.from([1, 2, 3], (x) => x * x);   // [1, 4, 9]

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)   // [1, 0, 2, 0, 3]

另一个例子是返回各种数据的类型。

function typesOf () {
  return Array.from(arguments, value => typeof value);
}
typesOf(null, [], NaN);    // ['object', 'object', 'number']

二、 访问数组元素 x.[index]

let a=["333","999"];

let b=a[0];              // 访问数组的第一个元素

let c=a[a.length-1];     // 访问数组的最后一个元素

let f=a["1"]===a[1];     // a["1"]会自动转为数字1 

console.log(f);          //  true

当然，如果我们通过以下方式去访问时，会被解析成连续运算返回最后一个值

console.log([2,3,4,5][1,2])   // 4

数组也是一种特殊的对象，因此我们也可以通过键值对的形式去访问

let arr9 = [];

    arr9.say = 'Hello';

console.log(arr9.say)    // Hello

三、遍历数组 x.forEach(function(item,index,array){})

es6写法 forEach((item,index)=>{dosomething.....})

let a=["333","999"];

   a.forEach(function (item,index,array) {

           console.log(item,index)

 });
       //333 0  999 1

四、添加元素到数组的末尾 x.push(...)

let a=["333","999"];

    a.push("我是新元素","666");  

console.log(a);    //["333","999","我是新元素","666"]

console.log(a.push("我","690"),a.length,a);  //6,6,["333","666","我是新元素","666","我","690"]

//打印 console.log(a.push(xxx)) 会返回数组长度，而不是数组本身，所以上面返回了两次数组长度

//返回新数组长度6，会执行一次a.push

五、在末尾删除数组(只能删除1个) x.pop()

let a=["333","999"];

    a.pop();

console.log(a);            // ["333"];  返回新数组

console.log( a.pop(),a);   //333 [] 

//会执行一次a.pop()，返回本次被删除元素

六、删除数组最前面元素 x.shift()

let a=["333","999"];

    a.shift();

console.log(a);            //  ["999"]

console.log( a.shift());   //  "999"

  //返回被删除元素，不会执行a.shift()

七、添加到数组的前面（头部）x.unshift("...")

let a=["333","999"];

    a.unshift("000","888","777");

console.log(a);            

// ["000","888","777","333","999"]

console.log(a.unshift("111"),a.length,a); 

//["111","000","888","777","333","999"]
  
   //会执行一次a.unshift，返回数组长度,

八、找到某个元素在数组中的索引 indexOf

let a=["333","999"];

let d=a.indexOf("333");   // 通过元素查找在当前数组的索引值

console.log(d);           // 0

let e=a.indexOf("654");   // 如果查不到返回-1

console.log(e);           // -1

九、数组深拷贝 slice() , Array.from()，[...]

第一种方法：

let a=[1,2,[2],8]; 

let newArray=a.slice();

console.log(newArray);   //  [1,2,[2],8]  

-----------------------------------

第二种方法：

let newArray2=Array.from(a);

console.log(newArray2);  // [1,2,[2],8]

------------------------------------

第三种方法：

let newArray3=[...a];

console.log(newArray3);  // [1,2,[2],8]

十、清空数组

// 两种方法都可以实现，但第二种比较优雅

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

    arr=[];

console.log(arr)     //  []

------------------------------------

let arr=[888,99];

    arr.length=0;

console.log(arr)     //  []

十一、合并数组

let arr=[1];

let arr2=[2];

let arr3=[3];

let arr4=arr.concat(arr2,arr3) 

console.log(arr4)     // [1,2,3]

---------------------------------------
// 下面这个方法也可以实现，但只能合并两个数组

let arr1=[1,2,3];

let arr2=[4,5,6];

    arr1.push.apply(arr1,arr2);
   
console.log(arr1);   // [1, 2, 3, 4, 5, 6]

-------------------------------------
// ES6的数组合并：

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

[...arr1, ...arr2, ...arr3];    // [ 'a', 'b', 'c', 'd', 'e' ]

十二、在数组中找到最大值和最小值

//方法1
let array1 = [1,2,3,4];

let array2 = Math.max.apply(null,array1);  // 最大值

let array3 = Math.min.apply(null,array1);  // 最小值

console.log(array2,array3);                // 4 ,1

--------------------------------------------------

//方法2
let array4 =Math.max(...array1);         // 最大值

let array5 =Math.min(...array1);         // 最小值

console.log(array4,array5);              // 4 ,1

十三、判断是不是数组

// 在javascript中，如何判断一个变量是否是数组

(1)Array.isArray()方法

    var a = [0, 1, 2];

    console.log(Array.isArray(a));   // true

(2)typeof  toString 方法

由于低版本的IE不支持ES5，如需要兼容，用typeof，我们都知道，数组是特殊的对象，所以数组的typeof结果也是object，而因为null的结果也是object，所以需要加判断是 object同时排除null、排除纯对象,先判断a是不是object,并且a!==null, 并且toString.call判断a等于 [object Array]

let a = [0, 1, 2];  

console.log( typeof a ==='object' &&  a !==null  &&  Object.prototype.toString.call(a) ==='[object Array]');   //  true

十四、数组与其他值的运算(使用"+"会自动转为string,"-"会自动转为number)

// 数组和任何值相加都会将数组转换成字符串再进行拼接

console.log([1,2,3] + 6) ;       // "1,2,36"

console.log([1,2,3] + {}) ;      // "1,2,3[object Object]"

console.log([1,2,3] + [1,2,3])； // "1,2,31,2,3"
  
如果数组只有一个值，那么当这个数组和其他值相减相乘等时会被转换为数字，如果为空会被转换为0
    
console.log([5] - 2)          // 3

十五、数组去重

new Set

ES6新增的Set数据结构，类似于数组，但是里面的元素都是唯一的，其构造函数可以接受一个数组作为参数

let arr1=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]

let set = new Set(arr1);  

console.log(set)       //  [ 1,2,6,3,5,69,66,7,4,8,9663,8]

filter

通过 filter 和 indexOf 的配合，首先 filter 返回一个对比结果为 true 的数组，indexOf 则是来比较每次循环的元素在数组中的首次出现位置是不是当前位置，如果有两个相同值，那么第二个值在原始数组中的第一个索引是不会等于当前索引的，那判断结果为false，则不会添加到 filter 最后返回到数组中。

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}

const arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {}, {}]

includes

includes 相比 indexOf 更加优雅，返回值为布尔值，通过判断新数组中是否有当前循环元素来逐个添加，如无添加，如有跳过。

  const test = (arr) => {
    let res =[]
   arr.forEach((item,) =>{
     if (!res.includes(item)) {
      res.push(item)
    }
   });
    return res
}

 test([1,1,'true','true',true,true,15,15,false,false])

十六、将数组顺序打乱

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

function upsetArr(arr){
    return arr.sort(function(){ return Math.random() - 0.5});
}
upsetArr(arr) ; // [4, 1, 3, 2, 5, 6]

解析：沿用原sort的a-b的方法，先生成一个随机数，然后将其与随机数进行 比较，如果Math.random() - 0.5是true，则返回前者，否则比较下一个

十七、 实现将数组中数字求和，字母忽略。

let arr= ["a",3,4,5,9,"d"];
function sum (arr){
    let a=0;
    for(let i=0;i<arr.length;i++){
        if(typeof arr[i]==="number"){
            a+=arr[i]
        }
    }
    return a; 
}

sum(arr)  //21

通过循环遍历判断数组中的每个值是否是数字，如果是的赋值到变量上进行加法计算

十八、delete，splice删除数组内指定的某个值。

使用delete删除数组内的制定索引的值后，直接改的是原数组，而且删除值的位置仍然保留，为undefined。

let arr=[1,2,3,45,5,2];

    delete arr[0]

console.log(arr,arr[0]).   // [empty,2,3,45,5],undefined

如果要彻底删除，可以使用splice()方法 splice(开始位置，删除个数，添加的值)，如果没有第三个值，可以只传前两个值

两个值的示例：

let arr=[1,2,3,45,5,2];

    arr.splice(0,1)

console.log(arr)    //  [2, 3, 45, 5, 2]

三个值的示例：

let arr=[1,2,3,45,5,2];

    arr.splice(0,1,100)

console.log(arr)     //  [100 ,2, 3, 45, 5, 2]

十九、slice()截取数组，可选择开始位置和结束位置

Array.slice(begin,end) 接收两个参数，第一个是开始位置，第二个是结束位置

拷贝开始位置到结束位置，前包后不包

如果 end 被省略，则slice 会一直提取到原数组末尾。

如果 end 大于数组的长度， slice 也会一直提取到原数组末尾

let arr=[1,2,3,45,5,2];

let arr1 = arr.slice(0,4)

console.log(arr1). //  [1, 2, 3, 45]

如果slice()括号中不传参数，将会全部截取,即实现拷贝

let arr=[1,2,3,45,5,2];

let arr1 = arr.slice()

console.log(arr1).  //  [1, 2, 3, 45, 5, 2]

二十、颠倒数组的顺序，也称数组的反转

let arr=[1,2,3,45,5,2];

    arr.reverse()

console.log(arr)   // [2, 5, 45, 3, 2, 1]

二十一、join()将数组以括号中的值分割成字符串(不会改变原数组)

let arr=[1,2,3,45,5,2];

console.log(arr.join("_”));  //  "1_2_3_45_5_2"

console.log(arr);   //  [1, 2, 3, 45, 5, 2]

二十二、sort()排序，将数组中的值进行排序，从大到小或从小到大(会改变原本的数组)

sort原本的排序功能只能识别到个位数做比较，所以扩展使用以下方法：（排序方法有很多，这是最传统，也是使用频率较多的，其他的方法不再赘述）

let arr=[1,2,3,45,5,2];
    array=arr.slice();
    
    arr.sort(function(a,b){
        return a-b
    })   
   //  [1, 2, 2, 3, 5, 45]

查看此时的arr数组：
    console.log(arr)  //   [1, 2, 2, 3, 5, 45]

    arr.sort(function(a,b){
        return b-a
    })
  //  [45, 5, 3, 2, 2, 1]

查看此时的arr数组：
    console.log(arr)  //   [45, 5, 3, 2, 2, 1]

二十三、 Array.protype.slice.call(arr,n,m) 截取数组，返回新数组(不会改变原数组)

参数（前包，后不含）：

arr:截取的数组 n:截取开始位置 m:截取结束位置

今天有学到一个新的方法，推荐给大家，数组中的slice.call() 方法，返回一个截取的新数组，（前包，后不包）接下来我们带入一个🌰来现身说法：

1.向后截取，第二个参数 2 是指给定截取的位置，删除当前位置前的元素，返回包含第二个参数之后的数组副本。

let arr = [1,2,5,3,6];
console.log(Array.prototype.slice.call(arr,2)) // [5,3,6]

2.向前截取，首先找到截取位置为 2，然后找到截取截止位置 4，返回从首位数第二个参数开始，截止到第四个位置的数组副本:
let arr = [1,2,5,3,6];
console.log(Array.prototype.slice.call(arr,2,4)) // [5,3]

二十四、find() ：找到数组中第一个符合条件到值。

  1. 当在数组中匹配到符合条件的元素，则返回符合条件的元素，之后的值不会再调用执行函数;

  2. 如果没有符合条件的元素返回 undefined;

注意:find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。


 var arr = [1,2,3,4,5,6,7];
 var ar = arr.find((elem)=>{
    return elem>5
 })  // 6
 
 --------------------------------------
 
 var arr = [1,2,3,4,5,6,7];
 var ar = arr.find((elem)=>{
    return elem>10
 })  // undefined

findIndex()方法和find很类似，同样是寻找第一元素，但返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));   //  3

二十五、 Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维的数组。

该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat();   // [1, 2, 3, 4]

// 上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat();    // [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2);   // [1, 2, 3, 4, 5]

上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。如果不知道有多少层嵌套，都需要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity);   // [1, 2, 3]

如果原数组有空位，flat()方法会跳过空位。

[1, 2, , 4, 5].flat();  // [1, 2, 4, 5]

flatMap

方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为1） flatMap = map + flat(深度为1)

const numbers = [1, 2, 3] 

numbers.map(x => [x * 2]) // [[2], [4], [6]] 

numbers.flatMap(x => [x * 2]) // [2, 4, 6]

二十六、 fill() 填充数组

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

可最多接受3个参数： arr.fill(需要填充的值 ,填充开始位置 ,填充结束位置)

const array1 = [1, 2, 3, 4];

// 当只有一个参数时，会将原数组内容全部抹掉，根据原来的数组长度，全部填充指定值
console.log(array1.fill(6));         //  [6, 6, 6, 6]

// 当有两个参数时，第一个参数还是填充的值，从第二个参数开始，填充到结束位置
console.log(array1.fill(5, 1));      //  [1, 5, 5, 5]

// 当有三个参数时，第一个参数是填充的值，第二个参数是填充开始位置，第三个参数是填充结束位置（前包后不包）
console.log(array1.fill(0, 2, 4));   //  [1, 2, 0, 0]

二十七、 copyWithin 复制数组

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它（会改变原数组），不会改变原数组的长度。

可最多接收3个参数：arr.copyWithin(旧数组中开始被替换的位置，开始替换位置，结束替换位置)

const array1 = ['a', 'b', 'c', 'd', 'e'];

console.log(array1.copyWithin(0, 3, 4));  

//  ["d", "b", "c", "d", "e"]

👆 从索引为0的位置开始被覆盖，索引为0的是'a'，从索引3的位置开始赋值，索引3的位置是'd',那么此时数组的第0位就是'd'，到索引为4的位置结束，包括前面的索引位置，最后的索引位置不包括，那此时就是复制了1位，其余的默认填充： ['d', "b", "c", "d", "e"]

console.log(array1.copyWithin(1, 3));    

//  ["d", "d", "e", "d", "e"]

👆 这个方法会改变原来的数组，此时我们的复制原数组已经变成上面的返回值： ["d", "b", "c", "d", "e"]。从索引为1的位置开始覆盖，索引为1的是'b'，此时我们看到只有两个参数，那就直接从索引3的位置复制到数组结束（数组的长度），['d','d','e']，剩下按照数组长度直接填充即可 ["d", "d", "e", "d", "e"]

总结：这个方法我在初次接触时，感觉并不太容易理解，心想：谁会用这么难理解的方法来操作数组，重新声明一个数组岂不是很方便，copy 来 copy 去的还不够麻烦的，以至于后面就再也没有用过，今天重新再看也是顺理了下才想起来，所以描述写了一大堆，希望对你有帮助吧。至于使用场景，可以在一些文字游戏中使用，或者推箱子等游戏中，其他场景还待探索，如果你还知道其他的场景，下面👇留言给我哦。

二十八、includes 判断一个数组是否包含一个指定的值

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。这个方法和我们原来一个比较熟悉的方法很相似，那就是indexOf，但是indexOf返回的是-1，而不是布尔值当true/false，这在结果判断时有些不太优雅。

const array1 = [1, 2, 3];
console.log(array1.includes(2));    //  true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));  //  true

console.log(pets.includes('do'));   //  false

[1, 2, NaN].includes(NaN); // true

数组中的迭代方法filter(), every(),forEach(),map(),some(),reduce

filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。

map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true.

一、数组迭代方法之filter()

filter返回的是一个符合某种条件的数组，并返回一个新数组，不会更改原数组,还可以过滤假值。

array.filter(function(item,index,array){
    
})

filter 的回调函数接收三个参数，分别是当前索引元素，索引，原数组

  1. item :当前索引元素
  2. index:索引
  3. array:原数组
let arr=[1,3,6,8,45,34,90,122,9,0];

let array = arr.filter(function(element){

        return element>10
    })
console.log(array)

//筛选数组中大于10的值， [45, 34, 90, 122]

//查看原数组，并没有改变

console.log(arr)    //  [1,3,6,8,45,34,90,122,9,0]

遍历数组的时候将返回值为true的元素放入新数组,我们可以利用这个函数删除一些不需要的元素,过滤假值。

const compact = arr=> arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])    // [1, 2, 3, "a", "s", 34]

关于这个过滤假植，在很多工具库都有自己的方法进行处理，下面我们就某库中的方法和filter做一个比较，看具体执行效率(认真脸)。

// 方法本身
function lodashCompact(array) {
  var index = -1,
    length = array == null ? 0 : array.length,
    resIndex = 0,
    result = [];

  console.time("lodashCompact");
  while (++index < length) {
    var value = array[index];
    if (value) {
      result[resIndex++] = value
    }
  }
  console.timeEnd("lodashCompact");
  return result;
}
// lodash 方法实现
function test() {
    lodashCompact(arr);
}
// filter 方法实现
function test2() {
    console.time("filter用时共计")
    const compacts = arr => arr.filter(Boolean)
    console.timeEnd("filter用时共计")
}

上面计算的是纯执行时间，filter 远远超越约7.6倍，推荐使用filter！

二、数组迭代方法之every()

（主要是用于判断一个数组中的值是否符合某个标准。必须是每个值都符合才会返回true。否则返回false）

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

let everyResult = arr.every(function(item, index, array){ 
    return (item > 2); 
}); 

//判断数组中所有的值是否都大于2，如果都大于2，返回true，反之返回false.

console.log(everyResult)     //false

三、数组迭代方法之forEach()

（数组的循环遍历,对数组中的每一项运行给定函数。这个方法没有返回值。)

let arr=[1,3,6,8,45,34,90,122,9,0];

    arr.forEach(function(item,index,array){
        console.log(item,index,array)
    })
/*
 0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
*/

四、数组迭代方法之map()

数组的循环遍历,对数组中的每一项运行给定函数，返回每次函数调用的结果组成新的数组。

遍历数组，返回新的数组

array.map(function(item,index,array){
    })

map 的回调函数接收三个参数，分别是当前索引元素，索引，原数组

  1. item :当前索引元素
  2. index:索引
  3. array:原数组
[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]

let arr=[1,3,6,8,45,34,90,122,9,0];

    arr.map(function(item,index,array){
        console.log(index,item,array)
    })
 /*
 0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 */

五、数组迭代方法之some()

(对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true)

let numbers = [1,2,3,4,5,4,3,2,1]; 

let someResult = numbers.some(function(item, index, array){ 
    return (item > 2); 
}); 

//只要有一个返回true，则返回true

console.log(someResult); // true

六、reduce 归并：迭代数组中的所有值，返回一个按条件计算的最终值。

reduce:

方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。用于执行减少、汇总、求和、求平均数

reducer 函数接收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引) 索引默认从1开始 可选
Source Array (src) (源数组)                 可选

 Array.reduce((Accumulator,Value,Index,Array)=>{
     //dosomething
 }

let values = [1,2,3,4,5]; 

let sum = reduce(function(prev, cur, index, array){ 
    return prev + cur; 
}); // 15

//第一次执行回调函数，prev 是1，cur 是2。第二次，prev 是3（1 加2 的结果），cur 是3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。 
//通过循环遍历，返回数组中所有值的总和  15

求和

let arr = [1,2,4,6,34,66];
let res = arr.reduce((tap,item,index)=>{
    console.log(`第${index}次:${tap}+${item}`);
    return tap+item
})
// 第1次:1+2 
// 第2次:3+4 
// 第3次:7+6 
// 第4次:13+34
// 第5次:47+66

console.log(res)  // 113

求平均数

let arr = [1,2,4,6,34,66];
let res = arr.reduce((tap,item,index)=>{
    if(index!==arr.length-1){
        return tap+item
    }else{
        return tap/(arr.length)
    }
});
console.log(res) // 7.833333333333333

reduceRight:

let values = [1,2,3,4,5]; 

let sum = reduceRight(function(prev, cur, index, array){ 
    return prev + cur; 
}); 

//第一次执行回调函数，prev 是5，cur 是4。第二次，prev 是9（5加4 的结果），cur 是3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。 
//通过循环遍历，返回数组中所有值的总和  15

ES6中的空值

ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。

forEach(), filter(), reduce(), every() 和some()都会跳过空位。

map()会跳过空位，但会保留这个值

join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6 则是明确将空位转为undefined。

参考：阮一峰老师的ES6

    作者：晴天de雨滴    
    出处：https://juejin.im/post/6844903512493539341
    版权所有，欢迎保留原文链接进行转载：)

如果你对我对文章感兴趣或者有些建议想说给我听👂，也可以添加一下微信哦！

如果亲感觉我的文章还不错的话，可以一下添加关注哦！

最后：
        祝各位工作顺利！
                        -小菜鸟Christine
avatar
文章
阅读
粉丝