分享一些不常見卻很實用的JS技巧
阿新 • • 發佈：2021-11-04
前言
語言通常暗藏著各種技巧，熟練使用這些技巧可以提高開發效率。 就是一門技巧性很強的語言，掌握常見的語法技巧不但可以加深對語言特性的理解，還可以簡化程式碼，提高編碼效率。
下面是列出一些 Script 有用的技巧，相信總有一天會對你有所幫助。
1、陣列去重
constnumbers=[1,2,3,4,1] console.log([...newSet(numbers)])//[1,4]
2、從陣列中過濾所有虛值
constmyArray=[1,undefined,null,NaN,true,false,3] console.log(myArray.filter(Boolean))//[1,3]
3、將字串轉換為數字
conststr='123' const num = +str console.log(typeof num)//number
4、將數字轉換為字串
constnum=123; console.log(num+'');//'123'
5、使用 && 符號簡寫條件判斷語句
//普通寫法
if(condition){
doSomething()
}
//簡寫
condition&&; www.cppcns.com;doSomething()
6、console.table() 列印特定格式的表格
//[]裡面指的是可選引數\ console.table(data[,columns]);
引數：
- data 表示要顯示的資料。必須是陣列或物件。
- columns 表示一個包含列的名稱的陣列。
例項：
function Goods(name,price) {
this.name = name
this.price = price
}
const book = new Good程式設計客棧s("《webpack 入門到放棄》","¥ 9.00")
const knowledge = new Goods("《前端的自我修養》","¥ 99.00")
const ebook = new Goods("《node. 課程》","¥ 199.00")
console.table([book,knowledge,ebook],["name","price"])
列印結果：
7、如果你想新增一個事件監聽器並且只執行一次，你可以使用once選項：
element.addEventListener('click',()=>console.log('Irunonlyonce'),{
once:true
});
8、為了提高數字的可讀性，您可以使用下劃線作為分隔符：
constnum=2_000_000_000 console.log(num)//2000000000
9、使用dataset屬性訪問元素的自定義資料屬性 (data-*)：
<divid="card"data-name="FE"data-number="5"data-label="listCard">
卡片資訊
</div>
<script>
constel=document.getElementById('card')
console.log(el.dataset)
//{name:"FE",number:"5",label:"listCard"}
&http://www.cppcns.comnbsp;console.log(el.dataset.name)//"FE"
console.log(el.dataset.number)//"5"
console.log(el.dataset.label)//"listCard"
</script>
總結
到此這篇關於實用JS技巧的文章就介紹到這了,更多相關實用的JS技巧內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！