跳至主要內容

javascript数据类型详解

熊黎龙2022年5月27日javascript大约 7 分钟约 1993 字

字符串

字符串是原始值不是对象，无法拥有属性和方法，但js从逻辑上把字符串视为对象。

const a = '  Learning is always a painful process.  '
const b = 'E:\\project\\blog\\'  // 字符串转义

// 查看字符串长度
console.log(x.length)

// 查找字符串位置（返回首次出现的索引位置，没有返回-1）
a.indexOf('alway')
// 反向查找字符串位置（返回最后一次出现的索引位置，没有返回-1）
a.lastIndexOf('o')
// 搜索字符串（与indexOf功能一样，不过search可以使用正则，indexOf可以设置搜索起始位置）
a.search('is')
// 正则搜索字符串（返回数组，没有就返回null）
a.search(/is/g)     // 默认只匹配第一项，正则加g匹配所有

// 字符串切片
const text1 = a.slice(3, 19)        // 注意，包含索引3，但不包含索引19
const text2 = a.slice(-12, -8)
const text3 = a.slice(8)            // 从索引8剪裁到最后

// 字符串替换
const text4 = a.replace('is', 'also is')  // 默认分大小写，默认只替换第一个
const text5 = a.replace(/IS/i, 'also is')  // 使用正则忽略大小写
const text6 = a.replace(/is/g, 'also is')  // 全局搜索全部替换

// 大小写转换
const text7 = a.toUpperCase()  // 大写
const text8 = a.toLowerCase()  // 小写

// 清除两边空格
const text9 = a.trim()

// 字符串转数组
const text10 = a.split(' ')  // 用空格分隔

// 字符串模板
const text11 = `one: ${a}, two: ${b}`
const text12 = `length: ${a.length + b.length}`
  • 字符串是不可变的不可更改的，所有字符串的方法都会返回新字符串，不会修改原始字符串。

正则表达式

表达式概念描述
[abc]查找方括号中任何字符
[0-9]查找任何0-9的数字
(a|b)a或b其中一个
\d查找数字
\s查找空白字符
\b查找单词边界
x+包含至少一个
x*包含0个或者多个
x?包含0个或1个

数值

js数值只有一种类型：64位浮点数，所以带不带小数点都行。 数值是原始值不是对象，无法拥有属性和方法，但js从逻辑上把数值视为对象。

const a = 12
const b = 123e2  // 12300
const c = 0xFF  // 十六进制，255
const d = 0377  // 八进制，255

// 转换为字符串（参数为进制）
const string1 = a.toString()  // 转化为字符串
const string2 = a.toString(2)  // 转换二进制的字符串
// 转换为字符串（参数为保留几位小数）
const string3 = a.tofixed(2)  // 保留两位小数

// 转换为数值
Number(new Date("2022-05-27"))
parseInt("12.45")
parseFloat("12.45")

//js中浮点的计算有时不精准
const count1 = 0.1 + 0.2  // 0.30000000000000004

// 减乘除中运算，js会尝试将字符串转数值（除加法外）
const count2 = '100' / '10'  // 10

// 不能识别的计算会得到NaN（Not a Number），指不是合法数
const count3 = 100 / "abc"  // NaN
isNaN(count3)  // true
typeof count3  // number

// 计算超出范围会得到Infinity
const count4 = 2 / 0  // Infinity
typeof count4  // number

// 四舍五入取整数（另外 ceil是上舍入，floor是下舍入）
Math.round(3.14)  // 3

// (包括)0 与 (不包括)1 之间的随机数
Math.random()

数组（对象）

在js中，数组是一种特殊类型的对象，使用typeof会返回object。不过最好描述成数组，以免混淆js中大括号对象的概念。


const names = [ '张三', '李四', '王五' ]
const name2 = [ 'sdg', 'qweppwi', 'we', 'dcos' ]
const name3 = [ 1, 34, 2, 7, 77, 99, 29, 92 ]

// 修改数组第一个数据
names[0] = '张三丰'
// 访问最后一个数据
names[names.length-1]

// 在结尾添加一个数据
names.push('Tom')
// 删除并弹出最后一个数据
names.pop()

// 删除和返回第一个数据，位移其他数据索引往前一位
names.shift()
// 新增到第一个数据，反向位移其他数据索引往后一位
names.unshift('Tom')

// 切片，并返回新数组
names.slice(1, 3)  // 从索引1开始，但不包括索引3
// 从中间位置删除
names.splice(1, 2)  // 从索引1开始往后删除两位数据，并返回删除的片段数组（没有空洞）
// 从索引2开始，删除0个数据，并从中插入以下三个数据
names.splice(2, 0, '三毛', '张飞', '吕布')


// 合并多个数组（并不会修改原数组）
const newNames = names.concat(['马超', '关羽'], ['小乔'], ['孙尚香'])

// 判断是否是一个数组
Array.isArray(names)  // true
names instanceof Array  // true

// 转换为字符串
names.toString()  // 去掉了中括号和引号，保留了逗号
names.join('-')  // 使用自定义分隔符转换为字符串

// 对字母排序
names2.sort()  // 默认是字母顺序排序，默认情况对数字排序有问题
// 对数字排序
name3.sort( function(a, b){ return a - b } )  // 升序
name3.sort( function(a, b){ return 0.5 - Math.random() })
// 对字母排序
name2.sort( function(a, b){
    if (a.toLowerCase() < b.toLowerCase()) { return -1 }
    if (a.toLowerCase() > b.toLowerCase()) { return 1 }
    return 0
})

// 查找数组中最大值和最小值
Math.max.apply(null, name3)  // 最大值
Math.min.apply(null, name3)  // 最小值

// 反转数组
names.reverse()

// 循环遍历
names.forEach(
    function(value, index, array) { return value }
)

// 循环遍历，创建新数组（会跳过数组中没有值的数据）
const newNames2 = names3.map(
    function(value, index, array) { return value * 2 }
)

// 循环过滤，创建新数组
const newNames3 = name3.filter(
    function(value, index, array) { return value > 50 } 
)

Date对象

// 创建Date对象

const d1 = new Date()                           // 当地现在时间

const d2 = new Date(1653580800000)              // 中国标准时间(CST) 2022年5月27日 0点0分

const d2 = new Date(2022, 4, 27)                // 当地时间 2022年5月27日 0点0分（js从0开始计算月份）
const d3 = new Date(2022, 4, 27, 9, 30, 0, 0)   // 当地时间 2022年5月27日 9点30分

const d4 = new Date('2022-05-27')               // UTC时间 2022年5月27日 0点0分
const d4 = new Date('2022-05-27 00:00:00')      // 当地时间 2022年5月27日 0点0分
const d5 = new Date('2022-05-27T09:30:00')      // UTC时间 2022年5月27日 9点30分
const d6 = new Date('2022-05-27 09:30:00')      // 当地时间 2022年5月27日 9点30分
// Date的获取方法

d.getTime()         // 返回自 1970 年 1 月 1 日以来的毫秒数
d.getFullYear()     // 返回数字形式的年份 (xxxx)
d.getMonth()        // 返回数字形式的月份 (0-11)
d.getDate()         // 返回数字形式的日 (1-31)
d.getHours()        // 返回数字形式的小时 (0-23)
d.getMinutes()      // 返回数字形式的分钟 (0-59)
d.getSeconds()      // 返回数字形式的秒 (0-59)
d.getMilliseconds() // 返回数字形式的毫秒 (0-999)
d.getDay()          // 返回数字形式的星期 (0-6)（0代表星期日）

// Date的设置方法同获取方法一致，只是把get改成set
// Date比较
const today = new Date()
const birthday = new Date()
birthday.setFullYear(2002, 11, 8)

if ( today > birthday ) console.log('出生好久了')
else console.log('我还没出生呢')
  • js从1970 年 1 月 1 日 00:00:00 UTC开始计算毫秒，一天是86400000毫秒
  • ISO国际标准的日期显示格式：2022-05-27
  • UTC是本初子午线(即经度0度)上的平均太阳时，北京时间=UTC时间往后加8小时，也就是UTC+8
  • UTC = GMT，只是UTC是民间用语

typeof精讲

typeof '张三'                        // 返回 "string"

typeof 0                            // 返回 "number"
typeof NaN                          // 返回 "number"

typeof false                        // 返回 "boolean"

typeof function () {}               // 返回 "function"

typeof [ 1, 2, 3, 4 ]                // 返回 "object"
typeof { name: '张三', age: 18 }     // 返回 "object"
typeof new Date()                   // 返回 "object"
typeof null                         // 返回 "object"

typeof ddksoiejqa                   // 返回 "undefined"

null == undefined                   // true
null === undefined                  // false
  • 无法用typeof确定是否为数组或Date
  • null和undefined的值相等，但类型不等

JSON

// 这里模拟服务器传过来的json字符串
const jsonText = '[{"name": "张三", "age": 18}, {"name": "李四", "age": 22}]'
// 解析成对象
const jsonObject = JSON.parse(jsonText)
  • JSON （JavaScript Object Notation）
  • JSON格式是纯文本
  • JSON属性名是需要双引号的，而书写js对象则不需要，这里是个区别
懂生活，懂编程
Copyright © 2025 熊黎龙