JavaScript数据类型

yaoyao✪

已于 2023-07-10 11:11:22 修改

阅读量88

点赞数

文章标签： javascript 前端

于 2023-07-10 10:51:15 首次发布

本文链接：https://blog.csdn.net/weixin_48100106/article/details/131437860

版权

常用的数据类型

判断数据类型的方式

各种类型相互转换，这些转换方式有哪些特点，

适用场景

隐式转换和显示转换

类型实例的创建，及相关的方法

常用的数据类型

简单数据类型：String、Number、Boolean、undefined、null

引用数据类型：object （Array，Object，Function）

ES6新增：Symbol、BigInt、Map，Set

Symbol是一个独一无二的值，通过Symbol()函数生成。对象的属性名现在除了可以使用字符串以外; 还可以使用新增的Symbol类型。如果属性名使用Symbol，那么它就是独一无二的，不与其它属性名产生冲突。

const value = Symbol('我是www'); // 接收字符串作为参数，表示对Symbol的描述
console.log(value); // Symbol(我是www)
console.log(typeof value);  // symbol

const value1 = Symbol('我是yyy')
console.log(value === value1); // false 每调用一次Symbol()都会生成一个独一无二的值，每个Symbol都不相等。

const obj = {
    lisk: '橙子'
}
const value2 = Symbol(obj) 
const value3 = Symbol(JSON.stringify(obj)) 
console.log(value2); // Symbol([object Object])
console.log(value3); // Symbol({"lisk":"橙子"})

具体请参考：Symbol详解

BigInt 表示任意精度整数，使用BigInt可以安全的存储和操作任意大小的整数而不受Number类型的安全值范围的限制。生成一个BigInt类型的值只需要在任意整数后加上n做后缀即可。例如：123 用BigInt类型表示123n,也可以通过全局函数BigInt(number)来将Number类型转化为BigInt类型，换言之BigInt(123) === 123n

具体请参考：JavaScript基本类型之--BigInt_weixin_47143210的博客-CSDN博客

Map是一种键值对的数据结构，类似于对象，但是它的键可以是任意类型，而不局限于字符串。使用 Map 可以方便地存储和查询键值对。可以使用 new Map() 构造函数来创建一个新的 Map 对象，也可以使用数组来初始化一个 Map 对象。

// 方式一： 以二维数组的形式
const m = new Map([['键', '值'], ['name', 'www']]) 
console.log(m) // Map(2) {'键' => '值', 'name' => 'www'}

// 方式二： 用set的方法添加数据 
const m1 = new Map()
m1.set('name', 'yyy') 
console.log(m1) // Map(2) {'name' => 'yyy'}

//获取Map数据类型中的数据
console.log(m.get('键')) // 值
console.log(m1.get('name')) // yyy

// 删除Map数据类型中,指定的键名
m.delete('键')
console.log(m) // Map(1) {'name' => 'www'}

// 判断是否是Map的成员
console.log(m.has('name')) //true
console.log(m.has('键')) // false

set构造函数能让你创建 Set 对象，其可以存储任意类型的唯一值，无论是基本类型或者对象引用Set 数据类型不会添加重复的值。

+0 和 -0 会被认为是两个不同的值，两个都可以存
undefined 和 undefined 是恒等的，只能存一个
NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个

// 创建Set
const value = new Set([1, 2, 3, 4, 4])
console.log(value) // Set(4) {1, 2, 3, 4} 抛出重复的元素


// set属性 size 属性将会返回 Set 对象中元素的个数。
const value1 = new Set([1, 1, 2, 3, 4])
console.log(value1.size) // 4 

// set的方法
// 【1】keys()与values() 获取 Set 对象的所有元素。(返回 SetIterator迭代器)
    console.log(value1.keys()) // SetIterator {1, 2, 3, 4}
    console.log(value1.values()) // SetIterator {1, 2, 3, 4}

// 【2】entries() 获取Set对象的所有元素，迭代器的每个元素为 [value, value] 的形式。（返回 SetIterator迭代器）
    console.log(value1.entries()) // SetIterator {1 => 1, 2 => 2, 3 => 3, 4 => 4}

// 【3】add 添加指定元素。（返回一个新的 Set）
// 【4】clear 移除 Set 对象中所有元素。（返回 undefined）
// 【5】has 判断指定元素是否存在于 Set 对象中。（返回布尔值）
// 【6】delete 移除 Set 对象中的指定元素。（返回布尔值）

判断数据类型的方式

typeof 用于确定变量或表达式的数据类型

console.log(typeof('value')) // string
console.log(typeof(1)) // number
console.log(typeof(NaN)) // number
console.log(typeof(true)) // boolean

let value
console.log(typeof(value)) // undefined

value = 'hi'
console.log(typeof(value)) // string

console.log(typeof(value1)) // object
console.log(typeof(null)) // object

console.log(typeof(function fn() {})) // function
console.log(typeof([1, 2, 3, 4])) // object


const object = {name: 'wyy', age: 18}
console.log(typeof(object)) // object
console.log(typeof(object.name)) // string

Array.isArray 用于确定一个值是否为数组

// 返回值为布尔值 Boolen

console.log(Array.isArray([2, 3, 4])) // true
console.log(Array.isArray({name: 'wyy', age: 18})) // false

// 创建一个伪数组
function PseudoArray() {
  this.length = 0;
}

PseudoArray.prototype.push = function(element) {
  this[this.length] = element;
  this.length++;
};

const pArray = new PseudoArray();
pArray.push("元素1");
console.log(pseudoArray) // PseudoArray {0: '元素1', length: 1}

// 检测伪数组
const array = ['真数组1', '真数组2']
console.log(array) //  ['真数组1', '真数组2']

console.log(Array.isArray(pArray)) // false
console.log(pArray instanceof Array) // false
console.log(Object.prototype.toString.call(pArray)) // [object Object]

console.log(Array.isArray(array)) // true
console.log(Object.prototype.toString.call(array)) // [object Array]

Object.prototype.toString.call 可以精确地获取一个值的内部 [[Class]] 属性，以判断其准确的类型。

console.log(Object.prototype.toString.call('hi')) // [object String]
console.log(Object.prototype.toString.call(1)) // [object Number]
console.log(Object.prototype.toString.call(NaN)) // [object Number]
console.log(Object.prototype.toString.call(true)) // [object Boolean]

let value
console.log(Object.prototype.toString.call(value)) // [object Undefined]
console.log(Object.prototype.toString.call(null))  // [object Null]

console.log(Object.prototype.toString.call(function fn(){})) // [object Function]
console.log(Object.prototype.toString.call([1, 2, 3, 4])) // [object Array]
console.log(Object.prototype.toString.call({name: 'wyy'})) // [object Object]

const set = new Set([1, 1, 2, 3, 4])
console.log(Object.prototype.toString.call(set)) // [object Set]

const symbol = Symbol('hi')
console.log(Object.prototype.toString.call(symbol)) // [object Symbol]

const m = new Map([['键', '值'], ['name', 'www']])
console.log(Object.prototype.toString.call(m)) // [object Map]

// 对返回值进行优化
function getDataType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

instanceof 用于检查对象是否为特定类的实例

// 检测的元素 instanceof 数据类型，返回值为布尔值 Boolean

console.log('hi' instanceof String) // false，因为字符串字面量不是 String 类的实例
console.log(new String('hi') instanceof String) // true

console.log([1, 2, 3, 4] instanceof Array) // true
console.log({name: 'wyy', age: 18} instanceof Object) // true

isNaN(NaN)

各种类型相互转换，这些转换方式有哪些特点

字符串转换

const num = 10
// 将num转换为字符串
console.log(num.toString())
console.log(String(num))
console.log(num + '1') // 101

数字转换

const str = '10'
// 将str转换为数字
console.log(Number(str))
console.log(parseInt(str)) // 转为整数
console.log(parseFloat(str)) // 转为浮点数
console.log(+ str) // 当+ 作为正号时，做隐式转换
console.log(str - '8') // -可作为隐式转换，先将其转换为数字型，再进行做减法
console.log(Math.floor(str)) // 函数返回小于或等于给定数字的最大整数。

布尔值转换

// 转换为false中的情况 Boolean(变量)
const v1 = '' // 空字符串 false
const v2 = 0 // false
const v3 = undefined // false
const v4 = null // false
const v5 = NaN // false
const v6 = ' ' // 空格 true

console.log(Boolean([])) // true
console.log(Boolean({})) // true

console.log(![]) // false
console.log(!![]) // true

数组转换

// Array.from 可以将字符串转换为数组，同时可以将伪数组转换为真数组
const arr = Array.from('hello') 
console.log(arr) // ['h', 'e', 'l', 'l', 'o']

隐式转换和显示转换

显示转换

例如以上数据转换的方法：Number()，parseInt()， parseFloor()，Boolean()……

（1）布尔型转换为数字： true 为 1 ， false 为 0
（2）null 转换为数字为 0 ， undefined 为 NaN
（3）如果值为 false、 0、 ''、 null、 undefined、 NaN, 则返回 false，其余返回为 true

隐式转换

隐式转换首先转换为字符串，再由字符串转为Number

const w = false + 1;
console.log(w) // 1

//这就发生隐式转化；转换过程：
= 'false' + 1; // 先转换成字符串
= 0 + 1;       // 在转换为数值内型
=1;

（1）算术运算符 ‘-’ ‘*’ ‘/’ ；比较运算符 ‘> ’ ‘==’
（2）‘+’ 正号使用的时候，也会把字符串转换为数字型
（3）隐式转换为字符串型的运算符 + 拼接字符串两侧只要有一个是字符串，结果就是字符串
（4）隐式转换为布尔型的运算符！逻辑非

const str = '1234'

// 隐式转换 运算符
console.log(str - '134') // 1100
console.log(str * '134') // 165356
console.log(str / '2') // 617
console.log(str > '12345') // false
console.log(str == '1234') // true
console.log(str === '1234') // false ===必须数据类型和数字统一的情况下才能为true

// + 作为正号时，将字符串转换为数字型
console.log(+ str) // 1234

// 字符串与字符串的相加则为拼接
console.log('1' + str) // 11234

// 逻辑非 ！
console.log(!str) // false

类型实例的创建，及相关的方法

在 JavaScript 中，可以使用构造函数创建不同类型的实例；

字符串创建 new String()

const str = new String('hello')

// 转换为大小写
console.log(str.toUpperCase()) // 大写 HELLO
const STR = str.toUpperCase();
console.log(STR.toLowerCase()) // 小写 hello

// 截取字符串
slice(start下标, end下标(可选)) // 如果开始为负数，则从尾部开始截取；如果没有选择结束下标，则截到字符串的结尾
sbuStr(start下标, 截取的个数(可选)) // 如果没有选择截取个数，则截到字符串的结尾
sbuString(start下标, end下标(可选))

// 是否以某个字符开始/结束
console.log(str.startsWith('h')) // 开始 true
console.log(str.endsWith('h')) // 结束 false

// 转换为数组
console.log(str.split()) // ['hello']

数组创建 new Array()

const arr = new Array([1,2,3,4,5,6])

// 增
push() // 在数组的结尾添加元素 返回值：添加完成后数组的长度
unShift() // 在数组的开头添加元素 返回值：添加完成后数组的长度

// 删
pop() // 删除数组中的最后一个元素 返回值：被删除的元素本身
shift() // 删除数组中的第一个元素 返回值：被删除的元素本身
splice(开始删除的下标, 删除的个数, 替换删除的元素) // 返回一个新数组

filter(数组的每一项, 索引值, 数组本身) // 过滤数组，返回值: 过滤后的新数组
map(数组的每一项, 索引值, 数组本身) // 处理数组的每一项，返回值：被处理后的新数组
jion('转换符') // 将数组转换为字符串，返回值：转换后的字符串
indexOf('检查的元素', '开始查找的位置') // 检测当前值在数组中第一次出现的位置索引，返回值：找到则为索引值，没有则为-1
includes() // 数组中是否包含某个元素 返回值：布尔值
sort() // 对数组的元素进行排序（默认是从小到大来排序 并且是根据字符串来排序的）a-b: 从小到大 b-a：从大到小 返回值：排序后的新数组
……

对象创建 new Object()

const obj = new Object({name: 'wyy', age: 18})

Object.create() // 创建对象
Object.keys() // 获取对象中的键 返回值：键形成的数组
Object.values() // 获取对象中的值，返回值：值形成的数组
Object.entries() // 分割对象 返回值：对象转换为二维数组
Object.assign('原对象', '目标对象') // 对象合并 
Object.hasOwnProperty() // 检查对象是否包含某个属性 返回值：布尔值

// vue2双向绑定的原理
Object.defineProperty(object, prop, descriptor)定义对象属性
【1】object：要定义属性的对象。
【2】prop：要定义或修改的属性名称。
【3】descriptor：一个描述符对象，用于指定属性的特性。
     ① value：要设置的属性的值。
     ② writable：是否可写，默认为 false。
     ③ enumerable：是否可枚举，默认为 false。
     ④ configurable：是否可配置，默认为 false。
     ⑤ get：获取属性值的函数。
     ⑥ set：设置属性值的函数。

……

时间创建 new Date()

const date = new Date() // Mon Jul 8 2023 10:46:58 GMT+0800 (中国标准时间)

getTime() // 获取日期对象的时间戳（自 1970 年 1 月 1 日以来的毫秒数）
getFullYear() // 获取年份（四位数）
getMonth() // 获取月份（0-11，0 代表一月）
getDate() // 获取月份中的日期（1-31）
getDay() // 获取星期几（0-6，0 代表星期日）
getHours() // 获取小时数（0-23）
getMinutes() // 获取分钟数（0-59）
getSeconds() // 获取秒数（0-59）
……