current position：Home>13 JavaScript one-line programs that make you look like an expert

13 JavaScript one-line programs that make you look like an expert

2021-08-23 10:31:18 【.Der_ Rabe】

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=JavaScript Can do a lot of fun , From complex frameworks to processing API, There's so much to learn . however , It also allows us to do great things in one line .

1. Get a random Boolean value （true/false）

This function uses Math.random() Method returns a Boolean value （true perhaps false）.Math.random Create a 0 To 1 Random number between , We just need to check if it's above or below 0.5, There is 50% Opportunity to get true or false.

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    •

2. Check that the date provided is a working day

Using this method , We can check whether the date provided in the function is a weekday or weekend day .

const isWeekday = (date) => date.getDay() % 6 !== 0;

console.log(isWeekday(new Date(2021, 7, 6)));
// true   Because it's Friday 

console.log(isWeekday(new Date(2021, 7, 7)));
// false  Because it's Saturday 
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    • 
        
  • 7.
    • 
        
  • 8.
    •

3. Reverse string

There are several different ways to reverse a string . This is the simplest one , Use split()、reverse() and join() Method .

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// 'dlrow olleh'
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    •

4. Check whether the current tag is hidden

Document.hidden （ Read-only property ） Returns a Boolean value , Indicates that the page is （true） no （false） hide .

const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    •

Outside ： Inadvertently found that iqiyi's advertisement playing time actually counts down when the current tab is activated , When leaving the current tab , The countdown stops , Baidu found document.hidden This east east .

document.hidden yes h5 New addition api There is a compatibility problem when using .

var hidden
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
}
console.log(" Whether the current page is hidden ：" + document[hidden])
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    • 
        
  • 7.
    • 
        
  • 8.
    • 
        
  • 9.
    • 
        
  • 10.
    • 
        
  • 11.
    • 
        
  • 12.
    •

5. Check whether a number is even or odd 

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// true
console.log(isEven(3));
// false
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    •

6. Get the time from a date 

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// "17:30:00"

console.log(timeFromDate(new Date()));
//  Print the current time 
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    • 
        
  • 7.
    • 
        
  • 8.
    •

7. Retain n Decimal place 

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
//  Example 
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 code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    • 
        
  • 7.
    • 
        
  • 8.
    • 
        
  • 9.
    •

8. Check if any element is currently in focus

We can use document.activeElement Property to check whether an element is currently in focus .

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
//  If you return in focus true, If you don't return in focus  false
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    •

9. Check whether the current browser supports touch events 

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
//  If touch events are supported , Will return true, If not, return false.
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    •

10. Check whether the current browser is on the Apple device 

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    •

11. Scroll to the top of the page 

const goToTop = () => window.scrollTo(0, 0);
goToTop();
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    •

12. Get the average value of the parameter 

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// 2.5
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    •

13. Fahrenheit / Celsius conversion 

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
//  Example 
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0
 Copy code 
       
    
        
  • 1.
    • 
        
  • 2.
    • 
        
  • 3.
    • 
        
  • 4.
    • 
        
  • 5.
    • 
        
  • 6.
    • 
        
  • 7.
    • 
        
  • 8.
    • 
        
  • 9.
    •

~ End , I'm a dishwasher , Club massage walk up


author ： The front end little wisdom
link ：https://juejin.cn/post/6997930259953745950
source ： Nuggets
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .

copyright notice
author[.Der_ Rabe],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823103114516u.html

The sidebar is recommended

guess what you like

Random recommended