What are the skills of using JS

Today, the editor will share with you the relevant knowledge points about the skills of using JS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

I. arrays out of order

When using algorithms that require some degree of randomization, you will often find shuffling arrays a necessary skill. The following snippet shuffles an array in place with O (n log n) complexity.

Const shuffleArray = (arr) = > arr.sort () > Math.random ()-0.5) / / Test const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log (shuffleArray (arr)) II. Copy to the clipboard

In Web applications, copy to the clipboard quickly becomes popular because of its convenience to users.

Const copyToClipboard = (text) = > navigator.clipboard?.writeText & & navigator.clipboard.writeText (text) / / Test copyToClipboard ("Hello World!")

Note: according to caniuse, this method works for 93.08% of global users. So you must check whether the user's browser supports the API. To support all users, you can use an input and copy its contents.

Third, array de-duplication

Each language has its own implementation of the hash list, which is called Set in JavaScript. You can easily get unique elements from an array using the Set data structure.

Const getUnique = (arr) = > [... new Set (arr)] / / Test const arr = [1,1,2,3,3,4,4,5,5]; console.log (getUnique (arr)) IV, detect dark mode

With the popularity of dark mode, it is ideal to switch your application to dark mode if users enable dark mode on their devices. Fortunately, media queries can be used to make this task simple.

Const isDarkMode = () = > window.matchMedia & & window.matchMedia ("(prefers-color-scheme: dark)"). Matches// test console.log (isDarkMode ())

According to caniuse, matchMedia's approval rate is 97.19%.

5. Scroll to the top

Beginners often find themselves having trouble scrolling elements correctly. The easiest way to scroll elements is to use the scrollIntoView method. Add behavior. "smooth" to achieve smooth scrolling animation.

Const scrollToTop = (element) = > element.scrollIntoView ({behavior: "smooth", block: "start"}) VI. Scroll to the bottom

Just like the scrollToTop method, the scrollToBottom method can be easily implemented with the scrollIntoView method, simply by switching the block value to the end.

Const scrollToBottom = (element) = > element.scrollIntoView ({behavior: "smooth", block: "end"}) 7. Generate random colors

Does your application rely on random color generation? You don't have to look at it anymore, the following code snippet can meet your requirements.

Const generateRandomHexColor = () = > `# ${Math.floor (Math.random () * 0xffffff) .toString (16)}`. That's all about the article "what are the tips for using JS?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.