前端面试题
3、rem布局的原理
答:rem是css的相对单位，rem缩放是相对根元素字体大小.
rem布局的本质是等比缩放，一般是基于宽度。
rem会配合媒体查询（或js动态获取屏幕宽度）来一起使用，来实现屏幕的适配。
9、值类型和引用类型的区别
1、值类型
1）简单数据类型数据是值类型
2）保存与复制的是值本身
3）使用typeof检测数据的类型
2、引用类型
1）保存与复制的是指向对象的一个指针
2）使用instanceof检测数据类型
3）使用 new() 方法构造出的对象是引用型
10、什么是深拷贝什么是浅拷贝
答: 浅拷贝: 拷贝对象的一层属性,如果对象里面还有对象,拷贝的是地址, 两者之间修改会有影响,适用于对象里面属性的值是简单数据类型的.
深拷贝: 拷贝对象的多层属性,如果对象里面还有对象,会继续拷贝,使用递归去实现.
11、如何实现深拷贝和浅拷贝
答:
浅拷贝:
var obj = {
class: 'UI',
age: 20,
love: 'eat'
}
function getObj(obj) {
var newObj = {}
for (var k in obj) {
newObj[k] = obj[k]
}
return newObj
}
var obj2 = getObj(obj)
console.log(obj2)
深拷贝:
var obj = {
class: '前端',
age: 26,
love: {
friuts : 'apple',
meat: 'beef'
}
}
function getObj(obj) {
var newObj = {}
for (var k in obj) {
newObj[k] = typeof obj[k] == 'object' ? getObj(obj[k]) : obj[k]
}
return newObj
}
var obj2 = getObj(obj)
console.log(obj2)
12、对闭包的理解？并能举出闭包的例子
答: 闭包 函数和声明该函数的词法环境的组合(两个嵌套关系的函数,内部函数可以访问外部函数定义的变量)
闭包的优点：1、形成私有空间，避免全局变量的污染
2、持久化内存，保存数据
闭包的缺点：1、持久化内存，导致内存泄露
解决：1、尽快避免函数的嵌套，以及变量的引用
2、执行完的变量，可以赋值null，让垃圾回收机制，进行回收释放内存（当不在引用的变量，垃圾回收机制就会回收）
例:
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
13、什么是原型和原型链
答: 原型: 函数都有prototype属性,这个属性的值是个对象,称之为原型
原型链: 对象都有__proto__属性,这个属性指向它的原型对象,原型对象也是对象,也有__proto__属性,指向原型对象的原型对象,这样一层一层形成的链式结构称为原型链.
14、call、apply和bind的区别
答: 1. call和apply方法都可以调用函数,方法内的第一个参数可以修改this的指向
2. call方法可以有多个参数,除了第一个参数,其他参数作为实参传递给函数
apply方法最多有2个参数,第二个参数是个数组或伪数组,数组里面的每一项作为实参传递给函数
3. bind方法不能调用函数,它会创建一个副本函数,并且绑定新函数的this指向bind返回的新的函数
15、es6-es10新增常用方法
答:
es6:
1、let、const
2、解构赋值 let { a, b } = { a: 1, b: 2 }
3、箭头函数 ()=>{}
4、字符串模板 ``
5、扩展运算符 ...arr
6、数组方法：map、filter、some等等
7、类：class关键字
8、promise 主要用于异步计算
9、函数参数默认值 fn(a = 1) {}
10、对象属性简写 let a = 1; let obj = {a}
11、模块化：import--引入、exprot default--导出
es7:
1、includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。
es8:
1、async/await
es9：
1、Promise.finally() 允许你指定最终的逻辑
es10:
1、数组Array的flat()和flatmap()
flat:方法最基本的作用就是数组降维
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
flatmap:方法首先使用映射函数映射(遍历)每个元素，然后将结果压缩成一个新数组
17、怎么理解函数的防抖和节流
答:
1、定义：
防抖: 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行(只执行最后一次操作)
节流: 就是指连续触发事件但是在设定的一段时间内中只执行一次函数。
例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次(只执行第一次操作)
2、防抖和节流的实现：
<body>
<input type="text" class="ipt" />
<script>
var timerId = null
document.querySelector('.ipt').onkeyup = function () {
// 防抖
if (timerId !== null) {
clearTimeout(timerId)
}
timerId = setTimeout(() => {
console.log('我是防抖')
}, 1000)
}
document.querySelector('.ipt').onkeyup = function () {
// 节流
console.log(2)
if (timerId !== null) {
return
}
timerId = setTimeout(() => {
console.log('我是节流')
timerId = null
}, 1000)
}
</script>
</body>
19、异步函数有哪些
JavaScript 中常见的异步函数有：定时器，事件和 ajax 等
23、伪数组怎么转真数组
1、let newArr = Array.protype.slice.call(伪数组)
2、let newArr = Array.from(伪数组),ES6的新语法
3、let newArr = [...伪数组]，使用扩展运算符,也是ES6的语法
24、数组如何进行降维（扁平化）
1、利用Array.some方法判断数组中是否还存在数组，es6展开运算符连接数组
let arr = [1,2,[3,4]]
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
2、使用数组的concat方法
let arr = [1,2,[3,4]]
let result = []
result = Array.prototype.concat.apply([], arr)
3、 使用数组的concat方法和扩展运算符
var arr = [1,2,[3,4]]
var result = []
result = [].concat(...arr)
4、es6中的flat函数也可以实现数组的扁平化
let arr = [1,2,['a','b',['中','文',[1,2,3,[11,21,31]]]],3];
let result = arr.flat( Infinity )
注意：flat方法的infinity属性，可以实现多层数组的降维
4420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
