vue列表过滤与排序实现中的this问题，变量作用域的提升

电玩女神 2022-02-03 14:41 119阅读 0赞

# vue列表过滤与排序实现中的this问题，变量作用域的提升 #

原链接 [https://www.javascriptcn.com/read-57785.html][https_www.javascriptcn.com_read-57785.html]

最近在看vue框架的知识，然后其中有个例子中的`this`的写法让我很疑惑

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    
    <body>
        <div id="demo">
            search: <input type="text" v-model="searchName">
            <ul>
                <li v-for="(p,index) in filterPersons" :key="index">
                    {
       {index}} --- {
       {p.name}} --- {
       {p.age}}
                </li>
            </ul>
            <button @click="setOrderType(1)">年龄升序</button>
            <button @click="setOrderType(2)">年龄降序</button>
            <button @click="setOrderType(0)">原本顺序</button>
        </div>
    
        <script src="../js/vue.js"></script>
        <script> var vm = new Vue({ el: '#demo', data: { searchName: '', /** * 排序种类: * 0 - 原本顺序 * 1 - 年龄升序 * 2 - 年龄降序 */ orderType: 0, persons: [{ name: 'Tom', age: 18 }, { name: 'Jack', age: 20 }, { name: 'Bob', age: 16 }, { name: 'Kaka', age: 25 }, { name: '22', age: 23 }, { name: '33', age: 18 }, { name: 'Shadow', age: 21 }, { name: 'Good', age: 18 }, { name: 'Lily', age: 20 }, { name: 'Lena', age: 19 } ] }, computed: { filterPersons() { // 取出相关的数据 const { searchName, persons, orderType } = this; let flag; flag = persons.filter(p => p.name.indexOf(searchName) !== -1); if (orderType !== 0) { flag.sort(function (p1, p2) { if (orderType === 2) { return p2.age - p1.age; } else { return p1.age - p2.age; } }); } return flag; } }, methods: { setOrderType(orderType) { this.orderType = orderType; } } }); </script>
    </body>
    
    </html>

在这堆代码中的`filterPerson`函数的第一行进行了`this`的赋值，创建了一个对象赋给了一个常量  
在一些教程中表示这是取出要用的数据  
其实算是简化操作，因为后面我将其注释掉，然后在每个变量前面加上`this`依旧可以跑起来

computed: { 
                    filterPersons() { 
                        // 取出相关的数据
                        // const { 
                        // searchName,
                        // persons,
                        // orderType
                        // } = this;
    
                        let flag;
                        flag = this.persons.filter(p => p.name.indexOf(this.searchName) !== -1);
    
                        if (this.orderType !== 0) { 
                            flag.sort(function (p1, p2) { 
                                if (this.orderType === 2) { 
                                    return p2.age - p1.age;
                                } else { 
                                    return p1.age - p2.age;
                                }
                            });
                        }
    
                        return flag;
                    }
                }

所以，在这个地方是将要用的数据事先放在了`this`中, 主要是函数中本身没有这几个变量，所以直接在函数内部使用是会报错的，因此需要去外面的`vue`实例中获取。如果不这么做，要多写很多个`this`。

引申一下：

这里涉及到了对象的解构赋值

let { foo,bar}={ foo:'aaa',bar:'bbb'}
    foo // 'aaa'
    bar // 'bbb'

而上文中的this是vue里的this对象。相当于把this中对象的值赋值给函数 filterPersons()的变量，一定意义上讲，扩大了函数filterPersons()变量的使用范围，这个变量的作用域跟vue里this相应属性的作用域一样了。

那么，如果想让变量成为全局变量，怎么办？

window.foo = 'aaa';
    window.bar = 'bbb';
    a=function(){ 
        let { foo,bar}=window
        console.log(foo)
        console.log(bar)
    }
    a()  // 'aaa' 'bbb'
    foo  //'aaa'
    bar  //'bbb'

补充二

foo = 'abcd';  //indexOf的用法
    foo.indexOf('d')   // 3
    foo.indexOf('')   // 0
    foo.indexOf('e')   // -1

补充三

foo = [4,9,2,6];  //filter（）的用法，对原数组进行过滤，返回操作后的数组，不生成副本
    foo.filter(a=> a>2)   // [4,9,6]

补充四

foo = [4,9,2,6];  //sort（）的用法，对原数组进行排序，返回操作后的数组，不生成副本
    foo.sort((a,b)=> a-b)   // a>b,即降序 [2,4,6,9]
    foo.sort((a,b)=> b-a)  // a<b，即升序 [9,6,4,2]

[https_www.javascriptcn.com_read-57785.html]: https://www.javascriptcn.com/read-57785.html