By Mehul Lakhanpal

Click “like” and then see, wechat search ** [Big Move the world] pay attention to this person without dACHang background, but with an upward positive attitude. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

1. Rotate the string

const input = 123; console.log(input + ''); // '123' console.log(String(input)); // '123' console.log(input.toString()); / / '123'Copy the code

2. Turn the Numbers

const input = '123'; console.log(+input); // 123 console.log(Number(input)); // 123 console.log(parseInt(input)); / / 123Copy the code

3. Transfer Boolean value

const input = 1; // Option 1 - use double exclamation marks (!!) Convert to the Boolean console.log(!! input); // true // Scenario 2 - Use the Boolean() method console.log(Boolean(input)); // trueCopy the code

4. The string'false'There is a problem

const value = 'false'; console.log(Boolean(value)); // true console.log(!! value); // true // Best way to check console.log(value === 'false');Copy the code
  1. null vs undefined

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

Const fn = (x = 'default ') => console.log(x); fn(undefined); // Default fn(); // Default fn(null); // nullCopy the code

If null is passed, the default value is not used, while if undefined is passed or no argument is passed, the default value is used.

6. True and imaginary values

Virtual values: false,0, “”,null,undefined, and NaN.

True Values: “Values”,0″,{},[].

7. Const declares which types of variables can be changed

Const can be used if the value does not want to be changed:

Const name = 'front-end wisdom '; Name = 'wangdaye '; // error const list = []; list = [1]; // error const obj = {}; Obj = {name: 'head'}; / / an errorCopy the code

Const; const; const; const; const;

const list = []; list.push(1); List [0] = 2; // Const obj = {}; Obj ['name'] = 'obj '; // It worksCopy the code

8. The difference between triple and double equal signs

// double equals - convert two operands to the same type and compare console.log(0 == 'o'); // true // three equals sign - does not convert to the same type console.log(0 === '0'); // falseCopy the code

9. A better way to receive parameters

function downloadData(url, resourceId, searchTest, pageNo, limit) {} downloadData(...) ; // need to remember the orderCopy the code

The easier way

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

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

10. Replace normal functions with arrow functions

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

I can rewrite it as

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

11. Return object/expression from arrow function

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

12.setConvert to an 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
Copy the code

Convert to an array

const arr = [...set]
Copy the code

13. Check whether the value is an array

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

14. Get all the keys of the object

Cosnt obj = {name: "小智", age: 16, address:" xiamen ", Profession: "Front-End development ",}; console.log(Object.keys(obj)); // name, age, address, professionCopy the code

Double question mark grammar

const height = 0; console.log(height || 100); // 100 console.log(height ?? 100); / / 0Copy the code

This?? What if…? If the value on the left is null or undefined, the value on the right is returned.

16. map()

The map() method creates a new array with the result that each element in the array is the return value from a call to the provided function.

const numList = [1, 2, 3]; const square = (num) => { return num * num } const squares = numList.map(square); console.log(squares); / / [1, 4, 9]Copy the code

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); }} is executed regardless of whether an error is reported. getData();Copy the code

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'
Copy the code

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dev. To / 318097/18 – t…

communication

This article is updated weekly, you can search wechat ** [big move the world] the first time to read, reply [welfare] ** there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.