JS 基本类型、类型转换、包装类与常用方法简介

最新推荐文章于 2022-08-03 01:08:02 发布

「已注销」

最新推荐文章于 2022-08-03 01:08:02 发布

阅读量381

点赞数 3

分类专栏： # ECMAScript 文章标签： javascript js

本文链接：https://blog.csdn.net/Ares5kong/article/details/116527090

版权

ECMAScript 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

基本数据类型

1. 未定义 undefined

总结一下常见的会出现 undefined 的场合：

(1) 显示赋值 undefined

(2) 使用只声明未赋值的变量

(3) 访问不存在的数组下标,、不存在的对象属性、未传入实参的函数参数

(4) 接收没有返回值的方法

代码：

<script>
  // 显示赋值 undefined
  let a = undefined
  console.log(a)

  // 使用只声明未赋值的变量
  let b
  console.log(b)

  // 访问不存在的数组下标
  let c = ['c']
  console.log(c[5])

  // 访问不存在的对象属性
  let d = {name: 'ares5k', age: 27}
  console.log(d['hobby']);

  // 访问未传入实参的函数参数
  (function e(param) {
    console.log(param)
  })()

  // 接收没有返回值的方法
  let f = function () {
  }()
  console.log(f)
</script>

2. 空值 null

总结一下常见的会出现 null 的场合:

(1) 显示赋值 null

(2) 方法返回，如 document.getElementById() 或 document.querySelector() 获取成功返回元素对象, 获取失败返回 null

代码：

<script>
  
  // 显示赋值 null
  let a = null
  console.log(a)

  // 方法返回
  let b = document.querySelector('.notExists')
  console.log(b)
  
</script>

3. 布尔 boolean

布尔类型只有两个值, 既关键字 true 和 false, 用来代表真假, 通常与条件语句或循环语句搭配使用。

<script>

  let a = true
  let b = false
  
  if (a) {
  }
  
  while (a) {
  }
  
  for (; a; ) {
  }

</script>

4. 数字 number

1. 数字类型是有安全使用范围的, 整数范围为 ± 2^53 - 1, 超过这个范围的计算可能会不准确。

2. 因为浮点数精度问题, 所以尽量不要直接进行小数运算。

<script>

  // 9007199254740991 整数最大安全值
  console.log(Number.MAX_SAFE_INTEGER)
  // 9007199254740991 + 2 = 9007199254740992 计算错误
  console.log(Number.MAX_SAFE_INTEGER + 2)

  // -9007199254740991 整数最小安全值
  console.log(Number.MIN_SAFE_INTEGER)
  // -9007199254740991 - 2 = -9007199254740992 计算错误
  console.log(Number.MIN_SAFE_INTEGER - 2)

</script>

5. 大整数 bigint

1. 对 ± 2^53 - 1 以外的整数进行运算时, 可以使用 bigint

2. bigint 的语法很简单, 就是在数字的末尾加个 n

3. bigint 不能与 number 类型混合使用计算

4. bigint 可以进行加减乘除计算, 但是不能和 Math 中的方法一起用

<script>
  // 加法计算 结果：9007199254740993n
  console.log(9007199254740991n + 2n)
  // 减法计算 结果：9007199254740989n
  console.log(9007199254740991n - 2n)
  // 乘法计算 结果：18014398509481982n
  console.log(9007199254740991n * 2n)
  // 除法计算 结果：4503599627370495n
  console.log(9007199254740991n / 2n)

  // bigint 与 number 值相同但是类型不同
  console.log(2 == 2n)
  console.log(2 === 2n)

  // 语法错误, bigint 不能与 number 混用
  console.log(1 + 2n)
</script>

6. 字符 string

任何类型用 + 与字符串连接, 结果都是字符串

<script>
  console.log('单引号和双引号都可以')
  console.log("单引号和双引号都可以")
  console.log(1 + 'isString')
  console.log(1n + 'isString')
  console.log(false + 'isString')
  console.log(null + 'isString')
  console.log(undefined + 'isString')
</script>

7. 符号 symbol

暂时还没领悟到 symbol 的真正作用，也就是说, 还不知道到底什么场景必须要用 symbol, 以后知道了再回来补上。

下面是 symbol 的简单用法:

<script>
  // 创建新的 Symbol
  let a = Symbol('a')
  let b = Symbol('a')
  console.log(a === b) // false

  // 先搜索是否有与描述符相同的 Symbol
  // 有就直接返回
  // 没有就创建一个 Symbol,并登记描述符, 以便后面搜索返回
  let c = Symbol.for('a')
  let d = Symbol.for('a')
  console.log(c === d) // true

  // 返回描述符
  console.log(c.description)

  // 属性名和方法名
  let e = {
    [Symbol.for('e')]: '',
    [Symbol.for('f')]: function () {}
  }
  // 调用对象方法
  e[Symbol.for('f')]()
</script>

类型转换

1. 字符串转换

常见方式：

<script>
  // 方式 1
  let a = 1
  let as = a.toString()
  console.log(typeof as)

  // 方式 2
  let b = false
  let bs = String(b)
  console.log(typeof bs)

  // 方式 3
  let c = null
  let cs = c + ''
  console.log(typeof cs)
</script>

2. 数字型转换

常见方式：

parseInt() 和 parseFloat() 能自动去掉像素单位, 只留数值。

<script>
  // 方式 1
  let a = '1.1'
  let ai = parseInt(a)
  console.log(typeof ai)

  // 方式 2
  let b = '1.1px'
  let bi = parseFloat(b)
  console.log(typeof bi)

  // 方式 3
  let c = '1.1px'
  let ci = Number(c)
  console.log(typeof ci)
  
  // 参数为日期类型时, 可以直接返回时间戳
  console.log(Number(new Date()))

  // 方式 4
  let d = '1.1'
  let di1 = d / 1
  let di2 = d * 1
  let di3 = d - 0
  console.log(typeof di1)
  console.log(typeof di2)
  console.log(typeof di3)
</script>

3. 布尔型转换

空串、 0、 nan、 null、 undefined 转换后为 false, 其余都为 true

<script>
  // 空串
  let a = ''
  let ab = Boolean(a)
  console.log(ab)
  console.log(typeof ab)

  // 数字 0
  let c = 0
  let cb = Boolean(c)
  console.log(cb)
  console.log(typeof cb)

  // 表达式 d 的计算结果是 NaN
  let d = 1 / 'string'
  let db = Boolean(d)
  console.log(db)
  console.log(typeof db)

  // null
  let e = null
  let eb = Boolean(e)
  console.log(eb)
  console.log(typeof eb)

  // undefined
  let f = undefined
  let fb = Boolean(f)
  console.log(fb)
  console.log(typeof fb)
</script>

包装类与常用方法

1. 包装类

(1) 基本类型是不能添加属性和方法的，只有对象类型才可以, 包装类可以将基本类型变成对象类型

<script>
  // 数字型包装类
  new Number(66.66)
  // 布尔型包装类
  new Boolean(true)
  // 字符型包装类
  new String('字符串')
</script>

(2) 基本类型是没有属性和方法的, 平时我们使用基本类型却可以调用包装类方法的原因, 是因为程序在运行时有内部转换,

程序运行时, 会根据数据的真实类型, 转换成对应的包装类, 然后调用包装类的方法, 类似下面流程

<script>
  // 程序代码
  let a = 66.66
  a.toFixed(2)

  // 模拟内部转换
  // 真正执行的代码
  new Number(a).toFixed(2)
</script>

2. 字符型常用方法

语法：

属性	length	获取字符串长度
方法	indexOf ( 待查找的字符, 查找时主字符串的起始索引)	返回字符在主字符串内第一次出现的索引位置
方法	lastIndexOf ( 待查找的字符, 查找时主字符串的起始索引 )	返回字符在主字符串内最后一次出现的索引位置
方法	charAt ( 索引位置 )	返回位于指定索引位置的字符串
方法	charCodeAt ( 索引位置 )	返回位于指定索引位置的字符串的 unicode 编码
方法	substr ( 开始索引包含, 截取的长度 )	截取字符串
方法	substring ( 开始索引包含, 结束索引不包含)	截取字符串
方法	toUpperCase()	字符串转为大写
方法	toLowerCase()	字符串转为小写
方法	concat ( 要拼接的字符串 )	拼接字符串
方法	trim()	删除字符串两侧空白
方法	split ( 分割符 )	按照分割符分割字符串为数组
方法	replace ( 将被替换的字符串, 替换后的字符换)	替换首次匹配的字符串
方法	replace ( /正则表达式/i )、replace ( /正则表达式/g )	i：忽略大小写、 g：全部替换、ig：忽略大小写并全部替换

演示：

<script>
  // length 结果：7
  console.log('获取字符串长度'.length)

  // indexOf() 结果：1
  console.log('apple'.indexOf('p'))

  // lastIndexOf() 结果：2
  console.log('apple'.lastIndexOf('p'))

  // charAt() 结果：a
  console.log('banana'.charAt(1))

  // charCodeAt() 结果：97
  console.log('banana'.charCodeAt(1))

  // substr() 结果：banana
  console.log('orange banana'.substr(7, 6))

  // substring() 结果：banana
  console.log('orange banana'.substring(7, 13))

  // toUpperCase() 结果：U.S.A
  console.log('u.s.a'.toUpperCase())

  // toLowerCase() 结果：function
  console.log('FUNCTION'.toLowerCase())

  // concat() 结果：orange banana
  console.log('orange'.concat(' ').concat('banana'))

  // trim() 结果：javascript
  console.log('   javascript '.trim())

  // split() 结果：["1", "2", "3", "4"]
  console.log('1,2,3,4'.split(','))

  // replace() 结果：apble
  console.log('abble'.replace('b', 'p'))

  // replace() 结果；apple
  console.log('abble'.replace(/b/ig, 'p'))
</script>

3. 数字型常用方法

语法：

方法	toString()	转换成字符型
方法	toExponential ( 变为指数计数后, 要保留的小数位 )	以指数计数方式返回字符串, 四舍五入
方法	toFixed ( 要保留的小数位数 )	保留指定小数位, 银行家舍入规则, 四舍六入五犹豫, 最好重写, 好像有坑
方法	toPrecision ( 要保留的数字位数 )	保留指定位数的数字，并以字符串返回
方法	valueOf()	以基本类型的数字型返回

演示：

<script>
  // toString() 结果：string
  let a = 1
  let am = a.toString()
  console.log(typeof am)

  // toExponential() 结果：1.3e+2
  let b = 125
  let bm = b.toExponential(1)
  console.log(bm)

  // toFixed() 结果：66.67
  let c = 66.666
  let cm = c.toFixed(2)
  console.log(cm)

  // toPrecision() 结果：123.5
  let d = 123.456
  let dm = d.toPrecision(4)
  console.log(dm)

  // valueOf() 结果：number
  let e = 123
  let em = e.valueOf()
  console.log(typeof em)
</script>

NaN 和 isNaN():

NaN 全称 Not a Number，当对非数字值进行数字操作时, 会返回 NaN

isNaN()： true( 非数字值 ) false( 数字值 )

注意, 非数字值并不代表非数字类型。

布尔类型是非数字型, 但是 true 和 false 是可以当作数字值的, 字符串也是非数字型，但是 '1'、'2'、‘3’... 也可以当作数字值

<script>
  // 布尔进行数字操作
  let b = false - 1
  console.log(b) // -1
  console.log(isNaN(b)) // false

  // 数字类字符串进行数字操作
  let c = '1000' - 1
  console.log(c) // 999
  console.log(isNaN(c)) // false

  // 字符类字符串进行数字操作
  let a = 1 - 'option'
  console.log(a) // NaN
  console.log(isNaN('a')) // true
</script>