2022年前端js面试题
2022-09-25 本文已影响0人
Astep
还有部分没更新完...
var、let、const区别
1. var存在变量提升，而let、const没有
2. let、const有块级作用域，而var没有
3. var 在同一块作用域可以重复声明多个相同的变量，后者覆盖前者,let、const重
复声明会报错
4.let、var声明变量后可以进行改变值，const声明不能修改（[对象、数组]的属性和方法可以改变
合并对象的方法可以写几种
const obj1 = {a:'a',b:'b',c:'c'};
const obj2 = {c:'c',d:'d',e:'e'};
方式一：使用ES6的拓展运算符
{...obj1,...obj2}
方式二：Object.assign(obj1,obj2);
方式三：手写遍历
function assign(obj1,obj2){
for(let key in obj2){
obj1[key] = obj2[key];
}
return obj1;
}
assign(obj1,obj2);
find和filter的区别
1. find 条件符合就找到第一个符合的元素返回，否则返回 undefined
2. filter 如果条件符合 就返回一个新的数组(多个元素)，否则返回空数组[]
some和every的区别
1. every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。 有点&&的意思
2. some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。有点||的意思
深拷贝和浅拷贝
箭头函数和普通函数有什么区别
1. 箭头函数不能用于构造函数，如果使用会报错
2. 箭头函数没有 arguments对象、prototype 原型对象
3. 箭头函数的this在定义时就已经指定，而普通函数是调用时才指定，如果普通函数用于构造函数this的指向就是当前实例
Promise有几种状态
1. pending(初始状态)
pending的意思是“待定的，发生的”，相当于是一个初始状态。创建[Promise]对象时，且没有调用resolve或者是reject方法，相当于时初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。
2 . resolved(成功态)
resolved表示成功了。当[Promise]实例对象中异步任务顺利完成且返回结果值时，就调用了resolved这个参数
3. rejected(失败状态)
rejected 失败，当[Promise]实例对象中异步任务执行失败时，就调用了resolved这个参数
localstorage、sessionstorage、cookie的区别
一、存储的时间有效期不同
1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
3、localStorage的有效期是在不进行手动删除的情况下是一直有效的
二、存储的大小不同
1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)
三、与服务端的通信
1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信
JS数据类型有哪些
基本类型：String、Number、Boolean、Undefined、Null、Symbol、Bigint
引用类型：Object（Array、Function、Date、RegExp）
注意：typeof null 返回的是 'object'
NaN是一个Number类型，但是不是一个具体的数字
typeof NaN 返回的是 'number'
null和undefined的区别
1. 作者在设计js的都是先设计的null（为什么设计了null：最初设计js的时候借鉴了java的语言）
2. null会被隐式转换成0，很不容易发现错误。
3. 先有null后有undefined，出来undefined是为了填补之前的坑。
具体区别：JavaScript的最初版本是这样区分的：null是一个表示"无"的对象（空对象指针），转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
==和===有什么不同
== : 比较的是值
string == number || boolean || number ....都会隐式转换
通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。）
=== ： 除了比较值，还比较类型
JS微任务和宏任务
1. js是单线程的语言。
2. js代码执行流程：同步执行完==>事件循环
同步的任务都执行完了，才会执行事件循环的内容
进入事件循环：请求、定时器、事件....
3. 事件循环中包含：【微任务、宏任务】
微任务：promise.then
宏任务：setTimeout..
要执行宏任务的前提是清空了所有的微任务
流程：同步 > 事件循环【微任务和宏任务】> 微任务 > 宏任务 > 微任务...
JS作用域
1. 除了函数外，js是没有块级作用域。
2. 作用域链：内部可以访问外部的变量，但是外部不能访问内部的变量。
注意：如果内部有，优先查找到内部，如果内部没有就查找外部的。
3. 注意声明变量是用var还是没有写（window.）
4. 注意：js有变量提升的机制【变量悬挂声明】
5. 优先级：声明变量 > 声明普通函数 > 参数 > 变量提升
JS判断变量是不是数组，你能写出哪些方法
1. isArray
2. Array.prototype.isPrototypeOf([])
3. Object.prototype.toString.call([]).indexOf('Array') > -1
4. [].constructor.toString().indexOf('Array') > -1
slice是干嘛的、splice是否会改变原数组
1. slice是来截取的
参数可以写slice(3)、slice(1,3)、slice(-3)
返回的是一个新的数组
2. splice 功能有：插入、删除、替换
返回：删除的元素
该方法会改变原数组
JS数组去重
方式一：new set
const arr= [1,2,3,2,4,1];
function unique(arr){
return [...new Set(arr)]
}
方式二：Object的key是唯一
function unique(arr) {
const param = {};
arr.forEach(key => {
param[key] = key;
});
return Object.keys(param);
};
方式三：indexOf
function unique( arr ){
var brr = [];
for( var i=0;i<arr.length;i++){
if( brr.indexOf(arr[i]) == -1 ){
brr.push( arr[i] );
}
}
return brr;
}
方式四：sort
function unique( arr ){
arr = arr.sort();
var brr = [];
for(var i=0;i<arr.length;i++){
if( arr[i] !== arr[i-1]){
brr.push( arr[i] );
}
}
return brr;
}
找出多维数组最大值
function fnArr(arr){
var newArr = [];
arr.forEach((item,index)=>{
newArr.push( Math.max(...item) )
})
return newArr;
}
console.log(fnArr([
[4,5,1,3],
[13,27,18,26],
[32,35,37,39],
[1000,1001,857,1]
]));
给字符串新增方法实现功能
给字符串对象定义一个addPrefix函数，当传入一个字符串str时，它会返回新的带有指定前缀的字符串，例如： console.log( 'world'.addPrefix('hello') ) 控制台会输出helloworld
String.prototype.addPrefix = function(str){
return str + this;
}
console.log( 'world'.addPrefix('hello') )
找出字符串出现最多次数的字符以及次数
var str = 'aaabbbbbccddddddddddx';
var obj = {};
for(var i=0;i<str.length;i++){
var char = str.charAt(i);
if( obj[char] ){
obj[char]++;
}else{
obj[char] = 1;
}
}
console.log( obj );
//统计出来最大值
var max = 0;
for( var key in obj ){
if( max < obj[key] ){
max = obj[key];
}
}
//拿最大值去对比
for( var key in obj ){
if( obj[key] == max ){
console.log('最多的字符是'+key);
console.log('出现的次数是'+max);
}
}
new操作符具体做了什么
1. 创建了一个空的对象
2. 将空对象的原型，指向于构造函数的原型
3. 将空对象作为构造函数的上下文（改变this指向）
4. 对构造函数有返回值的处理判断
实现代码如下 ：
function Fun( age,name ){
this.age = age;
this.name = name;
}
function create( fn , ...args ){
var obj = {};
Object.setPrototypeOf(obj,fn.prototype);
var result = fn.apply(obj,args);
return result instanceof Object ? result : obj;
}
console.log( create(Fun,18,'张三') )
说一下call、apply、bind区别
1. 共同点：功能一致，都是可以改变this指向
2. 语法： 函数.call()、函数.apply()、函数.bind()
3. 区别一：参数不同，apply第二个参数是数组,call和bind有多个参数需要挨个写
区别二：call、apply都是立即执行 bind不会立即执行，因为bind返回的是一个函数需要加入()执行
场景：
1. 用apply的情况
var arr1 = [1,2,4,5,7,3,321];
console.log( Math.max.apply(null,arr1) )
2. 用bind的情况
var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = function(){
console.log( this.id );
}.bind(h1s)
闭包
1. 闭包是什么
闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。
2. 闭包可以解决什么问题【闭包的优点】
2.1 内部函数可以访问到外部函数的局部变量
2.2 闭包可以解决的问题
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick = function(){
alert(i);
}
})(i)
}
3. 闭包的缺点
3.1 变量会驻留在内存中，造成内存损耗问题。
解决：把闭包的函数设置为null
3.2 内存泄漏【ie】 ==> 可说可不说，如果说一定要提到ie
原型链
1. 原型可以解决什么问题：解决了对象的共享属性、方法
2. 谁有原型：函数拥有prototype、对象拥有__proto__
3. 对象查找属性或者方法的顺序
先在对象本身查找 > 构造函数中查找 > 对象的原型 > 构造函数的原型中 > 当前原型的原型中查找
4. 原型链的最顶端是null
JS继承有哪些方式
1. ES6 class 的extends
2. 原型链继承
3. 借用构造函数继承
4. 组合式继承（原型链继承和借用构造函数继承）
方式一：ES6
class Parent{
constructor(){
this.age = 18;
}
}
class Child extends Parent{
constructor(){
super();
this.name = '张三';
}
}
let o1 = new Child();
console.log( o1,o1.name,o1.age );
方式二：原型链继承
function Parent(){
this.age = 20;
}
function Child(){
this.name = '张三'
}
Child.prototype = new Parent();
let o2 = new Child();
console.log( o2,o2.name,o2.age );
方式三：借用构造函数继承
function Parent(){
this.age = 22;
}
function Child(){
this.name = '张三'
Parent.call(this);
}
let o3 = new Child();
console.log( o3,o3.name,o3.age );
方式四：组合式继承
function Parent(){
this.age = 100;
}
function Child(){
Parent.call(this);
this.name = '张三'
}
Child.prototype = new Parent();
let o4 = new Child();
console.log( o4,o4.name,o4.age );
延迟加载JS有哪些方式
1. defer 是等html全部解析完成，才会执行js代码，顺次执行js脚本。
2. async 是和html解析同步的（并行的），不是顺次执行js脚本（谁先加载完谁先执行）
3. 使用js动态创建<script type="text/javascript" src="xxx">标签
