数组的常用方法3

Twistedzs

已于 2022-07-25 16:21:45 修改

阅读量545

点赞数 4

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-07-23 13:15:53 首次发布

本文链接：https://blog.csdn.net/m0_55868872/article/details/125945171

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

—— 此篇开始 ——

此篇中的方法相对于前两篇而言更为复杂，但也都不会改变原始数组，都以返回值形式给出结果

1. forEach()

语法：数组.forEach( function ( item,index,arr ) {} )

作用：相当于for循环，用来遍历数组。forEach里的函数可以接受三个参数，第一个参数：表示数组内的每一项，第二个参数：表示数组内每一项的索引，第三个参数：表示原始数组

返回值：undefind

实例：

var arr = [100,200,300,400,500]
console.log ("原始数组：",arr);
console.log ("----------------");

var res = arr.forEach( function ( item,index,arr ) {    
    console.log ("数据：",item); //数组中的每一个数据
    console.log ("索引：",index); //数组中每一个数据的索引
    console.log ("数组：",arr); //整个数组
    console.log ("----------------");
} )

console.log ("返回值：",res);

结果：

2. map()

语法：数组.map() ( function ( item,index,arr ) {} )

作用：映射数组，根据所写条件将数组里的数据一个一个进行对应计算

返回值：一个新数组，和原始数组长度一致，新数组内每一个数据都是根据原始数组中每一个数据映射出来的，条件以return的形式书写

实例：

var arr = [10,20,30,40,50]
console.log ("原始数组：",arr);

var res = arr.map( function (item) {
    return item*10;
}) 
console.log ("映射过后：",arr); //不会改变原始数组
console.log ("返回值：",res);

结果：

map()原理：

1.准备一个新数组

2.根据原始数组进行遍历以及根据书写条件计算

第一次调用function(10)，返回值是 100，把这个返回值放在新数组里面

第二次调用function(20)，返回值是 200，把这个返回值放在新数组里面

第三次调用function(30)，返回值是 300，把这个返回值放在新数组里面

...

3.把最终的新数组当作map这个方法的返回值

3. filter()

语法：数组.filter( function ( item,index,arr ) { } )

作用：根据书写条件过滤数组

返回值：一个新数组，数组内是原始数组中所有满足条件的数据，条件以return的形式书写

实例：

var arr = [10,20,30,40,50]
console.log ("原始数组：",arr);

var res = arr.filter( function (item) {
    return item > 30;
})
console.log ("过滤之后：",arr); //不改变原始数组
console.log ("返回值：",res);

结果：

filter()原理：

1.准备一个新数组

2.根据原始数组进行遍历以及根据书写条件进行判断

第一次调用 function(10)，返回值是 false，10不加入新数组

第二次调用 function(20)，返回值是 false，20不加入新数组

第三次调用 function(30)，返回值是 false，30不加入新数组

第四次调用 function(40)，返回值是 true，40加入新数组

...

3.把最终的新数组当作filter这个方法的返回值

4. every()

语法：数组.every( function ( item,index,arr ) { } )

作用：判断数组中是不是每一项数据都满足书写条件

返回值：布尔值。如果数组中每一项都满足书写条件，返回值就为true，反之则为false，条件以return的形式书写

实例：

var arr = [10,20,30,40,50,60]
console.log ("原始数组：",arr);

var res = arr.every( function (item) {
    return item > 30;
})
console.log ("判断过后：",arr); //不改变原始数组
console.log ("返回值：",res);

结果：

5. some()

语法：数组.some( function ( item,index,arr ) { } )

作用：判断数组中是不是有某一项数据满足书写条件

返回值：布尔值。如果数组中有任何一项数据满足书写条件，返回值就为true，如果所有数据都不满足，则为false，条件以return的形式书写

实例：

var arr = [10,20,30,40,50,60]
console.log ("原始数组：",arr);

var res = arr.some( function (item) {
    return item > 30;
})
console.log ("判断过后：",arr); //不改变原始数组
console.log ("返回值：",res);

结果：

6. find()

语法：数组.find( function ( item,index,arr ) { } )

作用：查找数组中某一个数据，往往用于查找复杂数据类型

返回值：返回在数组中所查找到的第一个满足书写条件的数据，没有就返回undefined条件以return的形式书写

实例：

//1.查找简单数据类型
console.log ("查找简单数据类型");
var arr = [1,2,3,4,5]
console.log ("原始数组：",arr);

var res = arr.find( function (item) {
    return item % 2 === 1; //找到数组里的第一个奇数
})
console.log ("寻找过后：",arr); //不会改变原始数组
console.log ("返回值：",res);


console.log ("--------------");


//2.查找复杂数据类型
console.log ("查找复杂数据类型");
var arr2 = [
    {id:1,name:'jack'},
    {id:2,name:'rose'},
    {id:3,name:'tom'}
]
console.log ("原始数组：",arr2);

var res2 = arr2.find( function (item) {
    return item.id == 1; //查找数组的对象中id为1的数据
})
console.log ("寻找过后：",arr2); //不会改变原始数组
console.log ("返回值：",res2);

结果：

7. reduce()

语法：数组.reduce( function ( prev,item,index,arr ) { },初始值)

作用：将数组中的数据进行累加，prev：初始值或每一次叠加后的结果，初始值不写，默认为0

返回值：累加结果

实例：

var arr = [1,2,3,4,5,6]
console.log ("原始数组：",arr);

var res = arr.reduce( function (prev,item){
    return prev + item;
},3)
console.log ("累加以后：",arr); //不改变原始数组
console.log ("返回值：",res);

结果：