JS基础-变量类型和计算

一、变量类型

值类型vs引用类型

先来看以下两个栗子

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

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

思考一下：为什么栗1打印出来的是100，而栗2打印出来的是21呢？

深入分析：

栈是存放变量的地方，栗子1首先定义一个变量a等于100，然后定义一个变量b等于a，b等于100，再将a的值改为200，可以看到b的值没有改变,因为b和a是不一样的

 栈和堆是同时存在的，栗子2首先定义一个变量a等于一个对象{age: 20}，这时候堆会生成一个内存地址1，value等于{age: 20}，而栈中的a实际指向的是内存地址1，然后定义一个变量b等于a，b赋值的是a的内存地址1，然后将b.age赋值为21，实际也是将内存地址1的value改为{age: 21}，这时候再去访问a.age，也为21

 

常见值类型：

let a;  //undefined
const str = '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;                  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','c']  // 'object'
typeof {x: 100}       // 'object'

二、变量计算-类型转换

字符串拼接

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外，其他一律用===，例如：
const obj = {x: 100}
if(obj.x == null) {}
//相当于
if(obj.x === null || obj.x === undefined) {}

if语句和运算逻辑

truly变量：!!a === true的变量

falsely变量：!!a === false的变量

// 以下是falsely变量，其余都是truly变量
!!0 === false
!!NaN === false
!!null === false
!!undefined === false
!!false === false

if语句

// truly 变量
const a = true
if(a) {
  // ...
}
const b = 100
if(b) {
  // ...
}
//falsely 变量
const c = ''
if(c) {
  // ...
}
const d = null
if(d) {
  // ...
}
const e
if(e) {
  // ...
}

逻辑判断

console.log(10 && 0);     // 0
console.log('' || 'abc'); // 'abc'
console.log(!window.abc); // true

思考一下：为什么返回值是这样的？

console.log(10 && 0); 
// 因为10是truly变量，所以继续判断返回第二个值
console.log('' || 'abc');
// 因为''是falsely变量，所以继续判断返回第二个值
console.log(!window.abc);
// 因为!是非，直接取反

// 如果返过来console.log(0 && 10);     // 0  因为0是falsely变量，直接返回（&&的运算规则是这样）
// console.log('abc' || '');          // 'abc'  因为'abc'是truly变量，直接返回（||的运算规则是这样）