A line of JS code that implements functions makes you look like a front-end expert

1. Get a random Boolean value (true/false)

This function uses the Math.random() method to return a boolean value (true or false). Math.random will build a random number between 0 and 1, and then we check if it is higher or lower than 0.5. This means that the probability of getting true or false is 50%/50%.

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false

2. Check if the date is a working day

Using this method, you can check whether the function parameters are weekdays or weekends.

const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)

3. Reverse string

There are several different ways to reverse a string. The following code is one of the easiest ways.

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

4. Check if the current Tab page is in the foreground

We can check whether the current tab is in the foreground by using the document.hidden property.

const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus

5. Check if the number is even

The easiest way is to solve it by using the modulus operator (%). If you are not familiar with it, here is a good illustration from Stack Overflow.

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false

6. Get the time from the date

By using the toTimeString() method to slice the string at the correct position, we can get the time or current time from the provided date.

const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time

7. Keep the decimal point (not rounded)

Using the Math.pow() method, we can truncate a number to a certain decimal point.

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

8. Check if the element is currently focused

We can use the document.activeElement property to check whether an element is currently focused.

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus

9. Check if the browser supports touch events

const touchSupported = () => {
    
    
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// Result: will return true if touch events are supported, false if not

10. Check if the current user is an Apple device

We can use navigator.platform to check whether the current user is an Apple device.

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device

11. Scroll to the top of the page

The window.scrollTo() method will take an x ​​and y coordinate to scroll. If we set these coordinates to zero, we can scroll to the top of the page.

const goToTop = () => window.scrollTo(0, 0);
goToTop();
// Result: will scroll the browser to the top of the page

Guess you like

Origin blog.csdn.net/qq_44880095/article/details/113245642
Recommended