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

云边散步2023-09-11 8:02

​

目录

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

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

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

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

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

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

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

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

      jsx 复制代码 
      let str = 'Hello, World!';

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

      jsx 复制代码 
      let num = 42;
let floatNum = 3.14;

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

      jsx 复制代码 
      let isTrue = true;
let isFalse = false;

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

      jsx 复制代码 
      let emptyValue = null;

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

      jsx 复制代码 
      let undefinedVar;

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

      jsx 复制代码 
      const uniqueSymbol = Symbol('description');

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

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

      jsx 复制代码 
      let person = {
  name: 'John',
  age: 30
};

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

      jsx 复制代码 
      let colors = ['red', 'green', 'blue'];

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

      jsx 复制代码 
      function greet(name) {
  return 'Hello, ' + name + '!';
}

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

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

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

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

  1. typeof 操作符 ：

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

    jsx 复制代码 
    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操作符用于检测一个对象是否是某个构造函数的实例。例如：

    jsx 复制代码 
    let arr = [];
arr instanceof Array; // true

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

  3. Object.prototype.toString.call() ：

    这是一种更精确的方式来检测数据类型，特别是用于检测引用数据类型。例如：

    jsx 复制代码 
    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() ：

    用于检测一个值是否是数组。例如：

    jsx 复制代码 
    Array.isArray([]); // true
Array.isArray({}); // false

  5. typeof 与 instanceof 结合 ：

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

    jsx 复制代码 
    function isString(value) {
  return typeof value === 'string' || value instanceof String;
}

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

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

3. null 和 undefined 区别**

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

  1. undefined:

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

    示例：

    jsx 复制代码 
    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

  2. null:

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

    示例：

    jsx 复制代码 
    let x = null;
console.log(x); // null

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

总结：

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

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

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

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

jsx 复制代码 
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操作符还会处理一些特殊情况，比如null和undefined值。

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

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

  1. 使用全局的 undefined 对象：

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

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

  2. 比较值与 undefined：

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

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

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

  3. 使用默认参数：

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

    jsx 复制代码 
    function exampleFunction(param = undefined) {
  // param 在未提供时会默认为 undefined
}

    这样调用函数时，如果不传递参数，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 包装类型：

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

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

    • 例如：

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

  2. Number 包装类型：

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

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

    • 例如：

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

  3. Boolean 包装类型：

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

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

    • 例如：

      jsx 复制代码 
      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 的一些示例用法：

jsx 复制代码 
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) 返回一个包含对象所有属性名称的数组。如果对象是空对象，那么这个数组应该是空的。

    jsx 复制代码 
    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循环 ：

    通过遍历对象的属性，如果没有任何属性被遍历到，那么对象就是空的。

    jsx 复制代码 
    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 字符串应该是'{}'。

    jsx 复制代码 
    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 声明的对象本身是不可变的，但对象属性（对象的值）是可以被修改的。

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

jsx 复制代码 
const person = {
  name: 'John',
  age: 30
};

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

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

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

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

jsx 复制代码 
const person = Object.freeze({
  name: 'John',
  age: 30
});

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

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

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

相关推荐
蜗牛快跑213几秒前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy1 分钟前
vue 依赖注入（Provide、Inject ）和混入（mixins）
前端·javascript·vue.js
娅娅梨7 分钟前
C++ 错题本--not found for architecture x86_64 问题
开发语言·c++
汤米粥12 分钟前
小皮PHP连接数据库提示could not find driver
开发语言·php
冰淇淋烤布蕾15 分钟前
EasyExcel使用
java·开发语言·excel
拾荒的小海螺22 分钟前
JAVA：探索 EasyExcel 的技术指南
java·开发语言
涔溪1 小时前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
马剑威（威哥爱编程）1 小时前
哇喔！20种单例模式的实现与变异总结
java·开发语言·单例模式
用户3157476081351 小时前
成为程序员的必经之路” Git “,你学会了吗？
面试·github·全栈
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10文件或文件夹名称中有空格如何批量去除