学习前端面试知识(14)

2024-8-21  打卡第十四天 

js的数据类型

基本类型:String,Number,Object,Null,undefined,Boolean

es6之后引入:Symbol,BigInt

判断方式:typeof,instanceof,Object.prototype.toString().call()

  • 使用typeof的时候,返回表示变量数据类型的字符串。适用于所有类型的检测,包括基本数据类型和引用数据类型,但是对于数组和null返回的都是object,可能产生误导,并且无法区分函数指针和函数实例(通过new Function()创建的)
<script>
console.log(typeof undefined); // "undefined"
console.log(typeof 0);         // "number"
console.log(typeof true);      // "boolean"
console.log(typeof "hello");   // "string"
console.log(typeof Symbol());  // "symbol"
console.log(typeof 1n);        // "bigint"
console.log(typeof function(){}); // "function"
console.log(typeof []);        // "object" 误导
console.log(typeof null);      // "object" 误导
</script>
  • instanceof主要用于检测引用数据类型,特别判断一个对象是否属于某个构造函数的实例,对于基本数据类型无法判断
<script>
console.log([] instanceof Array); // true
console.log(null instanceof Object); // false
console.log(function(){} instanceof Function); // true
</script>
  • 返回一个表示该对象内部的字符串,这个字符串对于不同的数据类型是唯一的
<script>
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null));      // "[object Null]"
console.log(Object.prototype.toString.call(true));      // "[object Boolean]"
console.log(Object.prototype.toString.call("hello"));   // "[object String]"
console.log(Object.prototype.toString.call(1));         // "[object Number]"
console.log(Object.prototype.toString.call(Symbol()));  // "[object Symbol]"
console.log(Object.prototype.toString.call(1n));        // "[object BigInt]"
console.log(Object.prototype.toString.call([]));        // "[object Array]"
console.log(Object.prototype.toString.call({}));        // "[object Object]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"
</script>

es6的新特性

  • 变量声明:const let
  • 箭头函数
  • rest参数,允许将一个不定数量的参数作为一个数组
<script>
function test(...args){console.log(args.filter(v => v > 2)); // [3,4,5,6]
}
test(1,2,3,4,5,6);
</script>
  • 模版字符串,使用``
  • 解构赋值,允许从数组或对象中提取数据,并赋值给变量
<script>
const [a,b,c] = [1,2,3];
console.log(a); <!--1-->
console.log(b); <!--2-->
console.log(c); <!--3-->const { name,age } = {name:'John',age:20}
<!--name:John age:20-->
console.log("name:"+name+"age:"+age);
const { name,age } = {age:20,name:'John'}
<!--name:John age:20-->
console.log("name:"+name+"age:"+age);
</script>
  • 引入类:使用class关键字定义类,包含构造函数,方法,静态方法等
  • 模块化:导入导出模块import export
  • promise异步编程,解决回调地狱
  • 新的数据结构,Map和Set,Map用于存储键值对,Set用于存储不重复的值
  • 数组新方法:Array.from()用于将类数组或者可迭代对象转换为数组
  • 感觉rest和扩展运算符很像,简单说一下自己的理解,结合了文心一言的回复。扩展运算符是向外,用于将数组或对象结构展开到新的结构中。Rest参数是内向的,用于将多个参数收集到数组中。

数组去重的方法

  • 使用构造函数set去重,不是箭头函数,该方法的this会直接指向调用他的数组实例,再使用Array.from转为数组
<script>
const arr = [1,2,2,3,3];
Array.prototype.myUnrepeat = function(){return Array.from(new Set(this));
}
<!--[1,2,3]-->
console.log(arr.myUnrepeat(arr));
</script>
  • 使用filter去重,注意val和index的位置不能交换,第一个是当前的值,第二个是当前值的指针,第三个是真正被遍历的数组
<script>
const arr = [1,2,2,3,3];
Array.prototype.myUnrepeat = function(){return this.filter((val,index,self) => self.indexOf(val) == index);
}
<!--[1,2,3]-->
console.log(arr.myUnrepeat(arr));
</script>

说一下深拷贝和浅拷贝,如何自己实现一个深拷贝?

浅拷贝和深拷贝的区别是,是否对其内部的子对象进行递归复制。

  • 浅拷贝
<script>
let origin = { a: 1, b: {c: 2}};
let copy = Object.assign({},origin);
<!--let copy = {...origin};-->
console.log(copy);
copy.b.c = 3;
console.log(origin.b.c);  <!-- 3 -->
</script>
  • 深拷贝
<script>
let origin = { a: 1, b: {c: 2}};
let copy = JSON.parse(JSON.stringify(origin));
console.log(copy);
copy.b.c = 3;
console.log(origin.b.c);  <!-- 2 状态没变 -->
</script>

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

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

相关文章

鸿蒙HarmonyOS开发:如何使用第三方库,加速应用开发

文章目录 一、如何安装 ohpm-cli二、如何安装三方库1、在 oh-package.json5 文件中声明三方库&#xff0c;以 ohos/crypto-js 为例&#xff1a;2、安装指定名称 pacakge_name 的三方库&#xff0c;执行以下命令&#xff0c;将自动在当前目录下的 oh-package.json5 文件中自动添…

打造敏捷开发环境:JNPF低代码平台的实践与探索

在数字化转型的浪潮中&#xff0c;企业对软件开发的敏捷性和效率提出了更高的要求。传统的软件开发模式通常耗时长、成本高昂&#xff0c;难以迅速适应市场变化。低代码平台的出现&#xff0c;为解决这一问题提供了新的视角。本文将探讨如何运用JNPF低代码平台构建敏捷开发环境…

Tailor:免费开源 AI 视频神器,创作者必备利器

目录 引言一、创新特性&#xff0c;引领视频编辑新潮流1. 智能人脸剪辑2. 精准语音剪辑3. 自动化口播生成4. 多样化字幕生成5. 一键式色彩生成 二、简单易用&#xff0c;新手也能快速上手1. 下载和安装2. 功能选择3. 操作流程 三、广泛应用&#xff0c;满足不同创作需求四、代码…

Python学习-数据库操作

一、安装python库 pip install mysql-connector-python import mysql import re 安装库并导入包 二、定义数据库连接属性&#xff1a; conn mysql.connector.connect(host192.168.1.30, # 替换为你的数据库主机名userkeyijie, # 替换为你的数据库用户名password19kyj20St…

《机器学习》—— AUC评估指标

文章目录 一、什么是AUC&#xff1f;1、什么是ROC曲线&#xff1f;2、ROC曲线的绘制 二、如何计算AUC的值三、代码实现AUC值的计算四、AUC的优缺点 一、什么是AUC&#xff1f; 机器学习中的AUC&#xff08;Area Under the Curve&#xff09;是一个重要的评估指标&#xff0c;特…

springboot故障分析FailureAnalyzer

org.springframework.boot.diagnostics.FailureAnalyzer是springboot框架中的一个接口&#xff0c;用于为应用程序启动失败提供详细的诊断报告。当springboot应用程序无法正常启动时&#xff0c;springboot会尝试查找一个或多个实现了FailureAnalyzer接口的类&#xff0c;以提供…

网络游戏运营

游戏运营是将一款游戏平台推入市场&#xff0c;并通过一系列的策略和行动&#xff0c;使玩家从接触、认识到最终成为忠实玩家的过程。这一过程涵盖了多个方面&#xff0c;包括前期准备、上线运营、活动策划、数据分析、渠道合作以及用户维护等。以下是对游戏运营的详细解析&…

HarmonyOS--认证服务-操作步骤

HarmonyOS–认证服务 文章目录 一、注册华为账号开通认证服务二、添加项目&#xff1a;*包名要与项目的包名保持一致三、获取需要的文件四、创建项目&#xff1a;*包名要与项目的包名保持一致五、添加json文件六、加入请求权限七、加入依赖八、修改构建配置文件&#xff1a;bui…

软硬链接

建立软连接 ln -s 指向的文件 软连接文件 建立硬连接 ln 原来文件 硬连接文件 上面我们发现&#xff0c;建立的软链接文件的inode编号和指向文件不同&#xff0c;而建立的硬链接文件inode编号没变&#xff0c;为什么呢&#xff1f; 为什么不能给目录创建硬链接&#xff1f…

macOS 安装 JMeter

在 macOS 上安装 JMeter 有几种不同的方法&#xff0c;可以通过 Homebrew 安装或者手动下载并配置。下面是这两种方法的详细步骤&#xff1a; 方法 1&#xff1a;使用 Homebrew 安装 JMeter 安装 Homebrew&#xff08;如果还未安装&#xff09;&#xff1a; 打开终端并运行以下…

解决添加MPJ插件启动报错

在项目中需要用到多数据源的级联查询&#xff0c;所以引入了MPJ插件&#xff0c;MPJ的版本是1.2.4&#xff0c;MP的版本是3.5.3&#xff0c;但却在启动的时候报错&#xff0c;报错如下&#xff1a; 解决办法&#xff1a; 将MP的版本降到3.5.1

UnrealEngine学习(02):虚幻引擎编辑器界面详解

学习一款软件&#xff0c;我个人建议是先学习怎么用&#xff0c;然后是学习怎么用的好&#xff0c;再研究源码。 上一篇文章详细描述了我们该如何安装虚幻5引擎&#xff1a; UnrealEngine学习(01)&#xff1a;安装虚幻引擎https://blog.csdn.net/zuodingquan666/article/deta…

Spring IOC 创建Bean过程

ABC.class---推断构造涵数-->create Instance&#xff08;普通对象&#xff09;-->依赖注入字段、属性 -->Aware(设置Bean名称&#xff09; -->初始化InitializingBean【void afterPropertiesSet()】回调 -->BeanPostProcessor(AOP)后置处理 初始化之前&…

7-7 数组中能被5整除的数的和

在一维数组中有10个整数&#xff0c;求出其中能被5整除的所有数的和。 输入格式: 在一行中输入10个整数&#xff0c;数据之间用1个空格间隔。 输出格式: 直接输出运算结果&#xff0c;没有任何附加字符。 输入样例: 5 6 8 15 98 45 71 2 3 1输出样例: 65 #include <…

Cypress 调用后端能力 task

在 Cypress 中的测试都是在前端运行的, 一些后端的操作是不可以直接调用的, 例如 fs, 但是可以通过 task 作为桥梁进行调用. 1. 在 cypress.config.js 中配置 e2e: {setupNodeEvents(on, config) {plugins(on, config);},2. 在 plugins/index.js 中实现 const fs require(&q…

【学术英语】Unit3:Academic Writing(学术写作)

文章目录 一、摘要1.1 摘要简介1.2 摘要的两种类型1.3 写摘要的技巧1.4 摘要的关键词1.5 例子1.5.1 例子11.5.2 例子2 二、注释和致谢2.1 注释的格式2.1.1 Book2.1.2 论文2.1.3 例子 2.2 致谢的格式 三、书目选编 一、摘要 1.1 摘要简介 摘要对学术写作极其重要和有用&#x…

小白之 FastGPT Windows 本地化部署

目录 引言环境步骤1. 安装 docker2. 启动 docker3. 浏览器访问4. One API 配置语言模型、向量模型渠道和令牌5. 创建 FastGPT 知识库6. 创建 FastGPT 应用 官方文档 引言 部署之前可以先看一下 RAG 技术原理&#xff0c;也可以后面回过头来看&#xff0c;对一些概念有些了解&a…

Latex插入eps图片不显示报错not found解决方案

Latex插入eps图片不显示并报错&#xff1a; 解决方案&#xff1a; 首先确保.tex文件中添加包\usepackage{epstopdf} winR输入cmd进入系统命令行 进入.tex文件系统盘&#xff0c;代码&#xff1a;D: 进入.tex所在文件夹&#xff0c;代码&#xff1a;cd D:\Desktop\xxx 执行最重要…

Spring Cloud LoadBalancer 源码解析

前言 LoadBalancer&#xff08;负载均衡器&#xff09;&#xff1a;一种网络设备或软件机制&#xff0c;用于分发传入的网络流量负载到多个后端目标服务器上&#xff0c;依次来提高系统的可用性和性能&#xff0c;Spring Cloud 2020 版本以后&#xff0c;移除了对 Netflix 的依…

如何在项目中配置.gitignore文件

1. .gitignore作用 .gitignore文件用于告诉Git哪些文件不应被跟踪或者提交到版本控制中。 2. 创建.gitignore文件 在你的项目根目录下创建一个名为.gitignore的文件 3. 常见规则 3.1 操作系统生成的文件 # macOS .DS_Store .AppleDouble .LSOverride# Windows Thumbs.db …