javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript数据类型

JavaScript数据类型及相互间的转换规则

作者：i东东​​​​​​​

这篇文章主要介绍了JavaScript数据类型及相互间的转换规则，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

数据类型的分类

JS中的数据类型有七中原始数据类型:

非标准特殊对象

除了null和undefined每个原始值类型都有一个自己对应的对象类型值

Symbol

Symbol是唯一值，他是不能通过New操作符进行创建的，每次执行Symbol都是创建一个唯一值，下方代码A和B虽然看起来是一样的但却不相等的两个值。假如如果把C=A这样把A的值赋给C，那么A和C肯定是相等的

let A = Symbol('i东东')
let B = Symbol('i东东')
let C = A 
console.log(A === B); // false
console.log(A === C); // true

应用场景：

用字符串和数字类型的都可以取到值，name就可以认为他们的属性名是字符串类型的 

下方代码console.log([Symbol('AA')])是无法取到值的，因为这个相当于创建了一个新的唯一值，用新的唯一值去访问是不对应的，正确的方法应该是创建一个唯一值，再把这个唯一值作为属性去访问。

let key = Symbol('88')
let obj = {
  num: 100,
  10:'数字',
  [Symbol('AA')]:'Symbol类型的属性名', // 在大括号中加Symbol语法要求必须加大括号
  [key]:400
}
console.log(obj[Symbol('AA')]); // undefined
console.log(obj[key]); // 400说

一个对象的属性名是不能重复的，用唯一值做属性的好处就是，他是不会重复的

let obj = {
  [Symbol('AA')]: 100,
  [Symbol('AA')]: 100,
  // 这两个是不同的两个值
}

BigInt 大数类型

JS中的最大安全数 Number.MAX_SAFE_INTEGER = 9007199254740991

JS中的最小安全数 Number.MIN_SAFE_INTEGER = -9007199254740991

超过安全数后，进行运算或者访问，结果会不准确！！ 数据库当中存取数据会分成整型、长整型、短整型，长整型支持的数字长度是比JS的安全数大的，当服务器返回给客户端一个长整型的数字，如果超出最大安全数值就会出现问题。

 解决方案：

console.log(BigInt('9007199254740991') + BigInt(12345)); // 9007199254753336n
console.log(9007199254753336n.toString()); // 9007199254753336
// 123n  在数字后面直接加`n`也表示大数BigInt

数据类型检测

在日常开发中用到最多的就是typeof检测数据类型,所有的数据类型值，在计算机底层都是按照'64位'的二进制进行存储的!type是按照二进制值进行检测类型的

例如：

检测未被申明的变量，值为undefined

console.log(a); // ReferenceError: a is not defined
console.log(typeof a); // undefined

场景1：检测当前值是否是一个对象

const fn = options =>{
   let type = typeof options
   if(options !== null && (type === 'object' || type === 'function')){
    // 这样进来的才能确保是一个对象
   }
}
fn({
  num:10
})

场景2：支持更多的模块导入方案

(function(){
  if(typeof window !== 'undefined') window.utils = utils
  if(typeof module === 'object' && typeof module.exports == 'object') module.exports = utils
})()

数据类型间的相互转换

数据类型间的相互转换主要有隐式数据类型转换和显示数据类型转换两种。 一般用于浏览器中的隐式转换：

比如说在数据运算时会进行隐式数据类型转换,10-2的时候实际上默认就调用了Number('2')进行了类型转换之后才进行的减法运算。

比如用isNaN来判断时前值是不是一个有效数字，就相当于调用了下面的方法，先调用Number再执行isNaN。

规则

Number([val])

let time = new Date()
console.log(Number(time)); // 1662715039452
console.log(time[Symbol.toPrimitive]('number')); // 1662715039452
// 首先检测 Symbol.toPrimitive有没有, 结果：有 而且是一个函数 time[Symbol.toPrimitive]('number')
let arr = [10]
console.log(Number(arr));
/**
 * 首先arr[Symbol.toPrimitive] => undefined
 * 然后arr.valueOf() 数组是没有原始值的 => [10]  任何一个对象都有valueOf
 * 再然后 arr.toString => '10'
 * 最后在把字符串'10'转换为数字 => 10
*/
let num = new Number(10)
console.log(Number(num));
/**
 * 首先num[Symbol.toPrimitive] => undefined
 * 然后num.valueOf() 数组是没有原始值的 => 10
*/

parseInt([val],[radix]) parseFloat([val])

parseInt([val],[radix])是可以传两个值进去的：

console.log(parseInt('10103px13',2));  // 10
/**
 * 首先找到符合二进制的数 '1010'
 * 把这个二进制值转换为十进制 '按权展开求和'
 * 1*2^3+0*2^2+1*2^1+0*2^0 => 8+0+2+2 => 10
*/

这里放一道字节面试题

arr会输出什么，为什么？
let arr = [27.2,0,'0013','14px',123]
arr = arr.map(parseInt)

解题步骤：

/**
 * parseInt(27.2,0) => 找符合二进制的'27',当做十进制转成十进制=> 27
 * parseInt(0,1) => 超出有效进制范围 => NaN
 * parseInt('0013',2) => 001 当做二进制转化为十进制 => 0+0+1 => 1
 * parseInt('14px',3) => 1 当做三进制转成十进制 => 1
 * parseInt(123,4) => parseInt('123',4) => 123当做四进制转成十进制 1*4^2+2*4^1+3*4^0 => 16+8+4 => 27
*/

所以最终得：arr =  [27, NaN, 1, 1, 27]

注:

parseInt('0013',2) => 001 当做二进制转化为十进制 => 0+0+1 => 1
parseInt(0013,2) => 0013 当js中遇到以0开头的数字会默认当做8进制转为10进制然后在进行其他运算 => 当做八进制转为十进制 0*8^3+0*8^2+1*8^1+3*8^0 => 11 => 二进制转十进制 11   2+1=3

把其他类型转换为String

转换规则：

console.log(10 + '10'); // 1010
console.log(10 + new Number(10));
// new Number(10)[Symbol.toPrimitive] -> undefined
// new Number(10).valueOf() => 10 
//  10 + 10 = 20
console.log(10 + new Date());
// new Date()[Symbol.toPrimitive]('default') -> 不知道传递什么会传defaulu => 'Tue Sep 13 2022 17:00:40 GMT+0800 (中国标准时间)'
// 最终等于：10'Tue Sep 13 2022 17:00:40 GMT+0800 (中国标准时间)'
console.log(10 + [10]);
// [10][Symbol.toPrimitive] -> undefined
// [10].valueOf => '[10]' 
// [10].toString() => '10'
// 最终等于： '1010'
let num = '10'
console.log(+num) // 10 转换为数字

把其他类型的值转换成Boolean

Boolean(0) = false 除了0 NaN undefined 空字符串 null 以外都是true

==两个等号比较规则

NaN == NaN // false NaN永远不可能等于NaN
console.log(Object.is(NaN,NaN)); // true

贴一道面试题 下面输出为什么？

console.log([]==false); // 首先都会转换为数字， 0 == 0 => true
console.log(![]==false); // 先处理![]=>false == false  =>true

Js中的装箱和拆箱

装箱和拆箱都是浏览器进行数据类型隐式转换的过程

let num = 10
console.log(num.toFixed(2)); // 10.00
// num是原始值，不是对象，按常理来讲是不能做'成员访问'的
// 默认会做装箱操作:  new Number(num) 变为非标准铁树对象，这样就可以调用toFixed了
let num = new Number(10)
console.log(num + 10); // 20 
// 在操作的过程中浏览器会将num这个非标准特殊对象变为原始值  [Symbol.toPrimitive] -> valueOf -> toString 这个操作叫做拆箱
// 装箱和拆箱都是浏览器进行数据类型隐式转换的过程

到此这篇关于JavaScript数据类型及相互间的转换规则的文章就介绍到这了,更多相关JavaScript数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文