javascript----Array之Sort()

引入Sort()

举个栗子

        var arr=[1,3,98,23];
        arr.sort();
        console.log(arr);

这里写图片描述

我期望得到的结果[1,3,23,98];
阿西吧!说好的数值型呢?
童话里都是骗人的
MDN这样告诉我···········!!!!!!!!!!!!!!
这里写图片描述

呵呵,居然有这样变态的默认排序(曾经欺骗了多少和我一样无知单纯的孩纸)。。。好吧,我必须承认compareFunction() 的使用将sort()武装到无所不能,哦也!


Sort()那些你应该知道的事

  • sort()排序不会产生新的数组,而是原地排序
  • sort()不添加compareFunction() 时,默认按照字符串的Unicode码位点(code point)排序。
  • sort()如果指明了 compareFunction(x,y) ,那么数组会按照调用该函数的返回值排序。
    1、compareFunction(x,y) 返回值为小于 0 ,那么 x 会被排列到 y 之前.
    2、compareFunction(x,y) 返回值为 0 ,那么 x和 y 的位置保持相对不变.
    3、compareFunction(x,y) 返回值为大于 0 ,那么 x 会被排列到 y 之后.

现在我们来分别研究下compareFunction(x,y)可以让Sort()产生怎样神奇的效果。


compareFunction(x,y)的函数名没有指定,你开心就好,当然应该语义化一下下,呃呃····

compareFunction(x,y)—number排序 (常规)

var arr=[1,2,10,23];
        arr.sort(compareNum);
        function compareNum(x,y) {
            return x - y;
        };
        console.log(arr);

这里写图片描述
即使有元素相等的也无所谓

ar arr=[1,2,10,2];

这里写图片描述
不知道你会何等NB能看出这两个2,哪个是排序前的arr[1]


compareFunction(x,y)—string排序 ##]

WithOut compareFunction

var arr=['cherries', 'apples', 'bananas'];
    arr.sort();

这里写图片描述
额,其实期望值挺顺应Sort()默认的执行结果的。


compareFunction(x,y)—混合排序 ##]

WithOut compareFunction

var arr=["80", "9", "700", 40, 1, 5, 200];
        arr.sort();
        console.log(arr);

这里写图片描述

With compareFunction

var arr=["80", "9", "700", 40, 1, 5, 200];
        arr.sort(compareNum);
        function compareNum(x,y) {
            return x - y;
        };

        console.log(arr);

这里写图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是el-table虚拟列表的实现代码: ```javascript <template> <el-table ref="table" :data="tableData" :row-key="row => row.id" :height="tableHeight" :row-height="rowHeight" :header-row-height="headerRowHeight" :v-loading="loading" :default-sort="defaultSort" @sort-change="handleSortChange" @row-click="handleRowClick" @row-contextmenu="handleRowContextMenu" > <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop" :min-width="column.minWidth" :resizable="column.resizable" :formatter="column.formatter" :sortable="column.sortable" :sort-method="column.sortMethod" :align="column.align" :header-align="column.headerAlign" :show-overflow-tooltip="column.showOverflowTooltip" :fixed="column.fixed" /> </el-table> </template> <script> import { debounce } from 'lodash' export default { name: 'VirtualTable', props: { columns: { type: Array, required: true }, data: { type: Array, required: true }, total: { type: Number, required: true }, loading: { type: Boolean, default: false }, height: { type: Number, required: true }, rowHeight: { type: Number, default: 40 }, headerRowHeight: { type: Number, default: 40 }, defaultSort: { type: Object }, fetch: { type: Function, required: true } }, data() { return { tableData: [], scrollTop: 0, startRow: 0, endRow: 0, visibleRowCount: 0, requestParams: {}, sort: null } }, computed: { tableHeight() { return this.height - this.headerRowHeight }, visibleRowStartIndex() { return Math.floor(this.scrollTop / this.rowHeight) }, visibleRowEndIndex() { return Math.floor((this.scrollTop + this.tableHeight) / this.rowHeight) }, isAllDataLoaded() { return this.endRow === this.total - 1 } }, watch: { data() { this.loadData() } }, mounted() { this.loadData() this.$refs.table.bodyWrapper.addEventListener('scroll', debounce(this.handleScroll, 50)) }, methods: { async loadData() { this.tableData = [] this.startRow = 0 this.endRow = 0 this.visibleRowCount = 0 if (this.data.length > 0) { await this.loadRows() this.$refs.table.doLayout() } }, async loadRows() { this.requestParams = { start: this.startRow, end: this.endRow, sort: this.sort } const result = await this.fetch(this.requestParams) this.tableData = this.tableData.concat(result.data) this.startRow = this.endRow + 1 this.endRow = this.startRow + result.data.length - 1 this.visibleRowCount = this.tableData.length }, async handleScroll() { const { scrollTop } = this.$refs.table.bodyWrapper const scrollDistance = Math.abs(scrollTop - this.scrollTop) if (scrollDistance > this.rowHeight) { this.scrollTop = scrollTop await this.updateVisibleRows() } }, async updateVisibleRows() { let shouldLoadMore = false if (this.visibleRowCount === 0) { shouldLoadMore = true } else if (this.visibleRowStartIndex > this.endRow || this.visibleRowEndIndex < this.startRow) { shouldLoadMore = true } if (shouldLoadMore && !this.isAllDataLoaded) { await this.loadRows() } }, async handleSortChange(sort) { this.sort = sort await this.loadData() }, async handleRowClick(row, column, event) { this.$emit('row-click', row, column, event) }, async handleRowContextMenu(row, column, event) { this.$emit('row-contextmenu', row, column, event) } } } </script> ``` 该组件的实现主要是通过监听表格的滚动事件来动态加载数据,从而实现虚拟列表。同时,还有一些其他的功能,如排序、点击行、右键菜单等,都已经在代码中实现。需要注意的是,这里使用了 lodash 库中的 debounce 函数来控制滚动事件的触发频率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值