17 practical JavaScript tips you didn't know!-JS Tutorial-php.cn

17 practical JavaScript tips you didn't know!

青灯夜游

Release： 2020-12-15 09:31:00

forward

1393 people have browsed it

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.

17 practical JavaScript tips you didn't know!

1. Ternary operator

Newbie

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

Copy after login

Veteran

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

Copy after login

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

Copy after login

Veteran

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

Copy after login

3. Fill the array

Newbie

for(let i=0; i < arraySize; i++){
  filledArray[i] {&#39;hello&#39; : &#39;goodbye&#39;};
}

Copy after login

Veteran

let filledArray = new Array(arraysize).fill(null).map(()=> ({'hello' : 'goodbye'}));

Copy after login

4. Dynamic properties of the object

Newbie

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

Copy after login

Veteran

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

Copy after login

5. Delete duplicates

Newbie

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = [];
let flag = false; 
for (j = 0; < array.length; j++) {
   for (k = 0; k < outputArray.length; k++) {
      if (array[j] == outputArray[k]) {
         flag = true;
       }
    }
    if (flag == false) {
      outputArray.push(array[j]);
     }
     flag = false;
}
// tArray = [100, 23, 67, 45]

Copy after login

Veteran

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = Array.from(new Set(array))

Copy after login

6. Array to Object

Novice

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

Copy after login

Veteran

let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

Copy after login

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 = [ &#39;one&#39;, &#39;two&#39; ]

Copy after login

Veteran

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

Copy after login

8. Short circuit condition

Newbie

if (docs) {
    goToDocs();
}

Copy after login

Veteran

docs && goToDocs()

Copy after login

9. Use `^` to check if the numbers are equal

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

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

Copy after login

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 }

Copy after login

11. Get all keys of the object

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

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

Copy after login

12. Check whether the value is an array

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

Copy after login

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]

Copy after login

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

Copy after login

16. A better way to receive parameters

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

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

Copy after login

A simpler way

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

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

Copy after login

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

Copy after login

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!