js数据类型,看这一篇就够了!

JavaScript中的数据类型是日常学习,开发中必不可少的知识点,掌握它们可以让我们更从容的解决问题,数据类型可以分成两类

  • 基本类型:string,number,null,Boolean,undefined,symbol
  • 复杂类型:Object,Array,Function等

两种类型的区别是占用内存和存储位置不同

一、存储区别

讲数据类型前要先说明两类数据类型的区别以及栈储存和堆储存的概念,方便以后的理解和学习

  • 基本数据:类型存储在
  • 引用类型:又称复杂类型,存储于

由于JS是弱数据类型语言,一个变量可以赋不同数据类型的值,所以当我们给一个变量赋值时,JS解析器首先要确认的就是这个值是基本类型值还是引用类型值,下面来举个例子

基本类型

ini 复制代码
let a = 10
let b = a // 赋值操作
b = 20
console.log(a) // 10值

a的值为一个基本类型,是存储在栈中,将a的值赋给b,虽然两个变量的值相等,但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程:

引用类型

引用类型的数据存放在堆内存中,注意,是数据存在堆内存中,而我们声明的变量中储存的其实是个地址,这个地址放在栈中,地址的作用就是告诉我们数据在哪里,这也是为什么我们用const常量修改对象属性时不报错,因为我们修改的时数据,而地址并没有变

ini 复制代码
const obj1 = {}
const obj2 = obj1
obj2.name = 'xxx'
console.log(obj1.name) // xxx

obj1是一个引用类型,在赋值操作过程汇总,实际是将堆内存对象在栈内存的引用地址复制了一份给了obj2,这样就有了两个一样的地址,它们都指向存在堆中的数据,所以更改obj2会对obj1产生影响

下图演示这个引用类型赋值过程

二、基本类型

基本类型主要为以下 6 种:

  • Number
  • String
  • Boolean
  • Undefined
  • null
  • symbol

1.Number

数值最常见的整数类型格式则为十进制,还可以设置八进制(零开头)、十六进制(0x 开头)

csharp 复制代码
let intNum = 55 // 10进制的55
let num1 = 070 // 8进制的56
let hexNum1 = 0xa //16进制的10

浮点类型则在数值汇总必须包含小数点,还可通过科学计数法表示

ini 复制代码
let floatNum1 = 1.1
let floatNum2 = 0.1
let floatNum3 = 0.1 // 有效,但不推荐
let floatNum = 3.125e7 // 等于 31250000

在数值类型中,存在一个特殊数值NaN,意为"不是数值",用于表示本来要返回数值的操作失败了(而不是抛出错误),任何与NaN进行的数值运算都会返回NaN

arduino 复制代码
console.log(0 / 0) // NaN
console.log(-0 / +0) // NaN

2.Undefined

Undefined 类型只有一个值,就是特殊值 undefined。当使用 varlet声明了变量但没有初始化时,就相当于给变量赋予了 undefined

javascript 复制代码
let message
console.log(message == undefined) // true

包含undefined 值的变量跟未定义变量是有区别的

javascript 复制代码
let message // 这个变量被声明了,只是值为 undefined
console.log(message) // "undefined"
console.log(age) // 没有声明过这个变量,报错

3.String

字符串可以使用双引号(")、单引号(')或反引号(`)标示,值得注意的是,字符串的引号必须是一对,如果想储存引号,可以用不同的引号互相包裹

ini 复制代码
let firstName = 'John'
let lastName = 'Jacob'
let lastName = `Jingleheimerschmidt`
let str = '"    //Unterminated string literal
let str2 = '""' // str2中储存的是""

字符串是不可变的,意思是一旦创建,它们的值就不能变了

ini 复制代码
let lang = 'Java'
lang = lang + 'Script' // 先销毁再创建

4.Null

Null类型同样只有一个值,即特殊值 null 逻辑上讲, null 值表示一个空对象指针,这也是给typeof传一个 null 会返回 "object" 的原因

javascript 复制代码
let car = null
console.log(typeof car) // "object"

undefined 值是由 null值派生而来,虽然它们等价,但不全等,而且undefined 转数字会显示NaN,而null为0

javascript 复制代码
console.log(null == undefined) // true
console.log(null === undefined) // false
Number(null) //0
Number(undefined) //NaN

一般用于变量要保存对象,而又不确定对象的数据时,就可用 null来填充该变量

5.Boolean

Boolean(布尔值)类型有两个字面值: truefalse 通过Boolean可以将其他类型的数据转化成布尔值 规则如下:

javascript 复制代码
数据类型      				转换为 true 的值      				转换为 false 的值
 String        				 非空字符串          				""
 Number 				非零数值(包括无穷值)			0 、 NaN
 Object 					 任意对象 					null
Undefined 				N/A (不存在) 				undefined

6.Symbol

Symbol (符号)是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符,比如你想给一个对象添加一个属性,但又不确定这个属性对象里存不存在,就可以用Symbol,不会发生属性冲突的危险

ini 复制代码
let genericSymbol = Symbol()
let otherGenericSymbol = Symbol()
console.log(genericSymbol == otherGenericSymbol) // false
let fooSymbol = Symbol('foo')
let otherFooSymbol = Symbol('foo')
console.log(fooSymbol == otherFooSymbol) // false

三、引用类型

复杂类型统称为Object,我们这里主要讲述下面三种:

  • Object
  • Array
  • Function

1.Object

创建object常用方式为对象字面量表示法,属性名可以是字符串或数值

yaml 复制代码
let person = {
  name: 'Nicholas',
  age: 29,
  5: true,
}

2.Array

JavaScript数组是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。并且,数组也是动态大小的,会随着数据添加而自动增长

ini 复制代码
let colors = ['red', 2, { age: 20 }]
colors.push(2)

3.Function

函数实际上是对象,每个函数都是 Function类型的实例,而 Function也有属性和方法,跟其他引用类型一样

函数存在三种常见的表达方式:

  • 函数声明
javascript 复制代码
// 函数声明
function sum(num1, num2) {
  return num1 + num2
}
  • 函数表达式
bash 复制代码
let sum = function (num1, num2) {
  return num1 + num2
}
  • 箭头函数

函数声明和函数表达式两种方式

bash 复制代码
let sum = (num1, num2) => {
  return num1 + num2
}

除了上述说的三种之外,还包括DateRegExpMapSet

小结

  • 声明变量时不同的内存地址分配:

    • 简单类型的值存放在栈中,在栈中存放的是对应的值
    • 引用类型对应的值存储在堆中,在栈中存放的是指向堆内存的地址
  • 不同的类型数据导致赋值变量时的不同:

    • 简单类型赋值,是生成相同的值,两个对象对应不同的地址
    • 复杂类型赋值,是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

补充 数据类型检测方法与区别

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui