JavaScript基础篇 -- 数据类型你真的全都知道么

157 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情

js 数据类型

  1. js 数据类型有8个依次是 Undefined,Null,Boolean,Number,String,Object, BigInt,Symbol
  • Undefined:当值未定义的时候,例如函数没有明确返回值,和 声明变量没有赋值
  • Boolean:布尔类型( true 和 false )
  • String:字符串类型( 用 单引号 或者 双引号 表示 )
  • Number:数字类型( 整数和小数 )
  • BigInt:表示任意精度格式的整数
  • Null: 空类型,值只有一个null,一个对象指向为空,此时可以赋值为null
  • Object:对象
  • Symbol:用来创建匿名的对象属性
  1. 基本类型7Undefined,Null,Boolean,Number,String,BigInt,Symbol
  2. 引用数据类型(Object)具体常见的有,Array - 数组对象、RegExp - 正则对象、Date - 日期对象、Math - 数学函数、Function - 函数对象,和 基本类型包装对象 (除了 nullundefined 之外,所有基本类型都有其对应的包装对象)String为字符串基本类型包装对象、Number 为数值基本类型包装对象、BigInt 为大整数基本类型包装对象、Boolean 为布尔基本类型包装对象,Symbol 为字面量基本类型包装对象
  3. 基础类型存储在栈内存,被引用或拷贝时,会创建一个完全相等的变量
  4. 引用类型存储在堆内存,存储的是地址,多个引用指向同一个地址
  5. 函数参数如果是对象 传递参数对象在 堆中的地址

null 和 undefined

  1. 首先当我们声明一个对象的变量的时候,如果没有给其赋值最好设置为null,例如: var myObject = null
  2. 当使用 双等时候 :console.log(null == undefined) 结果为 'true' 但不建议这么使用
  3. null 是 JavaScript 保留关键字
  4. undefined 是全局 对象的一个属性( 它是全局作用域的一个变量 )undefined是一个不能被配置(non-configurable),不能被重写(non-writable)的属性,也要注意 undefined 不是一个保留字 undefined 参考

undefined

  1. Undefined是一个很特殊的数据类型,它只有一个值,也就是 undefined
  2. 产生undefined几种情况, 引用已声明但未初始化的变量、引用未定义的对象属性、执行无返回值函数、执行 void 表达式、全局常量 window.undefined 或 undefined

var a; // undefined 引用已声明但**未初始化的变量**

var o = {}

o.b // undefined 引用**未定义**的对象属性

(() => {})() // undefined 执行**无返回值**函数

void 0 // undefined 执行 **void 表达式**

window.undefined // undefined 全局常量 **window.undefined 或 undefined**

  1. void 表达式来得到 undefined 值,因为这种方式比 undefined 长度少,不需要引用额外变量和属性 在三目运算的时候表示不进行任何操作 x>0 && x<5 ? fn() : void 0;
  2. undefined是全局对象的一个属性,因此在非全局作用域下可以重新赋值

// 打印 'foo string' PS:说明undefined的值和类型都已经改变

(function() {

var undefined = 'foo';

console.log(undefined, typeof undefined)

})()

  1. undefined in window // true 证明是window 中一个属性
  2. 判断 undefined 类型,下面的三种形式都可以对 'undefined' 做判断,但是推荐type of 的形式,原因:第一种对 空字符串 数值0null 等情况都会条件成立不仅仅针对 undefined,第二种用'==='但是如果变量没定义会报错,导致程序停止运行

// 方式1

if(!x) {

...

}

// 方式2

if(x===undefined) {

...

}

// 方式2

if(typeof x === 'undefined') {

...

}

Boolean 类型

  1. 布尔类型只有两个字面值:truefalse, 并且区分大小写,只能小写表示

  2. 如果想将其他值转成布尔类型使用Boolean() -- 或者使用!!

  3. 有时候可以看到一些言论说数字 1是true 或者 0是false 实际只是在 if 条件语句中 这些值自动执行了Boolean 方法上的转化

  4. 除了 undefined、 null、 false、 ''、 0(包括 +0,-0)、 NaN 转换出来是 false,其他都是 true

  • 说明 console.log(Boolean(Infinity)) // true
数据类型转化为true转化成false
Booleantruefalse
String任何非空字符字符串length等于0(空字符)
Number非0的数字(Infinity)包括无穷大0 和 NaN
Object任何对象包括 {} 对象中没值 /new Boolean(false)null
Undefinedn/a(不使用的意思)undefined

Number 类型

  1. 二进制:遇到2进一

  2. 八进制:遇到8进一

  3. 十进制:遇到10进一

  4. 十六进制:遇到f进一

  5. 数字类型分整数类型和浮点数值类型

  6. NaN 表示非数值类型

  7. 使用Infinity / -Infinity表示无穷大/无穷小

  8. js 表示数字的 最大值/最小值 使用:MAX_VALUE/MIN_VALUE例如 console.log(Number.MAX_VALUE)

toLocaleString 有意思

进制问题

  1. 十进制就是正常数字表示

  2. 八进制的第一位必须是0,然后数字顺序是(0-7),超出0-7前导0被忽略然后展示数字

  3. 十六进制必须是0x开头,后面跟着(0-9)及(A-F),字母大小写不区分,超出同理八进制

  4. 计算的时候会自动将八进制和十六进制转换成十进制


var intNum = 10; // 十进制

var octalNumber1 = 070; // 八进制

var octalNumber2 = 080; // 错误的八进制只能在0-7中

var hexNumber1 = 0xA; // 十六进制

console.log(intNum, octalNumber1, octalNumber2, hexNumber1)

打印结果:

10 56 80 10

  • 进制计算

var octalNumber1 = 070; // 八进制

var hexNumber1 = 0xA; // 十六进制

console.log(hexNumber1+octalNumber1) // 八进制56 + 十六进制10

打印结果:

66

浮点数值

  1. 浮点值内存空间是整数值的两倍,因此在特定情况下浮点值回被转成整数,例如:var a = 1.0 打印的值就是1

  2. 可以使用科学计数法来表示一些数值,表现形式就是e前面的数值乘上后面10的次幂,例如:var a = 3.12e5 相当于 3.121053.12 * 10^5 因此 a 的结果是312000

  3. 想用科学计数法表示小数则可以写成:var a = 3.12e-5 打印结果0.0000312

  4. 不要用一个小数去求证一个小数 例如 0.1+0.2 问题

NaN -- 非数值(Not a Number)

  1. NaN 不予任何值相等包括本身例如:alert(NaN == NaN) // false

  2. 任何数值除以非数值都会返回NaN

  3. 想判断当前是不是数字用isNaN() 方法,不是数字返回true,是数字返回false,这种判断不准确因为isNaN 接受的参数其实是数字,当然如果你传入了其他类型参数你发现他依然可以执行,在规范中的解释是'Let num be ToNumber(number).' tonumber参考isnan参考

  4. isNaN() 也可以验证对象,但是会先调用对象的valueOf() 看返回的是不是一个数字,如果对象没有这个方法,则调用toString() 方法,如果都没有则为true,反之根据刚才两方法的返回值来做判断

  5. 判断一个值是不是数字typeof value === 'number' && !isNaN(value) ,因为 NaN 的typeof 是number


console.log(isNaN(NaN)) // true

console.log(isNaN('w')) // true

console.log(isNaN(10)) // false

console.log(isNaN('10')) // false

console.log(isNaN(true)) // false(true会被转成1)

console.log(isNaN([]) )// false

console.log(isNaN([123]) )// false

console.log(isNaN(['123']))// false

字符串String

  1. toString()可以将所有的的数据都转换为字符串,调用自身 toString 方法,但是要排除 nullundefined,也就是falsetrue 例如 true.toString(),包含在内,也可以做进制转换例如:

二进制:.toString(2);

八进制:.toString(8);

十进制:.toString(10);

十六进制:.toString(16);

  1. String() 可以将 nullundefined转换为字符串,但是没法转进制字符串转换规则
  • 基本类型拿字符串包起来,举个例子String(true) => 结果 true

  • 对象则是调用 Symbol.toPrimitive -> valueOf -> toStringObject.prototype.toString 举个例子String(new Object) => (new Object).toString() =>打印结果 [object Object]

Sysmbol 唯一值类型

  1. ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型

  2. Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型

  3. Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

  4. 很多JS底层的处理机制,就是基于这些属性方法实现的Symbol.hasInstance\Symbol.toStringTag\Symbol.toPrimitive\Symbol.iterator...

  • 给对象属性设置 sysmbol 值

const obj = {

name: 'w',

[Symbol()]: 'symbol',

}

// 打印是undefined ,原因是因为当前打印的symbol key

// 和声明的symbol 毫无关系

console.log(obj[Symbol()])

// ---------------想获取方法一------------------

const key = Symbol()

const obj = {

name: 'w',

[key]: 'symbol',

}

// 想获取symbol 可以将symbol 作为统一的变量提取

console.log(obj[key])

// ---------------想获取方法二------------------

const obj = {

name: 'w',

[key]: 'symbol',

}

let symbolKeys = Object.getOwnPropertySymbols(obj); //获取当前对象所有Symbol类型的私有属性,结果数组

symbolKeys.forEach(key => {

console.log(obj[key]);

});

BigInt

JS中在进行数学运算的时候,如果计算的数值超过最大/最小安全数字,计算出来的结果很可能是不准确,举个例子查看数字最大安全值Number.MAX_SAFE_INTEGER和 最小安全值的方法Number.MIN_SAFE_INTEGER


const maxNumber = Number.MAX_SAFE_INTEGER

console.log(maxNumber)

const add = maxNumber + 10

console.log(add)

  • 上面的打印结果在我的电脑如下:

9007199254740991

9007199254741000

可以发现当超过了最大精度时候计算开始出现错误,为了避免这种事情发生使用BigInt大数类型:数字后面加个n即使大数类型


const add = BigInt(maxNumber) + 10n

console.log(add)

打印结果9007199254741001n当在数字后面加n时候即转换为大数类型

实际开发过程服务器端数据库存储,是有longInt类型,服务器返回给客户端的值超过安全数字的一般会将数字返回字符串作为参数返回,但是如果前端想要计算此时就不能是单纯转换为数字类,需要BigInt,当计算完成后在将转换成字符串给到后台