17 practical JavaScript tips you didn't know!

This article will share with you 17 practical JavaScript skills that you don’t know. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Ternary operator

Newbie

let hungry = true;
let eat; 
if (hungry == true) {
       eat = 'yes'; 
} else {
       eat = 'no';
}

Veteran

let hungry = true;
let eat = hungry == true ? 'yes' : 'no';

2. Number to string/string to number

Novice

let num = 15; 
let s = num.toString(); // number to string
let n = Number(s); // string to number

Veteran

let num = 15;
let s = num + ""; // 数字转字符串
let n = +s; // 字符串转数字

3. Fill the array

Newbie

for(let i=0; i <p><strong>Veteran</strong></p><pre class="brush:php;toolbar:false">let filledArray = new Array(arraysize).fill(null).map(()=> ({'hello' : 'goodbye'}));

4. Dynamic properties of the object

Newbie

let dynamic = "value"; 
let user = {
     id: 1,
};
user[dynamic]: "other value";

Veteran

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic] = "other value"
};

5. Delete duplicates

Newbie

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = [];
let flag = false; 
for (j = 0;  <p><strong>Veteran</strong></p><pre class="brush:php;toolbar:false">let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = Array.from(new Set(array))

6. Array to Object

Novice

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i <p><strong>Veteran</strong></p><pre class="brush:php;toolbar:false">let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

7. Object to array

Newbie

let number = {
  one: 1, 
  two: 2,
};
let keys = []; 
for (let numbers in numbers) {
  if (number.hasOwnProperty(number)) {
     keys.push(number);
    }
}
// key = [ 'one', 'two' ]

Veteran

let number = {
  one: 1, 
  two: 2,
};
let key = Object.keys(numbers); // key = [ 'one', 'two' ]
let value = Object.values(numbers);  // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

8. Short circuit condition

Newbie

if (docs) {
    goToDocs();
}

Veteran

docs && goToDocs()

9. Use ^ to check if the numbers are equal

if(a!=123) // before // 一般开发者

if(a^123) // after // B格比较高的

10. Object traversal

const age = {
   Rahul: 20,  
   max: 16
};

// 方案1：先得 key 在遍历 key
const keys = Object.keys(age); 
keys.forEach(key => age[key]++);

console.log(age); // { Rahul: 21, max: 16 }

// 方案2 - `for...in` 循环
for(let key in age){
   age[key]++;
}

console.log(age); // { Rahul: 22, max: 18 }

11. Get all keys of the object

cosnt obj = {
  name: "前端小智", 
  age: 16, 
  address: "厦门", 
  profession: "前端开发", 
}; 

console.log(Object.keys(obj)); // name, age, address, profession

12. Check whether the value is an array

const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

13. Initialize the size of n Array and filled with default values

const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]

14. True and false values

False values: false,0, "", null, undefined and NaN.

True value: "Values",0",{},[].

15. The difference between the triple equal sign and the double equal sign

// 双等号 - 将两个操作数转换为相同类型,再比较
console.log(0 == 'o'); // true

// 三等号 - 不转换为相同类型
console.log(0 === '0'); // false

16. A better way to receive parameters

function downloadData(url, resourceId, searchTest, pageNo, limit) {}

downloadData(...); // need to remember the order

A simpler way

function downloadData(
{ url, resourceId, searchTest, pageNo, limit } = {}
) {}

downloadData(
  { resourceId: 2, url: "/posts", searchText: "WebDev" }
);

17.null vs undefined

null =>It is a value, and undefined is not.

const fn = (x = 'default value') => console.log(x);

fn(undefined); // default value
fn(); // default value

fn(null); // null

When passing null, the default value is not taken, and undefined Or when no content is passed, the default value will be used.

Original text: https://dev.to/rahxuls/17-pro-javascript-tricks-you-didn -t-know-5gog

Author: Rahul

For more programming-related knowledge, please visit: Introduction to Programming!!

The above is the detailed content of 17 practical JavaScript tips you didn't know!. For more information, please follow other related articles on the PHP Chinese website!