变量类型和计算 - 知识点
变量类型
值类型和引用类型
// 值类型
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 }