js---filter和map

filter

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：

1 var arr = [1, 2, 4, 5, 6, 9, 10, 15];
2 var r = arr.filter(function (x) {
3     return x % 2 !== 0;
4 });
5 r; // [1, 5, 9, 15]

把一个Array中的空字符串删掉，可以这么写：

1 var arr = ['A', '', 'B', null, undefined, 'C', '  '];
2 var r = arr.filter(function (s) {
3     return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
4 });
5 r; // ['A', 'B', 'C']

可见用filter()这个高阶函数，关键在于正确实现一个“筛选”函数。

map定义和方法

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。
注意：
map不会对空数组进行检测
map不会改变原始数组
arr.map(function(currentValue，index，arr),thisValue)
参数说明
function(currentValue,index,arr)
必须，函数，数组中的每个元素都会执行这个函数函数参数
函数参数
currentValue 必须当前元素值
index 可选当前元素的索引值
arr 可选当前元素属于的数组对象。
我们看个小demo，就会一目了然

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>map方法</title>
</head>
<body>
    <p>点击按钮将数组中的每个元素乘以输入框指定的值，并返回新数组</p>
    <p>
        最小年龄:
        <input type="number" id="age" value="10" />
    </p>
    <button id="btn">点我</button>
    <p id="data">新数组</p>

    <script type="text/javascript">
        var btn = document.getElementById("btn");
        var data = document.getElementById("data");
        var age = document.getElementById("age");
        var numbers = [25,36,121,49];

        function myFunction(num,index,arr){
            console.log(arr);
            return num * age.value;
        }

        btn.onclick = function(num){
            data.innerHTML = numbers.map(myFunction);
        }

    </script>
</body>

filter

map定义和方法

猜你喜欢