前端常见兼容问题系列4:sort方法在浏览器中执行效果的差异

简介: sort后面跟着的排序函数,需要返回正数、负数或者0才是标准的影响排序的函数。而采用返回布尔值的函数作为排序函数是一种误用。

前面写了好几个安卓系统下一些手机中的兼容性问题。这次我们来一个iOS系统下的。

有这么一个HTML片段:

<body>
<p id="container"></p>
<div>
    <script>
        var str = ''
        var arr = [
              {name: "3", value: "50"}, 
              {name: "2", value: "60"},
              {name: "1", value: "70"},
              { name: "4",value: "40"},
              {name: "5", value: "30"}
        ];

        arr.sort(function (a, b) {
            return +b.value > +a.value;
        });

        arr.forEach(function (item) {
            str += item.name + ':  ' + item.value + '<br/>';
        })

        document.querySelector('#container').innerHTML = str;
    </script>
</div>
</body>

我们期望通过它来将数组以每一项value值做倒序排列。在Chrome浏览器中,如你所愿,输出了如图1所示的结果:

screenshot.png
(图1)

但是,在Safari这个还算比较让人放心的浏览器中,展示的结果则如图2所示——顺序完全出乎意料:

screenshot.png
(图2)

看起来它好像什么事情也没做,只是把数组原样输出了。这是为什么呢?

Google一下,原来是因为sort后面跟着的排序函数,需要返回正数、负数或者0才是标准的影响排序的函数。而如上例所示的采用返回布尔值的函数作为排序函数是一种误用。

所以,正确的方法应该是:

arr.sort(function (a, b) {
      return +b.value > +a.value ? 1: +b.value < +a.value ? -1 : 0;
});

经过修正,我们上面的例子无论在Chrome还是Safari中都可以获得正确的排序结果了(如图3)。

顺便提一下,在这个比较中,如果忘记对于比较的内容做类型转换,也是很容易出现问题的。

screenshot.png
(图3)

从这个问题得出的教训是:

1、Safari浏览器中的兼容性其实也不可以掉以轻心

2、一个基本知识点的理解错误,可能会造成非常严重的bug(比如这里的排序,往往是非常关键的功能),所以基础非常重要。

3、多测试总能发现意想不到的问题。某种程度上讲,所谓bug,就是一个个意料之外。

目录
相关文章
|
5天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
9天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
XML DOM 浏览器差异
|
1月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
36 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
1月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
55 1
前端基础(十四)_隐藏元素的方法
|
13天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
XML DOM 浏览器差异
|
17天前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
20天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
XML DOM 浏览器差异
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
38 0
|
5天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
33 0
|
7天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
XML DOM 浏览器差异