实用的js技巧(二)

137 阅读1分钟

使用 && 符号简写条件判断语句

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

// 简写
condition && doSomething()

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

// [] 里面指的是可选参数\
console.table(data [, columns]);

参数:

  • data 表示要显示的数据。必须是数组或对象。
  • columns 表示一个包含列的名称的数组。

实例:

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

const book = new Goods("《webpack 入门到放弃》", "¥ 9.00")
const knowledge = new Goods("《前端的自我修养》", "¥ 99.00")
const ebook = new Goods("《node.js 课程》", "¥ 199.00")

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

使用 dataset 属性访问元素的自定义数据属性 (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>