JavaScript 的双面人生：基本类型与引用类型的那些事儿

JavaScript 的数据类型有一道隐形鸿沟：基本类型按值存取，独善其身；引用类型按址引用，牵一发而动全身。今天我们来聊一下JS中的两种类型。

一、基本类型(原始类型)

1.1 string（字符串类型）

let str = 'hello world'  // ''这里面的内容就是string类型  

let str2 =str +'js'   //增加字符串 = 字符串拼接
let str3 = `${str}  js`

console.log(str2);  //hello world js
console.log(str3);  //hello world js

console.log(str[0]);     //h
console.log(str.at(0));  //h  

console.log(str.slice(0,7)); // hello w   只包含前面的下标不包含后面的下标

1.2 number（数字类型）

let num = 123    // number类型  数字类型
let num2 =num + 0.1

console.log(num2);             // 123.1
console.log(num2.toString());  // 转变字符串类型
console.log(num2+'5');         //变成字符串类型    123.15

注意：前提字符串里为数字时，数字加字符串会变成字符串，但数字加的字符串里不是数字时会显示NaN,NaN是一种无法表达的数字，但也是数字，隶属于数字类型。

let n  =1
let m  ='2'                               
console.log(n+m); // 12->字符串类型
console.log(Number(m)); // 2->数字类型

1.3 boolean（布尔类型）

if () {     
    console.log('猪猪侠');
}

if 后面（）里面的 true 和 false 就是布尔类型，注意（）里面为 0 和 NaN 时代表的为 false，其它数字均为 true。

1.4 undefined（未定义类型）

let u = undefined + ''
console.log(u);       // undefined-> 字符串类型

注：undefined 即是一个值也是一个类型

1.5 null（空值类型）

let n = null  

注：null 即是一个值也是一个类型

undefined 与 null区别：undefined 是声明了没有值，null 是没有声明也没有值

1.5 bigint（大整数类型）

let b =  1231546n            // bigint类型  大整数类型
let c = 9007199254740992n    // 9007199254740992+b  不能相加
console.log(b+c);            // 能相加

1.6 symbol

let s = Symbol('hello')    
let p = Symbol('hello')    

console.log(s == p); // false  

注意：symbol( ) 是一个唯一的值 独一无二的

1.8 相等（==）和全等（===）

let a = 'hello world'
let b = 'hello world'
console.log(a == b);   // true

let c = 1
let d = '1'
console.log(c == d);   // true   v8引擎将2个值的类型转换为数字类型  == 相等  
console.log(c === d);  // false  === 全等

二、引用类型 （复杂类型）

2.1 Array（数组类型）

var arr = ['a', 'b', 1, 2];

arr.push(3);     //尾部添加
arr.pop();       //尾部删除
arr.unshift(0);  //头部添加
arr.shift();     //头部删除

arr.splice(1,1);     //删除指定位置  第一个数是下标，第二个数是删除的个数
arr.splice(2,0,0);   //插入指定位置  第一个数是下标，第二个数是删除的个数，第三个数是要插入的值
arr[2]=10;           //替换指定位置

console.log(arr);  // ['a', 'b', 1, 2, 3]    ['a', 'b', 1]    [0, 'a', 'b', 1, 2]     [ 'b', 1, 2]    ['a', 1, 2]

2.2 Object（对象类型）

var a = 1
var b = 'hello'
var obj={
    name:'猪猪侠',
    age:18,
    like:{
        one:'吃',
        two:{
            sports:['篮球','足球']
        }
    }
}
obj.girlFriend='菲菲'   // 添加
delete obj.girlFriend   // 移除

console.log(obj)

注意：对象里面可以套对象、数组，而数组里面也可以套对象、数组。

2.3 Function（函数类型）

var fn = function fn() {
    
}

2.4 Date（日期类型）

2.5 V8引擎执行遇到引用类型过程

1.创建一个调用栈 （用来存放预编译的过程）

2.在调用栈中，存入 xx 执行上下文

3.执行代码，将原始值 存入 栈中，如果遇到引用类型的值，则存入堆空间中，并生成一个引用地址，将引用地址存入栈中。

这样设计的好处，既保证了栈不用设计的很大从而影响 v8 的执行效率，又不会爆栈

下面图片是对象代码为例子画的图

三、总结

JS中含有7种基本类型还有4种常见的引用类型，牢记 == 的核心规则是向数字转，而 + 运算符遇到字符串则优先拼接；在条件判断中，只需熟记那 6个假值（false、0、""、null、undefined、NaN），其余皆为真。掌握这些核心法则，JS 的类型陷阱便再也难不住你。