当前位置: 首页 > 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类型。

http://www.lryc.cn/news/4584.html

相关文章:

  • 帮助中心在线制作工具推荐这4款,很不错哟!
  • rabbitMQ相关文章汇总
  • 【C++】异常
  • @Validated注解不生效问题汇总
  • 华科万维C++章节练习2_4
  • 17万字数字化医院信息化建设大数据平台建设方案WORD
  • Android 11系统签名修改
  • 亚马逊、沃尔玛卖家自养号退款经验和测评技术
  • Spring Security in Action 第十一章 SpringSecurity前后端分离实战
  • 高级前端二面vue面试题(持续更新中)
  • 七大设计原则之依赖倒置原则应用
  • Dubbo面试题2023
  • Swift(5)
  • [Java 进阶面试题] CAS 和 Synchronized 优化过程
  • 算法思想 - 贪心算法
  • 解决需求变更难题的8大方案
  • NSSROUND#8[Basic]
  • Vue3代码初体验找不同
  • opencv调取摄像头录制
  • html标签手册
  • SpringMVC--视图、RESTful案例、处理AJAX请求
  • 一个同学升了leader,今年活还没干,他就已经想好组里成员的两次绩效考核怎么打了,还说:leader都是这样的!...
  • Docker 面试知识点
  • C++高级篇学习笔记
  • gentoo基本安装过程
  • 【LeetCode】1234. 替换子串得到平衡字符串
  • [动手写操作系统]-01-开机运行系统
  • 最长回文子序列问题
  • 月薪11k!从财务专员到软件测试工程师,成都校区小哥哥用三个月实现转行换岗
  • Android 逆向工具大整理,碉堡了