JS变量的类型和计算

变量的类型和计算 - 题目

• typeof 能判断哪些类型
• 何时使用 == 何时使用 ===
• 值类型和引用类型的区别
• 手写深拷贝

值类型和引用类型的区别是场景题

// 值类型和引用类型的区别
const obj1 = { x: 100, y: 200 }
const obj2 = obj1
let x1 = obj1.x
obj2.x = 101
x1 = 102
console.log(obj1) // 这里打印出什么？

变量类型和计算 - 知识点

---

变量类型

值类型和引用类型

// 值类型
let a = 100
let b = a
a = 200
console.log(b) // 100

// 引用类型
let a = { age: 20 }
let b = a
b.age = 21
console.log(a.age) // 21

（画图解释其中的玄机 —— 用一个 excel 表格即可表示）

常见值类型

const a // undefined
const s = 'abc'
const n = 100
const b = true
const s = Symbol('s')

常见引用类型

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

类型判断

typeof 作用

• 能判断所有值类型
• 能判断函数
• 能识别引用类型，仅此而已

// 判断所有值类型
let a
console.log(a) // 'undefined'
const str = 'abc'
typeof str  // 'string'
const n = 100
typeof n // 'number'
const b = true
typeof b // 'boolean'
const s = Symbol('s')
typeof s // 'symbol'

// 能判断函数
typeof console.log // 'function'
typeof function () {} // 'function'

// 能识别引用类型（不能再继续识别）
typeof null // 'object'
typeof ['a', 'b'] // 'object'
typeof { x: 100 } // 'object'

---

变量计算

变量计算一本用于值类型，引用类型会通过 API 来修改数据。

• 数字 加减乘除
• 字符串 拼接
• 逻辑运算 && || ! == if-else

这其中，会隐含比较大的坑 —— 强制类型转换

字符串拼接（ + 号）

const a = 100 + 10   // 110
const b = 100 + '10' // '10010'
const c = true + '10' // 'true10'

== 和 ===

// == 会尝试强制类型转换
100 == '100'   // true
0 == ''  // true
0 == false // true
false == '' // true
null == undefined  // true

总之，== 会尝试进行强制类型转换，至于转换的规则大家没必要，只需要记住一点

• 所有的地方都用 ===
• 除了判断是 null 或者 undefined 时用 if (obj.a == null) —— 这也是 jQuery 源码中的方式

const obj = { x: 100 }
if (obj.a == null) { }
// 相当于：
if (obj.a === null || obj.a === undefined) { }

逻辑运算

首先认识一个概念

• falsely 变量，即 !!a === false 的
• truely 变量，即 !!a === true 的

falsely 变量有如下，（其余的就是 truely 变量）

• 0
• NaN
• ''
• null
• undefined
• false 本身

所有的逻辑运算中，都会用这个规则去判断 true 或者 false

// truely 变量
const a = true
if (a) {
    // ....
}
const b = 100
if (b) {
    // ....
}

// falsely 变量
const c = ''
if (c) {
    // ....
}
const d = null
if (d) {
    // ...
}
let e
if (e) {
    // ...
}

// 逻辑运算的示例
console.log(10 && 0)  // 0
console.log('' || 'abc')  // 'abc'
console.log(!window.abc)  // true

---

深拷贝

依赖于类型判断，所有最后讲

// 深拷贝
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null ) {
        // 不是对象或者数组形式，或是 null ，直接返回
        return obj
    }

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

    // 变量
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            // 保证不是原型属性（原型和原型链部分会讲解）

            // 递归调用
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

const obj1 = { x: 100, y: 200 }
const obj2 = deepClone(obj1)
obj1.x = 101
console.log(obj2) // x: 100

为何计算机不默认把引用类型赋值作为深拷贝？

• 耗费性能
• 占用空间

变量类型和计算 - 解答

JS中使用typeof能得到的哪些类型

针对这个题目，可以通过以下程序进行验证

typeof undefined // 'undefined'
typeof 'abc' // 'string'
typeof 123 // 'number'
typeof true // 'boolean'
typeof Symbol('s') // 'symbol'
typeof {}  // 'object'
typeof [] // 'object'
typeof null // 'object'
typeof console.log // 'function'

何时使用=== 何时使用==

• 所有的地方都用 ===
• 除了判断是 null 或者 undefined 时用 if (obj.a == null) —— 这也是 jQuery 源码中的方式

const obj = { x: 100 }
if (obj.a == null) { }
// 相当于：
if (obj.a === null || obj.a === undefined) { }

值类型和引用类型的区别

// 值类型和引用类型的区别
const obj1 = { x: 100, y: 200 }
const obj2 = obj1
let x1 = obj1.x
obj2.x = 101
x1 = 102
console.log(obj1) // { x: 101, y: 200 }