關(guān)于JavaScript奇怪又實(shí)用的六個姿勢
今天給大家?guī)硪恍㎎avaScript的冷知識,可能你有所耳聞,但也有可能會讓你大吃一驚。廢話不多說,一起來看看吧!
一、解構(gòu)小技巧
平常我們需要用到一個嵌套多層的對象中某些屬性,會將其解構(gòu)出來使用
let obj = {
part1: {
name: '零一',
age: 23
}
}
// 解構(gòu)
const { part1: { name, age } } = obj
// 使用
console.log(name, age) // 零一 23
這種情況下,你把 name 和 age 從 part1 里解構(gòu)出來了以后,你就無法使用變量 obj 中的 part1 屬性了,如:
// .... 省略
const { part1: { name, age } } = obj
console.log(part1) // Uncaught ReferenceError: part1 is not defined
其實(shí)你可以多次解構(gòu),如:
// .... 省略
const { part1: { name, age }, part1 } = obj
console.log(part1) // {name: "零一", age: 23}
二、數(shù)字分隔符
有時你會在文件中定義一個數(shù)字常量
const myMoney = 1000000000000
這么多個 0 ,1、2 ... 6、7 ... 數(shù)暈了都,怎么辦?
數(shù)字分隔符整起來!
const myMoney = 1_000_000_000_000 console.log(myMoney) // 1000000000000
這樣寫是沒問題的,而且數(shù)字分割開后也更直觀??!
三、try...catch...finally 誰厲害?
普通函數(shù)調(diào)用中,return 一般會提前結(jié)束函數(shù)的執(zhí)行
function demo () {
return 1
console.log('我是零一')
return 2
}
console.log(demo()) // 1
而在 try...catch...finally 中,return 就不會提前結(jié)束執(zhí)行
function demo () {
try {
return 1
} catch (err) {
console.log(err)
return 2
} finally {
return 3
}
}
console.log(demo()) // 返回什么??
這個程序會返回什么呢?思考一下
Tow hours Later~
答案是:3
最后得出結(jié)論,還是 finally 比較厲害
那么我們可以搞一些騷操作
function demo () {
try {
return 1
} catch (err) {
console.log(err)
return 2
} finally {
try {
return 3
} finally {
return 4
}
}
}
console.log(demo()) // 返回 4
四、獲取當(dāng)前調(diào)用棧
function firstFunction() { secondFunction(); }
function secondFunction() { thridFunction(); }
function thridFunction() { console.log(new Error().stack); }
firstFunction();
//=> Error
// at thridFunction (<anonymous>:2:17)
// at secondFunction (<anonymous>:5:5)
// at firstFunction (<anonymous>:8:5)
// at <anonymous>:10:1
new Error().stack 這樣就能隨時獲取到當(dāng)前代碼執(zhí)行的調(diào)用棧信息,也不失一種調(diào)試代碼的辦法
五、一行代碼生成隨機(jī)字符串
我最初學(xué)js時,想自己實(shí)現(xiàn)一個隨機(jī)生成字符串的函數(shù),是這么搞的
function hash () {
let s = ''
const strs = [
'a', 'b', 'c', 'd', 'e', 'f', 'g',
'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u',
'v', 'w', 'x', 'y', 'z', '0', '1',
'2', '3', '4', '5', '6', '7', '8',
'9',
]
for(let i = 0; i < 10; i++) {
s += strs[Math.floor(Math.random() * strs.length)]
}
return s
}
hash() // 'www7v2if9r'
真麻煩??!我光寫26個字母和10個數(shù)字就寫了半天(當(dāng)然也可以用ASCII碼來實(shí)現(xiàn),會更方便點(diǎn))
接下來介紹一個方法,只需 一行超短代碼 即可實(shí)現(xiàn) "隨機(jī)生成字符串" 的功能
const str = Math.random().toString(36).substr(2, 10); console.log(str); // 'w5jetivt7e'
我們同樣獲得了一個10位數(shù)的隨機(jī)字符串,這太酷了😎,跟我寫的那個比起來,簡直不要太爽
先是 Math.random() 生成 [0, 1) 的數(shù),也就是 0.123312、0.982931之類的,然后調(diào)用 number 的 toString方法將其轉(zhuǎn)換成36進(jìn)制的,按照MDN的說法,36進(jìn)制的轉(zhuǎn)換應(yīng)該是包含了字母 a~z 和 數(shù)字0~9的,因?yàn)檫@樣生成的是 0.89kjna21sa 類似這樣的,所以要截取一下小數(shù)部分,即從索引 2 開始截取10個字符就是我們想要的隨機(jī)字符串了
很多開源庫都使用此方式為DOM元素創(chuàng)建隨機(jī)ID。
六、最快獲取dom的方法
HTML中帶有 id 屬性的元素,都會被全局的 ID 同名變量所引用
<div id="zero2one"></div>
原本獲取 dom 是這樣的
const el = document.getElementById('zero2one')
console.log(el) // <div id="zero2one"></div>
現(xiàn)在可以這樣
console.log(zero2one) // <div id="zero2one"></div>
是不是很方便 ^-^
總結(jié)
到此這篇關(guān)于JavaScript奇怪又實(shí)用的六個姿勢的文章就介紹到這了,更多相關(guān)JavaScript實(shí)用的姿勢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生javascript自定義input[type=radio]效果示例
這篇文章主要介紹了原生javascript自定義input[type=radio]效果,結(jié)合實(shí)例形式分析了javascript模擬form表單中radio效果的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析
這篇文章主要介紹了ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了ES6中類(Class)和繼承(Extends)的基本概念、語法、使用方法與注意事項(xiàng),需要的朋友可以參考下2017-05-05
javascript特效實(shí)現(xiàn)——當(dāng)前時間和倒計時效果的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript特效實(shí)現(xiàn)——當(dāng)前時間和倒計時效果的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
javascript的replace方法結(jié)合正則使用實(shí)例總結(jié)
這篇文章主要介紹了javascript的replace方法結(jié)合正則使用技巧,實(shí)例總結(jié)了replace方法配合正則表達(dá)式進(jìn)行變量、分組、字符等替換技巧,需要的朋友可以參考下2016-06-06
JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時間的方法
這篇文章主要介紹了JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時間的方法,實(shí)例分析了javascript操作時間及DOM節(jié)點(diǎn)實(shí)現(xiàn)定時觸發(fā)的技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-03-03
js?實(shí)現(xiàn)picker?選擇器示例詳解
這篇文章主要為大家介紹了js?實(shí)現(xiàn)picker?選擇器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
D3.js實(shí)現(xiàn)簡潔實(shí)用的動態(tài)儀表盤的示例
本篇文章主要介紹了D3.js實(shí)現(xiàn)簡潔實(shí)用的動態(tài)儀表盤的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04

