JavasScript基础第一部分

news2025/2/2 4:49:29

此文章，来源于印客学院的资料，然后补充的。

此文档不一定涵盖了所有知识点，只是一个大概方向，仅供参考。

也算一个查漏补缺，诸君可以根据自己实际情况，自行衡量，看看哪里需要补充。

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

JavaScript 共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

  • Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
  • BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数， 使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了Number能够表示的安全整数范围。

这些数据可以分为 原始数据类型 和 引用数据类型 ：

  • 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
  • 堆：引用数据类型（对象、数组和函数）

两种类型的区别在于存储位置的不同：

  • 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
  • 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。

如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

堆和栈的概念存在于数据结构和操作系统内存中，在数据结构中：

  • 在数据结构中，栈中数据的存取方式为先进后出。
  • 堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。

在操作系统中，内存被分为栈区和堆区：

  • 栈区内存 由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
  • 堆区内存 一般由开发着分配释放，若开发者不释放，程序结束时可能由垃圾回收机制回收。

更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。

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

在JavaScript中，有多种方式可以进行数据类型检测。以下是一些常见的方式：

使用typeof操作符：typeof是JavaScript的一元操作符，可以返回一个值的数据类型。

例如：

console.log(typeof "Hello World");  // 输出 "string"
console.log(typeof 42);  // 输出 "number"
console.log(typeof true);  // 输出 "boolean"

使用instanceof操作符：instanceof用于检查一个对象是否属于某个特定的类或构造函数的实例。

例如：

var arr = [];
console.log(arr instanceof Array);  // 输出 true

var date = new Date();
console.log(date instanceof Date);  // 输出 true

使用constructor属性：可以使用constructor属性来判断一个对象的构造函数。

例如：

var str = "Hello World";
console.log(str.constructor === String);  // 输出 true

var num = 42;
console.log(num.constructor === Number);  // 输出 true

使用Object.prototype.toString()方法：可以使用该方法来获取一个对象的内部属性[[Class]]，从而判断其数据类型。

例如：

var obj = {};
console.log(Object.prototype.toString.call(obj));  // 输出 "[object Object]"

var func = function() {};
console.log(Object.prototype.toString.call(func));  // 输出 "[object Function]"

这些只是一些基本的方式，还有其他更复杂和详细的方式，如使用typeof和constructor结合判断、使用Array.isArray()方法判断数组等。

根据实际需求选择适合的方式进行数据类型检测。

null 和undefined 区别

在JavaScript中，null和undefined是两个特殊的值，用于表示缺失或无效的值。

null是一个表示空值的特殊关键字。它被认为是一个空对象指针，表示该变量没有指向任何有效的对象。当我们想要明确指示一个变量为空时，可以将其赋值为null。例如：

let myVariable = null;
console.log(myVariable);  // 输出：null

undefined表示一个未定义的值，表示变量已经声明但尚未被赋值。当我们声明一个变量但没有给它赋初始值时，该变量的默认值为undefined。另外，如果我们访问一个不存在的属性或者调用一个不存在的函数，返回值也为undefined。例如：

let myVariable;
console.log(myVariable);  // 输出：undefined

此外，null和undefined在使用方式上也有区别。当你希望表达一个变量有值但目前为空时，可以使用null。而undefined则通常表示未定义、缺失或错误的状态。

总结一下：

  • null表示为空的值，是一个空对象指针。
  • undefined表示未定义的值，表示变量已声明但未赋值，或者访问不存在的属性或函数时的返回值。

需要注意的是，在使用时要避免混淆null和undefined，根据具体情况正确选择使用。

intanceof 操作符的实现原理及实现

在 JavaScript 中，instanceof 是一个运算符，用于 检查对象是否属于指定类或其原型链上的某个类。它的实现原理可以描述如下：

  1. instanceof 首先会判断左操作数（对象）是否有 [[Prototype]] 属性，该属性指向对象的原型。
  2. 接下来，它会判断右操作数（构造函数）是否具有 prototype 属性，该属性指向构造函数的原型对象。
  3. 如果左操作数的 [[Prototype]] 属性为 null，则返回 false。如果右操作数的 prototype 属性为 null，则抛出 TypeError 异常。
  4. 然后，instanceof 将沿着左操作数的原型链逐级查找，直到找到右操作数的 prototype，或者到达原型链的尽头（null）为止。
  5. 如果找到了匹配的原型对象，则返回 true；否则返回 false。

这个过程是通过比较原型链中的对象是否与右操作数的 prototype 相等来完成的。

以下是一个简单的示例代码，演示如何使用 instanceof 运算符：

class Animal { }

class Dog extends Animal { }

const animal = new Dog();

if (animal instanceof Dog) {
  console.log('animal 是 Dog 类型');
} else if (animal instanceof Animal) {
  console.log('animal 是 Animal 类型');
} else {
  console.log('animal 不是 Dog 类型也不是 Animal 类型');
}

在上述示例中，instanceof 运算符首先判断 animal 是否是 Dog 类的一个实例。由于 animal 是通过 new Dog() 创建的，所以它是 Dog 类的实例，输出 “animal 是 Dog 类型”。

如何获取安全的 undefined 值？

因为 undefined 是一个标识符，所以可以被当作变量来使用和赋值，但是这样会影响 undefined 的正常判断。

表达式 void 没有返回值，因此返回结果是 undefined。void 并不改变表达式的结果，只是让表达式不返回值。

因此可以用 void 0 来获得 undefined。

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

在JavaScript中，Object.is() 方法和比较操作符 “=" 和 "” 在比较值时有一些区别。

  1. Strict Equality （严格相等，“===”）：
    • 使用 “===” 进行比较时，会先判断两个值的数据类型是否相同，如果不同则直接返回 false。
    • 如果两个值的数据类型相同，再进一步比较它们的值。
    • 使用 “===” 比较时，对于数字、字符串、布尔值等基本类型的值，只有在值相同的情况下才会返回 true。
    • 对于引用类型的值（如对象、数组等），比较的是它们在内存中的引用地址，只有当两个引用指向同一个对象时才会返回 true。

示例：

console.log(42 === 42);  // 输出 true
console.log("hello" === "hello");  // 输出 true
console.log(true === true);  // 输出 true

var obj1 = {};
var obj2 = obj1;
console.log(obj1 === obj2);  // 输出 true
  1. Abstract Equality （抽象相等，“==”）：
    • 使用 “==” 进行比较时，会进行类型转换，尝试将两个值转换为相同的类型，然后再进行比较。
    • 在进行类型转换时，会根据一些规则进行隐式类型转换，例如将字符串转换为数字。
    • 如果两个值的类型相同，则和使用 “===” 比较相同。
    • 如果两个值的类型不同，会尝试将它们转换为相同的类型进行比较。具体转换规则相对复杂，不太直观。

示例：

console.log(42 == "42");  // 输出 true，进行了类型转换后相等
console.log(null == undefined);  // 输出 true，特殊规则，被认为相等

var obj = {};
console.log(obj == "[object Object]");  // 输出 true，对象和字符串进行了隐式类型转换
  1. Object.is() 方法：
    • Object.is() 方法用于比较两个值是否严格相等，类似于 “===” 操作符。
    • 与 “===” 不同的是，Object.is() 方法对于一些特殊情况的处理更加准确。
    • 特殊情况包括处理 NaN 和处理 +0/-0 的区别。

示例：

console.log(Object.is(NaN, NaN));  // 输出 true，对于 NaN 的判断更准确
console.log(Object.is(+0, -0));    // 输出 false，对于 +0/-0 的判断更准确

综上所述，Object.is() 方法在比较值时更准确，特别是对于 NaN 和 +0/-0 的处理。在一般情况下，推荐使用 “===” 进行严格相等比较。

什么是 JavaScript 中的包装类型？

JavaScript中的包装类型（Wrapper Types）是指用于将原始数据类型（Primitive Data Type）包装成对象的特殊对象。

在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如：

在访问’abc’.length 时， JavaScript 将’abc’ 在后台转换成String(‘abc’)，然后再访问其length 属性。

JavaScript 也可以使用Object 函数显式地将基本类型转换为包装类型：

var a = 'abc' 
Object(a) // String {"abc"}

也可以使用valueOf 方法将包装类型倒转成基本类型：

看看如下代码会打印出什么：

答案是什么都不会打印，因为虽然包裹的基本类型是 false，但是false 被包裹成包装类型后就成了对象，所以其非值为 false，所以循环体中的内容不会运行。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【CentOS安装make】

【CentOS安装make】

问题： bash: make: command not found 1、去官网查找最新版本 http://ftp.gnu.org/pub/gnu/make/ 查找最新安装包 2、下载解压缩 wget http://ftp.gnu.org/pub/gnu/make/make-4.2.tar.gz tar -zxvf make-4.2.tar.gz cd make-4.2mkdir buildcd build../configure…
阅读更多...
度量学习和表征学习

度量学习和表征学习

度量学习 定义 计算特征之间的距离（特征之间相乘），通过距离损失优化模型——>度量距离相关的损失函数 图片出自《【极市】张宇涵-CVPR2020 Oral｜Circle Loss，从统一视角提升深度特征学习能力_哔哩哔哩_bilibili》…
阅读更多...
短视频矩阵系统源码搭建--附赠代码

短视频矩阵系统源码搭建--附赠代码

说明：本开发文档适用于短视频矩阵系统源码开发搭建，短视频seo矩阵源码开发搭建，抖音短视频seo源码开发搭建，抖音矩阵系统源码开发搭建等SaaS类产品开发场景。 短视频矩阵系统开发围绕的开发核心维度： 1. 多账号原理开…
阅读更多...
shell脚本定时删除大小超200M的日志文件

shell脚本定时删除大小超200M的日志文件

需求 某个服务器的日志文件随着时间的增长越来越多，我不想自己一个个的删除，但是不删除的话，会很麻烦，万一因为日志文件导致内存满了就麻烦了！ 实现步骤 1、写好实现的脚本 我要查找>200M的日志文件 find / -typ…
阅读更多...
苹果平板电容笔好用吗？第三方apple pencil推荐

苹果平板电容笔好用吗？第三方apple pencil推荐

自从苹果推出了ipad的电容笔之后，一直在市场上保持着十分火爆的热度，但是因为Apple Pencil的价格太高，一般的消费者根本没有足够预算去入手。所以市场上就不断涌现出了不少可以很好代替Apple Pencil的平替电容笔，并且深受人们的热…
阅读更多...
BTY Ecosystem DNS‘s Ideas of DeSoc

BTY Ecosystem DNS‘s Ideas of DeSoc

In May 2022, Ethereum founder Vitalik Buterin, economist Glen Weyl and Flashbots researcher Puja Ohlhaver jointly released “Decentralized Society: Finding Web3s Soul”. The core idea of this paper is the possibility of creating a decentralized society aro…
阅读更多...
数据结构与算法基础（青岛大学-王卓）(6)

数据结构与算法基础（青岛大学-王卓）(6)

啊呀呀，不小心又断更快一个月了，我还是认真每天学习滴，最近还是香瓜，菜瓜，西瓜，羊角蜜不能停口啊，哈哈，二叉树这一章真是硬茬，难啃啊。 文章目录 [toc]树和二叉树树的定义…
阅读更多...
linux扩大原磁盘后，扩大lvm空间

linux扩大原磁盘后，扩大lvm空间

需求背景 原centos7虚机是将一块裸盘（未分区）通过lvm的方式挂载到/data目录下，现因业务需要，需要增加/data目录的磁盘空间，现在虚机管理平台上将原磁盘增加20G空间。 注意：如果是新增加一个磁盘&#xff…
阅读更多...
二十、移动端网页开发-px 和 vw基础知识

二十、移动端网页开发-px 和 vw基础知识

目录&#xff1a; 1. 基础准备 2. vw 详解 一、基础准备 1. 观察你的html里面有没有meta完美视口设置&#xff0c;如果有&#xff0c;就不用再管&#xff0c;如果没有&#xff0c;就加上。 <head><meta charset"UTF-8"><meta http-equiv"X-UA-C…
阅读更多...
Fiddler抓包app（方便后端定位app调用的是那个接口？参数为何？）

Fiddler抓包app（方便后端定位app调用的是那个接口？参数为何？）

一、抓http请求的包 1、设置Fiddler允许远程连接 选择Tools->Options 选择Connections选项卡&#xff0c;选中允许远程连接&#xff0c;如图所示 2、手机与电脑连接相同的wlan网络 3、手机wlan设置手动代理&#xff0c; 1&#xff09;手动代理的主机名设为电脑ip&…
阅读更多...
开放式耳机的类型有哪些？开放式耳机和封闭式耳机的区别？

开放式耳机的类型有哪些？开放式耳机和封闭式耳机的区别？

今天来跟大家聊聊开放式耳机&#xff0c;其中开放式耳机类型有哪些&#xff1f;开放式耳机和封闭式耳机的区别在哪&#xff1f;市面上这么多开放式耳机&#xff0c;到底哪款开放式耳机才好用&#xff1f;下面一起来了解&#xff01; 一、什么是开放式耳机&#xff1f; 开放式…
阅读更多...
新增进程管理、SSH会话管理功能，1Panel开源面板v1.4.0发布

新增进程管理、SSH会话管理功能，1Panel开源面板v1.4.0发布

2023年7月17日&#xff0c;现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.4.0版本。 在这个版本中&#xff0c;1Panel新增了进程管理和SSH会话管理功能&#xff1b;支持容器编辑和升级&#xff0c;数据库兼容MySQL 5.6&#xff1b;备份账号可以添加微软OneDrive&…
阅读更多...
数字孪生和VR的结合将会带来怎样的改变？

数字孪生和VR的结合将会带来怎样的改变？

随着科技的不断发展&#xff0c;数字孪生和虚拟现实&#xff08;VR&#xff09;这两个前沿技术正在逐渐融合&#xff0c;为各行各业带来了前所未有的改变。 数字孪生技术本身已经可以高度还原现实世界&#xff0c;而VR技术则能通过头戴式设备&#xff0c;让用户沉浸在这个虚拟…
阅读更多...
uniapp editor组件 如何上传图片

uniapp editor组件 如何上传图片

需求&#xff1a;我们在使用uniapp的editor组件时&#xff0c;主要是为了保持输入内容的格式。里面的文字可以有颜色、粗体、排列样式&#xff0c;可以插入图片。就像下面这样。 一、如何处理图片&#xff0c;好让它在 rich-text组件中显示 &#xff1f; 逻辑&#xff1a;我们…
阅读更多...
vue3和gin框架实现简单的断点续传

vue3和gin框架实现简单的断点续传

vue3和gin框架实现简单的断点续传 前端代码 Test.vue <template><div><inputtype"file"ref"uploadRef"change"upload"multiple/><templatev-for"item in fileList":key"item.key"><br><…
阅读更多...
三步数据转报表，奥威BI-金蝶云星空SaaS版给你极速数据分析体验

三步数据转报表，奥威BI-金蝶云星空SaaS版给你极速数据分析体验

根据经验&#xff0c;要部署一套大数据分析软件&#xff0c;至少也要准备环境、下载安装配置软件、配置数据源&#xff0c;有些完全从零开始入手的还面临着分析模型的搭建等难题。这些操作不说难度如此&#xff0c;光是耗时就不短&#xff0c;会给企业带来不小的成本压力。而奥…
阅读更多...
读书笔记怎么写？《如何阅读一本书》读书笔记！

读书笔记怎么写？《如何阅读一本书》读书笔记！

读书笔记有助于提高读书的效率&#xff0c;引发更多的思考。在阅读的过程中&#xff0c;读书笔记该怎么写&#xff1f;本文借助 boardmix在线白板&#xff0c;以《如何阅读一本书》为例&#xff0c;全面剖析如何做好读书笔记。 1.作者信息 《如何阅读一本书》是由莫提默J. …
阅读更多...
【Maven】Maven下载,配置以及基本概念

【Maven】Maven下载,配置以及基本概念

文章目录 1. Maven简介2. Maven下载3. Maven环境配置4.Maven的基本概念4.1 仓库4.2 坐标4.3 仓库配置(修改IDEA默认Maven库) 1. Maven简介 Maven是一个Java项目管理工具和构建工具&#xff0c;用于管理项目的依赖关系、构建过程以及项目的部署。它是Apache软件基金会的开源项目…
阅读更多...
ShardingSphere核心概念

ShardingSphere核心概念

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…
阅读更多...
INDEMIND：视觉SLAM，助力服务机器人再进化

INDEMIND：视觉SLAM，助力服务机器人再进化

毋庸置疑&#xff0c;VSLAM将是推动机器人再次迭代的关键之一。 移动的“机器”还是机器人&#xff1f; 随着机器人的落地量持续增长&#xff0c;早期“忽略”的产品缺陷&#xff0c;正在引发越来越严重的负面影响。一方面&#xff0c;激光SLAM虽基于Cartographer算法不断演进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023