第二章 JS基础-变量类型和计算
题目引入
- typeof能判断哪些类型？
- 何时使用=== 何时使用==？
- 值类型和引用类型的区别？
- 手写深拷贝
一、JS基础
1. 值类型与引用类型
| 值类型 |
引用类型 |
| 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 |
堆栈分析：（栈是从上往下，堆是从下往上）
值类型
引用类型：
常见的值类型：number 、undefined、string、boolean、symbol
常见引用类型：object、array 特殊引用类型：null、fu()函数
2. typeof运算符
| // 判断所有值类型 Let a; typeof 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’ |
3. 深拷贝
浅复制
const obj1 = {
age: 20,
name: 'xxx',
address: {
city: 'beijing'
}
}
const obj2 = obj1
obj2.address.city = 'shanghai'
console.log(obj1.address.city) // shanghai深复制
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
}
二、变量计算与类型转换
1. 字符串拼接
const a = 100 + 10 // 110 可以使用100 + parseInt(‘10’)
const b = 100 + ‘10’ // 10010
const c = true + ‘10’ // true10
const d = 100 + parseInt(‘10’) // 1102. ==和===
100 == ‘100’ // true
0 == ‘’ // true
0 == false // true
false == ‘’ // true
null == undeined // true(==尽量尝试让他们变成相等)
// 除了 == null 之外，其他都一律用 ===
Const obj = { x: 100 }
If (obj.a == null ) {}
// 相当于
// if (obj.a === null || obj.a === undefined) {}3. if语句与逻辑计算
truly变量：!!a === true的变量（经过两次非运算之后为真）
falsely变量： !!a === false的变量（经过两次非运算之后为假）
// 一下是falsely变量，除此之外都是truly变量
!! 0 === false
!! NaN === false
!! ‘’ === false
!! null === false
!! undefined === false
!! false === false三、问题解答总结
1. typeof可以判断那些类型？
识别所有值类型
识别函数
判断是否是应用类型（不可以再细分）
2. 何时使用==何时使用===？
除了==null之外，其他一律用===
3. 值类型和引用类型的区别？
值类型是深复制，引用类型是浅复制
4. 手写深拷贝
注意判断值类型和引用类型
注意判断是数组还是对象
使用递归
四、小结
1. 值类型VS引用类型、堆栈模型、深拷贝
2. Typeof运算符
3. 类型转换、truly和falsely变量
