js中数组<三>（第九篇）

直接上主题：
这篇介绍常用的、好用的js数组方法，有以下几个

• map()
• reduce()
• filter()
• forEach()

map方法——求数组的映射

• 不改变元素组本身（但是可以自己在回调函数中改变）

先看例子：

例子1：有一个数组["连云港","杭州","广州","苏州"]，求出对应所在的省份？
["江苏","浙江","广东","江苏"]，这个时候就可以使用map方法
例子2：有一分数数组[23,34,64,78,88,93,45],分数小于60的为不及格，大于等于六十小于90为及格，大于等于90为优秀；
代码实现：

let arr = [23,34,64,78,88,93,45];
let arr1 = arr.map((value,index,arr) => {
    if(value<60){
        return "不及格";
    }else if(value>=60&&value<90){
        return "及格";
    }else{
        if(value>=90){
            return "优秀";
        }
    }
})
console.log(arr);
console.log(arr1);
    

js数组map()方法

如果上面的代码配合js的简写方式就非常简单如下：

    let arr = [23,34,64,78,88,93,45];
    let arr1 = arr.map(value =>  value < 60 ? "不及格" : value >= 60 ? "及格" : "优秀");
    console.log(arr);
    console.log(arr1);

一行代码就搞定，结果和上面是一样的

参数详解

语法
arr.map(function(currentValue,index,arr),thisValue)

参数说明：

<table >
<tr>
<th>参数</th>
<th>描述</th>
</tr>
<tr>
<td>function(currentValue, index,arr)</td>
<td>必须。函数，数组中的每个元素都会执行这个函数
函数参数:
<table >
<tr>
<th>参数</th>
<th>描述</th>
</tr>
<tr>
<td>currentValue</td>
<td>必须。当前元素的值</td>
</tr>
<tr>
<td>index</td>
<td>可选。当前元素的索引值</td>
</tr>
<tr>
<td>arr</td>
<td>可选。当前元素属于的数组对象</td>
</tr>
</table>
</tr>
<tr>
<td>thisValue</td>
<td>可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"</td>
</tr>
</table>

let arr = [2,5,6,7,8];
let arr1 = arr.map(function(value,index,arr,aaa){// 最后aaa用来测试传入的参数个数，也可以在程序中用arguments测试
    console.log(value,index,arr,aaa,);//打印回调函数参数
    if(value%2){
        arr[index] = `${value}是${this.type2}`//改变原数组
        return `${value}是${this.type2}`
    }else{
        return `${value}是${this.type1}`
    };
},{type1:"奇数",type2:"偶数"});
console.log(arr);
console.log(arr1);

js数组map（）方法参数

reduce方法——调用后数组返回一个值（从左到右）

例子1 最常用的就是可以用reduce方法求一个数组中元素的和：

let arr = [2,5,6,7,8];
let arr1 = arr.reduce(function(itme,value){
   return itme+value;
})
console.log(arr);   //值为：[2,5,6,7,8]
console.log(arr1);  //值为：28

reduce方法中的参数：

let arr = [2, 5, 6, 7, 8];
let arr1 = arr.reduce(function (itme,value) {
    console.log(arguments);//函数的传入参数
    return itme+value;
    console.log("能出来吗？");//return后的不执行
 });

js数组reduce()方法参数

还有一个与reduce类似的方法 reduceRight（），reduce是从左向右计算，二reduceRight是从右往左计算，其参数都是一样的，

filter() 检查数组所有元素并返回符合要求的元素；

例子1： 一组成绩表[12,65,78,48,89,98,88,38],求所有及格成绩（分数大于等于60分的）；程序实现同时查看函数的参数：

       let arr = [12, 65, 78, 48, 89, 98, 88, 38];
       let arr1 = arr.filter(function (itme, value) {
           console.log(arguments);
           if (itme >= 60){
               return itme;
           }
       });
       console.log(arr);
       console.log(arr1);

js数组filter()方法参数

forEach() 列出数组中的每一个元素，非常常用的方法，和和for……of、for……in方法类似,用于数组的遍历

例子1： 打印[1,5,6]这个数组中的每个元素同时将这个数组中元素接在[1,2,3]数组后面
实现代码：

 let arr = [1, 5, 6];
        let arr1 = [1,2,3]
        arr.forEach(function (value) {
            console.log(arguments);
            console.log(value)//遍历数组arr中的值
            this.push(value);//将数组arr中值添加到arr1中，其中this是forEach第二个参数指定的
            
        }, arr1)//指定this,如果不指定这个参数，或者指定为null、undefinded 则this指向全局对象
        console.log(arr);
        console.log(arr1);

js数组forEach()方法参数

<完>
20181028

发挥不广泛微信公众号

发挥不广泛