第139篇:JS数组常用方法(map(),reduce(),foreach())

Posted 养肥胖虎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第139篇:JS数组常用方法(map(),reduce(),foreach())相关的知识,希望对你有一定的参考价值。

好家伙,本篇为MDN文档数组方法的学习笔记

Array.prototype.reduce() - JavaScript | MDN (mozilla.org)

数组方法这块的知识缺了,补一下

 

1.map()方法

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];

const array2 = array1.map(Math.sqrt);

console.log(array2);

 

 

const array1 = [1, 3, 5, 9];

const array2 = array1.map((x) => 
    x * 2
);

console.log(array2);

 

 

 map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数,并用结果构建一个新数组。

这个必须要注意一下,不同于其他的数组方法,这里返回的是一个新的数组,而不是对原来的数组进行操作

const array1 = [1, 4, 9, 16];

const array2 = array1.map(Math.sqrt);

const array3 = array1.map((x) => 
    x * 2
);
console.log(array1);
console.log(array2);
console.log(array3);

 

 

 

2.foreach()方法

forEach() 方法对数组的每个元素执行一次给定的函数。

 

const array1 = [1, 4, 9,16];

array1.forEach((x) => console.log(x));

 

2.2.区别与于map()方法,forEach方法是对原先的数组的每一项调用方法,不产生新的数组

const array1 = [1, 4, 9, 16];

let array2 = array1.forEach((x) => console.log(x));

console.log(array2);

 

 

2.3.给定函数的参数

 

// element
// 数组中正在处理的当前元素。

// index
// 数组中正在处理的当前元素的索引。

// array
// 调用了 forEach() 的数组本身。

 

 

 

 

2.4.forEach() 期望的是一个同步函数,它不会等待 Promise。

 

 

3.reduce()方法

 reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

这个方法唯一比较难记的就是参数了

callbackFn

一个“reducer”函数,包含四个参数:

  • previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]
  • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]
  • currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
  • array:用于遍历的数组。

initialValue 可选

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;

否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

 

 (MDN文档真是太贴心了)

 

3.1.用reduce()实现简单的叠加器

let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) 
    return previousValue + currentValue
  , 0)

console.log(sum)

 

重温前端基础之-js排序算法

javascript数组常用的方法:

push():返回值,数组新的长度

pop():返回值,被删除的数组末尾元素

shift():返回值,被删除的数组首部元素

unshift():返回值,数组新的长度

concat():返回值,拼接后新的数组

slice():返回值,截取的新的数组

splice():返回值,被插入/删除/替换元素后的数组

map():返回新的数组

filter():返回被筛选后的新的数组

reduce():返回新的数组

sort():返回排序后的新的数组

与数组有关的两个:

join():将数组转化为用特殊符号分割的字符串

reverse():将数组顺序逆转

不常用的:

every()

some()

 

1、使用sort方法进行排序的算法如下:

字符串排序:

var arr = [George,John,Thomas,James,Adrew,Martin];

arr.sort();

数字排序:

var arr = [4,3,7,10,15,30,22];

arr.sort(function(a,b){
return a-b>0;
})

2、冒泡排序:

function bubbbleSort(arr){

  if(!arr.isArray()){

    return  new Error("arr不是数组");

  }

  if(arr.length<=1)}{

   return arr;

 }

  var temp,i,j;

  for(i=0;i<arr.length;i++){

    for(j=0;j<i;j++){

      if(arr[j]>arr[j+1]){

        temp = a[j];

  a[j] = a[j+1];

        a[j+1]=temp;

      }

    }

    return arr;

  }

}



以上是关于第139篇:JS数组常用方法(map(),reduce(),foreach())的主要内容,如果未能解决你的问题,请参考以下文章

js中迭代的常用几种方法

js将字符串数组转数值型数组-数组常用方法

js 数组 map方法

js数组遍历的常用的几种方法以及差异和性能优化

js的Set和Map集合

天总结一下常用的JS数组方法