Js

参考filter

Js_filter

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。 回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

1
2
3
4
5
6
7
 var arr = ['A', 'B', 'C'];
 var r = arr.filter(function (element, index, self) {
     console.log(element); // 依次打印'A', 'B', 'C'
     console.log(index); // 依次打印0, 1, 2
     console.log(self); // self就是变量arr
     return true;
 });

链接MDN

Js_includes

Array.prototype.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

1
2
3
4
5
6
7
8
var array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false

String.prototype.includes()

includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false

1
2
3
4
5
6
var str = 'To be, or not to be, that is the question.';
console.log(str.includes('To be'));       // true
console.log(str.includes('question'));    // true
console.log(str.includes('nonexistent')); // false
console.log(str.includes('To be', 1));    // false
console.log(str.includes('TO BE'));       // false

element+vue分页小功能

分页用到filter,includes,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
template
    <div>
        <el-row>
            <el-col :span="7">
                <el-input v-model="searchData"  placeholder="输入姓名搜索"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="success" @click="search">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="list">
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
template

js部分

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
    var listJson = {
        list: [
            { name: 'aa', age: 12 },
            { name: 'bb', age: 13 },
            { name: 'cc', age: 14 },
            { name: 'ad', age: 15 },
            { name: 'eaae', age: 16 },
            { name: 'faaf', age: 16 },
            { name: 'hah', age: 17 },
            { name: 'ii', age: 18 },
            { name: 'rar', age: 19 },
            { name: 'dd', age: 10 },
        ]
    }
    export default {
       name: 'MgrRole',
        data() {
            return {
                list: [],
                data: [],
                limit: 5,
                total: null,
                page: 1,
                searchData: "",
            }
        },
        created() {
            this.pageList()
        },
        methods: {
            pageList() {
                // 发请求拿到数据并暂存全部数据,方便之后操作
                this.data = listJson.list
                this.getList()
            },
            // 处理数据
            getList() {
                // es6过滤得到满足搜索条件的展示数据list
                let list = this.data.filter((item, index) =>
                    item.name.includes(this.searchData) //字符串includes返回true
                )
                //过滤分页，过滤后的数组
                this.list = list.filter((item, index) =>
                    index < this.page * this.limit && index >= this.limit * (this.page - 1)
                )
                //分页的总数据
                this.total = list.length
            },
            // 当每页数量改变
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.limit = val
                this.getList()
            },
            // 当当前页改变
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.getList()
            },
            // 搜索过滤数据
            search() {
                this.page = 1
                this.getList()
            }
        },
}
</script>

reduce()用法

reduce用法 该方法返回的是最后一次运算结果

1
2
var arr = [1,2,3,4,5]
arr.reduce((acc, current) => acc * current) //返回值是120

• Previous
  Js_bug
• Next
  基于vue+element员工管理系统之角色管理