当前位置: 首页 > news >正文

每天10个前端小知识 【Day 2】

在这里插入图片描述

👩 个人主页:不爱吃糖的程序媛
🙋‍♂️ 作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀!
✨系列专栏:前端面试宝典、JavaScript进阶、vue实战
📢 资料领取:前端进阶资料以及文中源码可以在🎈公众号“不爱吃糖的程序媛”领取

前端面试基础知识题

1. arguments 这种类数组,如何遍历类数组?

for(var i = 0, len = arrayLike.length; i < len; i++) { …… }

使用ES6的 … 运算符,我们可以轻松转成数组。

function func(...arguments) { console.log(arguments); // [1, 2, 3] } func(1, 2, 3);

2. new fn与new fn()有什么区别吗?

用 new 创建构造函数的实例时,通常情况下 new 的构造函数后面需要带括号(譬如:new Parent())。 有些情况下new的构造函数后带括号和不带括号的情况一致,
譬如:

function Parent(){ this.num = 1;
} 
console.log(new Parent()); //输出Parent对象:{num:1} 
console.log(new Parent); //输出Parent对象:{num:1}

但有些情况下new的构造函数后带括号和不带括号的情况并不一致,譬如:

function Parent(){ this.num = 1; 
} 
console.log(new Parent().num); //1 
console.log(new Parent.num); //报错

结果分析: 从报错信息来看,new Parent.num执行顺序是这样的:先执行Parent.num,此时返回结果为undefined;后执行new,因new后面必须跟构造函数,所以new undefined会报错。

new Parent().num相当于(new Parent()).num,所以结果返回1。 从结果来看,new Parent.num代码相当于new (Parent.num);,new Parent().num相当于(new Parent()).num。由此看来 new 的构造函数后跟括号优先级会提升。

3. Object与Map有什么区别?

概念

Object 在ECMAScript中,Object是一个特殊的对象。它本身是一个顶级对象,同时还是一个构造函数,可以通过它(如:new Object())来创建一个对象。我们可以认为JavaScript中所有的对象都是Object的一个实例,对象可以用字面量的方法const obj = {}即可声明。

Map 是Object的一个子类,可以有序保存任意类型的数据,使用键值对去存储,其中键可以存储任意类型,通过const m = new Map();即可得到一个map实例。 访问 map: 通过map.get(key)方法去属性, 不存在则返回undefined object: 通过obj.a或者obj[‘a’]去访问一个属性, 不存在则返回undefined

赋值

Map 通过map.set去设置一个值,key可以是任意类型

Object 通过object.a = 1或者object[‘a’] = 1,去赋值,key只能是字符串,数字或symbol

删除

Map 通过map.delete去删除一个值,试图删除一个不存在的属性会返回false

Object 通过delete操作符才能删除对象的一个属性,诡异的是,即使对象不存在该属性,删除也返回true,当然可以通过Reflect.deleteProperty(target, prop) 删除不存在的属性还是会返回true。 var obj = {}; // undefined delete obj.a // true

大小

Map 通过map.size即可快速获取到内部元素的总个数

Object 需要通过Object.keys的转换才能将其转换为数组,再通过数组的length方法去获得或者使用Reflect.ownKeys(obj)也可以获取到keys的集合

迭代

Map 拥有迭代器,可以通过for-of forEach去直接迭代元素,切遍历顺序是确定的

Object 并没有实现迭代器,需要自行实现,不实现只能通过for-in循环去迭代,遍历顺序是不确定的 使用场景 如果只需要简单的存储key-value的数据,并且key不需要存储复杂类型的,直接用对象。如果该对象必须通过JSON转换的,则只能用对象,目前暂不支持Map。
map的阅读性更好,所有操作都是通过api形式去调用,更有编程体验

4. cookie 的有效时间设置为 0 会怎么样

Cookie过期时间设置为0,表示跟随系统默认,其销毁与Session销毁时间相同,即都在浏览器关闭后的特定时间删除。如果我们写程序的时候不设置Cookie的有效时间,那么,Cookie的有效时间等效于会话时间。

5. const声明了数组,还能push元素吗,为什么?

可以。数组是引用类型,const声明的引用类型变量,不可以变的是变量引用始终指向某个对象,不能指向其他对象,但是所指向的某个对象本身是可以变的

6. 如何区分数组和对象?

方法1 :通过 ES6 中的 Array.isArray 来识别

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

方法2 :通过 instanceof 来识别

console.log([] instanceof Array)//true 
console.log({} instanceof Array)//false

方法3 :通过调用 constructor 来识别

console.log([].constructor)//[Function:Array] 
console.log({}.constructor)//[Function: Object] 

方法4 :通过 Object.prototype.toString.call 方法来识别

console.log(Object.prototype.toString.call([]))//[object Array] 
console.log(Object.prototype.toString.call({}))//[object Object]

7. 给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,说下会执行几次事件,然后会先执行冒泡还是捕获?

addEventListener绑定几次就执行几次。先捕获,后冒泡

8. 请简述 == 的机制

undefined == null,结果是true。且它俩与所有其他值比较的结果都是false。 String == Boolean,需要两个操作数同时转为Number。 String/Boolean == Number,需要String/Boolean转为Number。 Object == Primitive,需要Object转为Primitive(具体通过valueOf和toString方法)。

9. 写一个 repeat 方法,实现字符串的复制拼接

方法一:之所以创建一个带 length 属性的对象,是因为要调用数组的原型方法,需要指定 call 第一个参数为类数组对象。利用闭包缓存 join,避免重复创建对象、寻找方法。

var repeat = (function () {var join = Array.prototype.join, obj = {};    return function(target, n) {       obj.length = n + 1;       return join.call(obj, target);   }; 
})();

方法二:使用二分法,减少操作次数

function repeat(target, n) {   if (n === 1) { return target;} var s = repeat(target, Math.floor(n / 2)); s += s; if (n % 2) {   s += target;   } return s; 
}

10. js中的undefined和 ReferenceError: xxx is not defined 有什么区别?

ReferenceError:当尝试引用一个未定义的变量/函数时,就会抛出ReferenceError。
undefined:当一个变量声明后,没有被赋值,那么它就是undefined类型。

相关文章:

每天10个前端小知识 【Day 2】

&#x1f469; 个人主页&#xff1a;不爱吃糖的程序媛 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、CSDN内容合伙人&#xff0c;专注于前端各领域技术&#xff0c;成长的路上共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨系列专栏&#xff1a;前端…...

帮助中心在线制作工具推荐这4款,很不错哟!

根据用户咨询问题是否解决的情景&#xff0c;分为三个部分&#xff0c;首先帮助中心恰好有用户需要咨询的问题&#xff0c;用户可以通过点击相关问题即可解决自己的问题&#xff0c;其次&#xff0c;用户第一眼没有在帮助中心解决问题&#xff0c;有个搜索框&#xff0c;用户的…...

rabbitMQ相关文章汇总

RabbitMQ五种工作模式&#xff1a; https://blog.csdn.net/weixin_41882200/article/details/117128590?ops_request_misc%257B%2522request%255Fid%2522%253A%2522167625223516800182771874%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id1…...

【C++】异常

&#x1f308;欢迎来到C专栏~~异常 (꒪ꇴ꒪(꒪ꇴ꒪ )&#x1f423;,我是Scort目前状态&#xff1a;大三非科班啃C中&#x1f30d;博客主页&#xff1a;张小姐的猫~江湖背景快上车&#x1f698;&#xff0c;握好方向盘跟我有一起打天下嘞&#xff01;送给自己的一句鸡汤&#x1…...

@Validated注解不生效问题汇总

Validated注解不生效问题汇总 文章目录Validated注解不生效问题汇总背景&#xff1a;一&#xff1a;可能原因原因1&#xff1a;原因2&#xff1a;原因3&#xff1a;原因4&#xff1a;二&#xff1a;补充全局异常对validation的处理背景&#xff1a; 项目框架应用的是validatio…...

华科万维C++章节练习2_4

题目&#xff1a;编写程序&#xff0c;从键盘输入一个字符&#xff0c;然后在屏幕上输出该字符开头的连续3个字符以及对应ASCII码。 输出格式请参看&#xff1a; 请输入一个字符>>A 字符 ASCII码 A 65 B 66 C 67 请按任意键继续. . . 请直接…...

17万字数字化医院信息化建设大数据平台建设方案WORD

【版权声明】本资料来源网络&#xff0c;知识分享&#xff0c;仅供个人学习&#xff0c;请勿商用。【侵删致歉】如有侵权请联系小编&#xff0c;将在收到信息后第一时间删除&#xff01;完整资料领取见文末&#xff0c;部分资料内容&#xff1a; 目录 第1章 医院信息化概述 1.…...

Android 11系统签名修改

Android OS 映像在两个地方使用加密签名&#xff1a;映像中的所有 .apk 文件都必须经过签名。Android 软件包管理器通过下列两种方式使用 .apk 签名&#xff1a;更换应用时&#xff0c;必须使用与旧应用相同的密钥对其签名&#xff0c;才能存取旧应用的数据。无论是通过覆盖 .a…...

亚马逊、沃尔玛卖家自养号退款经验和测评技术

今天给大家介绍下在做亚马逊、沃尔玛退款自养号中的经验&#xff0c;众所周知&#xff0c;自养号最重要的是养号的环境&#xff0c;包括系统的纯净度&#xff0c;下单的信用卡以及其他的一些细节。 环境系统市面上有很多&#xff0c;鱼龙混杂&#xff0c;比如什么lumi&#xf…...

Spring Security in Action 第十一章 SpringSecurity前后端分离实战

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;以实战为线索&#xff0c;逐步深入SpringSecurity相关知识相关知识&#xff0c;打造完整的SpringSecurity学习步骤&#xff0c;提升工程化编码能力和思维能力&#xff0c;写出高质量代码。希望大家都能够从中有所收获&#…...

高级前端二面vue面试题(持续更新中)

action 与 mutation 的区别 mutation 是同步更新&#xff0c; $watch 严格模式下会报错 action 是异步操作&#xff0c;可以获取数据后调用 mutation 提交最终数据 MVVM的优缺点? 优点: 分离视图&#xff08;View&#xff09;和模型&#xff08;Model&#xff09;&#xff…...

七大设计原则之依赖倒置原则应用

目录1 依赖倒置原则2 依赖倒置应用1 依赖倒置原则 依赖倒置原则&#xff08;Dependence Inversion Principle,DIP&#xff09;是指设计代码结构时&#xff0c;高层模块不应该依赖底层模块&#xff0c;二者都应该依赖其抽象。抽象不应该依赖细节&#xff1b;细节应该依赖抽象。…...

Dubbo面试题2023

1、为什么要用Dubbo 随着服务化的进一步发展&#xff0c;服务越来越多&#xff0c;服务之间的调用和依赖关系也越来越复杂&#xff0c;诞生了面向服务 的架构体系(SOA)&#xff0c;也因此衍生出了一系列相应的技术&#xff0c;如对服务提供、服务调用、连接处理、通信协议、 …...

Swift(5)

目录 集合类型 数组 ​编辑 合集 合集操作 字典 Where 集合类型 Swift提供了三种主要的集合类型&#xff1a;组合&#xff0c;合集&#xff0c;字典。 数组是有序的值的集合。 合集是唯一值的无序集合。 字典是无序的键值对集合。 数组 Swift数组的类型的完整写法是…...

[Java 进阶面试题] CAS 和 Synchronized 优化过程

最有用的东西,是你手里的钱,有钱就有底气,还不快去挣钱~ 文章目录CAS 和 Synchronized 优化过程1. CAS1.1 CAS的原理1.2 CAS实现自增自减的原子性1.3 CAS实现自旋锁1.4 CAS针对ABA问题的优化2. synchronized2.1 synchronized加锁阶段分析2.2 synchronized优化CAS 和 Synchroniz…...

算法思想 - 贪心算法

本文主要介绍算法中贪心算法的思想: 保证每次操作都是局部最优的&#xff0c;并且最后得到的结果是全局最优的。贪心思想相关题目分配饼干455. Assign Cookies (Easy)Input: [1,2], [1,2,3] Output: 2Explanation: You have 2 children and 3 cookies. The greed factors of 2 …...

解决需求变更难题的8大方案

需求变更8大原因为什么会出现需求变更&#xff0c;这是由于需求约束、规则有了新的变化、由于政策发生变化&#xff0c;客户、沟通方式、流程化、标准化的问题等导致。这里在在过去的项目经验中&#xff0c;提出了常见的8大需求变更的原因。政策发生变化&#xff1a;指由于国家…...

NSSROUND#8[Basic]

文章目录一、[NSSRound#8 Basic]MyDoor二、[NSSRound#8 Basic]Upload_gogoggo三、[NSSRound#8 Basic]MyPage四、[NSSRound#8 Basic]ez_node一、[NSSRound#8 Basic]MyDoor <?php error_reporting(0);if (isset($_GET[N_S.S])) {eval($_GET[N_S.S]); }if(!isset($_GET[file])…...

Vue3代码初体验找不同

文章目录&#x1f31f; 写在前面&#x1f31f; 代码分析&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相关技术文章&#xff0c;Vue 框架目前的地位大家应该都晓…...

opencv调取摄像头录制

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm1011.2415.3001.5343哔哩哔哩欢迎关注…...

html标签手册

完整的HTML页面&#x1f4d1; ①基础标签&#x1f4d1;&#x1f4d1;&#x1f4d1; HTML <!DOCTYPE> 声明 !DOCTYPE声明必须是 HTML 文档的第一行&#xff0c;位于 html标签之前。 !DOCTYPE 声明不是 HTML 标签&#xff1b;它是指示 web 浏览器关于页面使用哪个 HTML 版…...

SpringMVC--视图、RESTful案例、处理AJAX请求

SpringMVC的视图 SpringMVC中的视图是View接口&#xff0c;视图的作用渲染数据&#xff0c;将模型Model中的数据展示给用户 SpringMVC视图的种类很多&#xff0c;默认有转发视图和重定向视图 当工程引入jstl的依赖&#xff0c;转发视图会自动转换为JstlView 若使用的视图技术为…...

一个同学升了leader,今年活还没干,他就已经想好组里成员的两次绩效考核怎么打了,还说:leader都是这样的!...

绩效是大家都比较关注的事情&#xff0c;那么作为领导&#xff0c;一般是怎么打绩效的呢&#xff1f;一位网友爆料&#xff1a;一个大学同学升了leader&#xff0c;前段时间跟他吃饭&#xff0c;他说他已经想好了今年组里成员的两次绩效考核怎么打了。该网友有点吃惊&#xff0…...

Docker 面试知识点

Docker 是什么&#xff1f; 是实现容器技术的一种工具是一个开源的应用容器引擎使用 C/S 架构模式&#xff0c;通过远程API 来管理 (我们本机是 C&#xff0c;docker 引擎是 S,实际的构建过程是在 docker 引擎下完成的)可以打包一个应用及依赖包到一个轻量级、可移植的容器中 …...

C++高级篇学习笔记

文章目录 前言 本文记录C一些面试难点问题剖析。 1. 左右值和右值引用的作用 左值&#xff1a;可以在左边&#xff0c;表达式结束后依然存在的持久对象&#xff0c;一般有名字&#xff0c;可以取地址。 提示&#xff1a; 前置自加/自减 可以做左值&#xff1b; 右值在右边&a…...

gentoo基本安装过程

该文章是本人在gentoo官方安装文档的基础上简单总结的&#xff0c;也是本人自己实践过的&#xff0c;目前本人用的就是gentoo&#xff0c;对于真的需要安装gentoo的朋友&#xff0c;建议还是参考官方文档&#xff0c;说的比较详细&#xff0c;这个可以简单看看&#xff0c;可以…...

【LeetCode】1234. 替换子串得到平衡字符串

1234. 替换子串得到平衡字符串 题目描述 有一个只含有 ‘Q’, ‘W’, ‘E’, ‘R’ 四种字符&#xff0c;且长度为 n 的字符串。 假如在该字符串中&#xff0c;这四个字符都恰好出现 n/4 次&#xff0c;那么它就是一个「平衡字符串」。 给你一个这样的字符串 s&#xff0c;…...

[动手写操作系统]-01-开机运行系统

文章目录 **概念和目标**概念目标理论源码概念和目标 概念 assembler: 汇编程序BIOS: BIOS(Basic Input Output System,基本输入输出系统)是个可编程的微型操作系统,用于管理计算机中的软硬件,它控制着系统的启动,系统是如何连接外部设备,怎样响应,调整相应操作,都是…...

最长回文子序列问题

最长回文子序列问题 问题描述&#xff1a;给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 注意是子序列而不是子…...

月薪11k!从财务专员到软件测试工程师,成都校区小哥哥用三个月实现转行换岗

好久没和大家分享学员的转行经历了&#xff0c;或许在一些人看来他们的故事与自己无关&#xff0c;但同样也能引起一些人的共鸣&#xff0c;可以帮助到那些陷于就业焦虑的同学找到目标和方向。相仿的年龄、相同的职业、相似的压力…在转行软件测试追求更好生活的路上&#xff0…...

传奇网站装备动态图怎么做/网站关键词排名seo

ubuntu 10.10以前的操作方法&#xff1a;1 第一步&#xff0c;具体命令及操作如下&#xff1a;sudo vi /etc/init/rc-sysinit.confenv DEFAULT_RUNLEVEL3 <------将原来的env DEFAULT_RUNLEVEL2修改为env DEFAULT_RUNLEVEL32 第二步&#xff0c;具体命令及操作如下&#xff…...

网站建设套餐服务/百度移动端模拟点击排名

中国电信已经将中国首批IPv6城域网的下一代商用时间确定为下半年&#xff0c;从而拉开中国下一代互联网正式商用的序幕。中国电信将通过对长沙城域网现网设备的升级&#xff0c;建成国内首个IPv6商用城域网络&#xff0c;启动IPv6商用放号。 2009年&#xff0c;中国电信探索了以…...

做网站怎么把背景变成纯色/全国各城市疫情搜索高峰进度

小菜前段时间根据超多 star 的 FlycoTabLayout 自己修改封装了仿网易顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标&#xff0c;并整理了两篇小博客&#xff1a; Android 优化个人封装仿网易新闻可滑动标题栏 TabLayout (文字或图标)仿网易新闻可滑动标题…...

关于怎么做网站/济南seo网站优化公司

对原件&#xff0c;有这几种&#xff1a;1&#xff0c;全中文&#xff08;含标点&#xff0c;一些英文符号&#xff09;2&#xff0c;中英文&#xff08;英文较多&#xff0c;或英文占大多数&#xff09;3&#xff0c;全英文&#xff08;这个用finereader8.0&#xff09; 針對1…...

做养生产品哪个网站好/友情链接又称

Java参数传值&#xff1a;特点&#xff1a;1、参数属于局部变量&#xff1b;2、当对象调用方法时&#xff0c;参数被分配内存空间&#xff0c;同时要求对象为参数传值才能进行使用&#xff0c;即方法被调用时&#xff0c;参数变量必须有具体的值&#xff1b;如下代码演示&#…...

做一个商城网站需要提交那些文件/酒店网络营销方式有哪些

jvm的线程栈申请的内存空间属于堆外内存&#xff0c;是向操作系统申请的&#xff0c;也不是JVM直接内存&#xff0c;虽然类似。 JVM能创建的线程数需要的内存&#xff0c;不是JVM运行内存&#xff0c;堆内存&#xff0c;直接内存&#xff0c;而是操作系统剩余的可用内存&#…...