• JavaScript（1）每天10个小知识点

    ​

    目录

    👍 点赞，你的认可是我创作的动力！

    ⭐️ 收藏，你的青睐是我努力的方向！

    ✏️ 评论，你的意见是我进步的财富！

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

    JavaScript有多种数据类型，它们主要分为两大类：原始数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）。

    1. 原始数据类型（Primitive Data Types）:

      • 字符串（String）：表示文本数据，使用单引号或双引号括起来。例如：

        let str = 'Hello, World!';


        • 1
        • 2

      • 数字（Number）：表示数值，包括整数和浮点数。例如：

        let num = 42;
let floatNum = 3.14;


        • 1
        • 2
        • 3

      • 布尔（Boolean）：表示逻辑值，只有两个值：true和false。例如：

        let isTrue = true;
let isFalse = false;


        • 1
        • 2
        • 3

      • 空值（Null）：表示没有值或空对象。例如：

        let emptyValue = null;


        • 1
        • 2

      • 未定义（Undefined）：表示声明了变量但没有给它赋值时的默认值。例如：

        let undefinedVar;


        • 1
        • 2

      • 符号（Symbol）：表示唯一且不可变的值，通常用于对象属性的标识符。ES6引入了Symbol。例如：

        const uniqueSymbol = Symbol('description');


        • 1
        • 2

    2. 引用数据类型（Reference Data Types）:

      • 对象（Object）：表示复杂的数据结构，可以包含多个属性和方法。例如：

        let person = {
  name: 'John',
  age: 30
};


        • 1
        • 2
        • 3
        • 4
        • 5

      • 数组（Array）：表示有序的列表，可以包含多个值，通过索引访问。例如：

        let colors = ['red', 'green', 'blue'];


        • 1
        • 2

      • 函数（Function）：表示可执行的代码块，可以重复使用。例如：

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


        • 1
        • 2
        • 3
        • 4

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

    这些数据类型在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"


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

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

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

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


      • 1
      • 2
      • 3

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

    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]"


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    4. Array.isArray()：
      用于检测一个值是否是数组。例如：

      Array.isArray([]); // true
Array.isArray({}); // false


      • 1
      • 2
      • 3

    5. typeof 与 instanceof 结合：
      有时候，使用typeof和instanceof可以结合使用来更精确地检测数据类型。例如：

      function isString(value) {
  return typeof value === 'string' || value instanceof String;
}

isString("Hello");          // true
isString(new String("Hi"));  // true
isString(42);                // false


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

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

    3. null 和 undefined 区别**

    null和undefined是 JavaScript 中的两种特殊值，它们都表示缺失或无效的值，但在某些方面有一些不同之处：

    1. undefined:

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

      示例：

      let x;
console.log(x); // undefined

let y;
console.log(y); // undefined

function foo(a) {
  console.log(a);
}

foo(); // undefined

let obj = {};
console.log(obj.propertyThatDoesNotExist); // undefined

let arr = [1, 2, 3];
console.log(arr[10]); // undefined


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    2. null:

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

      示例：

      let x = null;
console.log(x); // null

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


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    总结：

    • undefined通常表示未定义、缺失或默认值，而null表示明确的空值。
    • 在条件比较中，null和undefined通常被视为相等，但不等于任何其他值。
    • 当您需要区分变量是否已声明或者是否已赋值为空时，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的实例


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

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

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

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

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

    1. 使用全局的 undefined 对象：

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


      • 1
      • 2

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

    2. 比较值与 undefined：

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

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


      • 1
      • 2
      • 3
      • 4
      • 5

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

    3. 使用默认参数：

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

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


      • 1
      • 2
      • 3
      • 4

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

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

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

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

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


        • 1
        • 2
        • 3
        • 4
        • 5

    2. Number 包装类型：

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

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

      • 例如：

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


        • 1
        • 2
        • 3
        • 4

    3. Boolean 包装类型：

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

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

      • 例如：

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


        • 1
        • 2
        • 3
        • 4

    需要注意的是，尽管可以使用构造函数创建包装对象，但通常不建议这样做，因为它会导致性能下降，并且可能引发意外的行为。最好的做法是直接使用基本数据类型，只在必要时使用包装类型。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


    • 1
    • 2
    • 3
    • 4

    要注意的是，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


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    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


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

    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


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

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

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

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

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

    const person = {
  name: 'John',
  age: 30
};

// 可以修改对象的属性
person.name = 'Alice';
person.age = 35;

console.log(person); // { name: 'Alice', age: 35 }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

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

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

    const person = Object.freeze({
  name: 'John',
  age: 30
});

// 尝试修改对象的属性会导致错误
person.name = 'Alice'; // 无效，但不会报错

console.log(person); // { name: 'John', age: 30 }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

  • 相关阅读:
    涵盖Java核心知识的综合指南：JavaGuide | 开源日报 0912
    gradle-4-构建有向无环图
    京东平台API接口
    将存在课题的过程可视化，丰田的“自工程完结”是什么?
    Golang：gocron定时任务管理系统的安装与使用
    docker 安装卸载及常用命令
    前端Svelte框架初体验
    入侵检测代码
    建筑能源管理（5）——建筑能源审计和审计方法
    VS编译.cu文件源文件无法打开matrix.h和mex.h问题
  • 原文地址：https://blog.csdn.net/weixin_52003205/article/details/132790101