Summary of 18 tips for getting started with JavaScript!-JS Tutorial-php.cn

JavaScriptThe column introduces 18 entry-level skills

Summary of 18 tips for getting started with JavaScript!

Recommended (free) ：JavaScript(Video)

1. Convert string

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

Copy after login

2. Convert number

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

Copy after login

3. Convert Boolean value

const input = 1; // 方案1 -使用双感叹号(!!)转换为布尔值 console.log(!!input); // true // 方案2 - 使用 Boolean() 方法 console.log(Boolean(input)); // true

Copy after login

4. String'false'There is a problem

const value = 'false'; console.log(Boolean(value)); // true console.log(!!value); // true // 最好的检查方法 console.log(value === 'false');

Copy after login

null vs undefined

nullis a value, whileundefinedis not a value.nullis like an empty box, whileundefinedhas no box.

const fn = (x = '默认值') => console.log(x); fn(undefined); // 默认值 fn(); // 默认值 fn(null); // null

Copy after login

If null is passed, the default value is not used, and whenundefinedor no parameters are passed, the default value is used.

6. True value and imaginary value

Imaginary value:false,0,"",null,undefinedandNaN.

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

7. Const declares which types of variables can be changed

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

const name = '前端小智'; name = '王大冶'; // 报错 const list = []; list = [1]; // 报错 const obj = {}; obj = { name: '前端小智' }; // 报错

Copy after login

but use The reference type declared by const, the value in it can be changed:

const list = []; list.push(1); // 可以工作 list[0] = 2; // 可以工作 const obj = {}; obj['name'] = '前端小智'; // 可以工作

Copy after login

8. 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

9 . 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

10. Change the ordinary function into an arrow function

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

Copy after login

Can be rewritten as

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

Copy after login

11. Return object/expression from arrow function

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

Copy after login

12. Convertsetto 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 after login

Convert to array

const arr = [...set]

Copy after login

13. Check if the value is an array

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

Copy after login

14. 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

15. Double question mark syntax

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

Copy after login

This??means if??left The value isnullorundefined, then the value on the right is returned.

16. map()

# The ##map()method creates a new array, the result of which 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]

Copy after login

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); // 不管是否报错，最后都会执行 } }; getData();

Copy after login

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 after login

The above is the detailed content of Summary of 18 tips for getting started with JavaScript!. For more information, please follow other related articles on the PHP Chinese website!