Редкие, но полезные трюки JS

внешний интерфейс JavaScript

1. Дедупликация массива

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

2. Отфильтровать все фиктивные значения из массива

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

3. Преобразовать строку в число

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

4. Преобразование чисел в строки

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

5. Используйте символ && для сокращения утверждений условного суждения.

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

// 简写
condition && doSomething()

6. 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"])

распечатать результат:

345.png

7. Если вы хотите добавить прослушиватель событий и запустить его только один раз, вы можете использоватьonceОпции:

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

8. Чтобы улучшить читаемость чисел, вы можете использовать символы подчеркивания в качестве разделителей:

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

9. Используйте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>
Категории