最短的IE判断var ie=!-[1,]分析

本文介绍了一种仅用6个字符实现Internet Explorer浏览器检测的方法,并详细解释了其背后的JavaScript原理,包括浏览器间的数组处理差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最短的IE判断var ie=!-[1,]分析

下面通过分解这个语句来回顾下代码中所涉及到的javascript知识,需要的朋友可以参考

 以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。

 

复制代码代码如下:

 var ie = !+"\v1";
 

仅仅需要7bytes!参见这篇文章,《32 bytes, ehr ... 9, ehr ... 7!!! to know if your browser is IE》,讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 bytes!的故事但这纪录今年1月8日被一个俄国人打破了,现在只要6 bytes!它利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器,如果数组里面最后一个字符为逗号,JS引擎会自动剔除它。

复制代码代码如下:

var ie = !-[1,];

这句代码在IE9之前曾被称为世界上最短的IE判定代码。代码虽短但确包含了不少javascript基础知识在里面。在这个例子中代码执行时会先调用数组的toString()方法 ,执行[1,].toString()在IE6,7,8中将会得到"1,"。然后表达式就变为!-"1,"。再尝试把"1,"转换成数值类型得到NaN ,再对NaN取负得到值仍为NaN。最后执行!NaN返回true。下面通过分解这个语句来回顾下代码中所涉及到的javascript知识:

1. 浏览器的数组字面量解析差异

[1,]表示使用javascript的数组字面量定义了一个数组。 在IE6,7,8中数组有两个元素,数组中的值分别为1,undefined。在标准的浏览器中会忽略第一个元素后的undefined,数组只包含一个元素1。

2. 数组的toString()方法

调用数组对象的toString()方法时会对数组中的每个元素调用toString()方法,如果元素的值为NULL或者undefined时会返回空的字符串,然后将得到的每项的值拼成一个使用 逗号","分隔的字符串。

3. 一元减号运算符

使用一元减号运算符时如果运算数是数值类型则直接对运算数取负,否则会先尝试把运算数转换为数值类型,转换过程相当于执行Number函数,然后再对得到的结果取负。

4. 逻辑非运算

执行逻辑非运算时如果操作数为NaN、NULL或undefined 时返回 true。

JavaScript可以这么写:

复制代码代码如下:

var ie = !-[1,];   
   alert(ie);  

如果从非IE的角度判定,可以省一个比特,因为我们做兼容时,绝大多数情况都是IE与非IE地开工。 var notIE = -[1,];

复制代码代码如下:

if(-[1,]){  
     alert("这不是IE浏览器!");  
}else{  
     alert("这是IE浏览器!");  
}

通过上面的知识可以得出代码 var ie = !-[1,]; 其实等价于 var ie = !(-Number([1,].toString())); 在IE6\7\8中值为true。

因为IE6/7/8都不会忽略[1,].ToString()这个bug,即得到的是"1,";而-Number([1,].toString())即为-Number("1,")得到的结果是NaN;然后!(-Number([1,].toString()))即为!(NaN)即得到true。一切的前提是IE6/7/8都有[1,].ToString()=>"1,"这个bug,而其它浏览器(应该是大部分吧~~)则是[1,].ToString()=>"1"。

<template style="overflow-x: hidden;"> <!-- <div id="index" v-if="isAuth('mqtt:mtbatteryinfolastest:largeDatalist')"> 控制显示--> <div id="index" style="overflow-y: hidden;"> <dv-full-screen-container class="bg"> <dv-loading v-if="loading">Loading...</dv-loading> <div v-else class="host-body"> <div class="d-flex jc-center"> <dv-decoration-10 style="width:33.3%;height:.0625rem;" /> <div class="d-flex jc-center"> <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> <div class="title"> <div ><img @click="back" src="~@/assets/img/logoNew6.png" style="width:3.75rem;margin-top:-0.1rem;margin-bottom:0.175rem;"></div> <div style="margin-top:0.25rem;"><span class="title-text" style='font-family: "Microsoft YaHei";font-size: 26px;color:#fff;width:100%;'>欣云电池孪生管理平台</span> <dv-decoration-6 class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']" style="width:3.125rem;height:.1rem;" /> </div> </div> <dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> </div> <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" /> </div> <!-- 第二行 --> <div class="d-flex jc-between px-2"> <div class="d-flex" style="width: 40%"> <div id="index" class="react-right ml-4" style="width: 6.25rem; text-align: left;background-color: #0f1325;" > <!-- <img :src="dataWeather.icontemp" alt=""> --> <!-- 🌤⛅🌥🌦☁🌧⛈🌩☀🌞⚡❄🌨☃⛄🌬💨🌪🌫🌈☔💧💦🌊🧣🧤🌂☂🔅🔆🥵🥶🧊ϟ☀☁☂☃☄☉☼☽☾♨❄❅❆ --> <div class="text dataweather"> <div style="font-size:0.2rem;width:100%"> {{dataWeather.city}} {{dataWeather.weathertemp}} <span v-if="dataWeather.weathertemp === '晴'">🔆</span> <span v-else-if="dataWeather.weathertemp.indexOf('阴') !== -1 ">☁</span> <span v-else-if="dataWeather.weathertemp.indexOf('雨') !== -1 ">🌧</span> <span v-else-if="dataWeather.weathertemp.indexOf('云') !== -1 ">🌤</span> <span v-else-if="dataWeather.weathertemp.indexOf('电') !== -1 ">⚡</span> <span v-else-if="dataWeather.weathertemp.indexOf('雪') !== -1 ">❄</span> <span v-else-if="dataWeather.weathertemp.indexOf('夜') !== -1 ">☽</span> <span v-else>⛅</span> {{dataWeather.peraturetemp}} </div> </div> <span class="react-before"></span> <div class="text" style="float:right;margin-right:20%"> <!-- <el-button type="primary" icon="el-icon-arrow-left" class="back" size="mini" @click="back" circle></el-button> --> <!-- <el-button type="primary" class="back" size="mini" @click="back">返回管理系统</el-button> --> <!-- <i class="el-icon-back" @click="back"></i> --> </div> <!-- <span class="text" style="cursor:pointer" @click="back">返回管理系统</span> --> </div> <div class="react-right bg-color-blue ml-3" > <!-- style="background-color: #0f1325;" --> <!-- <span class="text colorBlue">数据分析2</span> --> </div> </div> <div style="width: 40%" class="d-flex"> <div class="react-left bg-color-blue mr-3"> <!-- <span class="text fw-b">vue-big-screen</span> --> </div> <div class="react-left mr-4" style="width: 6.25rem; background-color: #0f1325; text-align: right;font-size:0.2rem;width:100%" > <div class="text" style="float:left;margin-left:48%;margin-top:0.3%;display: flex;"> <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> --> <!-- <i class="el-icon-full-screen">暂无</i> --> <!-- <i @click="toggleFullScreen" class="el-icon-full-screen" style="font-weight:550;margin-right:0.1rem;">全屏</i> --> <div @click="back"><icon-svg name="shouye" class="el-icon-full-screen" style="width: 1.2em; height: 1.2em;"></icon-svg></div> <div @click="toggleFullScreen" style="margin-left:0.1rem;"><icon-svg name="chefangda" class="el-icon-full-screen" style="width: 1.12em; height: 1.12em;"></icon-svg></div> <!-- <div><i class="el-icon-back" @click="back"></i></div> --> </div> <span class="react-after"></span> <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span> </div> </div> </div> <div class="body-box2"> <!-- 第三行数据 --> <div class="content-box2"> <!-- 左侧 --> <div> <dv-border-box-12> <left1 /> <!-- <left2 /> <left3 /> --> </dv-border-box-12> <dv-border-box-12> <left2 /> </dv-border-box-12> <dv-border-box-12> <left3 /> </dv-border-box-12> </div> <!-- 中间 --> <div> <dv-border-box-12> <!-- <center1 /> --> <chinaMap ref="chinaMap"/> <!-- <china /> --> <!-- <centerBottom /> --> </dv-border-box-12> <dv-border-box-12> <centerBottom /> </dv-border-box-12> </div> <!-- 右侧 --> <div> <dv-border-box-12> <right1 /> <!-- <right2 /> <right3 /> --> </dv-border-box-12> <dv-border-box-12> <right2 /> </dv-border-box-12> <dv-border-box-12> <right3 /> </dv-border-box-12> </div> </div> </div> </div> </dv-full-screen-container> </div> </template> <script> import { formatTime } from '../../utils/index.js' import {weatherOption} from '../../config/weatherOption' import left1 from "./map-left1" import left2 from "./map-left2" // import left3 from "./map-left3" import left3 from "./sina_left3" import center1 from "./center1" import centerBottom from "./centerBottomNew" import right1 from "./map-right1" import right2 from "./map-right2" import right3 from "./map-right3" import chinaMap from "./chinaMapNew" import china from "./china" import Screenfull from '@/components/Screenfull' export default { data () { return { loading: true, dateDay: null, dateYear: null, dateWeek: null, weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dataWeather: { city: '金华市', dayweather: '晴', nightweather: '多云', weathertemp: '晴', // 根据时间判断选白天还是晚上的天气 nighttemp: '25℃', daytemp: '35℃', peraturetemp: '25℃~35℃', // 根据时间判断选白天还是晚上的温度 icontemp: 'https://cdn.heweather.com/cond_icon/100.png', } } }, // 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。 // 解决办法:使用Vue组件切换过程钩子activated(keep-alive组件激活时调用),而不是挂载钩子mounted activated: function() { //document.html.style.overflow_y = 'hidden'; // alert('进来了...') this.hiddenbar() }, components: { // centerLeft1, // centerLeft2, // centerRight1, // centerRight2, // center, // centerBottom, // bottomLeft, // bottomRight, // centerLeft12, // centerLeft22 left1, left2, left3, center1, centerBottom, right1, right2, right3, chinaMap, china, Screenfull }, mounted () { this.timeFn(); this.requestGetWeather(); this.cancelLoading(); this.hiddenbar(); }, methods: { // 获取天气 requestGetWeather() { // alert("获取天气") $.get({ //这里的url不能写到data对象的外面 url: 'https://api.asilu.com/weather_v2/', dataType: 'jsonp', // 请求方式为jsonp success: (data) => { // alert("天气data.status="+data.status) if (data.status === '1') { let currTime = new Date().getHours(); let dailyForecast = data.forecasts[0].casts[0]; let city = data.forecasts[0].city; let daytemp = dailyForecast.daytemp + '℃'; let nighttemp = dailyForecast.nighttemp + '℃'; let weathertemp = ''; let peraturetemp = ''; if ((currTime >= 6) && (currTime < 18)) { weathertemp = dailyForecast.dayweather; peraturetemp = dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃"; } else { weathertemp = dailyForecast.nightweather; peraturetemp = dailyForecast.daytemp + "℃~" + dailyForecast.nighttemp + "℃"; } let icontemp = 'https://cdn.heweather.com/cond_icon/' + weatherOption.weatherCode[weathertemp] + '.png'; this.dataWeather = {city, daytemp, nighttemp, weathertemp, peraturetemp, icontemp} // alert(city+"天气") } } }) }, timeFn () { setInterval(() => { this.dateDay = formatTime(new Date(), 'HH: mm: ss'); this.dateYear = formatTime(new Date(), 'yyyy-MM-dd'); this.dateWeek = this.weekday[new Date().getDay()]; }, 1000) }, cancelLoading () { setTimeout(() => { this.loading = false; }, 2000); }, hiddenbar () { // navbar是顶部栏,根据是否全屏让顶部栏高度为0不展示或50展示出来 var navbar = document.getElementById('navbar') navbar.style.display="none"; navbar.style.height = 0+'px' // screenfull.isFullscreen ? 0 + 'px' : 50 + 'px' // sidebar是侧边栏距离顶部距离,如果不设置,可能会空出一块,看自己代码是什么样的 var sidebar = document.getElementById('sidebar') sidebar.style.display="none" // this.$refs.chinaMap.getDataBtsToday(); // 调用子类的方法 this.$refs.chinaMap.getMapData(); // 调用子类的方法 // 刷新 location.reload() // this.$router.go(0) }, back(){ const routeData = this.$router.resolve({ name: 'home' }); window.open(routeData.href, '_blank'); // this.$refs.chinaMap.myChartChinaClear(); // 调用子类的方法 // // navbar是顶部栏,根据是否全屏让顶部栏高度为0不展示或50展示出来 // var navbar = document.getElementById('navbar') // navbar.style.display="block" // // navbar.style.height = 0+'px' // screenfull.isFullscreen ? 0 + 'px' : 50 + 'px' // // sidebar是侧边栏距离顶部距离,如果不设置,可能会空出一块,看自己代码是什么样的 // var sidebar = document.getElementById('sidebar') // sidebar.style.display="block" // // this.$router.go(-1);//返回上一层 // this.$router.push({ name: 'home' }) // // this.$router.replace({ name: 'home' }) }, //这里单独的调用全屏 ================================= toggleFullScreen() { if (!document.fullscreenElement) { this.enterFullScreen(); } else { this.exitFullScreen(); } }, enterFullScreen() { let element = document.documentElement; if (element.requestFullscreen) { element.requestFullscreen().then(() => { this.adjustFullScreenStyles(); }); } }, exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen().then(() => { this.removeFullScreenStyles(); }); } }, adjustFullScreenStyles() { // 添加全屏时需要的样式,比如全屏时的背景色等 document.html.style.overflow = 'hidden'; // 移除默认边距 document.getElementById('index').style.overflow = 'hidden'; document.body.style.backgroundColor = '#000'; document.body.style.overflow_x = 'hidden'; // 隐藏滚动条 document.body.style.overflow_y = 'hidden'; // 隐藏滚动条 document.body.style.overflow = 'hidden'; // 隐藏滚动条 document.body.style.margin = '0'; // 移除默认边距 //alert('进入全屏模式') }, removeFullScreenStyles() { // 移除全屏时添加的样式 document.body.style.backgroundColor = ''; document.body.style.overflow = ''; // 显示滚动条 document.body.style.margin = ''; // 恢复默认边距 // document.html.style.overflow_y = 'hidden'; // 移除默认边距 } // ======================================== } } </script> <style lang="scss"> @import '../../assets/scss/index.scss' // </style> html { // /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ overflow-y: none; -ms-overflow-style:none; // /*火狐下隐藏滚动条*/ overflow:-moz-scrollbars-none; } body { margin: 0; overflow-y: scroll; overflow-x: hidden; width: calc(100% + 17px); /* 17px是大多数浏览器滚动条的默认宽度 */ } /*Chrome下隐藏滚动条,溢出可以透明滚动*/ // html::-webkit-scrollbar{width:0px} // <style lang="scss" scoped> #index { .dv-border-box-10, .dv-border-box-12, .dv-border-box-13{ height: inherit; } .dataweather { z-index: 999; position: absolute; // top: .2rem; // left: 1.1rem; font-size: .22rem; color: #fff; img { width: .3rem; height: .3rem; filter: brightness(3); vertical-align: bottom; margin-bottom:.18rem; } } .datatime { z-index: 999; position: absolute; top: .3rem; right: 1.1rem; font-size: .22rem; color: #fff; } .topNumber { height: 100%; display: flex; justify-content: space-around; align-items: center } .right-menu-item { display: inline-block; padding: 0 8px; height: 100%; font-size: 18px; color: #5a5e66; vertical-align: text-bottom; &.hover-effect { cursor: pointer; transition: background .3s; &:hover { background: rgba(0, 0, 0, .025) } } } } </style>表格展示顺序改为将工作状态按照充电、放电、搁置、离线排列显示
最新发布
08-19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值