前端面试题目总结1

# 数据类型 js中的数据类型有两类：值类型和引用类型 值类型：`number`、`string`、`boolean`、`Symbol`、`undefined` 引用类型：`null`、`数组`、`对象` 使用`typeof`能用来干什么 1. 判断是否是值类型 ``` typeof obj !== 'object' || typeof obj == null ``` 2. 判断是否是函数 ``` typeof obj === 'function' ``` 3. 判断是否是引用类型 ``` typeof obj === 'object' ``` ## 值类型和引用类型的区别 每声明一个值类型的变量，就会去开辟一个新的内存空间去存储变量的值 ``` // 值类型 let a = 10; // 在内存中开辟一个空间给变量 a，a的地址为 100，值为 10 let b = a; // 在内存中开辟一个空间给变量 b，b 的地址为 200，并且把 a 的值赋值给 b，为10 a = 20; // 查找 a 的地址，并把 a 的值更改为20 console.log(a); // 20，查找 a 的地址 100，然后找到对应的值 20 console.log(b); // 10，查找 b 的地址 200，然后找到对应的值10 ``` 而引用类型的值，则是放在堆中的，在复制的时候引用的状态， ``` // 引用类型 // 在内存中开辟一个空间给变量 obj1， // 然后在堆中创建一个对象 { age: 20 }, 并把堆中的这个对象的内存地址 600 赋值给 obj1 let obj1 = { age: 20 }; // 在内存中开辟一个空间给变量 obj2，然后把 obj1 的值 地址600 赋值给 obj2， // 而 obj1 存的是 对象 { age: 20 } 的地址，故 obj2 存的就是该对象的地址 600 let obj2 = obj1; // obj1存的是地址，故 obj1.age = 30 修改的是 地址 600 的内容，修改为30 obj1.age = 30; // 故打印出来的 obj1.age 和 obj2.age 都是 30 console.log(obj1.age); // 30 console.log(obj2.age); // 30 ``` 之所有引用类型是因为担心性能的问题，若一个对象的特别大，那么如果按照值类型的话，那么就特别占用内存。 # 类型转换 1. 字符串拼接 2. == 3. if 语句和逻辑运算 ## 字符串拼接 ``` 10 + '10' // 1010 10 + false // 10false ``` ## 双等== 除了 `== null` 之外、其它一律使用 `===`。 `a == null` 相当于 `a === undefined || a === null` ## if语句和逻辑运算 在 js 中的 if 语句中的条件语句的值实际上是 `truely` 和 `falsely`，这和c语言可能有点不一样。 以下都是 `falsely` 变量，除此之外都是 `truely` 变量 ``` !!0 === false !!NaN === false !!'' === false !!null === false !!undefined === false !!false === false ``` # 深拷贝 因为引用的类型的存在，我们有时候需要赋值的不对原来的对象造成影响，那么我们就需要拷贝该引用对象。 ``` function deepClone(obj) { // 判断是否是值类型以是否是null if (typeof obj !== 'object' || typeof obj == null) { // 只有当 obj 是值类型或者 obj 为 null 或者 undefined 时，才会直接返回 return obj; } // 初始化返回值类型 let result; if (obj instanceof Array) { result = [] } else { result = {} } // 递归遍历设置值 for (let key in obj) { // 判断是否是自身的属性 if (obj.hasOwnProperty(key)) { // 若是自身的属性就去赋值，并通知递归判断是否需要再次拷贝 result[key] = deepClone(obj[key]) } } return result; } // 测试 let obj1 = { age: 20 }; let obj2 = deepClone(obj1); obj1.age = 30; console.log(obj1.age); // 20 console.log(obj2.age); // 30 ``` #如何准确判断一个变量是不是数组 instanceof # 手写一个简易的jQuery，考虑插件和扩展性 ``` class jQuery { constructor(selector) { const els = document.querySelectorAll(selector); const length = els.length; this.length = length; this.selector = selector; for (let i = 0; i < length; i++) { this[i] = els[i] } } html(val) {} css() {} } // 插件 jQuery.prototype.style = function() {} // 扩展性 class myJquery extends jQuery { constructor(selector) { super(selector) } on() {} each() {} } ``` # 原型 ## 原型关系 每个构造函数都有一个现实原型`prototype`，每个实例都有一个隐式原型`__proto__`，每个实例的隐式原型指向其构造函数的显示原型。 ## 基于原型的执行规则 获取属性或执行方法时，先在自身身上查找，倘若找不到就去隐式原型`__proto__`上去寻找，层层向上，直到`null`为止 ``` class People { constructor(){} eat(){} } class Student extends People{ constructor(name) { super(); this.name = name; } study(){} } const stu = new Student('George'); // stu 自身上有study方法 stu.study(); // stu 自身上没有eat方法，故去 stu 的隐式原型__proto__上去寻找， // stu.__proto__指向People.prototype，而People.prototype上有 eat 方法 stu.eat(); // stu 自身上没有toString方法，故去stu的隐式原型__proto__上去寻找, // stu.__proto__指向People.prototype，而People.prototype上没有toString方法， // 则继续去People.prototype.__proto__上去寻找， // 而People.prototype.__proto__指向的是Object.prototype // Object.prototype有toString方法，则找到 stu.toString(); ```  # 作用域 在js中，作用域一共有三种 1. 全局 2. 函数 3. 块级 ## 自由变量 1. 一个变量在当前作用域没有被定义，但被使用 2. 若当前作用域找不到该变量则向上层作用域寻找，层层向上，直到找到为止 3. 若全局作用域也没找到，则操作`xxx is not defined` *ps：自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域* ``` // 案例1 function foo() { let a = 2; function bar() { console.log(a); // 2 } bar(); } foo(); // 案例2 function foo() { let a = 2; bar(); } let a = 10; function bar() { // 自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域 console.log(a); // 10 } foo(); ``` ## 闭包 闭包是作用域应用的特殊情况，有两种表现 1. 函数作为参数传递 2. 函数作为返回值 ### 闭包在实际开发中的应用 闭包经常用来隐藏数据，做私有变量 ``` // 在这个例子中，无论怎样都无法去直接获取data的值，只能通过方法去设置或获取对应的值 function store() { // 永远无法直接操作该数据 data const data = {}; return { get(key) { return data[key]; } set(key, value) { data[key] = value; } } } const s = store(); s.set('a', 'asd'); console.log(s.get('a')); // asd ``` ### 闭包的影响 变量会常驻内存，得不到释放，所以闭包不要乱用 - 自由变量：内存会被释放 ``` let a = 1; function fn1() { let b = 10; function fn2() { let c = 20; function fn3() { let d = 30; return a + b + c + d; } fn3(); // 1. fn3执行完后 c、d 就被释放 } fn2(); // 2. fn2执行完后 b 就被释放 } fn1(); // 3. fn1执行完后 a 就被释放 ``` - 函数作为返回值：内存不会被释放 ``` function store() { // 永远无法直接操作该数据 data，data永远不会被释放 const data = {}; return { get(key) { return data[key]; } set(key, value) { data[key] = value; } } } const s = store(); s.set('a', 'asd'); console.log(s.get('a')); // asd ``` # this 1. 作为普通函数被调用 2. 使用`call`、`apply`、`bind`改变this指向 3. 作为对象方法被调用 4. 在class的方法中被调用 5. 箭头函数，其this是上级作用域的值 this的指向实在函数执行的时候确定的，不是在函数定义的时候确定的，而作用域是在定义的时候确定的 ``` function fn1() { console.log(this); } fn1(); // this = window fn1.call({ x: 100 }); // this = {x:100} const fn2 = fn1.bind({ x: 200 }) fn2(); // this = { x: 200 } const zhang = { name: 'zhang', sayHi() { console.log(this); // 当前对象 }, wait() { console.log(this); // 当前对象 setTimeout(function() { console.log(this); // window，这个函数是setTimeout调用的，而setTimeout指向的是window }); }, wait() { setTimeout(() => { console.log(this); // 当前对象 }); } }; class People { constructor(name) { this.name = name; } sayHi() { console.log(this); // People的实例对象 } } new People().sayHi(); ``` 手写一个bind函数 ``` Function.prototype._bind = function() { // 将arguments参数转换为数组 const args = Array.prototype.slice.call(arguments); // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素 const cxt = args.shift(); // 返回一个函数 return function() { return this.apply(ctx, args) } } ``` 手写一个apply函数 ``` // apply的第一个参数是上下文，第二个参数是数组 Function.prototype._apply = function() { // 将arguments参数转化为数组 const args = Array.prototype.slice.call(arguments); // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素 const ctx = args.shift(); // 当前this指向的是调用的函数，把this绑定到ctx即obj上 // 将要当前调用的函数绑定到新的this上 ctx._fn = this; // 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向 // 执行调用的函数 ctx._fn(...args[0]); // 删除ctx上的_fn删除 // 删除调用的函数 delete ctx._fn; }; function foo(name, age) { console.log(this); // 指向 obj 对象 this.name = name; this.age = age; } const obj = { a: 2 }; foo._apply(obj, ["leo", 20]); ``` 手写一个call函数【和apply的原理一样】 ``` Function.prototype._call = function() { // 将arguments参数转化为数组 const args = Array.prototype.slice.call(arguments); // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素 const ctx = args.shift(); console.log(args); // 将this即foo函数绑定到ctx即obj上 ctx._fn = this; // 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向 ctx._fn(...args); // 删除ctx上的_fn删除 delete ctx._fn; }; function foo(name, age) { this.name = name; this.age = age; } const obj = { a: 2 }; foo._call(obj, "leo", 20); ``` # 单线程和异步 js是单线程的语言，只能同时做一件事，浏览器和nodejs已支持js启动进程，如web worker，js和dom渲染公用一个线程，因js可修改dom结构，遇到等待（请求、定义）不能卡住，使用异步的用调用callback形式。 异步的使用场景 1. 网络请求 2. 定时任务 异步的出现会出现一个问题就是callback hell，就会一直嵌套，如果有100个请求那就会嵌套100次 ``` $.get(url， function(res) { $.get(url1， function(res1) { $.get(url2， function(res2) { $.get(url3， function(res3) { }) }) }) }) ``` 为了解决解决callback hell【地域回调】，现在最佳的方式是使用Promise，这样就不会出现地域回调的问题 ``` $.get(url).then(res => { return $.get(url1) }).then(res => { return $.get(url2) }).then(res => { return $.get(url3) }) ``` # JS Web API 在如今各种框架的盛行的时代，让开发人员手动操作DOM的机会越来越少，像Vue、React这样的框架，内部都封装了各种DOM操作，但是DOM操作一直都会是前端工程师的基础，也是必备的知识，只会Vue而不会DOM操作的前端工程师不会长久。 ## DOM（Document Object Model）是哪种数据结构（DOM的本质） DOM是树形结构，所以在操作DOM的时候才会有各种方法，比如获取父节点、子节点、相邻的节点 ## DOM操作常见的API - 节点操作 - 结构操作 - property操作 - attribute操作 ### DOM节点操作 ``` document.getElementById() document.getElementsByClassName() document.getElementByTagName() document.getElementByName() ``` ### property操作 通过js属性的形式操作样式，修改dom元素对应的js属性，不会提现到html结构中 ``` div.style.width = '20px' ``` ### attribute操作 会修改html标签上的属性，会体现在html结构上 ``` div.setAttribute('data-name', 'xxx'); console.log(div.getAttribute('data-name')); // xxx ``` *PS：通过property和attribute的方式，都会引起DOM渲染，但尽量使用property操作，attribute会改变页面的html结构，所以attribute一定会使页面宠幸渲染，而property可能会使页面重新渲染* ### DOM结构操作 #### 1. 新增节点 ``` const div = document.createElement('div') ``` #### 2. 插入节点 ``` document.body.appendChild(div) ``` #### 3. 删除节点 ``` document.body.removeChild(div) ``` #### 4. 移动节点 ``` // 未移动前的DOM结构 // 移动操作 // 移动后的DOM结构 ``` #### 5.获取子元素列表 ``` div.childNodes ``` childNodes会获取各种节点，如元素节点、注释节点、文本节点。所以我们必须使用nodeName和nodeType属性来判断是不是你想要的元素 ``` // 获取所有的元素节点 nodeList.filter(child => child.nodeType === 1) ``` #### 6. 获取父元素 ``` div.parentNode ``` DOM操作是十分昂贵的，所以应该避免频繁的DOM操作，对DOM查询进行缓存，将多次的操作转化为一次性操作。 ``` ``` ## BOM（Browser Object Model）操作 ### 1. navigator ``` // 获取浏览器的信息 const ua = navigator.userAgent ``` ### 2. screen ### 3. location ``` location.href // 全网址 location.protocal // 协议 location.host // 域名 location.search // 查询参数 location.hash // 井号后面的内容 location.pathname // 网站的路径，包括井号 ``` ### 4. history ### 5. window ### 6. document ## 事件冒泡 顺着DOM结构向上冒，事件源本身没有事件 ``` ``` ## 事件代理 事件代理是在事件冒泡的机制上去实行的。其优点是代码简洁，减少浏览器的内存占用，但不要滥用。使用场景，比如有一个很长的列表，这时候要判断店家的是哪个item，这个时候就可以使用事件代理 ``` add ``` ## 编写一个通用的事件监听函数 ``` add // 事件监听和事件代理 function bindEvent(el, type, fn, selector, prevent) { el.addEventListener(type, ev => { if (prevent) { ev.preventDefault(); } const target = ev.target; const nodeName = target.nodeName; if (selector) { if ( typeof selector === "string" && selector.toUpperCase() === nodeName ) { // 将fn的this指向target fn.call(target, ev, target); } } else { fn.call(target, ev, target); } }); } const div1 = document.getElementById("div1"); bindEvent( document.body, "click", function(ev) { console.log(this); console.log(this.innerHTML); }, "a" ); ``` ## 手写一个简易的ajax ``` function ajax({url, method, body, query, async = true}) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open(method.toUpperCase(), url, async) ; // async表示是否异步，true为异步 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(xhr.responseText && JSON.parse(xhr.responseText)); } else { reject(xhr) } } } xhr.send(body) }) } ``` ### xhr.readyState 1. 未初始化，还未调用send()方法 2. 载入完成，已调用send()方法，正在发送请求 3. 交互，正在解析响应内容 4. 完成，响应内容解析完成，可在客户端调用 ## 同源策略 ajax请求时，浏览器要求当前网页和server必须同源（安全） 同源：协议、域名、端口，三者必须一致 加载图片、css、js可无视同源策略 ## 跨域 所有的跨域，都必须经过server端的允许和配合 未经server端允许实现跨域，说明浏览器有漏洞，危险信号 ## JSONP基本源流 script可绕过跨域限制 服务器可以任意动态拼接数据返回 所以，script就可以用来回去跨域的数据，只要服务器愿意返回 ``` window.cb = function(res) { console.log(res); // 服务器返回的数据 } // 服务器返回数据格式 cb({ name: "xxx" }) ``` # 描述cookie和localStorage和sessionStorage的区别 从容量和API易用性角度。 ## cookie 1. `cookie` 本身用于浏览器和 `server` 通讯，被“借用”到本地存储 2. api为`document.cookie`，不够友好 3. 容量最大为4kB 4. http请求时需要一同发送到服务器，增加了请求的数据量 ## localStorage和sessionStorage 1. 专为本地存储而设计的，最大为5MB 2. API简单易用，`setItem`，`getItem` 3. 不会随http请求发送出去 4. localStorage数据永久存储，除非被动删除 5. sessionStorage中存在当前会话，浏览器关闭后就会清空 # 从输入URL到渲染出页面的整个过程 1. DNS解析：域名 -> IP地址 2. 浏览器根据IP地址向服务器发送http请求 3. 服务器处理http请求，并返回给浏览器 4. 根据html代码生成DOM树 5. 根据CSS代码生成CSSOM 6. 将DOM树和CSSOM整合成RenderTree 7. 根据RenderTree渲染页面，遇到`script`标签则暂停渲染，优先加载脚本并执行js代码，完成后再继续。暂停是因为JS进程和渲染进程是公用一个线程的，js可能会改变DOM结构 8. 直到渲染完成 其中link要放在head中，因为放在后面可能会造成再次渲染问题，js放在最后，是因为JS进程和渲染进程是公用一个线程的，而且有可能js加载时间很长，然后就会造成页面卡顿现象，img标签不会暂停渲染，不会阻塞DOM渲染，不会造成重排现象。 # window.onload和DOMContentLoaded的区别 ``` window.addEventListener('load', function() { // 页面全部资源加载完才会执行，包括图片、视频 console.log('load'); // 后输出 }) document.addEventListener('DOMContentLoaded', function() { // DOM渲染完成即可执行，此时图片、视频可能还未加载完成 console.log('DOMContentLoaded'); // 先输出，所以操作 js 最好在这个方法里面 }) ``` # 性能优化 ##原则： 1. 多使用内存、缓存 2. 减少CPU计算，减少网络加载耗时 3. 以空间换取时间 ##从何入手 ###1. 让加载更快 1.1 减少资源的体积：压缩代码 1.2 减少访问次数：合并代码、SSR渲染、缓存 1.3 使用更快的网络 ###2. 让渲染更快 2.1 css放在head部分，js放在body最后 2.2 尽早执行js，用DOMContentLoaded触发 2.3 懒加载：图片懒加载、上滑加载更多 2.4 对DOM查询缓存 2.5 频繁DOM操作，合并到一起插入DOM结构 2.6 节流和防抖 # 防抖debounce 场景：监听一个输入框的文字，变化后触发change事件，直接用keyup事件，则会频繁触发change事件，使用防抖，只有在用户输入结束或暂停的时候，才会触发change事件 ``` ``` # 节流throttle 场景：拖拽一个元素师，要随时拿到该元素的拖拽位置，直接用drag事件，则会频繁触发，很容易造成卡顿，此时使用节流的话，无论拖拽速度多快，都快每隔一段时间触发一次 ```