JavaScript面试经,offer拿到手软

文章来源于公众号:猴哥说前端 作者:monkeysoft

本文给大家分享一些 JavaScript 面试经验,在这金九银十的招聘季,希望大家都能找到满意的工作。

JavaScript的数据类型都有什么?

基本数据类型:String,Boolean,Number,Undefined,Null

引用数据类型:Object(Array,Date,RegExp,Function)

javascript中=====的区别是什么?

==会自动进行类型转换,===不会

例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,Number())

隐式(==) 1==”1”//true

null==undefined//true

原生 JS 中 call()、apply()、bind() 方法有什么区别?

三个方法都可以改变函数运行时的 this 指向。

三个方法第一个参数都是函数调用执行时this 指向的对象。

call() 方法第二个参数是个可变参数,是函数调用执行时本身所需要的参数。

apply() 方法第二个参数是数组或arguments。call()与apply()都是立即调用函数执行,在运行时修改this指向。

bind()是返回一个新的函数,新函数的函数主体与原函数的函数主体一致,当新函数被调用时,函数体中 this 指向的是 bind() 方法第一个参数传递的对象,而bind() 方法不会影响原函数本身的 this 指向。

什么是闭包?特点是?

闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

闭包的特点:

(1)作为一个函数变量的一个引用,当函数返回时,其处于激活状态。

(2) 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

简单的说,JavaScript 允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

事件委托是什么?

符合W3C标准的事件绑定 addEventLisntener /attachEvent

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

如何阻止事件冒泡和默认事件

e. stopPropagation();//标准浏览器

event.canceBubble=true;//ie9之前

阻止默认事件:

为了不让a点击之后跳转,我们就要给他的点击事件进行阻止

return false

e.preventDefault();

document load 和document ready的区别?

Document.onload 是在结构和样式加载完才执行js

window.onload:不仅仅要在结构和样式加载完,还要执行完所有的样式、图片这些资源文件,全部加载完才会触发window.onload事件

Document.ready原生种没有这个方法,jquery中有 $().ready(function)

为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将, &, “进行转义

return str.replace(/[”&]/g, function(match) {switch (match) {case “”:return “>”;case “&”:return “&”;case “\””:return “"”;}});
}

简述创建函数的几种方式

第一种(函数声明):function sum1(num1,num2){ return num1+num2; }

第二种(函数表达式):var sum2 = function(num1,num2){ return num1+num2; }

第三种(函数对象方式):var sum3 = new Function("num1","num2","return num1+num2");

把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

如果说放在body的封闭之前,将会阻塞其他资源的加载

如果放在body封闭之后,不会影响body内元素的加载

iframe的优缺点?

优点:

  1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
  2. Security sandbox
  3. 并行加载脚本

缺点:

  1. iframe会阻塞主页面的Onload事件
  2. 即时内容为空,加载也需要时间
  3. 没有语意

Javascript如何实现继承?

原型链继承,借用构造函数继承,组合继承,寄生式继承,寄生组合继承

请你谈谈Cookie的弊端?

缺点:

1.Cookie 数量和长度的限制。部分浏览器每个 domain 最多只能有50条 cookie,基本所有浏览器中每个 cookie 长度不能超过4KB,否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密也与事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

4.占用网络上传带宽。每次请求服务器资源时,都会携带 cookie 信息向服务器传递。

DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

创建新节点

  • createDocumentFragment() // 创建一个DOM片段
  • createElement() // 创建一个具体的元素
  • createTextNode() // 创建一个文本节点

添加、移除、替换、插入

  • appendChild()
  • removeChild()
  • replaceChild()
  • insertBefore() // 在已有的子节点前插入一个新的子节点

查找

  • getElementsByTagName() // 通过标签名称
  • getElementsByName() // 通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
  • getElementById() // 通过元素Id,唯一性

js延迟加载的方式有哪些?

  1. defer和async
  2. 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
  3. 按需异步载入js

documen.write和 innerHTML 的区别?

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

  1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  2. 闭包
  3. 控制台日志
  4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

判断一个字符串中出现次数最多的字符,统计这个次数?

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {if(!json[str.charAt(i)]){json[str.charAt(i)] = 1;}else{json[str.charAt(i)]++;}
};
var iMax = 0;
var iIndex = '';
for(var i in json){if(json[i]>iMax){iMax = json[i];iIndex = i;}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

数组扁平化

数组扁平化是指将一个多维数组变为一个一维数组

const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]

方法一:使用flat()

const res1 = arr.flat(Infinity);

方法二:利用正则

const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');

但数据类型都会变为字符串

方法三:正则改良版本

const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');

方法四:使用reduce

const flatten = arr => {return arr.reduce((pre, cur) => {return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);}, [])
}
const res4 = flatten(arr);

方法五:函数递归

const res5 = [];
const fn = arr => {for (let i = 0; i < arr.length; i++) {if (Array.isArray(arr[i])) {fn(arr[i]);} else {res5.push(arr[i]);}}
}
fn(arr);

数组去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]

方法一:利用Set

const res1 = Array.from(new Set(arr));

方法二:两层for循环+splice

const unique1 = arr => {let len = arr.length;for (let i = 0; i < len; i++) {for (let j = i + 1; j < len; j++) {if (arr[i] === arr[j]) {arr.splice(j, 1);// 每删除一个树,j--保证j的值经过自加后不变。同时,len--,减少循环次数提升性能len--;j--;}}}return arr;
}

方法三:利用indexOf

const unique2 = arr => {const res = [];for (let i = 0; i < arr.length; i++) {if (res.indexOf(arr[i]) === -1) res.push(arr[i]);}return res;
}

方法四:利用include

const unique3 = arr => {const res = [];for (let i = 0; i < arr.length; i++) {if (!res.includes(arr[i])) res.push(arr[i]);}return res;
}

方法五:利用filter

const unique4 = arr => {return arr.filter((item, index) => {return arr.indexOf(item) === index;});
}

方法六:利用Map

const unique5 = arr => {const map = new Map();const res = [];for (let i = 0; i < arr.length; i++) {if (!map.has(arr[i])) {map.set(arr[i], true)res.push(arr[i]);}}return res;
}

类数组转化为数组

类数组是具有length属性,但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。

方法一:Array.from

Array.from(document.querySelectorAll('div'))

方法二:Array.prototype.slice.call()

Array.prototype.slice.call(document.querySelectorAll('div'))

方法三:扩展运算符

[...document.querySelectorAll('div')]

方法四:利用concat

Array.prototype.concat.apply([], document.querySelectorAll('div'));

debounce(防抖)

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

const debounce = (fn, time) => {let timeout = null;return function() {clearTimeout(timeout)timeout = setTimeout(() => {fn.apply(this, arguments);}, time);}
};

防抖常应用于用户进行搜索输入节约请求资源,window触发resize事件时进行防抖只触发一次。

throttle(节流)

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。

const throttle = (fn, time) => {let flag = true;return function() {if (!flag) return;flag = false;setTimeout(() => {fn.apply(this, arguments);flag = true;}, time);}
}

节流常应用于鼠标不断点击触发、监听滚动事件。

函数珂里化

指的是将一个接受多个参数的函数 变为 接受一个参数返回一个函数的固定形式,这样便于再次调用,例如f(1)(2)

经典面试题:实现add(1)(2)(3)(4)=10; 、 add(1)(1,2,3)(2)=9;

function add() {const _args = [...arguments];function fn() {_args.push(...arguments);return fn;}fn.toString = function() {return _args.reduce((sum, cur) => sum + cur);}return fn;
}

深拷贝

递归的完整版本(考虑到了Symbol属性):

const cloneDeep1 = (target, hash = new WeakMap()) => {// 对于传入参数处理if (typeof target !== 'object' || target === null) {return target;}// 哈希表中存在直接返回if (hash.has(target)) return hash.get(target);const cloneTarget = Array.isArray(target) ? [] : {};hash.set(target, cloneTarget);// 针对Symbol属性const symKeys = Object.getOwnPropertySymbols(target);if (symKeys.length) {symKeys.forEach(symKey => {if (typeof target[symKey] === 'object' && target[symKey] !== null) {cloneTarget[symKey] = cloneDeep1(target[symKey]);} else {cloneTarget[symKey] = target[symKey];}})}for (const i in target) {if (Object.prototype.hasOwnProperty.call(target, i)) {cloneTarget[i] =typeof target[i] === 'object' && target[i] !== null? cloneDeep1(target[i], hash): target[i];}}return cloneTarget;
}

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

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

相关文章

word2vec的算法原理(不用开源包,python实现)

看了很多关于word2vec的算法原理的介绍文章&#xff0c;看明白了&#xff0c;但依然有点不深刻。 以下是python直接实现的word2vec的算法&#xff0c;简单明了&#xff0c;读完就懂了 import numpy as npdef tokenize(text):return text.lower().split()def generate_word_pa…

【操作系统】文件系统的实现

文章目录 文件系统的层次结构文件系统的实现目录实现线性列表哈希表 文件的实现连续分配链接分配索引分配 文件存储空间管理空闲表法与空闲链表法成组链接法位示图法 文件系统的层次结构 文件系统从上往下分为了五层&#xff0c;分别是用户调用接口、文件目录系统、存取控制模…

SWT/Jface(1): 表格的创建和渲染

前言 使用JFace创建表格还是比较方便的, 如果仅仅是创建空表格的话, 以下2步即可完成: 创建TableViewer对象, 指定样式, 比如是否支持多行选择, 有无边框, 是否支持滚动条等创建TableColumn对象: 包括列展示名称, 宽度和样式等, 最终绑定到table对象 实例 创建表格 //注意…

c语言中使用openssl对rsa私钥解密

单次加密数据的最大长度&#xff08;block_len&#xff09;&#xff0c;由RSA秘钥模长RSA_size()和填充模式有关 填充模式&#xff1a;RSA_PKCS1_PADDING&#xff0c; block_lenRSA_size() - 11填充模式&#xff1a;RSA_PKCS1_OAEP_PADDING&#xff0c;block_lenRSA_size() - 4…

设计模式-学习总结

学习总结 本文仅供自我学习使用 我是一个小白设计模式一.创建型模式1.单例模式(1).饿汉式(2).懒汉式&#xff0c;双检锁(3).静态内部类(4).枚举 2.原型模式3.工厂模式(1).简单工厂模式 4.抽象工厂模式5.建造者模式 二.结构型模式6.适配器模式7.组合模式8.装饰器模式9.外观模式1…

Spring国际化笔记整理

resources/message中添加hello.properties配置user.nameUserName {0}resources/message中添加hello_zh_CN.properties配置user.name用户名 {0}添加单元测试Slf4j public class MessageSourceTest {Testpublic void message(){Locale locale LocaleContextHolder.getLocale();S…

【AI】行业消息精选和分析(11月22日)

今日动态 &#x1f453; Video-LLaVA&#xff1a;视觉语言模型革新&#xff1a; - 图像和视频信息转换为文字格式。 - 多模态理解能力&#xff0c;适用于自动问答系统等。 &#x1f4c8; 百度文心一言用户数达7000万&#xff1a; &#x1f50a; RealtimeTTS&#xff1a;实时文本…

shell之read命令

shell之read命令 简介例子 简介 Linux的read命令用于从标准输入读取数据。它通常用于在shell脚本中读取用户的输入并将其分配给变量。 read命令的语法如下&#xff1a; read [-options] [variable]read命令的选项包括&#xff1a; -d&#xff1a;指定输入行的结束标志。 -p…

SpringBoot : ch06 整合 web (一)

前言 SpringBoot作为一款优秀的框架&#xff0c;不仅提供了快速开发的能力&#xff0c;同时也提供了丰富的文档和示例&#xff0c;让开发者更加容易上手。在本博客中&#xff0c;我们将介绍如何使用SpringBoot来整合Web应用程序的相关技术&#xff0c;并通过实例代码来演示如何…

独立按键程序

/*----------------------------------------------- 内容&#xff1a;切换到独立按键模式&#xff0c;通过按键在数码管显示对应的数字 ------------------------------------------------*/ #include<reg52.h> //包含头文件&#xff0c;一般情况不需要改动&#xff…

《微信小程序案例大全》大学生期末大作业可以直接使用!!

前言 在大学生活中&#xff0c;期末大作业是锻炼和展示自己所学知识的重要时刻。微信小程序作为一种快速、便捷的应用开发方式&#xff0c;成为了大学生开发实践的热门选择。本文将为大家推荐一系列可以直接使用的微信小程序案例&#xff0c;包括仿真社交、图书管理、学习工具…

电子元器件

目录 前言一、电阻 前言 本篇只介绍低功率元器件&#xff0c;电源等大功率元器件不做介绍 一、电阻

接口自动化测试实战经验分享,测试用例也能自动生成

作为测试&#xff0c;你可能会对以下场景感到似曾相识&#xff1a;开发改好的 BUG 反复横跳&#xff1b;版本兼容逻辑多&#xff0c;修复一个 BUG 触发了更多 BUG&#xff1b;上线时系统监控毫无异常&#xff0c;过段时间用户投诉某个页面无数据&#xff1b;改动祖传代码时如履…

CentOS 7 使用pugixml 库

安装 pugixml Git下载地址&#xff1a;https://github.com/zeux/pugixml 步骤1&#xff1a;首先&#xff0c;你需要下载pugixml 的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2&#xff1a;下载完成后&#xff0c;需要将源代码解压…

利用QRCode.js生成动态二维码页面

文章目录 QRCode.js简介HTML结构JavaScript生成动态二维码拓展功能1. 联系信息二维码2. Wi-Fi网络信息二维码 总结 &#x1f389;利用QRCode.js生成动态二维码页面 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;该系列文章专栏…

mysql 存储引擎ROWS与实际行数不一致

引言 在使用 MySQL 数据库时&#xff0c;我们经常会用到 SHOW TABLE STATUS 命令来获取表的统计信息&#xff0c;其中包括行数&#xff08;rows&#xff09;的估计值。然而&#xff0c;有时候我们会发现这个估计值与实际的行数并不一致。本文将探讨这个问题&#xff0c;并提供…

介绍下官网Redis编程模式

缘由 以前只是接触过redis&#xff0c;只有最近才比较深入研究了下&#xff0c;觉得有几个重要的概念可以积累出来&#xff0c;以利于帮助理解redis &#x1f603; 本文仅简述重点概念&#xff0c;和列举相关参考文档链接&#xff0c;但参见文档多来自redis官网&#xff0c;足…

微信小程序开发者工具] ? Enable IDE Service (y/N) ESC[27DESC[27C

在HBuilder运行微信小程序开发者工具报错 如何解决 打开微信小程序开发者工具打开设置--->安全设置--->服务器端口选择打开就可以啦

《C++ Primer》第9章 顺序容器(三)

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 9.5 额外的string操作&#xff08;P320&#xff09; 9.5.1 构造string的其他方法 const char *cp "hello, world!"; char arr[] { h,\0,i,\0 }; string s1(cp); // s1 "hello, world!…

代码随想录训练营 | 一刷总结

代码随想录一刷总结 文章目录 代码随想录一刷总结数组数组理论基础二分法双指针法滑动窗口 链表链表理论基础虚拟头节点链表的基本操作反转链表两两交换链表中的节点删除倒数第N个节点链表相交环形链表 哈希表哈希表理论基础数组作为哈希表Set作为哈希表Map作为哈希表 字符串双…