电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript 裝逼指南(js另類寫法)

瀏覽:152日期:2023-10-28 17:31:15

下面就是具體的寫法,建議大家逐個測試一下,加深印象

轉(zhuǎn)Boolean類型

這個較為常用。

!!’a’//true

通過兩個取反,可以強制轉(zhuǎn)換為Boolean類型。

!!是將表達式強制轉(zhuǎn)化為bool值的運算,運算結(jié)果為true或false,表達式是什么值,結(jié)果就是對應(yīng)的bool值,不再取非。

不是取非再取非的意思!!!

!!false=false; 要注意false和“false” 的區(qū)別!!!!!

!!'false'=true;

!!true=true;

!!(NaN || undefined || null || 0 || ’ ’)=false;

轉(zhuǎn)Number類型

String轉(zhuǎn)化為Number;日期輸出時間戳。

+’45’//45 +new Date//13位時間戳

會自動轉(zhuǎn)化為Number類型的。日期取時間戳不用new Date().getTime()。

JavaScript 裝逼指南(js另類寫法)

parseInt

parseInt這個函數(shù)太普通了,怎么能裝逼。答案是~~,這種方法還可以將字符串轉(zhuǎn)換成數(shù)字類型。向下取整。

~~3.14159//3 ~~’5.678’//5 -2.33 | 0 //-2 2.33 >> 0 //2

原理是~是一個叫做按位非的操作,會返回數(shù)值的反碼,兩次取反就是原數(shù)。|為位運算符,兩個位只要有一個為1,那么結(jié)果都為1,否則就為0。>>運算符執(zhí)行有符號右移位運算。都是二進制操作。 原因在于JavaScript中的number都是double類型的,在位操作的時候要轉(zhuǎn)化成int。

Hex

十六進制操作。其實就是一個Array.prototype.toString(16)的用法看到這個詞腦袋里冒出的肯定是CSS的顏色。

做到隨機的話可以這樣

(~~(Math.random()*(1<<24))).toString(16)

底下的原文鏈接非常建議去讀一下,后三個技巧都是在那里學(xué)到的。«左移操作。這個操作特別叼。一般得玩 C 玩得多的,這個操作會懂一些。一般半路出家的前端碼農(nóng)可能不太了解(說的是我 ☹)。這個也是二進制操作。將數(shù)值二進制左移解釋上面的1<<24的操作。其實是1左移24位。000000000000000000000001左移24位,變成了1000000000000000000000000不信?試著在console粘貼下面的代碼

parseInt(’1000000000000000000000000’, 2) === (1 << 24)

其實還有一種更容易理解的方法來解釋

Math.pow(2,24) === (1 << 24)

因為是二進制操作,所以速度是很快的。

短路表達式,棄用if-else

反面示例:

if () { // ... } else if () { // ... } else { // ... }

用 || 和 &&來簡化if-else 。有時候用 !! 操作符也能簡化if-else模式。例如這樣:

let a = b || 1;//b為真,a=b;b為假,a=1; let c = b && 1;//b為真,c=1;b為假,c=b; // 使用!!符號 let isValid = !!(value && value !== ’error’);

“!”是取反操作,兩個“!”自然是負負得正了。比較常用的是||。

另外一種undefined

let data = void 0; // undefined

void 運算符 對給定的表達式進行求值,然后返回 undefined。那為什么要用void 0,不直接undefined呢? undefined在javascript中不是保留字。因此在IE5.5~8中我們可以將其當(dāng)作變量那樣對其賦值(IE9+及其他現(xiàn)代瀏覽器中賦值給undefined將無效)。采用void方式獲取undefined更準(zhǔn)確。

保留指定位數(shù)的小數(shù)點

let num = 2.443242342; num = num.toFixed(4); //'2.4432'

注意, toFixed() 方法返回的是字符串而不是一個數(shù)字。

單行寫一個評級組件

let rate = 3; '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate);//'★★★☆☆'

slice() 方法可提取字符串的某個部分,并以新的字符串返回被提取的部分stringObject.slice(start,end)

JavaScript 裝逼指南(js另類寫法)

金錢格式化

//正則 let cash = ’1234567890’ cash.replace(/B(?=(d{3})+(?!d))/g, ’,’);//'1,234,567,890' //非正則的優(yōu)雅實現(xiàn) function formatCash(str) { return str.split(’’).reverse().reduce((prev, next, index) => { return ((index % 3) ? next : (next + ’,’)) + prev }) } formatCash(cash);//'1,234,567,890'

非正則的方法,先把字符串轉(zhuǎn)成了數(shù)組,反轉(zhuǎn)了一下變成了[0,9,8,7,6,5,4,3,2,1]。再對新的數(shù)組進行reduce操作,數(shù)組元素位置除3取余,是3的倍數(shù)的位置就增加’,’,最后返回累加的字符串。

標(biāo)準(zhǔn)JSON的深拷貝

let a = { a1: 1, b1: { c: 1, d: 2 } }; let b=JSON.parse(JSON.stringify(a)); b;//{a1: 1, b1: {…}}

不考慮IE的情況下,標(biāo)準(zhǔn)JSON格式的對象蠻實用,不過對于undefined和function的會忽略掉。

數(shù)組去重

阿里面試官,喜歡問這個問題。

let array=[1, '1', 2, 1, 1, 3]; //拓展運算符(...)內(nèi)部使用for...of循環(huán) [...new Set(array)];//[1, '1', 2, 3] //利用Array.from將Set結(jié)構(gòu)轉(zhuǎn)換成數(shù)組 Array.from(new Set(array));//[1, '1', 2, 3]

傳統(tǒng)的方法,循環(huán)遍歷:排序sort()后前一下與后一個比較==;在數(shù)組中用indexOf判斷,利用includes,利用filter;這些方法感覺都過時了,還是用ES6中利用Set去重比較牛。

取數(shù)組中的最大值和最小值

Math.max方法可以求出給定參數(shù)中最大的數(shù)。

Math.max(’1’,’2’,’3.1’,’3.2’);//3.2 Math.min(1,0,-1);//-1

但如果是數(shù)組,就不能這樣調(diào)用了。此時就用到了apply方法。Function.apply()是JS的一個OOP特性,一般用來模擬繼承和擴展this的用途。所有函數(shù)都有apply(作用域鏈,參數(shù))這個方法,當(dāng)作用域鏈為null時,默認為上文,這個函數(shù)的“參數(shù)”,接收一個數(shù)組。

let arr = [’1’,’2’,’3.1’,’3.2’,0,-1]; //用apply方法 Math.max.apply(null, arr);//3.2 Math.min.apply(Math, arr);//-1 //用拓展運算符 Math.max(...arr);//3.2 Math.min(...arr);//-1IIFE

這個其實非常有實用價值,不算是裝逼。只是其他語言里沒有這么玩的,給不太了解js的同學(xué)看那可牛逼大了。

(function(arg) { // do something})(arg)

實用價值在于可以防止全局污染。不過現(xiàn)在隨著ES2015的普及已經(jīng)沒什么必要用這個了,我相信五年之后,這種寫法就會逐漸沒落。

自己干五年,在實習(xí)生面前裝逼用也是蠻不錯的嘛~

BTW

[].forEach.call($$('*'),function(a){ a.style.outline='1px solid #'+(~~(Math.random()*(1<<24))).toString(16)})

翻譯成正常語言就是這樣的

Array.prototype.forEach.call(document.querySelectorAll(’*’), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)Event

事件響應(yīng)前端肯定都寫爛了,一般來說如何寫一個計數(shù)器呢?

var times = 0var foo = document.querySelector(’.foo’)foo.addEventListener(’click’, function() { times++ console.log(times)}, false)

好像是沒什么問題哦,但是!變量times為什么放在外面,就用了一次放在外面,命名沖突了怎么辦,或者萬一在外面修改了怎么辦。

這個時候這樣一個事件監(jiān)聽代碼就比較牛逼了

foo.addEventListener(’click’, (function() { var times = 0 return function() { times++ console.log(times) }})(), false)

怎么樣,是不是立刻感覺不一樣了。瞬間逼格高了起來!

通過創(chuàng)建一個閉包,把times封裝到里面,然后返回函數(shù)。這個用法不太常見。

以上就是JavaScript 裝逼指南(js另類寫法)的詳細內(nèi)容,更多關(guān)于js裝逼寫法的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 防渗土工膜|污水处理防渗膜|垃圾填埋场防渗膜-泰安佳路通工程材料有限公司 | 电竞学校_电子竞技培训学校学院-梦竞未来电竞学校官网 | IWIS链条代理-ALPS耦合透镜-硅烷预处理剂-上海顶楚电子有限公司 lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 成都热收缩包装机_袖口式膜包机_高速塑封机价格_全自动封切机器_大型套膜机厂家 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 中矗模型-深圳中矗模型设计有限公司| 爱科技iMobile-专业的科技资讯信息分享网站| 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | 预制舱-电力集装箱预制舱-模块化预制舱生产厂家-腾达电器设备 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | Q361F全焊接球阀,200X减压稳压阀,ZJHP气动单座调节阀-上海戎钛 | 空压机网_《压缩机》杂志 | 防爆电机_ybx3系列电机_河南省南洋防爆电机有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 红立方品牌应急包/急救包加盟,小成本好项目代理_应急/消防/户外用品加盟_应急好项目加盟_新奇特项目招商 - 中红方宁(北京) 供应链有限公司 | 「钾冰晶石」氟铝酸钾_冰晶石_氟铝酸钠「价格用途」-亚铝氟化物厂家 | 安德建奇火花机-阿奇夏米尔慢走丝|高维|发那科-北京杰森柏汇 | 儿童乐园|游乐场|淘气堡招商加盟|室内儿童游乐园配套设备|生产厂家|开心哈乐儿童乐园 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 兰州UPS电源,兰州山特UPS-兰州万胜商贸 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 福建成考网-福建成人高考网| 科研ELISA试剂盒,酶联免疫检测试剂盒,昆虫_植物ELISA酶免试剂盒-上海仁捷生物科技有限公司 | 手持气象站_便携式气象站_农业气象站_负氧离子监测站-山东万象环境 | 成都热收缩包装机_袖口式膜包机_高速塑封机价格_全自动封切机器_大型套膜机厂家 | 磁力抛光机_磁力研磨机_磁力去毛刺机-冠古设备厂家|维修|租赁【官网】 | 广东燎了网络科技有限公司官网-网站建设-珠海网络推广-高端营销型外贸网站建设-珠海专业h5建站公司「了了网」 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 首页-浙江橙树网络技术有限公司 石磨面粉机|石磨面粉机械|石磨面粉机组|石磨面粉成套设备-河南成立粮油机械有限公司 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | Boden齿轮油泵-ketai齿轮泵-yuken油研-无锡新立液压有限公司 | 网站建设,北京网站建设,北京网站建设公司,网站系统开发,北京网站制作公司,响应式网站,做网站公司,海淀做网站,朝阳做网站,昌平做网站,建站公司 | 聚丙烯酰胺PAM-聚合氯化铝PAC-絮凝剂-河南博旭环保科技有限公司 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 | 翅片管散热器价格_钢制暖气片报价_钢制板式散热器厂家「河北冀春暖气片有限公司」 |