filter()

Last updated Sep 6, 2022

Java script

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

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

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

1
2
3
4
5
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;  // 奇数true，偶数false删除
});
r; // [1, 5, 9, 15]

filter - 廖雪峰的官方网站

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<body>
    <div id="root">
        <input type="text" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.gender}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [{
                id: '001',
                name: '马冬梅',
                age: 19,
                gender: '女'
            }, {
                id: '002',
                name: '周冬雨',
                age: 20,
                gender: '女'
            }, {
                id: '003',
                name: '周杰伦',
                age: 21,
                gender: '女'
            }, {
                id: '004',
                name: '温兆伦',
                age: 22,
                gender: '男'
            }, ],
            filPersons: []
        },
        watch: {
            keyWord: {
                immediate: true,
                handler(val) {
                    this.filPersons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1 // 'abc'.indexOf(xxx) abc不包含xxx就显示-1, 包含则返回它在第几位
                    })
                }
            }
        }
    })
</script>

🖼️ Lyin's Room

filter()

Backlinks

Interactive Graph