快捷導(dǎo)航

分享一些不常見(jiàn)卻很實(shí)用的JS技巧

更新時(shí)間：2021年11月02日 15:24:00 作者：harry_yang

有些代碼,需要的時(shí)候能寫(xiě)的出來(lái),但是也需要時(shí)間,如果有的東西長(zhǎng)時(shí)間不接觸,再次看的時(shí)候也會(huì)感覺(jué)很陌生,這篇文章主要給大家介紹了一些不常見(jiàn)卻很實(shí)用的JS技巧,既可以作為一個(gè)知識(shí)的積累,又可以作為閑暇時(shí)打發(fā)時(shí)間寫(xiě)寫(xiě)代碼的記錄,需要的朋友可以參考下

前言

編程語(yǔ)言通常暗藏著各種技巧，熟練使用這些技巧可以提高開(kāi)發(fā)效率。JavaScript 就是一門(mén)技巧性很強(qiáng)的語(yǔ)言，掌握常見(jiàn)的語(yǔ)法技巧不但可以加深對(duì)語(yǔ)言特性的理解，還可以簡(jiǎn)化代碼，提高編碼效率。

下面是列出一些 JavaScript 有用的技巧，相信總有一天會(huì)對(duì)你有所幫助。

1、數(shù)組去重

const numbers = [1, 2, 3, 4, 4, 1]
console.log([...new Set(numbers)]) // [1, 2, 3, 4]

2、從數(shù)組中過(guò)濾所有虛值

const myArray = [1, undefined, null, 2, NaN, true, false, 3]
console.log(myArray.filter(Boolean)) // [1, 2, true, 3]

3、將字符串轉(zhuǎn)換為數(shù)字

const str = '123'
const num = +str
console.log(typeof num) // number

4、將數(shù)字轉(zhuǎn)換為字符串

const num = 123;
console.log(num + ''); // '123'

5、使用 && 符號(hào)簡(jiǎn)寫(xiě)條件判斷語(yǔ)句

// 普通寫(xiě)法
if (condition) {
    doSomething()
}

// 簡(jiǎn)寫(xiě)
condition && doSomething()

6、console.table() 打印特定格式的表格

// [] 里面指的是可選參數(shù)\
console.table(data [, columns]);

參數(shù)：

data 表示要顯示的數(shù)據(jù)。必須是數(shù)組或?qū)ο蟆?/li>
columns 表示一個(gè)包含列的名稱(chēng)的數(shù)組。

實(shí)例：

function Goods(name, price) {
    this.name = name
    this.price = price
}

const book = new Goods("《webpack 入門(mén)到放棄》", "¥ 9.00")
const knowledge = new Goods("《前端的自我修養(yǎng)》", "¥ 99.00")
const ebook = new Goods("《node.js 課程》", "¥ 199.00")

console.table([book, knowledge, ebook], ["name", "price"])

打印結(jié)果：

7、如果你想添加一個(gè)事件監(jiān)聽(tīng)器并且只運(yùn)行一次，你可以使用 once 選項(xiàng)：

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});

8、為了提高數(shù)字的可讀性，您可以使用下劃線作為分隔符：

const num = 2_000_000_000
console.log(num) // 2000000000

9、使用 dataset 屬性訪問(wèn)元素的自定義數(shù)據(jù)屬性 (data-*)：

<div id="card" data-name="FE" data-number="5" data-label="listCard">
    卡片信息
</div>

<script>
    const el = document.getElementById('card')

    console.log(el.dataset)
    // { name: "FE", number: "5", label: "listCard" }
  
    console.log(el.dataset.name) // "FE"
    console.log(el.dataset.number) // "5"
    console.log(el.dataset.label) // "listCard"
</script>

總結(jié)

到此這篇關(guān)于實(shí)用JS技巧的文章就介紹到這了,更多相關(guān)實(shí)用的JS技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: