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');
- 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.