Share some uncommon but useful JS techniques

Preface

Programming languages ​​usually contain various hidden tricks, and proficient use of these tricks can improve development efficiency. JavaScript is a highly technical language. Mastering common grammatical techniques can not only deepen your understanding of language features, but also simplify code and improve coding efficiency.

Here is a list of some useful JavaScript tips that I believe will be helpful to you one day.

1. Array deduplication

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

2. Filter all false values ​​from the array

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

3. Convert a string to a number

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

4. Convert numbers to strings

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

5. Use the && symbol to abbreviate conditional statements

// Normal writing if (condition) {
    doSomething()
}

// Shorthand for condition && doSomething()

6. console.table() prints a table in a specific format

// [] refers to optional parameters\
console.table(data [, columns]);

parameter:

• data indicates the data to be displayed. Must be an array or object.
• columns represents an array containing the names of the columns.

Examples:

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

const book = new Goods("《Webpack Getting Started to Abandonment》", "¥ 9.00")
const knowledge = new Goods("《Front-end Self-cultivation》", "¥ 99.00")
const ebook = new Goods("node.js course", "¥ 199.00")

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

Print results:

7. If you want to add an event listener and run it only once, you can use the once option:

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

8. To improve the readability of numbers, you can use underscores as separators:

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

9. Use the dataset attribute to access the element's custom data attributes (data-*):

<div id="card" data-name="FE" data-number="5" data-label="listCard">
    Card information</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>

Summarize

This is the end of this article about practical JS skills. For more relevant practical JS skills, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!