数据类型 · 前端知识 -- 学习整理

[TOC] >[success] # js 数据类型 1. js 数据类型有8个依次是 **'Undefined','Null','Boolean','Number','String','Object', 'BigInt','Symbol'** 2. **'Undefined'** -- 当值未定义的时候，例如函数**没有明确返回值**，和**声明变量没有赋值** '**Boolean**' -- 布尔类型(**true 和 false**) '**String**' -- 字符串类型(用**单引号**或者**双引号**表示) '**Number**' -- 数字类型(**整数和小数**) '**BigInt**' -- 表示**任意精度格式的整数** '**Null**' -- 空类型,值只有一个:**null**,一个对象指向**为空**,此时**可以赋值为null** '**Object**' -- 对象 '**Symbol**' -- 用来创建**匿名的对象属性** 3. **基本类型**有**7**个 **'string'，'number'，'bigint'，'boolean'，'null'，'undefined'，'symbol'** 4. 引用数据类型（Object）又分,**Array - 数组对象**、**RegExp - 正则对象**、**Date - 日期对象**、**Math - 数学函数**、**Function - 函数对象**,和 **基本类型包装对象**(除了 null 和 undefined之外，所有基本类型都有其对应的包装对象)**String** - 为**字符串**基本类型、**Number** - 为**数值**基本类型、**BigInt** 为**大整数**基本类型、**Boolean** 为**布尔**基本类型 **Symbol** 为**字面量**基本类型等等 5. '**基础类型**'存储在**栈内存**，被引用或拷贝时，会创建**一个完全相等的变量**； 6. '**引用类型**'存储在**堆内存**，存储的**是地址**，多个引用**指向同一个地址** 7. **函数对象参数** 传递是对象在 **堆中的地址** >[info] ## null 和 undefined 1. 首先当我们声明一个对象的变量的时候，如果没有给其赋值最好设置为'null'，例如: `var myObject = null` 2. 当使用双等时候：`console.log(null == undefined) ` 结果为 'true' 但不建议这么使用 3. null 是 JavaScript 保留**关键字**，而undefined是全局**对象的一个属性**。也就是说，它是全局作用域的一个变量。`undefined`的最初值就是原始数据类型`undefined`，`undefined`是一个不能被配置（**non-configurable**），不能被重写（**non-writable**）的属性，也要注意'**undefined不是一个保留字**' [undefined](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) >[danger] ##### undefined 1. `Undefined `是一个很特殊的数据类型，它**只有一个值**，也就是 `undefined` 2. 产生`undefined`几种情况 2.1. 引用已声明但**未初始化的变量**； 2.2. 引用**未定义**的对象属性； 2.3. 执行**无返回值**函数； 2.4. 执行 **void 表达式**； 2.5. 全局常量 **window.undefined 或 undefined**。 ~~~ var a; // undefined var o = {} o.b // undefined (() => {})() // undefined void 0 // undefined window.undefined // undefined ~~~ 3. void 表达式来得到 undefined 值，因为这种方式既简并且比undefined长度少，不需要引用额外变量和属性在三目运算的时候表示不进行任何操作 `x>0 && x<5 ? fn() : void 0;` 4. `undefined`是全局对象的一个属性',因此在非全局作用域下可以重新赋值 ~~~ // 打印 'foo string' PS：说明undefined的值和类型都已经改变 (function() { var undefined = 'foo'; console.log(undefined, typeof undefined) })() ~~~ 5. `undefined in window // true` >[danger] ##### 关于对 undefined 类型的判断 ~~~ 1.下面的三种形式都可以对 'undefined' 做判断，但是推荐type of 的形式，原因：第一种对空字符串数值0，null等情况都会有不仅仅针对undefined，第二种用'==='但是如果变量没定义会报错，导致程序停止运行 ~~~ ~~~ // 方式1 if(!x) { ... } // 方式2 if(x===undefined) { ... } // 方式2 if(typeof x === 'undefined') { ... } ~~~ >[info] ## Boolean 类型 1. 布尔类型只有两个字面值:`true` 和 `false`, 并且**区分大小写**，只能**小写**表示 2. 如果想将其他值转成布尔类型使用`Boolean()` -- 或者使用`!!` 3. 有时候可以看到一些言论说数字 **1是true** 或者 **0是false** 实际只是在 **if 条件语句中** 这些值自动执行了`Boolean` 方法上的转化 4. 除了 **undefined、 null、 false、 ''、 0（包括 +0，-0）、 NaN** 转换出来是 `false`，其他都是 `true` >[danger] ##### 常见的类型转化成boolean | 数据类型 |转化为true |转化成false| | --- | --- | --- | | Boolean |true |false | | String|任何非空字符|字符串length等于0(空字符)| | Number |非0的数字(Infinity)包括无穷大 |0 和 NaN| | Object |任何对象包括 {} 对象中没值 /new Boolean(false) |null | | Undefined |n/a（不使用的意思）|undefined | ~~~ console.log(Boolean(Infinity)) // true ~~~ >[info] ## 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 有意思](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) >[danger] ##### 进制问题 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 ~~~ >[danger] ##### 浮点数值 1. **浮点值内存空间是整数值的两**倍，因此在特定情况下浮点值回被转成整数，例如：`var a = 1.0` 打印的值就是**1** 2. 可以使用科学计数法来表示一些数值,表现形式就是**e前面的数值乘上后面10的次幂**，例如：`var a = 3.12e5` 相当于 3.12 * 10^5 因此 a 的结果是**312000** 3. 想用科学计数法表示小数则可以写成：`var a = 3.12e-5` 打印结果**0.0000312** 4. 不要用**一个小数去求证一个小数** 例如 `0.1+0.2` 问题 >[danger] NaN -- 非数值(Not a Number) 1. `NaN` 不予任何值相等包括本身例如：`alert(NaN == NaN) // false` 2. 任何数值**除以非数值**都会返回`NaN` 3. 想判断当前是不是数字用`isNaN() `方法，不是数字返回`true`，是数字返回`false`，这种判断不准确因为`isNaN `接受的参数其实**是数字**，当然如果你传入了其他类型参数你发现他依然可以执行，在规范中的解释是'**Let num be ToNumber(number)**.' [tonumber参考](https://262.ecma-international.org/6.0/#sec-tonumber) 和 [isnan参考](https://262.ecma-international.org/6.0/#sec-isnan-number) 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 ~~~ >[danger] ##### Number() 方法 ~~~ 1.一般用于浏览器的隐式转换中都会默认调用'Number([val])'例如下面几种情况 1.1.数学运算,举个例子 1+1 1-1，1-'1' 这一类的计算都是Number数字隐士转换，当然相对数字加字符例如1+'1' 结果为字符串'11' 并不是数字的转换，这类最通俗的记法加号可能是数学计算可能是字符串拼接，当数字和字符串的时候最简单方式就是统一作为拼接处理减少区分类型产生的可能性，相对来说减号只能做数学算法因此是转换 Number 计算 1.2.isNaN检测，isNaN 接受的参数其实是数字，在规范中的解释是'Let num be ToNumber(number).'，这也好解释为什么isNaN(true) 为false 原本认为true 作为Boolean值应该是在isNaN下是true才对但实际isNaN(Number(true)), Number(true) 转换之后为 1 因此变成了isNaN(1) 因此为false 1.3.==比较 ~~~ ~~~ console.log(Number(070)) console.log(Number(011)) console.log(Number('070')) console.log(Number(NaN)) console.log(Number("sss")) console.log(Number(undefined)) console.log(Number(null)) console.log(Number('')) console.log(Number('0xf')) ~~~ ~~~ 56 9 70 NaN NaN NaN 0 0 15 ~~~ * 强制转换规则 ~~~ 1.隐士转换都是调用了 Number() 方法，因此只要知道Number() 针对其他类型的转换规则，即可针对这种得到转换结果 1.1.如果是字符串，遵循以下规则：如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；如果字符串中包含有效的浮点格式，将其转换为浮点数值；如果是空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN； 1.2.如果是布尔值，true 和 false 分别被转换为 1 和 0； 1.3.如果是 null，返回 0，如果是 undefined，返回 NaN； 1.4.Symbol无法转换为数字，会报错：Uncaught TypeError: Cannot convert a Symbol value to a number 1.5.BigInt去除'n'（超过安全数字的，会按照科学计数法处理） 1.6.把对象转换为数字：先调用对象的 'Symbol.toPrimitive' 这个方法，如果不存在这个方法再调用对象的 'valueOf' 获取原始值，如果获取的值不是原始值再调用对象的 'toString' 把其变为字符串最后再把字符串基于'Number'方法转换为数字注对'Symbol.toPrimitive' 说明 xxx[Symbol.toPrimitive](hint){} // hint:'number' / 'string' / 'default' // + number：获取当前对象的数字类型的原始值 // + string：获取当前对象的字符串类型的原始值 // + default：根据操作获取数字或者字符串类型的原始值 ~~~ * 举例说明1.6[Symbol.toPrimitive](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) ~~~ 1.转换 {} 为 Number ，const obj = {} ，console.log(Number(obj)) 结果是NaN 1.1.先调用'Symbol.toPrimitive'console.log(obj[Symbol.toPrimitive]) 结果是undefined 1.2.调用console.log(obj.valueOf()) 结果是 {} 1.3.调用 console.log(obj.toString()) 结果'[object Object]' 任何非数字字符串转换结果都是NaN，即相当于实际执行为Number('[object Object]') 2.转换数组为Number 为例依旧是经过下面几次得到结果 const arr = [10] console.log(arr[Symbol.toPrimitive]); // undefined console.log(arr.valueOf()); // [ 10 ] console.log(arr.toString()); // "10" console.log(Number("10")); // 10 // --------------分割 -------------------------------- const arr = [10, 20] console.log(arr[Symbol.toPrimitive]) // undefined console.log(arr.valueOf()) // [ 10, 20 ] console.log(arr.toString()) // "10,20" console.log(Number('10,20')) // NaN 3.转换Date，当先查是否有'Symbol.toPrimitive' 属性方法此时发现有就开始调用，调用时候传参，如果想转换的为number类型，此时传参为'number' 即可 const date = new Date(2015, 1, 1) console.log(date[Symbol.toPrimitive]) // 存在这个属性 console.log(date[Symbol.toPrimitive]('number')) // 1422720000000 4.自定义对象重写'Symbol.toPrimitive' 方法 let obj = { [Symbol.toPrimitive](hint) { let result; switch (hint) { case 'number': result = 0; break; case 'string': result = JSON.stringify(obj); break; default: result = ""; } return result; } }; ~~~ >[danger] ##### parseInt([val],[radix]) ~~~ 1.如果是整数正常解析 2.[val]值必须是一个字符串，如果不是则先转换为字符串；然后从字符串左侧第一个字符开始找，把找到的有效数字字符最后转换为数字「一个都没找到就是NaN」；遇到一个非有效数字字符，不论后面是否还有有效数字字符，都不再查找了 3.[radix]的范围：2~36 不在这个范围内，最后结果都是NaN [radix]不写或者写零：默认值是10「特殊：如果[val]字符串是以0x开始的，默认值是16」 4.根据上面的结论所以可以得出为什么 'parseInt' 为什么可以把小数转成整数，例如1.1,从1开始找到后面发现点不是数字所以后面全丢弃得到 1 5.字符串的情况下，十六进制是不识别的，八进制会把前缀0舍去，要注意和'Number' 不同null 和空字符都是 NaN 6.想让parseInt 识别十六进制和八进制字符串可以这么写parseInt('AF',16) 第二个参数表示几进制 ~~~ ~~~ console.log(parseInt(070)) // 56 console.log(parseInt('-070 00')) // -70 console.log(parseInt(null)) // NaN console.log(parseInt('AF')) // NaN console.log(parseInt('AF',16)) // 175 console.log(parseInt('070',8)) // 56 console.log(parseInt("g10")); //NaN ~~~ >[danger] ##### parseFloat([val]) ~~~ 1.跟parseInt() 类似，只不过解释所有里面浮点类型，不同点没有第二个参数，无法把十六进制和八进制字符串转换，十六进制字符串统一被转成 0 ~~~ ~~~ console.log(parseFloat("10"));//10 console.log(parseFloat("10afrswfdsf"));//10 console.log(parseFloat("g10"));//NaN console.log(parseFloat("1fds0"));//1 console.log(parseFloat("10.98"));//10.98 console.log(parseFloat("10.98fdsfd"));//10.98 // ----------------------- // 在字符串中，找到所有符合二进制的内容 -> '10' ，因为3不是二进制中的因此到3截至了 // 把'10'看做二进制，转换为十进制？如何把其它机制的值转换为十进制 “按权展开求和” // 个位数权重0 十位数权重1 百位数权重2 依次类推现在10 其中十位是 1 十位的权重为1，对应的公式 // 1*2^1 + 0*2^0 => 2 2的指数对应二进制当前位置1和0 前面乘法的是对应权重 console.log(parseInt('1030px', 2)); // --------------------- let arr = [27.2, 0, '0013', '14px', 123]; // 等到结果原因要知道map 数组回调方法是可接受三个参数，parseInt 默认是两个参数此时其实是 // parseInt(number,index) 因此会对应位置进制转换 arr = arr.map(parseInt); // [27, NaN, 1, 1, 27] ~~~ >[danger] ##### 判断是否为整数 -- Number.isInteger() ~~~ 1.'Number.isInteger()' 方法用来判断给定的参数是否为整数 ~~~ * 举个例子 ~~~ Number.isInteger(0); // true Number.isInteger(1); // true Number.isInteger(-100000); // true Number.isInteger(0.1); // false Number.isInteger(Math.PI); // false ~~~ >[danger] ##### [关于trunc方法说明](https://blog.csdn.net/qq_37016928/article/details/80667247)重点 >[danger] ##### 数字类型转化总结 ~~~ 1.总结:想要转整数用parseInt(),想要转小数用parseFloat()想要转数字:Number(); 要比上面的两种方式严格 ~~~ >[info] ## 字符串String 1. toString()可以将所有的的数据都转换为字符串，调用自身 `toString` 方法,但是要排除 `null` 和 `undefined`，也就是`false` 和 `true` 例如 `true.toString()`，包含在内，也可以做进制转换例如： ~~~ 二进制：.toString(2); 八进制：.toString(8); 十进制：.toString(10); 十六进制：.toString(16); ~~~ 2. `String()` 可以将 `null` 和 `undefined`转换为字符串，但是**没法转进制字符串转换规则** 2.1. 基本类型拿字符串包起来,举个例子`String(true)` => 结果 `true` 2.2. 对象则是调用 **Symbol.toPrimitive -> valueOf -> toString**， `Object.prototype.toString` 举个例子`String(new Object)` => `(new Object).toString()` =>打印结果 **[object Object]** >[info] ## Sysmbol 唯一值类型 1. ES6 引入了一种新的原始数据类型 `Symbol`，表示**独一无二**的值。它是 JavaScript 语言的第七种数据类型 2. `Symbol`函数前**不能使用new命令**，否则会报错。这是因为生成的 **Symbol 是一个原始类型的值，不是对象**。也就是说，由于 `Symbol `值不是对象，所以**不能添加属性**。基本上，它是**一种类似于字符串的数据类型**。 3. `Symbol`函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。 4. 很多JS底层的处理机制，就是基于这些属性方法实现的 `Symbol.hasInstance\Symbol.toStringTag\Symbol.toPrimitive\Symbol.iterator...` >[danger] ##### 给对象属性设置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]); }); ~~~ >[info] ## 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`,当计算完成后在将转**换成字符串给到后台**