JavaScript(1)每天10个小知识点


目录

    • 1. JavaScript 有哪些数据类型,它们的区别?**
    • 2. 数据类型检测的方式有哪些**
    • 3. null 和 undefined 区别**
    • 4. intanceof 操作符的实现原理及实现**
    • 5. 如何获取安全的 undefined 值?**
    • 6. Object.is() 与比较操作符 “===”、“==” 的区别**
    • 7. 什么是 JavaScript 中的包装类型?**
    • 8. 为什么会有 BigInt 的提案?**
    • 9. 如何判断一个对象是空对象**
    • 10. const 对象的属性可以修改吗**


👍 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!


1. JavaScript 有哪些数据类型,它们的区别?**

JavaScript有多种数据类型,它们主要分为两大类:原始数据类型(Primitive Data Types)和引用数据类型(Reference Data Types)。

  1. 原始数据类型(Primitive Data Types):

    • 字符串(String):表示文本数据,使用单引号或双引号括起来。例如:

      let str = 'Hello, World!';
    • 数字(Number):表示数值,包括整数和浮点数。例如:

      let num = 42;
      let floatNum = 3.14;
    • 布尔(Boolean):表示逻辑值,只有两个值:true和false。例如:

      let isTrue = true;
      let isFalse = false;
    • 空值(Null):表示没有值或空对象。例如:

      let emptyValue = null;
    • 未定义(Undefined):表示声明了变量但没有给它赋值时的默认值。例如:

      let undefinedVar;
    • 符号(Symbol):表示唯一且不可变的值,通常用于对象属性的标识符。ES6引入了Symbol。例如:

      const uniqueSymbol = Symbol('description');
  2. 引用数据类型(Reference Data Types):

    • 对象(Object):表示复杂的数据结构,可以包含多个属性和方法。例如:

      let person = {name: 'John',age: 30
      };
    • 数组(Array):表示有序的列表,可以包含多个值,通过索引访问。例如:

      let colors = ['red', 'green', 'blue'];
    • 函数(Function):表示可执行的代码块,可以重复使用。例如:

      function greet(name) {return 'Hello, ' + name + '!';
      }

原始数据类型是不可变的,而引用数据类型是可变的。当复制原始数据类型时,会创建一个新的独立副本,而复制引用数据类型时,实际上是复制了引用地址,多个变量可能指向同一个对象。

这些数据类型在JavaScript中非常重要,了解它们的特性和区别有助于更好地编写和理解JavaScript代码。

2. 数据类型检测的方式有哪些**

在JavaScript中,您可以使用多种方式来进行数据类型检测。以下是一些常用的方法:

  1. typeof 操作符
    使用typeof操作符可以检测一个值的数据类型,它返回一个字符串,表示该值的数据类型。例如:

    typeof 42;          // "number"
    typeof "Hello";     // "string"
    typeof true;        // "boolean"
    typeof undefined;   // "undefined"
    typeof null;        // "object"(这是一个历史遗留问题,null实际上应该返回"null")
    typeof {};          // "object"
    typeof [];          // "object"
    typeof function(){}; // "function"

    注意:typeof null返回"object"是一个历史遗留问题,实际上null应该返回"null"。

  2. instanceof 操作符
    instanceof操作符用于检测一个对象是否是某个构造函数的实例。例如:

    let arr = [];
    arr instanceof Array; // true

    这种方法主要用于检测引用数据类型的具体类型。

  3. Object.prototype.toString.call()
    这是一种更精确的方式来检测数据类型,特别是用于检测引用数据类型。例如:

    Object.prototype.toString.call(42);          // "[object Number]"
    Object.prototype.toString.call("Hello");     // "[object String]"
    Object.prototype.toString.call(true);        // "[object Boolean]"
    Object.prototype.toString.call(undefined);   // "[object Undefined]"
    Object.prototype.toString.call(null);        // "[object Null]"
    Object.prototype.toString.call({});          // "[object Object]"
    Object.prototype.toString.call([]);          // "[object Array]"
    Object.prototype.toString.call(function(){}); // "[object Function]"
  4. Array.isArray()
    用于检测一个值是否是数组。例如:

    Array.isArray([]); // true
    Array.isArray({}); // false
  5. typeof 与 instanceof 结合
    有时候,使用typeofinstanceof可以结合使用来更精确地检测数据类型。例如:

    function isString(value) {return typeof value === 'string' || value instanceof String;
    }isString("Hello");          // true
    isString(new String("Hi"));  // true
    isString(42);                // false

请根据您的需求选择合适的方法来进行数据类型检测。不同的方法适用于不同的情况和数据类型。

3. null 和 undefined 区别**

nullundefined是 JavaScript 中的两种特殊值,它们都表示缺失或无效的值,但在某些方面有一些不同之处:

  1. undefined:

    • 当声明了一个变量但没有初始化时,它的值为undefined
    • 未定义的变量也会被视为undefined
    • 作为函数参数的未提供的参数默认为undefined
    • 在对象中访问不存在的属性时,返回undefined
    • 在数组中访问不存在的元素时,返回undefined

    示例:

    let x;
    console.log(x); // undefinedlet y;
    console.log(y); // undefinedfunction foo(a) {console.log(a);
    }foo(); // undefinedlet obj = {};
    console.log(obj.propertyThatDoesNotExist); // undefinedlet arr = [1, 2, 3];
    console.log(arr[10]); // undefined
  2. null:

    • null是一个表示空值或无值的特殊对象。
    • 当您希望明确表示一个变量或属性的值为空时,可以将其赋值为null
    • 通常由开发人员显式设置,表示主动将一个值置为空。

    示例:

    let x = null;
    console.log(x); // nulllet obj = { prop: null };
    console.log(obj.prop); // null

总结:

  • undefined通常表示未定义、缺失或默认值,而null表示明确的空值。
  • 在条件比较中,nullundefined通常被视为相等,但不等于任何其他值。
  • 当您需要区分变量是否已声明或者是否已赋值为空时,undefined更适合。
  • 当您需要明确表示某个属性或变量的值为空时,null更适合。

4. intanceof 操作符的实现原理及实现**

instanceof操作符用于检测一个对象是否是某个构造函数的实例。它的实现原理可以简单描述为:检查对象的原型链是否包含构造函数的prototype属性。如果原型链中的任何一个原型等于构造函数的prototype属性,instanceof返回true,否则返回false

下面是一个简单的实现instanceof操作符的示例代码:

function customInstanceof(obj, constructor) {// 检查参数有效性if (typeof obj !== 'object' || obj === null) {return false;}let proto = Object.getPrototypeOf(obj); // 获取对象的原型// 循环查找原型链while (proto !== null) {if (proto === constructor.prototype) {return true; // 找到匹配的原型,返回true}proto = Object.getPrototypeOf(proto); // 继续查找下一个原型}return false; // 在整个原型链中未找到匹配的原型,返回false
}// 示例用法
function Person(name) {this.name = name;
}const person = new Person('John');console.log(customInstanceof(person, Person)); // true,person是Person的实例
console.log(customInstanceof(person, Object)); // true,person也是Object的实例
console.log(customInstanceof(person, Array));  // false,person不是Array的实例

这个自定义的customInstanceof函数首先检查了传入的参数是否为对象,然后通过Object.getPrototypeOf来获取对象的原型,并不断循环查找原型链,直到找到与构造函数的prototype属性相等的原型,或者到达原型链的末尾为止。如果找到匹配的原型,函数返回true,否则返回false

需要注意的是,这只是一个简化版的实现,实际的instanceof操作符还会处理一些特殊情况,比如nullundefined值。

5. 如何获取安全的 undefined 值?**

在 JavaScript 中,获取安全的 undefined 值通常是不必要的,因为 undefined 通常用于表示变量未初始化或者对象属性不存在等情况。然而,如果您希望确保获取到的是真正的 undefined 而不是被覆盖或修改过的值,可以采取以下方法:

  1. 使用全局的 undefined 对象

    let safeUndefined = undefined; // 创建一个局部变量并赋值为全局的 undefined

    这将确保 safeUndefined 变量的值一定是全局 undefined,无法被修改。

  2. 比较值与 undefined

    您可以使用严格相等(===)运算符来比较一个值是否等于 undefined

    let x; // 未初始化的变量
    if (x === undefined) {// 这里处理 x 为 undefined 的情况
    }

    这种方式可以确保 x 的值是真正的 undefined

  3. 使用默认参数

    在函数参数中,您可以使用默认参数来确保参数在未提供时的值为 undefined

    function exampleFunction(param = undefined) {// param 在未提供时会默认为 undefined
    }

    这样调用函数时,如果不传递参数,param 将始终为 undefined

需要注意的是,尽管上述方法可以获取安全的 undefined 值,但在实际编程中,通常不需要特意获取安全的 undefined,因为 JavaScript 在大多数情况下会正确处理 undefined 值。只有在特殊需求下或为了保持代码的可读性时才使用这些方法。

6. Object.is() 与比较操作符 “=”、“” 的区别**

Object.is() 和比较操作符 ===== 在 JavaScript 中用于比较值之间的差异。它们之间的主要区别如下:

  1. ===(严格相等操作符)
    • === 比较两个值是否严格相等,即类型和值都相等。
    • 如果两个值的数据类型不同或值不同,返回 false
    • 用于避免类型强制转换,因此通常被认为是更安全和可靠的比较方式。
    • 例如:1 === 1 返回 true1 === '1' 返回 false
  2. ==(相等操作符)
    • == 比较两个值是否相等,但允许进行类型强制转换。
    • 如果两个值的类型不同,JavaScript 会尝试将它们转换为相同的类型,然后再比较。
    • 由于类型强制转换可能导致意外的结果,因此通常要谨慎使用。
    • 例如:1 == 1 返回 true1 == '1' 也返回 true,因为后者会将字符串 '1' 转换为数字 1 进行比较。
  3. Object.is()
    • Object.is() 是 ECMAScript 6 中引入的方法,用于比较两个值是否严格相等。
    • === 不同的是,Object.is() 对于特殊值(NaN0)有不同的行为。
    • Object.is() 会返回 true,只有当两个值在严格相等性比较下也相等,或者都是 NaN 时才返回 true。否则,返回 false
    • 例如:Object.is(NaN, NaN) 返回 trueObject.is(0, -0) 返回 false

比较操作符 ===== 的主要区别在于类型转换。使用 === 可以避免类型强制转换,更容易预测和理解。Object.is() 则在特殊情况下,如 NaN-0 的比较上表现不同,它更关注于严格相等性的概念。在选择使用哪种比较方式时,需要根据具体需求和预期结果来决定。

7. 什么是 JavaScript 中的包装类型?**

JavaScript 中的包装类型是指基本数据类型(如字符串、数字、布尔等)对应的对象类型。这些包装类型允许您在基本数据类型和对象之间进行转换,使得基本数据类型能够调用对象的方法和访问属性。JavaScript 中有三种常见的包装类型:

  1. String 包装类型

    • 对应基本数据类型字符串。

    • 允许字符串调用对象的方法。

    • 例如:

      let str = 'Hello, World!';
      let strObject = new String(str); // 使用构造函数创建字符串包装对象
      let length = strObject.length; // 使用包装对象的属性
      let uppercase = strObject.toUpperCase(); // 使用包装对象的方法
  2. Number 包装类型

    • 对应基本数据类型数字。

    • 允许数字调用对象的方法。

    • 例如:

      let num = 42;
      let numObject = new Number(num); // 使用构造函数创建数字包装对象
      let decimalPlaces = numObject.toFixed(2); // 使用包装对象的方法
  3. Boolean 包装类型

    • 对应基本数据类型布尔值。

    • 允许布尔值调用对象的方法。

    • 例如:

      let bool = true;
      let boolObject = new Boolean(bool); // 使用构造函数创建布尔包装对象
      let valueOf = boolObject.valueOf(); // 使用包装对象的方法

需要注意的是,尽管可以使用构造函数创建包装对象,但通常不建议这样做,因为它会导致性能下降,并且可能引发意外的行为。最好的做法是直接使用基本数据类型,只在必要时使用包装类型。JavaScript 引擎会在需要时自动将基本数据类型转换为包装类型,然后执行操作,然后再将其转换回基本数据类型。这个过程被称为自动装箱(Autoboxing)和自动拆箱(Unboxing)。

8. 为什么会有 BigInt 的提案?**

BigInt 的提案是为了解决 JavaScript 中整数表示范围的限制问题。在 JavaScript 中,整数是基于 IEEE 754 浮点数标准的双精度浮点数表示的,这导致了整数的表示范围有限,最大安全整数是 2^53 - 1,即 Number.MAX_SAFE_INTEGER

BigInt 提案的主要动机如下:

  1. 大整数运算:在某些应用中,需要处理非常大的整数,例如密码学、大数据计算、高精度数学计算等。传统的 JavaScript 整数无法满足这些需求。
  2. 整数精度:浮点数精度有限,对于大整数计算可能会导致精度丢失。BigInt 提供了可以表示任意精度的整数,不会发生精度丢失的问题。
  3. 与其他语言的互操作性:许多其他编程语言都具有原生支持大整数的能力,为了与这些语言进行互操作,JavaScript 需要提供类似的功能。

BigInt 提案引入了新的数据类型 BigInt,以及一组操作符和方法来支持大整数计算。以下是 BigInt 的一些示例用法:

const bigIntValue = 1234567890123456789012345678901234567890n; // 创建 BigInt
const result = bigIntValue + 1n; // 进行 BigInt 运算
console.log(result); // 输出 1234567890123456789012345678901234567891n

要注意的是,BigInt 是一种特殊的数据类型,与常规的数字(Number)不兼容。因此,BigInt 不支持与 Number 直接混合运算,需要通过显式转换或使用 BigInt 相关的操作符来处理。

BigInt 的提案已经被添加到 ECMAScript 标准中,因此现在可以在支持的 JavaScript 引擎中使用 BigInt 进行大整数计算。这使得 JavaScript 可以更好地满足处理大整数的需求,并增强了语言的通用性和功能性。

9. 如何判断一个对象是空对象**

要判断一个对象是否是空对象,您可以使用以下几种方法:

  1. 使用Object.keys()方法
    Object.keys(obj) 返回一个包含对象所有属性名称的数组。如果对象是空对象,那么这个数组应该是空的。

    function isEmptyObject(obj) {return Object.keys(obj).length === 0;
    }const emptyObject = {};
    const nonEmptyObject = { key: 'value' };console.log(isEmptyObject(emptyObject));      // true
    console.log(isEmptyObject(nonEmptyObject));   // false
  2. 使用for...in循环
    通过遍历对象的属性,如果没有任何属性被遍历到,那么对象就是空的。

    function isEmptyObject(obj) {for (let key in obj) {if (obj.hasOwnProperty(key)) {return false;}}return true;
    }const emptyObject = {};
    const nonEmptyObject = { key: 'value' };console.log(isEmptyObject(emptyObject));      // true
    console.log(isEmptyObject(nonEmptyObject));   // false
  3. 使用JSON.stringify()
    JSON.stringify(obj) 将对象转换为 JSON 字符串。如果对象是空对象,那么 JSON 字符串应该是'{}'

    function isEmptyObject(obj) {return JSON.stringify(obj) === '{}';
    }const emptyObject = {};
    const nonEmptyObject = { key: 'value' };console.log(isEmptyObject(emptyObject));      // true
    console.log(isEmptyObject(nonEmptyObject));   // false

这些方法都可以用来判断一个对象是否为空对象,您可以根据自己的需求选择其中的任何一个。请注意,这些方法都不会检查对象的原型链上的属性,只会检查对象本身的可枚举属性。

10. const 对象的属性可以修改吗**

在 JavaScript 中,使用 const 声明的变量是常量,这意味着它们不能被重新赋值。然而,const 声明的对象本身是不可变的,但对象属性(对象的值)是可以被修改的。

例如,您可以声明一个包含对象的常量,并修改该对象的属性:

const person = {name: 'John',age: 30
};// 可以修改对象的属性
person.name = 'Alice';
person.age = 35;console.log(person); // { name: 'Alice', age: 35 }

在上面的示例中,person 是一个常量,但我们可以修改 person 对象的属性(nameage)的值。这是因为 const 仅限制了变量(person)的重新赋值,而不限制对象属性的更改。

如果您希望完全禁止对象属性的修改,可以考虑使用 Object.freeze() 方法来冻结对象:

const person = Object.freeze({name: 'John',age: 30
});// 尝试修改对象的属性会导致错误
person.name = 'Alice'; // 无效,但不会报错console.log(person); // { name: 'John', age: 30 }

在这种情况下,任何尝试修改 person 对象的属性都将被忽略,但不会引发错误。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74391.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle创建用户、授权视图权限

1、创建用户密码 create user 用户名 identified by 密码;2、创建视图 CREATE VIEW 用户1.表名1 AS SELECT * FROM 用户2.表名2 t;3、授权 GRANT SELECT ON 用户2.表名2 TO 用户1 with GRANT OPTION ;grant connect to 用户名; grant select on 用户1.表名1 t…

Kafka3.0.0版本——消费者(消费者组详细消费流程图解及消费者重要参数)

目录 一、消费者组详细消费流程图解二、消费者的重要参数 一、消费者组详细消费流程图解 创建一个消费者网络连接客户端,主要用于与kafka集群进行交互,如下图所示: 调用sendFetches发送消费请求,如下图所示: (1)、Fet…

什么是50ETF期权开户条件,怎么开期权交易权限?

50ETF期权是指上证50ETF期权,标的物是上证50ETF,代码是(510500),期权是一种在上证50ETF基础上进行衍生品交易的金融工具,下文科普什么是50ETF期权开户条件,怎么开期权交易权限?本文来…

FFmpeg入门之FFmpeg源码编译

1.源码下载: git clone https://github.com/FFmpeg/FFmpeg.git windows : macos: ubuntu: 2.编译FFmpeg CompilationGuide – FFmpeg windows: 1.下载yasm并安装 : Download - The Yasm Modular Assembler Project 下载后复制到c:/windows 2.下载SDL 3.下载H264/265源码 git…

css画一条渐变的虚线

效果展示 原理&#xff1a;给元素设置一个渐变的背景色&#xff0c;画一条白色的虚线盖住背景&#xff0c;就达到了渐变虚线的效果 代码&#xff1a; <div class"pending-line"></div>.pending-line{width: 101px;border-top: 2px dashed #fff; // do…

C语言之指针进阶篇(2)

目录 函数指针 函数名和&函数名 函数指针的定义 函数指针的使用 函数指针陷阱 代码1 代码2 注意 函数指针数组定义 函数指针数组的使用 指向函数指针数组的指针 书写 终于军训圆满结束了&#xff0c;首先回顾一下指针进阶篇&#xff08;1&#xff09;主要是…

ClickHouse和Doris超大数据集存储

文章目录 一. ClickHouse1. 性能2. 可靠性3. 可扩展性4. 支持SQL和复杂查询5. 适用场景 二. Doris1. 性能2. 可靠性3. 易用性4. 适用场景 三. ClickHouse和Doris的比较1. 架构2. 性能3. 可靠性4. 易用性5. 适用场景 四. 总结 ClickHouse和Doris是两种流行的超大数据集存储方案。…

Vivado 添加FPGA开发板的Boards file的添加

1 digilent board file 下载地址 下载地址 &#xff1a; https://github.com/Digilent/vivado-boards 2 下载后 3 添加文件到 vivado 安装路径 把文件复制到 Vivado\2019.1\data\boards\board_files4 创建工程查看是否安装成功

ES delete_by_query条件删除的几种方式

es 查询删除的几种方式 1.根据id删除 #根据id删除 POST /indexname/_delete_by_query {"query": { "match": {"id": "100000"}} } 2.根据多个id删除 #根据多个id删除 POST /indexname/_delete_by_query {"query": {"…

Java EE企业级开发学习 -- day1

什么是Java EE? 它是基于Java语言的一种软件设计体系结构&#xff0c;它是一种标准中间件体系结构。它的作用在于能标准化企业级多层结构应用系统的部署&#xff0c;并且简化开发环境。 具体环境的搭建 1.下载压缩包于安装包 jdk-8u261-windows-x64 eclipse-jee-2018-12-…

C++ std::default_random_engine的使用

使用std::default_random_engine可生成不同分布的随机数&#xff0c;下面使用实例来说明其使用。 随机生成0-1间的实数 //利用当前时间生成的种子&#xff0c;可保证每次生成的值都不一样 unsigned seed std::chrono::system_clock::now().time_since_epoch().count(); std:…

pytorch再次学习

目录 基础数据可视化切换设备device定义神经网络类打印每层的参数大小自动微分计算梯度禁用梯度追踪优化模型参数 模型保存模型加载 进阶padding更准确的补法ReLU增加计算量但是减少内存消耗的办法输出合并自适应平均池化&#xff08;将输入shape变成指定的输出shape&#xff0…

【每日随笔】驾驭人性 ② ( 员工立场问题 | 立场转变 | 吴越同舟 | 老板如何与员工结成利益共同体 )

文章目录 一、员工立场问题二、立场转变三、吴越同舟四、老板如何与员工结成利益共同体 一、员工立场问题 人的潜力是很大的 , 肩上抗 100 斤 水泥 和 肩上抗 100 斤黄金 , 能一样吗 , 扛着黄金绝对能扛回家 ; 员工 不愿意 与公司一条心是正常的 , 员工 拿的是 死工资 , 公司赚…

Docker镜像、容器、仓库及数据管理

使用Docker镜像 获取镜像 使用docker pull命令&#xff0c;使用docker search命令可以搜索远端仓库中共享的镜像。 运行容器 使用docker run [OPTIONS] IMAGE [COMMAND] [ARG...]命令&#xff0c;如&#xff1a;docker run --name ubuntu_test --rm -it ubuntu:test /bin/b…

一个产品级MCU菜单框架设计

分享一个用单色屏做的菜单框架。代码托管在github&#xff1a; https://github.com/wujique/stm32f407/tree/sw_arch 1、概述 本处所说的菜单是用在128*64这种小屏幕的菜单&#xff0c;例如下面这种&#xff0c;不是彩屏上的GUI。 2、菜单框架设计 作为一个底层驱动工程师&a…

单片机-LED介绍

简介 LED 即发光二极管。它具有单向导电性&#xff0c;通过 5mA 左右电流即可发光 电流 越大&#xff0c;其亮度越强&#xff0c;但若电流过大&#xff0c;会烧毁二极管&#xff0c;一般我们控制在 3 mA-20mA 之间&#xff0c;通常我们会在 LED 管脚上串联一个电阻&#xff0c…

汇编语言Nasmide编辑软件

用来编写汇编语言源程序&#xff0c;Windows 记事本并不是一个好工具。同时&#xff0c;在命令行编译源程序也令很多人迷糊。毕竟&#xff0c;很多年轻的朋友都是用着 Windows 成长起来的&#xff0c;他们缺少在 DOS和 UNIX 下工作的经历。 我一直想找一个自己中意的汇编语言编…

文件导入之Validation校验List对象数组

背景&#xff1a; 我们的接口是一个List对象&#xff0c;对象里面的数据基本都有一些基础数据校验的注解&#xff0c;我们怎么样才能校验这些基础规则呢&#xff1f; 我们在导入excel文件进行数据录入的时候&#xff0c;数据录入也有基础的校验规则&#xff0c;这个时候我们又…

PaddleOCR学习笔记1-初步尝试

尝试使用PaddleOCR方法&#xff0c;如何使用自定义的模型方法&#xff0c;参数怎么配置&#xff0c;图片识别尝试简单提高识别率方法。 目前仅仅只是初步学习下如何使用PaddleOCR的方法。 一&#xff0c;测试识别图片&#xff1a; 1.png : 正确文本内容为“哲学可以帮助辩别现…

卫星通话过后,卫星导航产业被彻底激活

华为新手机发布后&#xff0c;其主打的卫星通话功能备受热议。在卫星产业链发展的背后&#xff0c;下一个大产业在哪里让人颇为好奇。 目前&#xff0c;卫星导航颇被看好&#xff0c;或将引领下一个技术狂潮。它的特点是产业大、发展快、参与者多。继电动汽车、新能源和芯片产…