前端面试宝典总结3-JavaScript(2)

前端面试宝典总结之JavaScript(2)

本文章 对各大学习技术论坛知识点,进行总结、归纳自用学习,共勉🙏

上一篇👉: 前端面试宝典总结3-JavaScript(1)

文章目录

  • 前端面试宝典总结之JavaScript(2)
  • 1.常用的正则表达式有哪些?
  • 2.JavaScript有哪些内置对象
  • 3. 对JSON的理解
  • 4.JavaScript脚本延迟加载的方式有哪些?
  • 5.JavaScript 类数组对象的定义?
  • 6.数组有哪些原生方法?
  • 7.Unicode、UTF-8、UTF-16、UTF-32的区别?
  • 8. new操作符的实现原理
  • 9. map和Object的区别
  • 10.map和weakMap的区别

1.常用的正则表达式有哪些?

//用户名正则,4到16位(字母,数字,下划线,减号)
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;//身份证号(18位)正则
var idPattern = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//手机号正则
var mPattern = /^1[34578]\d{9}$/; //正整数正则
var posPattern = /^\d+$/;
//负整数正则
var negPattern = /^-\d+$/;
//整数正则
var intPattern = /^-?\d+$/;//正数正则
var posPattern = /^\d*\.?\d+$/;
//负数正则
var negPattern = /^-\d*\.?\d+$/;
//数字正则
var numPattern = /^-?\d*\.?\d+$/;//Email正则
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//URL正则
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;//QQ号正则,5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;//微信号正则,6至20位,以字母开头,字母,数字,减号,下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;//车牌号正则
var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;

2.JavaScript有哪些内置对象

全局的对象( global objects )或称标准内置对象,不要和 “全局对象(global object)” 混淆。这里说的全局的对象是说在全局作用域里的对象。全局作用域中的其他对象可以由用户的脚本创建或由宿主程序提供。

基础值对象:

  • Infinity: 表示无穷大。
  • NaN: 表示非数字值。
  • undefined: 表示未定义的原始值

基础函数对象:

  • eval(): 执行JavaScript代码字符串。
  • parseInt(), parseFloat(): 分别解析整数和浮点数。
  • isFinite(), isNaN(): 检查数值是否有限或是否为NaN

基本构造函数:

  • Object: 所有对象的基类。
  • Function: 函数的构造函数。
  • Boolean, String, Number, Symbol: 布尔、字符串、数字和符号的构造函数。
  • Error: 错误对象的基类,包括子类如TypeError, ReferenceError等。

数学与日期:

  • Math: 提供数学常数和函数。
  • Date: 表示日期和时间。

文本处理:

  • String: 提供字符串操作方法。
  • RegExp: 正则表达式,用于文本匹配和替换。

集合对象:

  • Array: 数组。
  • TypedArrays: 用于处理二进制数据的类型化数组。
  • Map, Set: 键值对集合和唯一值集合。
  • WeakMap, WeakSet: 类似于Map和Set,但键是弱引用,适合垃圾回收。

矢量和数据处理:

  • SIMD: 单指令多数据,用于高性能数值计算。
  • Buffer, TypedArray: Node.js中的二进制数据处理。

异步与控制抽象:

  • Promise: 用于异步编程的解决回调地狱。
  • Generator: 生成器函数,支持暂停和恢复函数执行。
  • async/await: 基于Promise的异步编程糖衣语法

反射与元编程:

  • Reflect: 提供对象操作的静态方法。
  • Proxy: 用于创建对象的代理,拦截并自定义操作行为。

国际化:

  • Intl: 国际化和本地化支持,包括Collator, DateTimeFormat等。

Web平台特有:

  • WebAssembly: 面向Web的低级编程语言。
  • DOM, BOM: 浏览器环境中的文档对象模型和浏览器对象模型。

特殊对象:

  • arguments: 函数调用时的局部变量,包含传入的参数。

这些内置对象共同构成了JavaScript强大的生态系统,使得开发者能够应对各种复杂的编程需求,从基本的数据处理到高级的异步控制和性能优化。

3. 对JSON的理解

JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。

在项目开发中,使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为

JSON 字符串,然后将它传递到后端,后端通过 JSON 格式的字符串解析后生成对应的数据结构,以此来实现前后端数据的一个传递。

因为 JSON 的语法是基于 js 的,因此很容易将 JSON 和 js 中的对象弄混,但是应该注意的是 JSON 和 js 中的对象不是一回事,JSON 中对象格式更加严格,比如说在 JSON 中属性值不能为函数,不能出现 NaN 这样的属性值等,因此大多数的 js 对象是不符合 JSON 对象的格式的。

在 js 中提供了两个函数来实现 js 数据结构和 JSON 格式的转换处理,

  • JSON.stringify 函数,通过传入一个符合 JSON 格式的数据结构,将其转换为一个 JSON 字符串。如果传入的数据结构不符合
    JSON 格式,那么在序列化的时候会对这些值进行对应的特殊处理,使其符合规范。在前端向后端发送数据时,可以调用这个函数将数据对象转化为JSON 格式的字符串。
  • JSON.parse() 函数,这个函数用来将 JSON 格式的字符串转换为一个 js 数据结构,如果传入的字符串不是标准的 JSON
    格式的字符串的话,将会抛出错误。当从后端接收到 JSON 格式的字符串时,可以通过这个方法来将其解析为一个 js数据结构,以此来进行数据的访问。

4.JavaScript脚本延迟加载的方式有哪些?

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

一般有以下几种方式:

  • defer 属性:给 js 脚本添加 defer属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了
    defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样。
  • async 属性:给 js 脚本添加 async 属性,这个属性会使脚本异步加载,不会阻塞页面的解析过程,但是当脚本加载完成后立即执行js 脚本,这个时候如果文档没有解析完成的话同样会阻塞。多个 async属性的脚本的执行顺序是不可预测的,一般不会按照代码的顺序依次执行。
  • 动态创建 DOM 方式:动态创建 DOM 标签的方式,可以对文档的加载事件进行监听,当文档加载完成后再动态的创建 script标签来引入 js 脚本。
  • 使用 setTimeout 延迟方法:设置一个定时器来延迟加载js脚本文件
  • 让 JS 最后加载:将 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行。

5.JavaScript 类数组对象的定义?

一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象,类数组对象和数组类似,但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果,还有一个函数也可以被看作是类数组对象,因为它含有 length 属性值,代表可接收的参数个数。

常见的类数组转换为数组的方法有这样几种:
(1)通过 call 调用数组的 slice 方法来实现转换

Array.prototype.slice.call(arrayLike);

(2)通过 call 调用数组的 splice 方法来实现转换

Array.prototype.splice.call(arrayLike, 0);

(3)通过 apply 调用数组的 concat 方法来实现转换

Array.prototype.concat.apply([], arrayLike);

(4)通过 Array.from 方法来实现转换

Array.from(arrayLike);

6.数组有哪些原生方法?

  • 数组和字符串的转换方法:toString()、toLocalString()、join() 其中 join()方法可以指定转换为字符串时的分隔符。
  • 数组尾部操作的方法 pop() 和 push(),push 方法可以传入多个参数。
  • 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort(),sort()
    方法可以传入一个函数来进行比较,传入前后两个值,如果返回值为正数,则交换两个参数的位置。
  • 数组连接的方法 concat() ,返回的是拼接好的数组,不影响原数组。
  • 数组截取办法 slice(),用于截取数组中的一部分返回,不影响原数组。
  • 数组插入方法 splice(),影响原数组查找特定项的索引的方法,indexOf()lastIndexOf() 迭代方法every()、some()、filter()、map() 和 forEach() 方法
  • 数组归并方法 reduce() 和 reduceRight() 方法

7.Unicode、UTF-8、UTF-16、UTF-32的区别?

8. new操作符的实现原理

new操作符的执行过程:
(1)首先创建了一个新的空对象
(2)设置原型,将对象的原型设置为函数的 prototype 对象。
(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
(4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。

function objectFactory() {let newObject = null;let constructor = Array.prototype.shift.call(arguments);let result = null;// 判断参数是否是一个函数if (typeof constructor !== "function") {console.error("type error");return;}// 新建一个空对象,对象的原型为构造函数的 prototype 对象newObject = Object.create(constructor.prototype);// 将 this 指向新建对象,并执行函数result = constructor.apply(newObject, arguments);// 判断返回对象let flag = result && (typeof result === "object" || typeof result === "function");// 判断返回结果return flag ? result : newObject;
}
// 使用方法
objectFactory(构造函数, 初始化参数);

9. map和Object的区别

特性MapObject
意外的键Map默认不含任何意外键,仅含显式插入的键,避免原型链冲突。Object具有原型链,可能导致键名冲突。
键的类型键可以是任意类型,包括函数、对象或基本类型。键必须为字符串或Symbol。
键的顺序有序,迭代时按照插入顺序返回键值。无序,迭代时不保证键的顺序。
获取大小直接使用 .size 属性获取键值对数量。需要手动计算或遍历获取键值对数量。
迭代自身是可迭代的,可直接用 for...of 循环遍历。需通过 Object.keys()Object.entries() 等方法获取键集后迭代。
性能在频繁增删键值对场景下性能更优。频繁增删键值对操作未专门优化,大数据量下可能表现不佳。

10.map和weakMap的区别

(1)Map
map本质上就是键值对的集合,但是普通的Object中的键值对中的键只能是字符串。而ES6提供的Map数据结构类似于对象,但是它的键不限制范围,可以是任意类型,是一种更加完善的Hash结构。如果Map的键是一个原始数据类型,只要两个键严格相同,就视为是同一个键。

实际上Map是一个数组,它的每一个数据也都是一个数组,其形式如下:

const map = [["name","李蛋蛋"],["age",18],
]

Map数据结构有以下操作方法:

  • size: map.size 返回Map结构的成员总数。
  • set(key,value):设置键名key对应的键值value,然后返回整个Map结构,如果key已经有值,则键值会被更新,否则就新生成该键。(因为返回的是当前Map对象,所以可以链式调用)
  • get(key):该方法读取key对应的键值,如果找不到key,返回undefined。
  • has(key):该方法返回一个布尔值,表示某个键是否在当前Map对象中。
  • delete(key):该方法删除某个键,返回true,如果删除失败,返回false。
  • clear():map.clear()清除所有成员,没有返回值。

Map结构原生提供是三个遍历器生成函数和一个遍历方法

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历Map的所有成员。
const map = new Map([["foo",1],["bar",2],
])
for(let key of map.keys()){console.log(key);  // foo bar
}
for(let value of map.values()){console.log(value); // 1 2
}
for(let items of map.entries()){console.log(items);  // ["foo",1]  ["bar",2]
}
map.forEach( (value,key,map) => {console.log(key,value); // foo 1    bar 2
})

(2)WeakMap
WeakMap 对象也是一组键值对的集合,其中的键是弱引用的。其键必须是对象,原始数据类型不能作为key值,而值可以是任意的。

该对象也有以下几种方法:

  • set(key,value):设置键名key对应的键值value,然后返回整个Map结构,如果key已经有值,则键值会被更新,否则就新生成该键。(因为返回的是当前Map对象,所以可以链式调用)

  • get(key):该方法读取key对应的键值,如果找不到key,返回undefined

  • has(key):该方法返回一个布尔值,表示某个键是否在当前Map对象中。

  • delete(key):该方法删除某个键,返回true,如果删除失败,返回false

clear()方法已经被弃用,所以可以通过创建一个空的WeakMap并替换原对象来实现清除。

WeakMap的设计目的在于,有时想在某个对象上面存放一些数据,但是这会形成对于这个对象的引用。一旦不再需要这两个对象,就必须手动删除这个引用,否则垃圾回收机制就不会释放对象占用的内存。

WeakMap的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。

总结:

  • Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
  • WeakMap 结构与 Map 结构类似,也是用于生成键值对的集合。但是 WeakMap 只接受对象作为键名( null 除外),不接受其他类型的值作为键名。而且 WeakMap 的键名所指向的对象,不计入垃圾回收机制。

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

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

相关文章

11.6 归并排序

目录 11.6 归并排序 11.6.1 算法流程 11.6.2 算法特性 11.6.3 链表排序 11.6 归并排序 归并排序(merge sort)是一种基于分治策略的排序算法,包含图 11-10 所示的“划分”和“合并”阶段。 划分阶段:通过递归不断地…

雷池WAF-动态防护新功能体验

雷池WAF 雷池WAF(Web Application Firewall,网络应用防火墙)是由长亭科技开发的一个网络安全产品,它专注于保护Web应用免受黑客攻击。 今天主要讲的是长亭雷池最近新出的功能:动态防护 安装 雷池WAF支持多种安装方式…

Activiti7 Maven笔记

通过maven完成BPMN的创建,定义流程,部署流程,完成流程等操作 代码整合创建maven项目添加log4j日志配置添加activiti配置文件创建数据库 activitijava类编写程序生成表如果代码运行,没有生成表,可能是没有读取到activiti的配置文件 Activiti数据表介绍类关系图工作流引擎创建默认…

禁止某个网段访问网络

禁用攻击 改成桥接模式 nmtui,改手动,清ip虚拟网络编辑器改成桥接模式. 安装arpspoof工具 先试着运行arpspoof如果不成功,更新源apt-get update接着运行arpspoof/apt install dsniff成功后,看arpspoof颜色是否是蓝色 禁止某个…

【视频转码】ZLMediaKit漏洞报告的问题

漏洞问题: 支持ss1 rc4密码套件(bar mitzvah) 漏洞级别: 中危 漏洞修复: 方法:避免使用RC4密码,参考代码如下: 修改文件位于:webrtc/DtlsTransport.cpp ret SSL_CTX_set_cipher_list(ssl…

Windows主机信息收集

一、内网环境分析 1、什么是内网渗透 内网渗透: ①在拿到webshell的时候,想办法获得系统信息拿到系统权限,进入到网络系统内部之后收集内部 网络的各种信息,获取内部网络有价值的人员、资产信息。 ②内网渗透的第一步,内网信…

嵌入式linux中线程编程实现详解

大家好,今天主要给大家分享一下,线程的使用,通过具体的实例代码来说明一个线程创建到退出到回收的基本流程,后半部分则会通过实例来说明如何能够控制好线程,从临界资源访问与线程的执行顺序控制上引出互斥锁、信号量的概念与使用方法。 第一:为什么要使用线程 场景分析:…

三.三Vue 实现的精彩动画效果

在 Vue 开发中&#xff0c;我们可以利用<transition>组件来打造各种令人惊艳的动画效果。下面来详细看看这些有趣的动画效果及其实现代码。 一、缩放类效果 zoom-in&#xff08;整体放大进入&#xff09; <template><div><button click"isShow ! …

[数据集][目标检测]电力工地场景下的人头检测数据集VOC+YOLO格式7035张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;7035 标注数量(xml文件个数)&#xff1a;7035 标注数量(txt文件个数)&#xff1a;7035 标注…

Dockershim 与 Containerd:两种容器运行时的故事

在不断发展的容器化世界中&#xff0c;两个关键组件经常被混淆&#xff1a;Dockershim 和 containerd。虽然它们在管理容器方面都发挥着重要作用&#xff0c;但它们的用途却截然不同。本文深入探讨了它们的功能&#xff0c;深入探讨了 Dockershim 和 containerd 之间的区别。 揭…

SpringBoot——全局异常处理

目录 异常 项目总结 新建一个SpringBoot项目 pom.xml Result&#xff08;通用的响应结果类&#xff09; MyBusinessException自定义异常类 GlobalExceptionHandler全局异常处理类 ExceptionController控制器 SpringbootExceptionApplication启动类 参考文章&#xff1a…

对比投入高成本自研推广系统,直接采用SaaS更有效益

推广分销作为一种有效的市场拓展方式&#xff0c;被越来越多的企业所采纳。部分企业会选择投入资源自研一套推广分销系统&#xff0c;但是其实最后发现几年过去了&#xff0c;投入了大量成本&#xff0c;系统仍然是一地鸡毛&#xff0c;还在定义一些基本的属性。 自研推广系统…

Web前端三大主流框架:Angular、React与Vue.js的深入探讨

在快速发展的Web前端领域&#xff0c;选择一款合适的框架对于提升开发效率、保证代码质量以及实现项目目标具有至关重要的作用。在众多前端框架中&#xff0c;Angular、React和Vue.js以其独特的优势和广泛的应用场景&#xff0c;成为了市场上的三大主流框架。本文将深入剖析这三…

08-使用HappyPack提升Webpack构建速度

使用HappyPack提升Webpack构建速度 笔记分享 在前端开发中&#xff0c;Webpack 是一种非常流行的模块打包工具。然而&#xff0c;随着项目规模的扩大和复杂度的增加&#xff0c;Webpack 的构建速度可能会成为一个瓶颈。为了提升构建速度&#xff0c;我们可以使用一些工具和优化…

基于4G工业路由器的信息发布系统物联网应用方案

随着物联网技术的快速发展&#xff0c;智能信息发布系统已成为城市管理和信息传播的重要工具。而4G工业路由器作为连接信息发布终端与云平台的关键设备&#xff0c;其在提升信息发布效率方面发挥着至关重要的作用。为了提升智能信息发布系统的效率和智能化水平&#xff0c;智联…

【RPG Maker MV 仿新仙剑 战斗场景UI (十)】

RPG Maker MV 仿新仙剑 战斗场景UI &#xff08;十&#xff09; 前言角色站位人物站位人物影子 前言 上一期完成了几个功能&#xff0c;虽然没有进行进一步的优化&#xff0c;但基础的功能已经完成&#xff0c;现在记录下已完成及未完成的功能&#xff1a; 战斗菜单 一级战斗菜…

python opencv运行报错

报错如下错误&#xff1a;The function is not implemented. Rebuild the library with Windows, GTK 2.x or Cocoa support. If you are on Ubuntu or Debian, install libgtk2.0-dev and pkg-config, then re-run cmake or configure script in function cvShowImage 解决办…

PromptIR论文阅读笔记

MZUAI和IIAI在NIPS2023上的一篇论文&#xff0c;用prompt来编码degradation&#xff0c;然后用来guide restoration network&#xff0c;使得模型能够泛化到不同degradation types and levels&#xff0c;也就是说是一个模型一次训练能够应对多种degradation的unified model。文…

讲座PPT分享|医学人工智能开始进入黄金时代|24年6月·讲座速递·06-03

小罗碎碎念 这期推文想分享的是自己四月底受邀做的一个报告——主题是“人工智能在肿瘤领域的进展&人工智能在脊柱外科领域中的进展”。 先解释一下&#xff0c;为什么我一个研究肿瘤的&#xff0c;会去关注脊柱外科——因为受到了脊柱外科医生的邀请&#xff0c;去给他们…

PTR记录-系统架构师(五)

1、关于串行总线的说法中&#xff0c;正确的是&#xff08;&#xff09;。 A串行总线一般都是双全工总线&#xff0c;适宜于长距离传输数据 B串行总线传输的波特率是总线初始化时预先定义好的&#xff0c;使用中不可改变 C串行总线是按位&#xff08;bit&#xff09;传输数据…