JavaScript数组应用之forEach、map、filter、reduce

左手的ㄟ右手 2022-05-14 03:07 179阅读 0赞

## JavaScript数组方法讲解 ##

ES3.0的方法与ES5.0的方法分别有：

1.  改变原数组：reverse,sort,push,pop,unshift,shift, splice
2.  不可改变原数组：进行操作后原数组不改变，可将改变的数组取出使用：forEach, filter, map, reduce, reduceRight,   slice, concat, join,->split,tostring

一、push可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

push数组的实现：在原型链上编程有助于所有数组直接调用而不需要调用函数来使用。

Array.prototype.push = **function** () \{

**var** len = arguments.length;

for(**var** i = 0; i < len; i \++)\{

this\[this.length\] = arguments\[i\];

return this.length;

pop:数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

unshift:将参数添加到原数组开头，并返回数组的长度 。

sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。提供接口供人们自己定义自己想要的函数功能。

sort方法-->提供接口函数

1、必须两个形参

2、看返回值 1）当返回值为负数时那么前面的数在前面

2）为正数时，后面的数在前面

3）为0时，不动

arr.sort(**function** (a, b) \{

*//return a-b;//升序*

*// return b-a;降序*

return Math.random() \- 0.5;*//随机排序*

\});

Splice:很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。splice（起始位置，要删除的项数，\[要插入的数（可多个）\]）

二、

Concat:将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组

Tostring:将传过的参数转为字符串形式

Slice：返回从原数组中指定开始下标到结束下标（不包括结束下标）之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。

Join：join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

Split：split（separator）：将字符串拆分为一个数组，以separator为分隔符，该方法只接收一个参数：即分隔符。

以上这些是ES3.0的数组方法

而新增的ES5.0方法则有以下方法：

1、forEach:对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

先定义一个数组方便后续各种方法的调用举例；

var arr = \[

\{ name: "刘飞", des: '颈椎不好', sex: 'm', age: 23 \},

\{ name: '刘迎', des: '圣体很好', sex: 'f', age: 19 \},

\{ name: '王淑', des: '圣体不行', sex: 'f', age: 20 \},

\{ name: '王雷', des: '你没见过的人', sex: 'm', age: 21 \},

\{ name: '刘浪', des: '很皮', sex: 'm', age: 22 \}

\];

必须传一个函数参数 func （ele元素每一项, index索引位, self自身），第二个this指向可传可不传不传则函数执行时指向window

var oLiArray = document.getElementsByTagName('li');

arr.forEach(function(ele, index, self) \{

this\[index\].innerText = ele.name;

\}, oLiArray)

输出结果：![70][]

结果便是所传的数组每一项依次调用此函数，来对这个数组实现某一功能（此例子是将数组中的每一项插入到li中）

当然我们也可以对其重写来实现相同的功能：当然也是在数组的原型链上编程方便数组的直接使用

Array.prototype.myForEach = function (func) \{

//可以传两个参数，function 和this（function使用时的指向），用parma2来接受this

//\_arr来接收当前数组调用（谁调用就指向谁）

var \_arr = this, len = \_arr.length, parma2 = arguments\[1\] || window;

for(var i = 0; i < len; i ++) \{

func.apply(parma2, \[\_arr\[i\], i, \_arr\]);

重新进行调用也能得到以上结果。

filter：过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

eg:

var newArr = arr.filter(function(ele, index, self) \{

if(ele.sex == 'm')

return true;

\});

结果为；![70 1][]

在函数里面判断true还是false，若是true则返回当前项，否则过滤掉当前项。

对其重写：

Array.prototype.myFilter = function (func) \{

//新增加定义一个空数组来接收最后结果然后返回

var \_arr = this, len = \_arr.length; parma2 = arguments\[1\] || window, newArr = \[\];

for (var i = 0; i < len; i++) \{

func.apply(parma2, \[\_arr\[i\], i, \_arr\]) ? newArr.push(deepClone(\{\}, \_arr\[i\])) : '';

return newArr;

Map:指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

假如X ---------------+10---------> Y 即X中的每一项都增加10然后存到另一个数组中即映射关系

使用方法：

var newArr = arr.map(function(ele, index, self) \{

ele.name += 10;

return ele;//返回的还是原来的每一项

\})

结果为：![70 2][]

重写：

Array.prototype.myMap = function(func) \{

var \_arr = this, len = \_arr.length, parma2 = arguments\[1\] || window, newArr = \[\];

for(var i = 0; i < len; i ++) \{

newArr.push(deepClone(\{\}, func.apply(parma2, \[\_arr\[i\], i, \_arr\])));//使用深度克隆不会影响原来的数组

return newArr;//返回一个新数组接受

Reduce和reduceRight:reduce()方法从数组的第一项开始，逐个遍历到最后，reduceRight则是从右往左遍历。传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

使用方法：

var initialValue = \{name: '22'\};

var lastValue = arr.reduce(function(preValue, curValue, index, self) \{

preValue.name += 1;

return preValue

\}, initialValue);

调用结果：![70 3][]

每次从左往右加一，没上一次调用的结果作为下一次使用进行累加；

重写也可以实现：

Array.prototype.myReduce = function(func,initialValue) \{//这里必须传两个参数，当然第三个参数和上面第二个一样可传可不传

var \_arr = this, len = \_arr.length, parma2 = arguments\[2\];

for(var i = 0; i < len; i ++) \{

initialValue = func.apply(parma2, \[initialValue, \_arr\[i\], i, \_arr\]);

return initialValue;

应用：将一个字符串分开并将其全部存入一个数组中，其属性和值分别为原来字符串的数：

eg:

var cookie = "1=a;2=b;3=c;4=d;5=e;6=f;7=g";

function parseCookie(str) \{

var cookieArr = str.split(";");

var cookObj = \{\};

cookieArr.reduce(function(pre, next, index, self)\{

var nextArr = next.split('=');

cookObj\[nextArr\[0\]\] = nextArr\[1\];

return pre;

\}, cookObj)

return cookObj;

var cook = parseCookie(cookie);

console.log(cook);

输出结果：![70 4][]

尽管reduce方法难有点难但是用起来还是很好用的；

every方法：判断数组中的每一项是不是都符合要求，若不则返回false（相当于&&）

some方法：判断数组中是不是存在某一项符合要求，若有则返回true。（相当于||）

var flag = arr.every(function(ele, index, self) \{

return ele.age > 20;

\});

var flag1 = arr.some(function(ele, index, self) \{

return ele.age > 20;

\});

输出结果![70 5][]

对其重写：

Array.prototype.myEvery = function(func) \{

//增加一个判断true的变量便于返回

var \_arr = this, len = \_arr.length; parma2 = arguments\[1\] || window, flag = true;

for(var i = 0; i < len; i ++) \{

if(!func.apply(parma2, \[\_arr\[i\], i, \_arr\]))\{

flag = false;

return flag;

some方法类似

重写的主要目的是让大家能够更好的理解底层原理，方便使用

也就不需要很依赖别人的方法，增加自主能力

以上便是JavaScript中常用的数组方法。谢谢采纳，建议自己写写

[70]: /images/20220514/c0402ef514cb41ecb0fb433718bf31f9.png
[70 1]: /images/20220514/73c42740324e44849ff99b46f06a35f6.png
[70 2]: /images/20220514/775a2d2bad2545a0b801738be400b203.png
[70 3]: /images/20220514/6cfe5c02cd8246e580b3a9420301c1ba.png
[70 4]: /images/20220514/dc9442fecbae4d99a57a81c721901a62.png
[70 5]: /images/20220514/7f8d8f3a6e1342d5b69adcb4603a26a6.png