！！！基础！！！

最新推荐文章于 2024-10-15 09:57:04 发布

为什么选b

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量124

点赞数

分类专栏：面试题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55869886/article/details/117091303

版权

面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.this关键字(指向)?

this是JavaScript语言的一个关键字，它是函数运行时，在函数体内部自动生成一个对象，只能在函数体内部使用。函数的不同使用场合，this有不同的值。总的来说this就是函数运行时所在的环境对象。

全局调用时，指向全局对象window
在函数中调用，作为某个对象的方法调用，this指向这个上级对象
在构造函数中调用，指向构造函数生成的新对象实例
箭头函数，箭头函数没有自己的this，this指向父级上下文
隐式绑定，函数的调用是在某个对象上触发的，即调用位置上存在上下文对象，典型隐式调用：xxx.fn()
call、apply、bind中的this指向被绑定的对象

2.事件模型：事件委托、原理？如何让事件先冒泡后捕获？

事件委托

又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

原理

事件冒泡机制，从最深的节点开始，然后逐步向上传播事件。

作用

①支持为同一个DOM元素注册多个同类型事件；
②可将事件分为事件捕获和事件冒泡。

先冒泡后捕获
根据w3c标准，应先捕获再冒泡。
要实现先冒泡后捕获，给一个元素绑定两个addEventListener(事件监听)，将两个监听事件的第三个参数分别设置为false(冒泡)，true(捕获)，参数为false的监听事件在前。

3.对象和面向对象

对象
属性和方法的集合叫做对象（万物皆对象）。

面向对象
首先是找对象，如果该对象不具备所需要的方法或属性，那就给它添加。面向对象是一种编程思想，与之对应的是面向过程。通过原型的方式来实现面向对象编程。

通过研究一些实例的属性和方法, 来确定一些问题的分类根据类的不同而产生同类问题的解决方案

后端面向对象和JS中的面向对象有所不同, JS中的类和实例是基于原型和原型链机制来处理的

创建对象的方式(4种)
new Object、字面量、构造函数、原型。

4.for···in和for···of的区别：(for···in取key，for··of取value)

从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)
从遍历字符串的角度来说，同数组一样
从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错
如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。

5.查找数组重复项

查找数组每一项首次出现的位置和最后出现的位置下标是否相同，相同表示当前不是数组中的重复项，不相同表示找到数组中的重复项，定义一个新的空数组，在新数组中查找此项，找不到将其放进新数组中，新数组就是原数组的所有重复项。

var arr = [1,2,45,44,45,2,89,1,1,2,1,2,44];
Array.prototype.unique = function(){
	var arr = this;
	var box = [];
	for(var str of arr){
		if(arr.indexOf(str) != arr.lastIndexOf(str) && box.indexOf(str) == -1){
			box.push(str);
		}
	}
	return box;
}
console.log(arr.unique());

6.数组扁平化

var arr = [1,2,[3,4,[5,6]],7]

递归

function flatten(arr){
	var box = [];
	arr.map(v => {
		if(Array.isArray(v)){
			box = box.concat(flatten(v))
		}else{
			box.push(v);
		}
	})
	return box;
}
console.log(flatten(arr));

数组方法join() split()

function flatten(arr){
	console.log(arr.join(","))
	return arr.join(",").split(",").map(v => {
		return parseInt(v);
	})
}
console.log(flatten(arr));

扩展运算符

function flatten(arr){
  while (arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr); 
  }
  return arr;
}

ES6新增

arr.flat(Infinity)
//Infinity - 任意深度，默认为1

使用数组的reduce(fn(), init, index, arr)+concat()方法
1.遍历每一项，并按fn()中规则处理每一项：如果是基本类型，concat到要返回的数组中，如果是数组则拼接到返回的数组上，如果是多维数组，递归调用；
2.init是要返回结果的初始值；
3.第三和四参数可省略。

function flatten(arr) {
    return arr.reduce((result, item) => {
   		console.log(result,item)
        return result.concat(Array.isArray(item) ? flatten(item) : item)
    }, [])
}
console.log(arr, flatten(arr))

7.垃圾回收机制

垃圾

一般来说没有被引用的对象就是垃圾，就是要被清除，
有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

方法

JS具有垃圾自动回收的机制，周期性执行，找出那些不在继续使用的变量，然后释放其内存。
标记清除(常见)
当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。
引用计数
原理：跟踪记录每个值被引用的次数。
工作流程：当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

8.iframe frame的优缺点有哪些？区别？

iframe 优点

iframe能够原封不动的把嵌入的网页展现出来；
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe 缺点

会产生很多页面不易管理；
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

frame优点

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)；
技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面；
方便制作导航栏；

frame缺点

搜索引擎程序不能解读这种页面；
不能打印全框架；
浏览器的后退按钮无效；
手机等终端设备无法显示全部框架内容；

iframe和frame区别

frame不能脱离frameSet单独使用，iframe可以；
frame不能放在body中,否则不能正常显示，frame不能和body同时使用，iframe可以；
嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用；
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制；
iframe 可以放到表格里面。frame 则不行。

9.函数柯里化

概念

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术

容易理解的概念：
只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数（主要是利用闭包实现的）

特点

①接收单一参数，将更多的参数通过回调函数来搞定；
②返回一个新函数，用于处理所有的想要传入的参数；
③需要利用call/apply与arguments对象收集参数；
④返回的这个函数正是用来处理收集起来的参数。

作用
能进行部分传值，而传统函数调用则需要预先确定所有实参。如果在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

用途
函数柯里化是对闭包的一种应用形式，延迟计算、参数复用、动态生成函数(都是闭包的用途)。

10.window的onload事件和domcontentloaded

window.onload
当一个资源及其依赖资源已完成加载时，将触发onload事件。

document.onDOMContentLoaded
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载。

区别

①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。
②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。
③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded事件是个更好的选择，会比onload事件执行时间更早。