The article is translated from here. Foreigners are also good at writing titles. The title may be party XX, but some of the content is quite useful.
JavaScript can do amazing things!
From complex frameworks to processing apis, there is so much to learn.
But it also allows you to do amazing things with just one line of code.
Check out these 13 single lines of JavaScript that will make you look like an expert!
1. Get a random Boolean value (true/false)
This function returns a Boolean value (true or false) using the math.random () method. Math.random will create a random number between 0 and 1, after which we check whether it is higher or lower than 0.5. That means there’s a 50/50 chance of getting true or false.
const randomBoolean = () = > Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false
Copy the code
2. Check whether the date is a working day
Using this method, you can check whether the function arguments 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)
Copy the code
3. Reverse the string
There are several different ways to invert a string. The following code is one of the easiest ways to do this.
const reverse = str= > str.split(' ').reverse().join(' ');
reverse('hello world');
// Result: 'dlrow olleh'
Copy the code
4. Check whether the current Tab page is in the foreground
We can check if 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
Copy the code
5. Check if the numbers are even
The simplest way to do this is by using the modular operator (%). If you’re not familiar with it, here’s a great illustration from Stack Overflow.
const isEven = num= > num % 2= = =0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false
Copy the code
6. Get the time from the date
By slicing the string in the right place using the toTimeString() method, we can get the time or current time from the supplied 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
Copy the code
7. Keep the decimal point (not round)
Using the math.pow () method, we can truncate a number to a 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
Copy the code
8. Check whether the element is currently in focus
We can use the Document.ActiveElement property to check whether an element is currently in focus.
const elementIsInFocus = (el) = > (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus
Copy the code
9. Check whether your 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
Copy the code
10. Check whether the current user is an Apple device
We can use navigator.platform to check if 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
Copy the code
Scroll to the top of the page
The window.scrollto () method takes an X and y coordinate to scroll through. If we set these coordinates to zero, we can scroll to the top of the page.
Note: IE does not support thisscrollTo()
Methods.
const goToTop = () = > window.scrollTo(0.0);
goToTop();
// Result: will scroll the browser to the top of the page
Copy the code
12. Obtain the average value of all parameters
We can use the reduce method to obtain the average value of the function parameters.
const average = (. args) = > args.reduce((a, b) = > a + b) / args.length;
average(1.2.3.4);
/ / Result: 2.5
Copy the code
13. Convert Fahrenheit/Celsius. (This is rarely used in China.)
Dealing with temperature can be confusing at times. These two features will help you convert Fahrenheit to Celsius and vice versa.
const celsiusToFahrenheit = (celsius) = > celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) = > (fahrenheit - 32) * 5/9;
// Examples
celsiusToFahrenheit(15); / / 59
celsiusToFahrenheit(0); / / 32
celsiusToFahrenheit(-20); / / - 4
fahrenheitToCelsius(59); / / 15
fahrenheitToCelsius(32); / / 0
Copy the code
Thanks for reading! I hope you learn something new today.
This article was first published on the public account “Front-end is fun”, welcome to follow.