--- highlight: arta theme: fancy --- 「本文已参与好文召集令活动，点击查看:后端、大前端双赛道投稿，2万元奖池等你挑战！」 ## 前言我只想面个CV工程师，可是面试官偏偏让我挑战造火箭工程师，但再难苟且的生活还要继续，饭碗还是要继续找的。平时没有注重积累，面试总是答不全面。 ## 1. JS原始数据类型有哪些？引用数据类型有哪些？ - boolean - null - undefined - number - string - symbol - bigint 引用数据类型: 对象Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象Date，数学函数-Math，函数对象-Function） ## 2.说出下面运行的结果，解释原因。 ``` function test(person) { person.age = 26 person = { name: 'hzj', age: 18 } return person } const p1 = { name: 'fyq', age: 19 } const p2 = test(p1) console.log(p1) // -> ? console.log(p2) // -> ? p1：{name: “fyq”, age: 26} p2：{name: “hzj”, age: 18} ``` 原因: 在函数传参的时候传递的是对象在堆中的内存地址值，test函数中的实参person是p1对象的内存地址，通过调用person.age = 26确实改变了p1的值，但随后person变成了另一块内存空间的地址，并且在最后将这另外一份内存空间的地址返回，赋给了p2。 ## 3. null是对象吗？为什么？结论: null不是对象。解释: 虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object 。 ## 4.'1'.toString()为什么可以调用？其实在这个语句运行的过程中做了这样几件事情： ``` var s = new Object('1'); s.toString(); s = null; ``` 第一步: 创建Object类实例。注意为什么不是String ？由于Symbol和BigInt的出现，对它们调用new都会报错，目前ES6规范也不建议用new来创建基本类型的包装类。第二步: 调用实例方法。第三步: 执行完方法立即销毁这个实例。整个过程体现了基本包装类型的性质，而基本包装类型恰恰属于基本数据类型，包括Boolean, Number和String。 ## 5.0.1+0.2为什么不等于0.3？ 0.1和0.2在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出现了精度的损失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成 0.30000000000000004。 ## 6.什么是BigInt? BigInt是一种新的数据类型，用于当整数值大于Number数据类型支持的范围时。这种数据类型允许我们安全地对大整数执行算术操作，表示高分辨率的时间戳，使用大整数id，等等，而不需要使用库。 ## 7.为什么需要BigInt? 在JS中，所有的数字都以双精度64位浮点格式表示，那这会带来什么问题呢？这导致JS中的Number无法精确表示非常大的整数，它会将非常大的整数四舍五入，确切地说，JS中的 Number类型只能安全地表示-9007199254740991(-(2^53-1))和9007199254740991（(2^53-1)），任何超出此范围的整数值都可能失去精度。 ``` console.log(999999999999999); //=>10000000000000000 ``` 同时也会有一定的安全性问题: ``` 9007199254740992 === 9007199254740993; // → true 居然是true! ``` ## 8.如何创建并使用BigInt？要创建BigInt，只需要在数字末尾追加n即可 ``` console.log( 9007199254740995n ); // → 9007199254740995n console.log( 9007199254740995 ); // → 9007199254740996 ``` 另一种创建BigInt的方法是用BigInt()构造函数 ``` BigInt("9007199254740995"); // → 9007199254740995n ``` 简单使用如下: ``` 10n + 20n; // → 30n 10n - 20n; // → -10n +10n; // → TypeError: Cannot convert a BigInt value to a number -10n; // → -10n 10n * 20n; // → 200n 20n / 10n; // → 2n 23n % 10n; // → 3n 10n ** 3n; // → 1000n const x = 10n; ++x; // → 11n --x; // → 9n console.log(typeof x); //"bigint" ``` 值得警惕的点（1）BigInt不支持一元加号运算符, 这可能是某些程序可能依赖于 + 始终生成 Number 的不变量，或者抛出异常。另外，更改 + 的行为也会破坏 asm.js代码。（2）因为隐式类型转换可能丢失信息，所以不允许在bigint和 Number 之间进行混合操作。当混合使用大整数和浮点数时，结果值可能无法由BigInt或Number精确表示。 ``` 10 + 10n; // → TypeError ``` （3）不能将BigInt传递给Web api和内置的 JS 函数，这些函数需要一个 Number 类型的数字。尝试这样做会报TypeError错误。（4）当 Boolean 类型与 BigInt 类型相遇时，BigInt的处理方式与Number类似，换句话说，只要不是0n，BigInt就被视为truthy的值。（5）元素都为BigInt的数组可以进行sort。 (6) BigInt可以正常地进行位运算，如|、&、<<、>>和^ ## 9.typeof 是否能正确判断类型？对于原始类型来说，除了 null 都可以调用typeof显示正确的类型。 ``` typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean' typeof Symbol() // 'symbol' ``` 但对于引用数据类型，除了函数之外，都会显示"object"。 ``` typeof [] // 'object' typeof {} // 'object' typeof console.log // 'function' ``` 因此采用typeof判断对象数据类型是不合适的，采用instanceof会更好，instanceof的原理是基于原型链的查询，只要处于原型链中，判断永远为true ``` const Person = function() {} const p1 = new Person() p1 instanceof Person // true var str1 = 'hello world' str1 instanceof String // false var str2 = new String('hello world') str2 instanceof String // true ``` ## 10. instanceof能否判断基本数据类型？能。比如下面这种方式: ``` class PrimitiveNumber { static [Symbol.hasInstance](x) { return typeof x === 'number' } } console.log(111 instanceof PrimitiveNumber) // true ``` 其实就是自定义instanceof行为的一种方式，这里将原有的instanceof方法重定义，换成了typeof，因此能够判断基本数据类型。 ## 11. 能不能手动实现一下instanceof的功能？ ``` function myInstanceof(left, right) { //基本数据类型直接返回false if(typeof left !== 'object' || left === null) return false; //getProtypeOf是Object对象自带的一个方法，能够拿到参数的原型对象 let proto = Object.getPrototypeOf(left); while(true) { //查找到尽头，还没找到 if(proto == null) return false; //找到相同的原型对象 if(proto == right.prototype) return true; proto = Object.getPrototypeOf(proto); } } ``` ``` console.log(myInstanceof("111", String)); //false console.log(myInstanceof(new String("111"), String));//true ``` ## 12.Object.is和===的区别？ Object在严格等于的基础上修复了一些特殊情况下的失误，具体来说就是+0和-0，NaN和NaN。源码如下： ``` function is(x, y) { if (x === y) { //运行到1/x === 1/y的时候x和y都为0，但是1/+0 = +Infinity， 1/-0 = -Infinity, 是不一样的 return x !== 0 || y !== 0 || 1 / x === 1 / y; } else { //NaN===NaN是false,这是不对的，我们在这里做一个拦截，x !== x，那么一定是 NaN, y 同理 //两个都是NaN的时候返回true return x !== x && y !== y; } ``` ## 13. [] == ![]结果是什么？为什么？ == 中，左右两边都需要转换为数字然后进行比较。 []转换为数字为0。 ![] 首先是转换为布尔值，由于[]作为一个引用类型转换为布尔值为true, 因此![]为false，进而在转换成数字，变为0。 0 == 0 ，结果为true ## 14.对象转原始类型是根据什么流程运行的？对象转原始类型，会调用内置的[ToPrimitive]函数，对于该函数而言，其逻辑如下： 1. 如果Symbol.toPrimitive()方法，优先调用再返回 2. 调用valueOf()，如果转换为原始类型，则返回 3. 调用toString()，如果转换为原始类型，则返回 4. 如果都没有返回原始类型，会报错 ``` var obj = { value: 3, valueOf() { return 4; }, toString() { return '5' }, [Symbol.toPrimitive]() { return 6 } } console.log(obj + 1); // 输出7 ``` ## 15.如何让if(a == 1 && a == 2)条件成立？ ``` var a = { value: 0, valueOf: function() { this.value++; return this.value; } }; console.log(a == 1 && a == 2);//true ``` ## 16.什么是闭包？红宝书上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数， MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。（其中自由变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。） ## 17.闭包产生的原因? 首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条。比如: ``` var a = 1; function f1() { var a = 2 function f2() { var a = 3; console.log(a);//3 } } ``` 在这段代码中，f1的作用域指向有全局作用域(window)和它本身，而f2的作用域指向全局作用域 (window)、f1和它本身。而且作用域是从最底层向上找，直到找到全局作用域window为止，如果全局还没有的话就会报错。就这么简单一件事情！闭包产生的本质就是，当前环境中存在指向父级作用域的引用。还是举上面的例子: ``` function f1() { var a = 2 function f2() { console.log(a);//2 } return f2; } var x = f1(); x(); ``` 这里x会拿到父级作用域中的变量，输出2。因为在当前环境中，含有对f2的引用，f2恰恰引用了 window、f1和f2的作用域。因此f2可以访问到f1的作用域的变量。那是不是只有返回函数才算是产生了闭包呢？、回到闭包的本质，我们只需要让父级作用域的引用存在即可，因此我们还可以这么做： ``` var f3; function f1() { var a = 2 f3 = function() { console.log(a); } } f1(); f3(); ``` 让f1执行，给f3赋值后，等于说现在f3拥有了window、f1和f3本身这几个作用域的访问权限，还是自底向上查找，最近是在f1中找到了a,因此输出2。在这里是外面的变量f3存在着父级作用域的引用，因此产生了闭包，形式变了，本质没有改变。 ## 18.如何解决下面的循环输出问题？ ``` for(var i = 1; i <= 5; i ++){ setTimeout(function timer(){ console.log(i) }, 0) } ``` 为什么会全部输出6？如何改进，让它输出1，2，3，4，5？(方法越多越好) 因为setTimeout为宏任务，由于JS中单线程eventLoop机制，在主线程同步任务执行完后才去执行宏任务，因此循环结束后setTimeout中的回调才依次执行，但输出i的时候当前作用域没有，往上一级再找，发现了i,此时循环已经结束，i变成了6。因此会全部输出6。解决方法： 1、利用IIFE(立即执行函数表达式)当每次for循环时，把此时的i变量传递到定时器中 ``` for(var i = 1;i <= 5;i++){ (function(j){ setTimeout(function timer(){ console.log(j) }, 0) })(i) } ``` 2、给定时器传入第三个参数, 作为timer函数的第一个函数参数 ``` for(var i=1;i<=5;i++){ setTimeout(function timer(j){ console.log(j) }, 0, i) } ``` 3、使用ES6中的let ``` for(let i = 1; i <= 5; i++){ setTimeout(function timer(){ console.log(i) },0) } ``` let使JS发生革命性的变化，让JS有函数作用域变为了块级作用域，用let后作用域链不复存在。代码的作用域以块级为单位，以上面代码为例: ``` // i = 1 { setTimeout(function timer(){ console.log(1) },0) } // i = 2 { setTimeout(function timer(){ console.log(2) },0) } // i = 3 ... ``` ## 19. JS如何实现继承？第一种: 借助call ``` function Parent1(){ this.name = 'parent1'; } function Child1(){ Parent1.call(this); this.type = 'child1' } console.log(new Child1); ``` 这样写的时候子类虽然能够拿到父类的属性值，但是问题是父类原型对象中一旦存在方法那么子类无法继承。那么引出下面的方法。第二种: 借助原型链 ``` function Parent2() { this.name = 'parent2'; this.play = [1, 2, 3] } function Child2() { this.type = 'child2'; } Child2.prototype = new Parent2(); console.log(new Child2()); ``` 第三种：将前两种组合 ``` function Parent3 () { this.name = 'parent3'; this.play = [1, 2, 3]; } function Child3() { Parent3.call(this); this.type = 'child3'; } Child3.prototype = new Parent3(); var s3 = new Child3(); var s4 = new Child3(); s3.play.push(4); console.log(s3.play, s4.play); ``` ## 20. 函数的arguments为什么不是数组？如何转化成数组？因为arguments本身并不能调用数组方法，它是一个另外一种对象类型，只不过属性从0开始排，依次为0，1，2...最后还有callee和length属性。我们也把这样的对象称为类数组。常见的类数组还有： - 用getElementsByTagName/ClassName()获得的HTMLCollection - 用querySelector获得的nodeList 那这导致很多数组的方法就不能用了，必要时需要我们将它们转换成数组，有哪些方法呢？ Array.prototype.slice.call() ``` function sum(a, b) { let args = Array.prototype.slice.call(arguments); console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦 } sum(1, 2);//3 ``` Array.from() ``` function sum(a, b) { let args = Array.from(arguments); console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦 } sum(1, 2);//3 ``` ES6展开运算符 ``` function sum(a, b) { let args = [...arguments]; console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦 } sum(1, 2);//3 ``` 利用concat+apply ``` function sum(a, b) { let args = Array.prototype.concat.apply([], arguments);//apply方法会把第二个参数展开 console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦 } sum(1, 2);//3 ``` ## 21.forEach中return有效果吗？如何中断forEach循环？在forEach中用return不会返回，函数会继续执行。 ``` let nums = [1, 2, 3]; nums.forEach((item, index) => { return;//无效 }) ``` 中断方法： 1）使用try监视代码块，在需要中断的地方抛出异常。 2）官方推荐方法（替换方法）：用every和some替代forEach函数。every在碰到return false的时候，中止循环。some在碰到return true的时候，中止循环 ## 22.能不能模拟实现一个new的效果？ new 被调用后做了三件事情: 1. 让实例可以访问到私有属性 2. 让实例可以访问构造函数原型(constructor.prototype)所在原型链上的属性 3. 如果构造函数返回的结果不是引用数据类型 ``` function newOperator(ctor, ...args) { if(typeof ctor !== 'function'){ throw 'newOperator function the first param must be a function'; } let obj = Object.create(ctor.prototype); let res = ctor.apply(obj, args); let isObject = typeof res === 'object' && res !== null; let isFunction = typoof res === 'function'; return isObect || isFunction ? res : obj; }; ``` ## 23. 能不能模拟实现一个 bind 的效果？实现bind之前，我们首先要知道它做了哪些事情。 1. 对于普通函数，绑定this指向 2. 对于构造函数，要保证原函数的原型对象上的属性不能丢失 ``` Function.prototype.bind = function (context, ...args) { // 异常处理 if (typeof this !== "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } // 保存this的值，它代表调用 bind 的函数 var self = this; var fNOP = function () {}; var fbound = function () { self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments))); } fNOP.prototype = this.prototype; fbound.prototype = new fNOP(); return fbound; } ``` 也可以这么用 Object.create 来处理原型: ``` Function.prototype.bind = function (context, ...args) { if (typeof this !== "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } var self = this; var fbound = function () { self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments))); } fbound.prototype = Object.create(self.prototype); return fbound; } ``` ## 24.javascript 的垃圾回收机制讲一下定义：指一块被分配的内存既不能使用，又不能回收，知道浏览器进程结束。像 C 这样的编程语言，具有低级内存管理原语，如 malloc()和 free()。开发人员使用这些原语显式地对操作系统的内存进行分配和释放。而 JavaScript 在创建对象(对象、字符串等)时会为它们分配内存，不再使用对时会“自动”释放内存，这个过程称为垃圾收集。内存生命周期中的每一个阶段: 分配内存 — 内存是由操作系统分配的，它允许您的程序使用它。在低级语言(例如 C 语言)中，这是一个开发人员需要自己处理的显式执行的操作。然而，在高级语言中，系统会自动为你分配内在。使用内存 — 这是程序实际使用之前分配的内存，在代码中使用分配的变量时，就会发生读和写操作。释放内存 — 释放所有不再使用的内存,使之成为自由内存,并可以被重利用。与分配内存操作一样,这一操作在低级语言中也是需要显式地执行。 ## 25.防抖和节流 ##### 1.防抖防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。 - 想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢 - 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖 - 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖 - 文本编辑器实时保存，当无任何更改操作一秒后进行保存 ``` function debounce (f, wait) { let timer return (...args) => { clearTimeout(timer) timer = setTimeout(() => { f(...args) }, wait) } } ``` ##### 2.节流节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。 - scroll 事件，每隔一秒计算一次位置信息等 - 浏览器播放事件，每个一秒计算一次进度信息等 - input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖) ``` function throttle (f, wait) { let timer return (...args) => { if (timer) { return } timer = setTimeout(() => { f(...args) timer = null }, wait) } } ``` ## 26.冒泡排序算法 ``` var array = [5, 4, 3, 2, 1]; var temp = 0; for (var i = 0; i array[j + 1]){ temp = array[j + 1]; array[j + 1] = array[j]; array[j] = temp; } } ``` ## 27.写一个function，清除字符串前后的空格。（兼容所有浏览器） ``` function trim(str) { if (str & typeof str === "string") { return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符 } } ``` ## 28.手动实现 Array.prototype.map 方法 ``` function map(arr, mapCallback) { // 首先，检查传递的参数是否正确。 if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') { return []; } else { let result = []; // 每次调用此函数时，我们都会创建一个 result 数组 // 因为我们不想改变原始数组。 for (let i = 0, len = arr.length; i < len; i++) { result.push(mapCallback(arr[i], i, arr)); // 将 mapCallback 返回的结果 push 到 result 数组中 } return result; } } ``` ## 29.手动实现Array.prototype.filter方法 ``` function filter(arr, filterCallback) { // 首先，检查传递的参数是否正确。 if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') { return []; } else { let result = []; // 每次调用此函数时，我们都会创建一个 result 数组 // 因为我们不想改变原始数组。 for (let i = 0, len = arr.length; i < len; i++) { // 检查 filterCallback 的返回值是否是真值 if (filterCallback(arr[i], i, arr)) { // 如果条件为真，则将数组元素 push 到 result 中 result.push(arr[i]); } } return result; // return the result array } } ``` ## 30.手动实现Array.prototype.reduce方法 ``` function reduce(arr, reduceCallback, initialValue) { // 首先，检查传递的参数是否正确。 if (!Array.isArray(arr) || !arr.length || typeof reduceCallback !== 'function') { return []; } else { // 如果没有将initialValue传递给该函数，我们将使用第一个数组项作为initialValue let hasInitialValue = initialValue !== undefined; let value = hasInitialValue ? initialValue : arr[0]; 、 // 如果有传递 initialValue，则索引从 1 开始，否则从 0 开始 for (let i = hasInitialValue ? 1 : 0, len = arr.length; i < len; i++) { value = reduceCallback(value, arr[i], i, arr); } return value; } } ``` # 往期优秀文章 - HTML+CSS面试题：2021 6月份前端面试 | HTML +CSS - vue面试题：答对这些vue面试题,我是一个合格的中级前端开发工程师吗？