Author: Mehul Lakhanpal
Translator: front end Xiaozhi
Source: dev

There are dreams and dry goods. Wechat search [Daqian world] pays attention to this bowl washing wisdom who is still washing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.

1. To string

const input = 123;

console.log(input + ''); // '123'
console.log(String(input)); // '123'
console.log(input.toString()); // '123'

2. Turn to digital

const input = '123';

console.log(+input); // 123
console.log(Number(input)); // 123
console.log(parseInt(input)); // 123

3. Convert to Boolean

const input = 1;

// Scenario 1 - convert to Boolean using double exclamation mark (!!!)
console.log(!!input); // true

// Scenario 2 - use Boolean() method
console.log(Boolean(input)); // true

4. There is a problem with the string 'false'

const value = 'false';
console.log(Boolean(value)); // true
console.log(!!value); // true

// The best inspection method
console.log(value === 'false');

1. null vs undefined

null is a value and undefined is not a value. null is like an empty box, while undefined has no box.

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

fn(undefined); // Default value
fn(); // Default value

fn(null); // null

If null is passed, the default value is not used, and when undefined or no parameters are passed, the default value is used.

6. True and imaginary values

Virtual values: false, 0, '', null, undefined and NaN.

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

7. const declares which types of variables can be changed

If the value does not want to be changed, you can use const:

const name = 'Front end Xiaozhi';
name = 'Wang Daye'; // report errors

const list = [];
list = [1]; // report errors

const obj = {};
obj = { name: 'Front end Xiaozhi' }; // report errors

However, for the reference type declared with const, its value can be changed:

const list = [];
list.push(1); // Can work
list[0] = 2; // Can work

const obj = {};
obj['name'] = 'Front end Xiaozhi'; // Can work

8. The difference between the triple sign and the double sign

// Double equal sign - converts two operands to the same type and compares them
console.log(0 == 'o'); // true

// Equal sign - do not convert to the same type
console.log(0 === '0'); // false

9. Better way to receive parameters

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

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

Easier way

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

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

10. Change ordinary function into arrow function

const func = function() {
    console.log('a');
    return 5;
};
func();

Can be rewritten as

const func = () => (console.log('a'), 5);
func();

11. Return object / expression from arrow function

const getState = (name) => ({name, message: 'Hi'});

12. Convert set to array

const set = new Set([1, 2, 1, 4, 5, 6, 7, 1, 2, 4]);
console.log(set); // Set(6) {1, 2, 4, 5, 6, 7}

set.map((num) => num * num); // TypeError: set.map is not a function

Convert to array

const arr = [...set]

13. Check whether the value is an array

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

14. Get all keys of the object

cosnt obj = {
  name: "Front end Xiaozhi", 
  age: 16, 
  address: "Xiamen", 
  profession: "Front end development", 
}; 

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

15. Double question mark syntax

const height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

This means that if the value on the left of?? is null or undefined, the value on the right will be returned.

16. map()

The map() method creates a new array, and the result is that each element in the array is the return value after calling the provided function once.

const numList = [1, 2, 3];

const square = (num) => {
  return num * num
}

const squares = numList.map(square);

console.log(squares); // [1, 4, 9]

17. try..catch..finally

const getData = async () => {
  try {
    setLoading(true);
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts"
    );
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.log(error);
    setToastMessage(error);
  } finally {
    setLoading(false); // Whether an error is reported or not, it will be executed in the end
  }
};

getData();

18. Deconstruction

const response = {
  msg: "success",
  tags: ["programming", "javascript", "computer"],
  body: {
    count: 5
  },
};

const {
  body: {
    count,
        unknownProperty = 'test'
  },
} = response;

console.log(count, unknownProperty); // 5 'test'

The bugs that may exist after code deployment cannot be known in real time. Afterwards, in order to solve these bugs, we spent a lot of time on log debugging. By the way, we recommend a useful BUG monitoring tool Fundebug.

Original text: https://dev.to/318097/18-tips...

communication

There are dreams and dry goods. Wechat search [Daqian world] pays attention to this bowl washing wisdom who is still washing dishes in the early morning.

This article GitHub https://github.com/qq44924588... It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.