JS基础-变量类型和计算【不会变量,别说你会JS】

「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战

先抛出几个问题

typeof 能判断哪些类型
何时使用 === 何时使用 ==
值类型和引用类型的区别
如何实现深拷贝?

1. 值类型

let a = 100
let b = a
a = 200

console.log(b) // 100
复制代码

1.1 深入分析

image.png

值类型存储的空间比较小,考虑性能和可空间使用,只有一个值嘛,就直接复制过来使用了

常见值类型

字符串、布尔值、数字、Symbol

    let a // undefind
    const s = 'abc'
    const n = 100
    const b = true
    const s = Symbol('s')
复制代码

image.png 此处说明下,const 定义常量必须有值,不定义值会报错

2 引用类型

let a = {age: 20}
let b = a
b.age = 21

console.log(a.age) // 21
复制代码

2.1 深入分析

image.png

一个对象或者一个JSON 可能会非常非常大

  1. 如果和值类型一样存储,占用太大的存储空间
  2. 复制的时候可能会复制的非常慢

2.2 常见引用类型

    const obj = {x: 100}
    const arr = ['a', 'b', 'c']
    const n = null // 特殊的引用类型,指针指向为空的地址
    
    // 特殊引用类型,但并不用于存储数据,所以没有 ‘拷贝、辅助函数’这一说
    function fn (){}
复制代码

3. typeof 运算符

3.1 typeof 识别所有值类型

image.png

3.2 识别函数

image.png

3.3 判断是否时引用类型(不可再细分)

image.png

4. 手写JS 深拷贝

  • 注意判断值类型和引用类型
  • 注意判断是数组还是对象
  • 递归
/**
 * 深拷贝
 */

const obj1 = {
    age: 20,
    name: 'xxx',
    address: {
        city: 'beijing'
    },
    arr: ['a', 'b', 'c']
}

const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city) // beijing
console.log(obj1.arr[0]) // a

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ,或者不是对象和数组,直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用!!!
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

复制代码

5. 变量计算 - 注意某些类型转换的坑

详细的类型转换请点击 # JS 类型转换,我是认真的

5.1 字符串拼接

image.png

5.2 == 运算符

image.png

image.png

5.3 if 语句和逻辑运算

两步非运算!! 得到的结果

5.3.1 truly 变量: !!a === true 的变量

image.png

5.3.2 falsely 变量: !!a === false 的变量

image.png

image.png

6 变量类型相关的面试题

6.1 typeof 能判断哪些类型

  • 识别所有值类型
  • 识别函数
  • 判断是否是引用类型(不可再细分)

6.2 合适使用 === 何时使用 ==

image.png

6.3 值类型和引用类型的区别

image.png

能理解这个答案就知道了,不太理解可以向上翻翻再看看

おすすめ

転載: juejin.im/post/7035541130578133028