Home > Article > Web Front-end > Summary of 18 tips for getting started with JavaScript!
JavaScriptThe column introduces 18 entry-level skills
Recommended (free) :JavaScript(Video)
1. Convert string
const input = 123; console.log(input + ''); // '123' console.log(String(input)); // '123' console.log(input.toString()); // '123'
2. Convert number
const input = '123'; console.log(+input); // 123 console.log(Number(input)); // 123 console.log(parseInt(input)); // 123
3. Convert Boolean value
const input = 1; // 方案1 -使用双感叹号(!!)转换为布尔值 console.log(!!input); // true // 方案2 - 使用 Boolean() 方法 console.log(Boolean(input)); // true
4. String'false'
There is a problem
const value = 'false'; console.log(Boolean(value)); // true console.log(!!value); // true // 最好的检查方法 console.log(value === 'false');
null
is a value, while undefined
is not a value. null
is like an empty box, while undefined
has no box.
const fn = (x = '默认值') => console.log(x); fn(undefined); // 默认值 fn(); // 默认值 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 value and imaginary value
Imaginary value: false
,0
, ""
, null
, undefined
and NaN
.
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 use const
:
const name = '前端小智'; name = '王大冶'; // 报错 const list = []; list = [1]; // 报错 const obj = {}; obj = { name: '前端小智' }; // 报错
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'] = '前端小智'; // 可以工作
8. The difference between the triple equal sign and the double equal sign
// 双等号 - 将两个操作数转换为相同类型,再比较 console.log(0 == 'o'); // true // 三等号 - 不转换为相同类型 console.log(0 === '0'); // false
9 . A better way to receive parameters
function downloadData(url, resourceId, searchTest, pageNo, limit) {} downloadData(...); // need to remember the order
A simpler way
function downloadData( { url, resourceId, searchTest, pageNo, limit } = {} ) {} downloadData( { resourceId: 2, url: "/posts", searchText: "WebDev" } );
10. Change the ordinary function into an 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 if 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: "前端小智", age: 16, address: "厦门", profession: "前端开发", }; 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 if ??
left The value is null
or undefined
, 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]
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();
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 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!