前端常见兼容问题系列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,就是一个个意料之外。

目录
相关文章
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
220 14
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
55 5
|
2月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
70 5
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
49 1
|
2月前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
44 3
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
183 1
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
69 1
|
3月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
3月前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
XML DOM 浏览器差异