分享一些不常見卻很實用的JS技巧

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

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

前言

編程語言通常暗藏著各種技巧，熟練使用這些技巧可以提高開發(fā)效率。JavaScript 就是一門技巧性很強的語言，掌握常見的語法技巧不但可以加深對語言特性的理解，還可以簡化代碼，提高編碼效率。

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

1、數(shù)組去重

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

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

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

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

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

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

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

5、使用 && 符號簡寫條件判斷語句

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

// 簡寫
condition && doSomething()

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

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

參數(shù)：

data 表示要顯示的數(shù)據(jù)。必須是數(shù)組或對象。
columns 表示一個包含列的名稱的數(shù)組。

實例：

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

const book = new Goods("《webpack 入門到放棄》", "¥ 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"])

打印結果：

7、如果你想添加一個事件監(jiān)聽器并且只運行一次，你可以使用 once 選項：

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 屬性訪問元素的自定義數(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>

總結

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

您可能感興趣的文章: