零基础学习JavaScript之数据类型与数据存储

105 阅读4分钟

当我们刚开始学习JavaScript这门编程语言,首先要深入理解数据类型及其存储方式,这对于我们编写高效、健壮的代码至关重要。JavaScript拥有丰富的数据类型体系,同时 V8 引擎独特的存储机制也为其性能表现奠定了基础。接下来让我们一起学习其中的知识吧!

1. 数据类型

JavaScript中的数据类型可分为原始类型(也称为简单类型)和引用类型(也称为复杂类型)。

1.1 原始类型(简单类型)

1.1.1 string-字符串

用于表示文本数据,是由字符序列组成。例如我们编程中经常提到的“Hello,world!”就是一个典型的字符串。

示例:

let myname='张三'
let str='hello,i am '+myname//字符串 是一种数据类型
console.log(str);

输出结果:

image.png

另外,当我们想在字符串中插入另一个字符串时,可以采用将''改为``并将要插入的字符串放入${}的中括号中,即可实现该操作

示例:

let myname='张三'
let str=`hello,i am ${myname}`//往字符串中拼接一个变量
console.log(str);

输出结果:

image.png

1.1.2 number-数字

该类型涵盖了整数和浮点数,如 42 和 3.14都属于number类型。

在js中,若直接输出数字1+数字2,会直接得出两数相加的结果;若输出数字1+字符串1,便会直接将两个合并在一起直接输出。

示例:

 let num=123 //number类型
 let count=234
 console.log(num+count);

输出结果:

image.png 示例:

 let num='12a3' 
 let count=234//不区分整数与小数
 console.log(num+count);//字符串+数字=字符串

输出结果:

image.png

1.1.3 boolean-布尔

只有两个取值,true 和 false,常用于逻辑判断。同时,0为假,1为真。

示例:

let flag =true//布尔类型 Boolean
let unflag=false

 if(1){
console.log('真');
}
else{
    console.log('假');
}

输出结果:

image.png

1.1.4 undefined

当声明了变量但未初始化时,变量的值就是 undefined。

示例:

let u //undefined没有值
console.log(u);

输出结果:

image.png

1.1.5 null

表示一个空值或“无”的对象指针,通常用于显式地表示某个变量不指向任何对象,如 let element = null;

示例:

 let n=null//null 连变量都没有
 console.log(n);

输出结果:

image.png

1.1.6 symbol

它用于定义一个独一无二的值,通过 Symbol() 函数创建。每个 symbol 都是唯一的,常用于对象的属性名,以避免属性名冲突。

示例:

let s=Symbol(123)
let t=Symbol(123)
console.log(s==t)

输出结果:

image.png

1.1.7 bigInt-大整型

用于表示大于 Number.MAX_SAFE_INTEGER 的整数。可以通过在数字后面加 n 来创建 bigInt,如 12345678901234567890n。

示例:

let big =123n

1.2 引用类型(复杂类型)

1.2.1 数组

是一种线性存储结构 ,靠下标来操作里面的元素。

示例:

let arr=[1,'a',true,undefined,null]
console.log(arr[1]);

输出结果:

image.png 对数组我们可以进行一系列操作,例如增加、删除等。

示例:

let arr=[1,'a',true,undefined,null]

arr.push(123n)//尾部增加
arr.pop()//尾部删除
arr.unshift(100)//头部增加
arr.shift()//头部删除
arr.splice(2,1)//删除下标为2,删除个数为1
arr.splice(4,0,123n)//在下标为4的元素后插入123n
console.log(arr);

1.2.2 对象

键值对存储结构,通过访问属性来操作里面的值,也可以更改、增加、删除相关属性。

示例:

let obj={
    name:'张三',
    age:18
}

obj.age=20//修改属性
obj.friend='李四'//增加属性
delete obj.age//删除属性

console.log(obj)

1.2.3 函数

在 JavaScript 中,函数也是一种引用类型,可以作为值进行传递和操作,例如可以将函数赋值给变量,或者作为参数传递给其他函数。

示例:

var a=2
function add(){
    var b =10
    return a+b
}
console.log(add());

输出结果:

image.png

2.数据存储

2.1 原始类型的存储

原始类型的值存放在调用栈中。调用栈是一种后进先出(LIFO)的数据结构,用于存储函数调用的上下文和原始类型的值。由于原始类型的值通常较小且固定,直接存储在栈中可以快速访问,提高程序的执行效率。例如,当执行 let num = 10; 时,数字 10 就直接存储在栈中。

2.2 引用类型的存储

引用类型的值由于有可能非常大,所以存放在堆中。堆是一个内存区域,用于动态分配内存。然后,将堆中的引用地址存放在栈中。例如,当执行 let myArray = [1, 2, 3]; 时,数组 [1, 2, 3] 存储在堆中,而栈中存储的是指向堆中该数组的地址。这样做的好处是在传递引用类型时,实际上传递的是地址,而不是整个对象或数组的副本,从而提高了内存使用效率和数据传递的性能。

理解 JavaScript 的数据类型及其在 V8 引擎中的存储机制,有助于我们在编写代码时更好地管理内存,优化程序性能,避免一些常见的错误。无论是开发小型脚本还是大型应用,这些基础知识都能为我们的学习与工作提供坚实的基础。