18 个 JavaScript 入门技巧

原文出处

1. 转字符串

        /* 1.转字符串 */
        const input = 123
        console.log(input + '');   //用空字符串拼接
        console.log(String(input)); //用String()方法
        console.log(input.toString()); //用 toString()方法
        

2.转为数字类型

        const input  = '123.23'
        console.log(+input);
        console.log(Number(input));
        console.log(parseInt(input));  // 123   //parseInt会转成整数 

3.转换为布尔值类型

        const input = 1
        // 方案一 使用双感叹号(!!)
        console.log(!!input);  //true 
        // 方案二 使用Boolean 
        console.log(Boolean(input)); //true

4.字符串’false’

        // 4.字符串 'false'的问题
        const value = 'false';
        console.log(Boolean(value)); // true
        console.log(!!value); // true

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

5.null VS undefined
// null是一个值 undefined 不是一个值 null 就像一个空盒子 undefined没有盒子
// typeof判断null为object，判断undefined为undefined

        // null是一个值 undefined 不是一个值 null 就像一个空盒子 undefined没有盒子
        // 下面体会一下
        function log(input = '默认值'){
            console.log(input);
        }    
        log()   //默认值
        log(undefined) //默认值
        log(null) //null

6.虚值 与 真值

虚值：false,0, "",null,undefined和NaN。

真值："Values",0",{},[]。

7.const 声明的哪些变量类型可以被修改
定义变量之后不能被重新赋值 但引用类型的变量,其内部的值可以被修改

        方案一 如果定义的值不想被改变 就用const定义 后续是不能重新定义的
        const name = 'gyb'
        name = '张三'   //报错 Assignment to constant variable.
        const list = []
        list = ['gyb']  //报错  Assignment to constant variable.
        const obj = {}
        obj = {name:'gyb'}  //报错  Assignment to constant variable

        方案二 但是用const 声明的引用类型 它里面的值是可以被修改的 
        const list = []
        list.push('gyb')  
        console.log(list); // ['gyb']
        const obj = {}
        obj.name = 'gyb'
        console.log(obj); //{name:'gyb'}

8. 三等号和双等号的区别

// 双等号 -- 将两个操作数 隐式转换为相同类型,在做比较.
console.log(0 == '0');  // true  若 Type(x) 为 Number 且 Type(y) 为 String，返回比较 x == ToNumber(y) 的结果。
// 三等号 -- 不转换为相同类型 
console.log(0 === '0'); // false

9. 接收参数更好的方式

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

downloadData(...); // need to remember the order  //需要按照排序 不方便操作


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

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

		例如 函数的形参接收的是一个对象的name和age属性
        let obj = { name: 'gyb', age: 27 }
        function show(name, age) {
            console.log(name);
            console.log(age);
        }
        show(obj.name, obj.age)
        // 上面的传参方式冗余 不方便，必须按照顺序传入实参

        // 优化后
        function show({ name, age }){
            console.log(name);
            console.log(age);
        }

        show(obj) 

10.改用箭头函数简写

        //  把普通函数改为箭头函数
        const func = function () {
            console.log('a');
            return 5;
        };
        console.log(func());  //5

        // 改用箭头函数
         当函数参数只有一个时，括号可以省略；但是没有参数时，括号不可以省略。
         函数体（大括号）中有且只有一行return语句时，大括号及return 关键字可以省略。
        const fun = ()=>(console.log('a'),5,6);
        console.log(fun());//6

11. 从箭头函数返回对象、表达式

        function showObj(name, age) {
            return { name: name, age: age }
        }
        console.log(showObj('gyb', 27));

		//简化后

        const showObj = (name, age) => ({ name, age })
        console.log(showObj('gyb', 27));   //{name: 'gyb', age: 27}{name: 'gyb', age: 27}

12. 将new Set 的类数组对象转换为数组

        const set = new Set([1,2,3,4,5])  
        console.log(set); //Set(5) {1, 2, 3, 4, 5}  //这是类数组对象
        // 方案一 用es6拓展运算符
        console.log([...set]); //[1, 2, 3, 4, 5] 
        // 方案二 用Array.from()
        console.log(Array.from(set)); //[1,2,3,4,5]

13.检查是否为数组

        const arr = [1,2,3]
        console.log(typeof arr); //object
        // 用Array.isArray()
        console.log(Array.isArray(arr)); //true
        // 用Object.prototype.toString()
        console.log(Object.prototype.toString.call(arr) === '[object Array]'); //true

14.获取对象的所有键

        const obj = {
            name: '前端',
            age: 16,
            address: '广州'
        }
        let keys = Object.keys(obj)
        console.log(keys);  //['name', 'age', 'address']

15.双问好（??）写法
这个 ?? 的意思是，如果 ?? 左边的值是 null 或者 undefined，那么就返回右边的值

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

比如：
let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

if(!!a || a === 0 ){
	b = a;
}else{
	b = c;
}
对就是上面那个例子,当我们想判断一个值存在,但是它等于0的时候,我们也需要当作它存在,于是就有了上面那样的例子,其实我们还可以这样做
let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

b = a ?? c;
上面的例子,当a除了undefined、或者null之外的任何值,b都会等于a,否则就等于c.

16 map()
map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

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 解构

        const response = {
            msg: "success",
            tags: ["programming", "javascript", "computer"],
            body: {
                count: 5
            },
        };

        const {
            body:newBody   //解构出的body 更名为 newBody
        } = response;
        console.log(newBody); // {count: 5}
        
        const {
            body: { //嵌套解构并 新增键值对
                count, 
                unknownProperty = 'add'
            },
        } = response;
        console.log(count, unknownProperty); // 5 'add'