码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • js判断数据类型、toString和valueOf区别，类型转换、不同类型间的运算、判断相等

    目录

    数据类型：

    基本：栈/(闭包在堆)

    ES5：Null，Undefined，Number，String，Boolean

    ES6：Symbol

    ES10：Bigint

    引用：（栈中存储指针，指向堆中数据的起始地址）

    ES5：Object，function，Array，Date，RegExp

    改变Array的方法:进出*4，splice，sort，reverse，fill

    Array：变长，不一定连续（当不同类型时，是哈希表存储）

    Map/set（有序）：任何值类型都可以作为键/值，size，可迭代，删减优化，

    Object(无序)：键：String、Symbol，JSON序列化JSON.stringify()和解析JSON.parse()

    ES6：Promise（解决回调地狱），Proxy

    Map：键/值对

    WeakMap：键必须是对象或非全局symbol

    ES14：Symbol 可作为 WeakMap 键

    Set：任何值

    WeakSet:值必须是对象或非全局symbol

    new Proxy(target, handler)

    判断数据类型

    字面量：数据固定值，不用构造函数创建

    基本类型：不属于引用类型

    引用string实例的属性、方法时：字面量string会临时转换为对象

    引用类型：仍然是引用类型

    运算符

    typeof：判断 基本数据类型+ 广义函数（function、promise、箭头函数）

    typeof null=Object 类型标签均为000

    typeof NaN==Number：全局方法isNaN()

    实例 instanceof 构造函数：判断原型链

    方法

    构造函数.prototype.isPrototypeOf(实例) ：判断原型链

    (数据).constructor === 数据类型：不包含继承类型

    显示

    toString，valueOf

    除了null，undefined

    基本数据类型、function，Array，RegExp：返回数据本身

    引用数据类型

    Object，(Weak)Map、(Weak)Set：[object 类型]

    Date：...中国标准时间(ECMAScript规范定义的日期时间字符串格式)

    valueOf：this 值转换为对象

    toString：重写对象的类型转换

    类型转换

    Number

    数字字面量：浮点数值

    显式类型转换

    Number(任意类型)：任意类型->string、若string含非数字，会返回NaN

    [num]为num

    undefined、{} 为 NaN

    null 、[]、''空字符串或仅包含空格的字符串、为 0

    BigInt 抛出 TypeError，以防止意外的强制隐式转换导致精度损失

    Symbol 抛出 TypeError  

    Date：秒

    前导和尾随的空格/换行符会被忽略

    前导的数字 0 不会导致该数值成为八进制字面量

    + 和 - 是独立的一元运算符，后面不能跟空格

    parseInt(string[,radix])：基数radix是2-36之间的整数

    parseFloat(string)：解析一个参数并返回一个浮点数，无法识别 0x 前缀

    区别：pase类自动截断尾部非数字，Number不会截断

    parseInt(string[,radix])：基数radix是2-36之间的整数

    parseFloat(string)：解析一个参数并返回一个浮点数

    隐式转换：+str-，含boolean的相加

    str - 1 //122

    +str+1 // 124

    str+1 // '1231'

    string

    显式类型转换

    除了null/undefined.toString()  

    String(任意类型) 

    隐式转换：含str的相加

    Boolean

    显式类型转换

    Boolean()：0, ''(空字符串), null, undefined, NaN会转成false，其它都是true

    隐式转换 ：!!

    比较

    字符串：字符顺序（等长），长的大（短是长的前缀）

    相加减：交换顺序后结果不变

    num相加

    null、undefined、boolean基本类型：转Number

    obj、function、arr、Date等引用类型：转string

    因为只有[]\[num]这两类特殊的数字才能转换为Number、所以为了统一，arr：转string优先于Number

    num相减：能转number就转，不能则NaN

    相等

    全局属性 NaN ：非数字的值，它与任何其他值（包括自身）都不相等

    isNaN(string/Number/boolean/null)

    Object.is(val0, val1)：NaN等，±0不等

    只能比较字面量，对象只会判为false

    ===、==：NaN不等、±0等

    松散相等==（可自动转换类型） 和 严格相等===

    比较的是内存单元的内容

    对象传递是引用地址：判断对象相等，需要深度比较

    set用===判断是否相等

    数据类型：

    基本：栈/(闭包在堆)

    基本数据类型占用空间小、大小固定，通过值来访问，属于被频繁使用的数据

    闭包中的基本数据类型变量是保存在堆内存里的，当函数执行完弹出调用栈后，返回一个内部函数的一个引用，这时候函数的变量就会转移到堆上，因此内部函数依然能访问到上一层函数的变量。

    ES5：Null，Undefined，Number，String，Boolean

    ES6：Symbol

    1. console.log(symbol2 === 42);
    2. // Expected output: false
    3.  
    4. console.log(Symbol('foo') === Symbol('foo'));
    5. // Expected output: false

    ES10：Bigint

    1. let bnum=1684424684321231561n  //方式1：数组后加n
    2. bunm=BigInt("1684424684321231561")//方式2：调用BigInt

    引用：（栈中存储指针，指向堆中数据的起始地址）

    二叉堆，引用数据类型占据空间大、大小不固定，如果存储在栈中，将影响程序的运行性能。

    引用数据类型会在栈中存储一个指针，这个指针指向堆内存空间中该实体的起始地址。

    ES5：Object，function，Array，Date，RegExp

    改变Array的方法:进出*4，splice，sort，reverse，fill
    Array：变长，不一定连续（当不同类型时，是哈希表存储）

    数组元素的键（索引）不仅可以是连续的整数，还可以是字符串或其他类型的值。这种非连续整数索引的灵活性使得 JavaScript 数组更像是一个关联数组或哈希表，而不仅仅是一个线性的、固定大小的内存块。

    1. let myArray = [];
    2. myArray[0] = "Apple";
    3. myArray["1"] = "Banana";
    4. myArray[2] = "Cherry";
    Map/set（有序）：任何值类型都可以作为键/值，size，可迭代，删减优化，

    迭代：for in，for of，forEach

    Object(无序)：键：String、Symbol，JSON序列化JSON.stringify()和解析JSON.parse()

    迭代：for in，

    ES6：Promise（解决回调地狱），Proxy

    Map：键/值对

    底层优化

    映射设置值时会将键和值添加到这两个数组的末尾。从而使得索引相对应。

    取/赋值，需要 O(n) 

    强引用（哪怕不被引用了，也会阻止垃圾自动回收），导致内存泄漏

    WeakMap：键必须是对象或非全局symbol

    （此处的键值对都是对象）

    当键被回收+值没被引用，则值回收

    当值回收，不影响键

    symbol是保证唯一的，并且不能被重新创建，和对象引用地址一样

    非全局意味着有生命周期，可以被释放 对应着 对象不再被引用，然后被回收

    ES14：Symbol 可作为 WeakMap 键
    Set：任何值
    WeakSet:值必须是对象或非全局symbol

    weak弱引用对象，不被引用时会被回收，所以weakmap键和weakset值必须是对象

    WeakMap因为获取键的列表会依赖于垃圾回收的状态，

    所以不允许观察其键的生命周期，不允许枚举；

    new Proxy(target, handler)

    target

    包装target (对象/数组/函数甚/proxy对象）

    handler

    被代理对象上的自定义行为(定义一组处理函数（例如get、set）的对象)

    1. const target = {
    2.   notProxied: "original value",
    3.   proxied: "original value",
    4. };
    5.  
    6. const handler = {
    7. //target：被代理者（就是上面的target）
    8. //prop：被代理者的属性
    9. //receiver:代理者 Proxy 或者继承 Proxy 的对象
    10.   get: function (target, prop, receiver) {
    11.     if (prop === "proxied") {
    12.       return "replaced value";
    13.     }
    14.     return Reflect.get(...arguments);//调用原始对象上相同的属性，保持属性的原始值不变
    15.   },
    16. };
    17.  
    18. const proxy = new Proxy(target, handler);
    19.  
    20. console.log(proxy.notProxied); // "original value"
    21. console.log(proxy.proxied); // "replaced value"

    判断数据类型

    字面量：数据固定值，不用构造函数创建

    基本类型：不属于引用类型

    1. //基本类型
    2. console.log(typeof 'str');      // 输出 "string"
    3. //引用类型
    4. console.log(String.prototype.isPrototypeOf('str'));     // false
    5. console.log('str' instanceof String);                   // false
    引用string实例的属性、方法时：字面量string会临时转换为对象
    1. console.log(String.prototype.isPrototypeOf('str'));     // false
    2. console.log('str'.length);                   // 3
    3. console.log('str'.includes('s'));            //true

    引用类型：仍然是引用类型

    console.log(typeof {});      // 输出 "object"

    运算符

    typeof：判断 基本数据类型+ 广义函数（function、promise、箭头函数）

    typeof null=Object 类型标签均为000
    typeof NaN==Number：全局方法isNaN()
    1. // 基本类型的字面量
    2. console.log(typeof undefined);    // 输出 "undefined"
    3. console.log(typeof null);         // 输出 "object"（历史遗留 Bug）
    4. console.log(typeof true);         // 输出 "boolean"
    5. console.log(typeof 42);            // 输出 "number"
    6. console.log(typeof NaN);            // 输出 "number"
    7. console.log(typeof 'string');      // 输出 "string"
    8. console.log(typeof Symbol());      // 输出 "symbol"
    9. console.log(typeof BigInt(42));    // 输出 "bigint"
    10. // 特殊引用类型 function
    11. console.log(typeof function(){});  // 输出 "function"，匿名函数
    12. console.log(typeof (() => {}).prototype); // 输出 "function"，但并非function实例对象
    13. console.log(typeof Promise);      // 输出 "function"，异步函数设计
    14. console.log(Function.prototype.isPrototypeOf(new Promise(()=>{})));     // false
    15. // 引用类型
    16. console.log(typeof {});            // 输出 "object"
    17. console.log(typeof []);            // 输出 "object"
    18. console.log(typeof new Date());    // 输出 "object"
    19. console.log(typeof /regex/);       // 输出 "object"
    20. console.log(typeof new Map());     // 输出 "object"
    21. console.log(typeof new Set());     // 输出 "object"
    22. console.log(typeof new WeakMap()); // 输出 "object"
    23. console.log(typeof new WeakSet()); // 输出 "object"

    实例 instanceof 构造函数：判断原型链

    1. Object.prototype.isPrototypeOf({})// true
    2. {} instanceof Object// true

    方法

    构造函数.prototype.isPrototypeOf(实例) ：判断原型链

    (数据).constructor === 数据类型：不包含继承类型

    1. ​(1).constructor ===Number//true
    2.  
    3. //​()转换为Number

    显示

    toString，valueOf

    除了null，undefined

    基本数据类型、function，Array，RegExp：返回数据本身

    1. //基本数据类型
    2. //ES5：Null，Undefined，Number，String，Boolean
    3. //ES6：Symbol
    4. //ES10：Bigint
    5. console.log(Symbol('foo').toString());//"Symbol(foo)"
    6. console.log(Symbol('foo').valueOf());//Symbol(foo)

    引用数据类型

    Object，(Weak)Map、(Weak)Set：[object 类型]

    Date：...中国标准时间(ECMAScript规范定义的日期时间字符串格式)

    valueOf：this 值转换为对象

    在这里插入图片描述

    1. let set=new Set()
    2. set.add(1)
    3. console.log(set.toString()); //"[object Set]"
    4. console.log(set.valueOf()); //[object Set]
    5.  
    6. let mp=new Map()
    7. mp.set("1",1)
    8. console.log(mp.toString()); //"[object Map]"
    9. console.log(mp.valueOf()); //[object Map]

    toString：重写对象的类型转换

    在这里插入图片描述在这里插入图片描述

    1. //"Sun Dec 17 1995 03:24:00 GMT+0800 (中国标准时间)"
    2. console.log(new Date("December 17, 1995 03:24:00").toString());

    类型转换

    Number

    数字字面量：浮点数值

    像 37 这样的数字字面量是浮点数值，而不是整数。JavaScript 没有单独的整数类型。

    显式类型转换

    Number(任意类型)：任意类型->string、若string含非数字，会返回NaN
    [num]为num
    undefined、{} 为 NaN
    null 、[]、''空字符串或仅包含空格的字符串、为 0
    1. console.log(Number({}))//NaN
    2. console.log(Number([]))//0
    3. console.log(Number([1]))//1
    4. console.log(Number(null))//0
    5. console.log(Number(undefined))//NaN
    BigInt 抛出 TypeError，以防止意外的强制隐式转换导致精度损失
    Symbol 抛出 TypeError  
    Date：秒
    Number(new Date("December 17, 1995 03:24:00"));//819199440000
    前导和尾随的空格/换行符会被忽略
    前导的数字 0 不会导致该数值成为八进制字面量
    1. Number("0x11"); // 17
    2. Number("0b11"); // 3
    3. Number("0o11"); // 9
    + 和 - 是独立的一元运算符，后面不能跟空格

    不允许使用数字分隔符 

    parseInt(string[,radix])：基数radix是2-36之间的整数
    parseFloat(string)：解析一个参数并返回一个浮点数，无法识别 0x 前缀
    区别：pase类自动截断尾部非数字，Number不会截断
    1. console.log(parseInt('6f'));//6
    2. console.log(parseFloat('6f'));//NaN
    3. console.log(Number('6f'));//6
    parseInt(string[,radix])：基数radix是2-36之间的整数
    parseFloat(string)：解析一个参数并返回一个浮点数

    隐式转换：+str-，含boolean的相加

    str = '123'

    1. str - 1 //122
    2. +str+1 // 124
    3. str+1 // '1231'

    string

    显式类型转换

    除了null/undefined.toString()  
    String(任意类型) 

    隐式转换：含str的相加

    Boolean

    显式类型转换

    Boolean()：0, ''(空字符串), null, undefined, NaN会转成false，其它都是true

    隐式转换 ：!!

    比较

    字符串：字符顺序（等长），长的大（短是长的前缀）

    1. console.log('apple' < 'banana'); // true，因为 'a' 在 Unicode 中比 'b' 小
    2. console.log('apple' < 'apples'); // true，因为 'apple' 是 'apples' 的前缀
    3. console.log('apple' < 'apricot'); // true，因为 'l' 在 Unicode 中比 'r' 小

    相加减：交换顺序后结果不变

    num相加

    1. console.log(Number([1]))//1
    2. console.log(Number([]))//0
    3. console.log(Number(null))//0
    4. console.log(Number({}))//NaN
    5. console.log(Number(undefined))//NaN

    null、undefined、boolean基本类型：转Number

    1. console.log(1+null); //1
    2. console.log(undefined+1); //NaN

    obj、function、arr、Date等引用类型：转string

    1. console.log({}+1)//[object Object]1
    2. console.log(1+{a:1,b:2})//1[object Object]
    3. console.log(typeof(1+{a:1}))//string
    4. console.log(1+function(){console.log()}); "1function(){console.log()}"
    因为只有[]\[num]这两类特殊的数字才能转换为Number、所以为了统一，arr：转string优先于Number
    1. console.log([]+1); // "1"
    2. console.log(1+[]); // "1"
    3. console.log(1+['a'])//1a 
    4. console.log(1+['a',2])//1a,2
    5. console.log(1+[2,2])//12,2
    6. console.log([0,1]+[2,2])//0,12,2

    num相减：能转number就转，不能则NaN

    1. //number与其他数据相加减
    2. //:能转number就转，不能则转string相加，object，arr（元素超过1个 或者 非number元素）
    3. console.log(1-{})//NaN
    4. console.log(1-[])//1
    5. console.log(1-[1])//0
    6. console.log(1-['a'])//NaN
    7. console.log(1-null)//1

    相等

    全局属性 NaN ：非数字的值，它与任何其他值（包括自身）都不相等

    isNaN(string/Number/boolean/null)

    Object.is(val0, val1)：NaN等，±0不等

    只能比较字面量，对象只会判为false
    1. const obj = {};
    2. console.log(Object.is(obj, {}));
    3. // Expected output: false

    ===、==：NaN不等、±0等

    Object.is() 使用了 "SameValueZero" 比较算法，它不会对 NaN 进行特殊处理，而是按照严格的值相等性规则比较

    1. console.log(NaN===NaN);
    2. // Expected output: false
    3.  
    4. console.log(NaN==NaN);
    5. // Expected output: false
    6.  
    7. console.log(Object.is(NaN, NaN));
    8. // Expected output: true
    9.  
    10. console.log(Object.is(-0, +0));
    11. // Expected output: false
    12.  
    13. console.log(Object.is(null, undefined));
    14. // Expected output: false

    松散相等==（可自动转换类型） 和 严格相等===

    比较的是内存单元的内容

    1. 255 === 255.0; // true
    2. 255 === 0xff; // true（十六进制表示）
    3. 255 === 0b11111111; // true（二进制表示）
    4. 255 === 0.255e3; // true（十进制指数记数法）

    对象传递是引用地址：判断对象相等，需要深度比较

    1. const obj = {};
    2. console.log(Object.is(obj, {}));
    3. // Expected output: false
    set用===判断是否相等
    1. //Set用===判断是否相等
    2. const set= new Set();
    3. const obj1={ x: 10, y: 20 },obj2={ x: 10, y: 20 }
    4. set.add(obj1).add(obj2);
    5.  
    6. console.log(obj1===obj2);//false
    7. console.log(set.size);// 2
    8.  
    9. set.add(obj1);
    10. console.log(obj1===obj1);//true
    11. console.log(set.size);//2
  • 相关阅读:
    关于嵌入式人工智能？
    长钢管每米直线度检测 在线直线度测量仪轻松搞定！
    全新升级！《云原生架构白皮书 2022 版》重磅发布
    SCI论文高效写作：Citespace、vosviewer和R语言在文献调研与论文撰写中的应用
    世界杯中隐藏的IoT物联网黑科技
    C语言程序设计--火车订票系统
    部署LVS-NAT群集实验
    【附源码】计算机毕业设计JAVA郑工社团交流服务信息平台
    socket编程详解（一）——服务器端
    归档：2022-11-17
  • 原文地址：https://blog.csdn.net/qq_28838891/article/details/133559655
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常，环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
    奉劝各位学弟学妹们，该打造你的技术影响力了！
    五年了，我在 CSDN 的两个一百万。
    Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
    面试官都震惊，你这网络基础可以啊！
    你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候，用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图，Python爬虫120例，再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号