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

5. null vs undefined

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!