# js 笔试题 ## 1 数值转换以下哪个语句打印出来的结果时 false？ A: alert(3==true) B: alert(2=="2") C: alert(null == undefined) D: alert(isNaN("true")) :::details 答案：A 解答： - A: 1 == true // 布尔值会转成 number true 即为 1 所以结果是 true 2 == true // 布尔值会转成 number true 即为 1 所以结果是 false 3 == true // 布尔值会转成 number true 即为 1 所以结果是 false 1 == false // 布尔值会转成 number false 即为 0 所以结果是 false 0 == false // 布尔值会转成 number false 即为 0 所以结果是 true 总结：布尔值转换我 number 时，true 转换为 1，false 转换 0 - B: 数字字符串 2 会转换成数字 2 在和数字 2 进行比较。 == js 会优先选择将字符串转成数字 - C: Javascript 规范中提到，要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，并且规定 null 和 undefined 是相等的。 null 和 undefined 都代表着无效的值。但如果时比较全等性，也就是用`===`符号时，null 和 undefined 是不相等的，因为它们是不同的数据类型 - D：isNaN() 函数用于检查其参数是否是非数字值。如果参数值为 NaN 或字符串、对象、undefined 等非数字值则返回 true, 否则返回 false。要注意的是：isNaN 函数接收一个任意类型的参数，然后判断该参数是否`“不是数值”`。把一个值传给 isNaN 函数之后，该函数会尝试用 `Number()`、`parseInt()` 或 `parseFloat()` 将它转换为数值，任何不能转换为数值的值都会导致这个函数返回 true。 ```js console.log(isNaN(NaN)) //true 参数为NaN console.log(isNaN(123)) //false 参数为数字值 console.log(isNaN(-1.23)) //false 参数为数字值 console.log(isNaN('123')) //false 先转换为数值123 然后再比较 console.log(isNaN('2005/12/12')) //true 不能转换为数值，所以为true console.log(isNaN('hello')) // true 不能转换为数值，所以为true console.log(isNaN(0)) //false 参数为数值 console.log(isNaN(false)) //false 布尔值先转换为数值0，然后再比较 console.log(isNaN(true)) //false 布尔值先转换为数值1 然后再比较 console.log(isNaN([])) //false 先用Number()转换为0 ，这部分看下文的Number函数的使用 console.log(isNaN({})) //true 参数为对象 console.log(isNaN({ 123: 123 })) //true,参数为对象 ``` 有三个函数可以非数值转换为数值：`Number()`、`parseInt()` 或 `parseFloat()`。Number()是转型函数，可以用于任何的数据类型，后两个函数只要是将`字符串`转换为数值。 1. Number() - 布尔值： true 为 1 false 为 0 - 数值：直接返回 - null 返回 0 - undefined 返回 NaN - 字符串： - 如果字符串包含数值字符，包括数值字符前面带加减号，则转换为一个十进制数值 - 字符串为有效浮点数类型，返回有效浮点数类型（忽略前面的 0） - 字符串包含有效的十六进制格式，则会转换为对应的十进制格式 - 如果为空字符，返回 0 - 出现除上述情况的其他情况，返回 NaN ``` console.log(Number(true));// 1 console.log(Number(false));// 0 console.log(Number(null)); //0 console.log(Number(undefined));//NaN console.log(Number(+11));//11 console.log(Number(-11));//-11 console.log(Number("-11"));//-11 console.log(Number("")); //0 console.log(Number("00011"));//11 console.log(Number("11.11"));//11.11 console.log(Number("0xf")); //15 console.log(Number("123abc"));//NaN console.log(Number([])); //0 console.log(Number([123])); //123 // console.log(Number(["123"])); //报错 ``` - 对象：调用 valueOf()方法，并按照上述规则转换返回的值，如果转换结果是 NaN，则调用 toString 方法，再按照字符串的规则进行转换。 2. parseInt() - 考虑到 Number()函数转换字符串时相对复杂且优点违反常规，所以在处理字符串时常用 parseInt()，和 parseFloat()。【也可以处理非字符串的】 - parseInt()更专注于字符串是否包含数值模式，字符串最前面的空格都会被忽略，从第一个非空格字符开始转换，如果第一个字符不是数值，加减号，则会立即返回 NaN。这意味着`空字符串也会返回NaN`(这一点和 Number 不同，Number 返回 0) - 如果第一个字符是数值，加减号，则会依次检测每一个字符，直到字符串结尾或碰到费和数值字符，例如`“1234blue”`则会转换为 1234，blue 被忽略，类似的，`22.5`被转换为 22，因为小数点不是有效的整数字符。 - 假如字符串的第一个字符是数值字符，pareseInt()函数也能识别不同的整数格式（十进制，八进制，和十六进制），也就是说，如果字符串以：`0x`开头，则会被识别成十六进制整数。如果字符串以`“0”`开头，且紧跟着数值字符，在非严格模式下会被某些实现解释为八进制整数 - 不同的进制整数容易混淆，所以 parseInt()可以接收第二个参数，用来指定进制数，如果传入 16，则说明是以 16 进制进行解析的，前面的 0x 也可以省略。 ```js console.log(parseInt('')) //NaN console.log(parseInt('0abc')) //0 console.log(parseInt('0x')) //NaN console.log(parseInt(['1234blue'])) //1234 console.log(parseInt(['22.5'])) //22 console.log(parseInt(['123'])) //123 console.log(parseInt([])) //NaN console.log(parseInt('0xf')) //15 console.log(parseInt(123)) //123 console.log(parseInt('10', 2)) //2 二进制解析 console.log(parseInt(10, 8)) //8 八进制解析 console.log(parseInt('10', 16)) //16 16进制解析 console.log(parseInt('AF', 16)) //175 16进制解析 console.log(parseInt('AF')) //NaN,没有指定进制数，也没有用0x ``` 3. parseFloat() 和 parseInt()类似。但有几点不同 - 能识别前面的所有浮点数格式，例如`3.125e7` - 第一次出现的小数点有效，第二次之后出现的小数点无效 - 不接受指定进制，只解析十进制，对于十六进制整数始终返回 0 - 没有小数点，或小数点后面只有零，没有其他数值，返回整数 ```js console.log(parseFloat(['123.00'])) //123 console.log(parseFloat([])) //NaN console.log(parseFloat(['12.36'])) //12.36 console.log(parseFloat('0xA')) //0 console.log(parseFloat(0xa)) //10 console.log(parseFloat('22.34.3')) //22.34 console.log(parseFloat('3.125e7')) //3125000 ``` ::: ## 2. 立即执行函数 ```js var b = 3 ;(function () { b = 5 var b = 2 })() console.log(b) //3 ``` :::details 立即执行函数内部，var 发生变量提升，结果相当于 (function(){ var b; b=5; b=2; })() 所以这个立即执行函数并没有改变全局环境中的 b，所以全局环境中的 b 依旧是 3。在立即执行函数中使用了 var b = 2，变量提升之后，立即执行函数中的 b 变成了局部变量。立即执行函数执行完毕后会立即销毁，所以立即执行函数内部的变量 b 就被回收了，但是全局变量 b 不会被回收，所以 console.log 输出的就是全局变量 b=3。如果去掉 var b = 2 这条语句，立即执行函数中的 b 就是全局变量的 b，最后输出的就是 5。 ```js var b = 3 ;(function () { b = 5 })() console.log(b) //5 ``` `函数 && 变量重新申明` `有`var 重新声明——函数内部使用的`是“自身”的变量`，对变量的改变并`不影响外部` `没有`var 重新声明——函数内部使用的是`外部的变量`，对变量的改变`影响外部` ::: ## 3 逻辑表达式的布尔值下列哪些会返回 false？ A:null B:undefined C:0 D:‘0' :::details 答案：ABC JS 中 `false`、`“”（空字符串`）、`0`和`NaN`、`null`、`undefined`进行逻辑运算为 false. 特别注意的是`typeof('0')=='string'`,即'0'是一个字符串对象,对对象进行逻辑运算结果为 true ```js if (!null) console.log('null is false') //null is false if (!undefined) console.log('undefined is false') //undefined is false if (!0) console.log('0 is false') //0 is false if (!NaN) console.log('NaN is false') //NaN is false if ('0') console.log('"0" is true') //"0" is true if ({}) console.log('object is true') //object is true ``` 5 种数据类型转布尔类型规则： 1、Number 转布尔类型：除 0（包括各种 0，如+0,0.00 等）与 NaN 之外全为 true； 2、String 转布尔类型：除空字符串“”之外全为 true； 3、Boolean：true 为 true，false 为 false； 4、null 和 undefined 都为 false； 5、Object：所有对象，包括数组、函数、正则、Date 等（若把 null 当成对象的话除 null）全为 true。表格如下 | 数据类型 | 转换为 true 的值 | 转换为 false 的值 | | --------- | ---------------------- | ----------------- | | Boolean | true | false | | String | 非空字符串 | “空字符串” | | Number | 非零数值（包括无穷值） | 0、NaN | | Object | 任意对象 | null | | Undefined | N/A(不存在) | undefined | ::: ## 4 toString() 下面表达式不会出现错误的是 A 2.toString() B 2..toString() C 2 .toString() D (2).toString() :::details 答案：BCD A 2.toString()将会优先将小数点解析为数字小数点,解析成（2`.`）toString B 2..toString()因为连续的两个小数点不符合 number 的格式规则，第二个小数点才会被解析为调用方法 C 、D 都是规范的写法，符合 toString 的标准 ::: # 5 函数作用域下面哪些语句会出现 undefined ```js var a = 1 function bar() { console.log(a) } function foo() { var a = undefined bar() } foo() //1 ``` 因为 bar 虽然是在 foo()种调用的，但它的所用的 a 还是全局变量中的，因为函数调用时会创建自己的执行环境但如果改成立即执行模式，会输出 undefined ```js var a = 1 function foo() { var a = undefined ;(function bar() { console.log(a) })() } foo() //undefined ``` 闭包模式也会输出 undefined ```js var a = 1 function foo() { var a = undefined return function () { console.log(a) } } foo()() //undefined ``` ```js function bar() { console.log(a) } function foo() { a = 5 bar() } foo() //5 ``` 没有用 var 声明，默认是全局变量但如果用了 var 声明，那就会报错，因为此时 a 的作用域只是函数 foo(); ```js function bar(){ console.log(a); } function foo(){ var a = 5; bar(); } foo();a is not defined ``` 还有一种情况就是，出错的原因是因为在 a 被编译前就调用了，只要把输出语句放在调用语句后就可以了 ```js function foo() { a = 5 } console.log(a) //a is not defined foo() ``` ```js function foo() { a = 5 } foo() console.log(a) //5 ``` ## 6 数组越界相加这部分涉及加法运算符的问题，可以取看一下 js 高级程序设计（4）P68 ```js var x = [0, 1, 2, 3] x.length = 2 console.log(x[1] + x[2]) NaN ``` ```js var x = [0, 1, 2, 3] x.length = 2 console.log(x[1] + x[2]) //一个数值加一个undefined，结果为NaN //js高4 68 //对于undefined和null，调用String函数，分别获得字符串"undefined"和"null"" var b = [5, 8, 6] var a console.log(a + b) //undefined5,8,6 console.log(b[1] + b[2]) //NaN,undefined+undefined console.log(b.length) //0 console.log(typeOf(b[1])) //undefined ``` ## 7 数组的基本操作 ```js var arr1 = 'john'.split('') var arr2 = arr1.reverse() var arr4 = [...arr1.reverse()] //这样才会改变 var str = 'jones' var arr3 = str.split('') arr2.push(arr3) //作为一个整体放入，而不是单个，是数组 arr4.push('abc') console.log('array1:length is ' + arr1.length + ' last ' + arr1.slice(-1)) console.log('array2:length is ' + arr2.length + ' last ' + arr2.slice(-1)) console.log(arr1) //arr1和arr2指向同一个地址 console.log(arr2) console.log(arr3) console.log(arr4) //arr4自己有一块内存空间，不和1和2指向同一块 console.log(str) //不改变原数组 ``` 输出： ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.3eynual9zfi0.png) 这道题有好几个知识点 ### 7.1 split split() 方法用于把一个字符串分割成字符串数组如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。 `注意：` split() 方法不改变原始字符串。，而是返回一个新的数组 | 参数 | 描述 | | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | | _separator_ | 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。省略则输出原字符串 | | _limit_ | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 | ```js var str = 'How are you doing today?' var n = str.split('o') console.log(n) //["H", "w are y", "u d", "ing t", "day?"] var str = 'How are you doing today?' var n = str.split(' ', 3) console.log(n) //["How", "are", "you"] var str = 'How are you doing today?' var n = str.split('') //分割每个字符，包括空格 console.log(n) //["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", // "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"] ``` 返回值 | 类型 | 描述 | | :---- | :-------------------------------------------------------------------------------------------------------------------------------------- | | Array | 一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。 | ### 7.2 slice substring 和 slice 的区别（substr） 1. 它们都接收两个参数，`slice`和`substring`接收的是起始位置和结束位置（不包含结束位置），`substr`接收的则是起始位置和所要返回的字符串长度 ```js const test = 'hello world' console.log('slice ->', test.slice(4, 7)) //o w console.log('substring ->', test.substring(4, 7)) //o w console.log('substr ->', test.substr(4, 7)) //o world ``` 2. 当接收的参数是负数时，`slice`会将它字符串的长度与对应的负数相加，结果作为参数，也就是从倒数开始；`substr`则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数；`substring`则干脆将负参数都直接转换为 0。 ```js const test = 'hello world' console.log('slice ->', test.slice(-3)) //rld console.log('substring ->', test.substring(-3)) //hello world console.log('substr ->', test.substr(-3)) //rld //相当于slice(8,9) console.log('slice ->', test.slice(-3, -2)) //r //相当于substring(0,0) console.log('substring ->', test.substring(-3, -5)) //没有输出 //相当于substr(0,-4) //返回的字符串长度为负数，被当作0处理 console.log('substr ->', test.substr(3, -4)) //没有输出 ``` `substr` _length_ 原则上不该为负数，若强行传递负数，会被当成 0 处理，那么该方法返回的就是一个空串（即长度为 0 的字符串）。 3. substring(): 用于提取字符串中介于两个指定下标之间的字符 `stringObject.substring(start,stop)` | 参数 | 描述 | | :------ | :----------------------------------------------------------------------------------------------------------------------------------- | | _start_ | 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 | | _stop_ | 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。 | 返回值：一个新的字符串，该字符串值包含 _stringObject_ 的一个子字符串，其内容是从 `start` 处到 `stop-1`处的所有字符，其长度为 `stop`减 `start`。说明： - `substring()`方法返回的子串包括 `start`处的字符，但不包括 `stop`处的字符。 - 如果参数 `start` 与 `stop`相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 `start` 比 `stop`大，那么该方法在提取子串之前会先交换这两个参数。例如： substr(5,-3) =>substr(5,0) =>substr(0,5); `因为强行传递负数，所以会先转换为0，又因为start比stop大，所以交互这两个参数` `重要事项：`与 [slice()](https://www.w3school.com.cn/jsref/jsref_slice_string.asp) 和 [substr()](https://www.w3school.com.cn/jsref/jsref_substr.asp) 方法不同的是，substring() 不接受负的参数。若强行传递负数，在执行时会被当成 0 处理。 4. slice()：提取字符串的某个部分，并以新的字符串返回被提取的部分。 `stringObject.slice(start,end)` | 参数 | 描述 | | :---- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | | start | 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。 | | end | 紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。 | 返回值：一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。说明： - String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。 - 还要注意的是，String.slice() 与 Array.slice() 相似。 5. substr：substr() 方法可在字符串中抽取从 _start_ 下标开始的指定数目的字符。 `stringObject.substr(start,length)` | 参数 | 描述 | | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | _start_ | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 | | _length_ | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 _stringObject_ 的开始位置到结尾的字串。 | 返回值：一个新的字符串，包含从 _stringObject_ 的 _start_（包括 start 所指的字符）处开始的 _length_ 个字符。如果没有指定 _length_，那么返回的字符串包含从 _start_ 到 _stringObject_ 的结尾的字符。 `重要事项：`ECMAscript 没有对该方法进行标准化，因此反对使用它。 `重要事项：`在 IE 4 中，参数 _start_ 的值无效。在这个 BUG 中，_start_ 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。 ### 7.3 push push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 `注意：` 新元素将添加在数组的末尾。 `注意：` 此方法改变数组的长度。 ```js var fruits = ['Banana', 'Orange', 'Apple', 'Mango'] console.log(fruits.push('Kiwi', 'Lemon', 'Pineapple')) //返回值是新数组的长度 7 console.log(fruits) //["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"] ``` ### 7.4 reverse reverse() 方法用于颠倒数组中元素的顺序。 `注释：`该方法会改变原来的数组，而不会创建新的数组，返回值是颠倒顺序后的数组 ### 7.5 深拷贝和浅拷贝 `JavaScript`中存在两大数据类型： - 基本类型 - 引用类型基本类型数据保存在在栈内存中引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 1. 浅拷贝浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址在`JavaScript`中，存在浅拷贝的现象有： - `Object.assign` - `Array.prototype.slice()`, `Array.prototype.concat()` - 使用拓展运算符实现的复制这里要说明的一点是扩展运算符(…)是看似是深拷贝，其实是浅拷贝 1. 如果只是一层数组或是对象，其元素只是简单类型的元素，那么属于深拷贝（就是一层拷贝，暂时就理解为深拷贝吧！！！！） ```js let aa = { age: 18, a' } let bb = {...aa}; bb.age = 22; console.log(aa.age); // 18 ``` 2. 如果数组或对象中的元素是引用类型的元素，那么就是浅拷贝 ```js let aa = { 8, ', address: { city: 'shanghai' } } let bb = {...aa}; bb.address.city = 'shenzhen'; console.log(aa.address.city); // shenzhen ``` 所以总的来说对象的扩展运算符(…)是浅拷贝。类似的还有`Object.assign`，`Array.prototype.slice()`, `Array.prototype.concat()` ```js //Object.assign var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka', }, love: function () { console.log('fx is a great girl') }, } var newObj = Object.assign({}, obj) console.log(newObj) //hello // obj.names.name1 = "hello"; //马上改变了 setTimeout(() => { //三秒变化 console.log('hello') obj.names.name1 = 'hello' }, 3000) console.log(newObj) //hello ``` ```js //Array.prototype.slice() const arr1 = ['One', 'Two', 'Three', { a: 2 }] const arr2 = arr1.slice(0) arr2[1] = 'love' arr1[3].a = 'hello' console.log(arr1) // ["One", "Two", "Three",{a:hello}] console.log(arr2) // ["One", "love", "Three",{a:hello}] ``` ```js //Array.prototype.concat() const arr1 = ['One', 'Two', 'Three', { a: 2 }] const arr2 = arr1.concat() arr2[1] = 'love' arr1[3].a = 'hello' console.log(arr1) // ["One", "Two", "Three",{a:hello}] console.log(arr2) // ["One", "love", "Three",{a:hello}] ``` 简单实现一个浅拷贝：（浅拷贝是拷贝一层） ```js function shallowClone(obj) { const newObj = {} for (let prop in obj) { //判断当前是否有这个属性 if (obj.hasOwnProperty(prop)) { newObj[prop] = obj[prop] } } return newObj } var obj = { a: 1, arr: [2, 3] } var shallowObj = shallowClone(obj) console.log(obj.arr[1]) //3 shallowObj.arr[1] = 5 console.log(obj.arr[1]) //被影响了，5 ``` 2) 深拷贝开辟一个新的栈，两个对象属性完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性常见的深拷贝方式有： - \_.cloneDeep() lodash 的使用方法，使用方法可以看[lodash 的中文文档](https://www.lodashjs.com/) - jQuery.extend() - JSON 转换：JSON.stringify()、JSON.parse 缺点：（1）会忽略`undefined`、`symbol`和`函数` （2）无法拷贝 copyObj 对象原型链上的属性和方法（3）当数据的层次很深，会栈溢出 - 手写循环递归缺点：（1）无法保持引用（2）当数据的层次很深，会栈溢出 ```js //_.cloneDeep() //Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。 //首先引入lodash ; const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3], } const obj2 = _.cloneDeep(obj1) console.log(obj1.b.f === obj2.b.f) // false ``` ```js const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3], } const obj3 = obj1 console.log(obj1.b.f === obj3.b.f) //true 浅拷贝指向同一内存 const obj2 = $.extend(true, {}, obj1) console.log(obj1.b.f === obj2.b.f) // false 深拷贝指向不同内存 ``` ```js //JSON转换 const obj = { name: 'A', name1: undefined, name3: function () {}, name4: Symbol('A'), } const obj2 = JSON.parse(JSON.stringify(obj)) //忽略undefined、symbol和函数 console.log(obj2) // {name: "A"} ``` ```js //手写循环 function deepClone(obj, hash = new WeakMap()) { // 如果是null或者undefined我就不进行拷贝操作 if (obj === null) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new RegExp(obj) //不是对象，则返回 if (typeof obj != 'object') return obj //如果是对象的话进行深拷贝 if (hash.get(obj)) return hash.get(obj) let cloneObj = new obj.constructor() //找到的是所属类圆型上的constructor,而原型上的constructor指向的是当前类的本身 hash.set(obj, cloneObj) for (let key in obj) { if (obj.hasOwnProperty(key)) { //递归拷贝 cloneObj[key] = deepClone(obj[key], hash) } } return cloneObj } var obj = { a: 1, arr: [2, 3] } var shallowObj = deepClone(obj) console.log(obj.arr[1]) //3 shallowObj.arr[1] = 5 console.log(obj.arr[1]) //3 没有被影响 ``` 3. 如何区分深拷贝与浅拷贝简单点来说，就是假设 B 复制了 A，当修改 A 时，看 B 是否会发生变化，如果 B 也跟着变了，说明这是浅拷贝，拿人手短，（当然，修改这种情况修改 B，A 也会发生改变），如果 B 没变，那就是深拷贝，自食其力，这里注意一下，通常深拷贝指针会较为复杂的引用类型，也就是 object 类型。向 let a= 1；b=a；这种基本数据类型，虽然 b 不受 a 的影响，但也算不上深拷贝。下面这张图可以看出深拷贝和浅拷贝的区别 ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.3q345inxg540.png) 从上图发现，浅拷贝和深拷贝都创建出一个新的对象，但在复制对象属性的时候，行为就不一样 - 浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象 - 但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象总结： 1. 浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址 2. 深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址 3. 使用场景：实际开发中是非常有用的，后台返回了一堆数据，你需要对这堆数据做操作，但多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝，也就是说：想对某个数组或对象的值进行修改，但是又要保留原来数组或对象的值不被修改，此时就可以用深拷贝来创建一个新的数组或对象，从而达到操作(修改)新的数组或对象时，保留原来数组或对象。参考文章： [深拷贝与浅拷贝的区别，实现深拷贝的几种方法](https://www.cnblogs.com/echolun/p/7889848.html) [深拷贝浅拷贝的区别？如何实现一个深拷贝？](https://mp.weixin.qq.com/s/m0alHaSzbKr7BJCdakPuqQ) ## 8 字符串的操作 ```js var x = "lorem is"x[1]="h"; //不能用这种方法更改console.log(x);console.log(x[1]);//o ``` ## 9 delete 对象的某个属性，以及深拷贝和浅拷贝问题 ```js var x = { a: 1, b: 2 } var y = x y.a = 42 delete y.b console.log(x.a, x.b) delete y.b //不会报错 ``` ## 10 事件捕获与事件冒泡问题假设 DOM 结构为： `

` JS 代码为： document.getElementById('a').addEventListener('click', e => {console.log(1)}); document.getElementById('b').addEventListener('click', e => {e.preventDefault();console.log(2)}); 当点击 id 为 b 的 div 时，控制台输出的内容是：2 1 解析：在 JS 中，绑定的事件`默认`的执行时间是在冒泡阶段执行，而非在捕获阶段，这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件 `几个常见的事件的方法` （红宝书 4 P499） - preventDefault() 取消事件默认行为，如阻止点击提交按钮时对表单的提交（本题中 click 并没有什么默认行为）,只有 cancelable 为 true 时才能调用那个这个方法 - stopImmediatePropagation() 取消后续所有的事件冒泡和事件捕获同时阻止当前节点上的事件处理程序被调用，影响当前的事件 - stopPropagation() 取消后续所有的事件冒泡和事件捕获，不影响事件，bubbles 为 true 时才可以调用 - cancelBubbe() 取消事件默认行为按照 W3C 的标准，是先捕获，再冒泡。但是 addEventListener 的第三个参数是用来设置回调函数是在捕获时触发，还是在冒泡时触发，默认为 false，即冒泡时触发，也就是说上面两个回调函数先执行第二个，再执行第一个。但是有一点需要注意：虽然 W3C 标准是先执行捕获，再执行冒泡，但这是对多个元素而言的。如果对一个元素的某个事件同时设置了捕获和冒泡，那么具体的执行顺序和事件的注册顺序是一样的，谁先注册，谁先执行，我想是和事件循环有关。 _element_.addEventListener(_event_, _function_, _useCapture_)： | 参数 | 描述 | | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------- | | _event_ | 必须。字符串，指定事件名。 `注意:` 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。 | | _function_ | 必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 | | _useCapture_ | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行 | 参考文章： [JS 事件冒泡、事件捕获、事件委托、事件模型](https://www.jianshu.com/p/a9b8a433eb71) [浅淡事件冒泡、事件捕获和事件委托](https://www.cnblogs.com/geter/p/12434750.html) ## 11 splice 返回数组，以及复杂数据类型比较问题 ```js ;[1, 2, 3].splice(1, 1, 1) == [2] //false ``` 1. splice() 方法用于添加或删除数组中的元素。 `注意：`这种方法会改变原始数组 `array.splice(index,howmany,item1,.....,itemX)` | 数 | 描述 | | :-------------------- | :------------------------------------------------------------------------------------------------------------------------ | | _index_ | 必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 | | _howmany_ | 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 | | _item1_, ..., _itemX_ | 可选。要添加到数组的新元素 | | 返回值 | 描述 | | ------ | ------------------------------------------------------------------- | | Array | 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 | 例如：移除数组的第三个元素，并在数组第三个位置添加新元素: ```js var fruits = ['Banana', 'Orange', 'Apple', 'Mango'] fruits.splice(2, 1, 'Lemon', 'Kiwi') console.log(fruits) //["Banana", "Orange", "Lemon", "Kiwi", "Mango"] ``` 从第三个位置开始删除数组后的两个元素： ```js var fruits = ['Banana', 'Orange', 'Apple', 'Mango'] fruits.splice(2, 2) console.log(fruits) //["Banana", "Orange"] ``` 2. 等于号，如果比较的是两个对象，则比较它们是不是同一个对象（是否指向同一块内存空间），如果是则相等，否则则返回 false。 ## 12 原型链知识 ```js let Mi = new Function() Mi.__proto__.__proto__ == Object.prototype //true ``` 1. Object.prototype 只是一个普通对象，它是 js 原型链的最顶端 Object.prototype 只是一个普通对象(普通对象没有 prototype 属性，所以值是 undefined) Object.prototype 是 js 原型链的最顶端，它的`__proto__`是 null(有`__proto__`属性，但值是 null，因为这是原型链的最顶端)。 - `Object.prototype.__proto__ === null`; //true - `Object.prototype.prototype === undefied`;//true 2) 在 js 中如果 A 对象是由 B 函数构造的，那么 `A.__proto__ === B.prototype`。 3) javascript 中对象是由 Object 创建的，函数是由 Function 创建的。内置的 Object 其实也是一个函数对象，它是由 Function 创建的。 - Object.`proto` === Function.prototype; 4) js 中每一个对象或函数都有`__proto__`属性，但是只有函数对象才有 prototype 属性。 ```JS //函数对象 function Person(){ } ``` // 普通对象 var obj = {}; //内置的 Object 是其实也是一个函数对象，它是由 Function 创建的。 console.log(obj.`proto` === Object.prototype);//true //只有函数对象才有 prototype 属性 console.log(obj.prototype === undefined);//true //js 中每一个对象或函数都有`proto`属性 console.log(Person.`proto` === Function.prototype);//true //只有函数对象才有 prototype 属性 console.log(Person.prototype !== undefined);//true ```` 5. 原型链是基于`__proto__`形成的，继承是通过`prototype`实现的。 6. Function.prototype是个特例，它是函数对象，但是没有prototype属性。其他所有函数都有prototype属性。 `Function.prototype.prototype === undefined`;//true 7. 内置的Function也是一个函数对象，它是通过自己来创建自己的。 `Function.__proto__=== Function.prototype`;//true 8. 函数也是对象，因为`Function.prototype__proto__`指向`Object.prototype`。 `typeof Function.prototype.__proto__ === "object"`;//true `Function.prototype.__proto__=== Object.prototype`;//true ## 13 闭包和引用类型 [牛客网链接](https://www.nowcoder.com/test/question/done?tid=45707753&qid=14899#summary) ```js function Foo() { var i = 0; return function() { console.log(i++); } } var f1 = Foo(), f2 = Foo(); f1(); f1(); f2(); ```` 输出结果为 0 1 0 1. 考查的知识点：闭包和引用类型 - Function 是引用类型：保存在堆中，变量 f1,f2 是保存在栈中； - 一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁，但是此题 foo 函数返回了一个匿名函数的引用（即一个`闭包`），它可以访问到 foo()被调用产生的环境，而局部变量 i 一直处在这个环境中，只要一个环境有可能被访问到，它就不会被销毁，所以说闭包有延续变量作用域的功能。 - 一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内，但是一旦离开了这个函数，局部变量就无法访问，所有通过返回子函数到一个变量 f1 的方法，让 f1 指向堆中的函数作用域，这样可以使用局部变量 i. 2. 执行过程 - 第一次 f1: f1=Foo()中，先执行 Foo(): i = 0,return 值返回给 f1 (f1 指向子函数 f1()=function(){console.log(i++);}, 因为子函数没有定义 i，所以向上找到父函数定义的 i)并执行子函数输出 i=0,再自加 i =1(覆盖了父函数 Foo 的 i 值); - 第二次 f1() : 执行的是子函数 {console.log(i++);}输出的是父函数的 i=1,再自加 i =2; - 第一次 f2():同第一次 f1(),不同的是 f2 指向堆中一个新的对象 function(){ ...},所有此 i 非彼 i,输出 i=0; 如果再次 f2(),那么和第二次 f1(),一样输出 i=1; 3. 易错点：f1 和 f2 都=foo()是都指向了同一个 function 引用类型，但 foo()返回的一个匿名函数，所以 f1 和 f2 相当于指向了两个不同的函数对象。 ## 14 局部变量和传参 [牛客网](https://www.nowcoder.com/test/question/done?tid=45707753&qid=14917#summary) ```js ``` 1. 结果为 2 1 2. 考察的知识点：这道题考察是局部变量和传参 3. 解析：简略解析：在 aa 函数中，bb 是以传值的方式传入的，在函数中，会重新定义一个 bb 变量，并将其值覆为 2，并不影响函数体外的 bb 变量，所以其值仍然为 1. 详细解析：函数体内，bb 并没有使用 var 来定义，按理说这个 bb 在预处理的时候应该是 window 的属性。但在这里，函数声明的时候，带了一个参数 bb，也就是相当于在函数体内声明了 var bb。所以，函数里的 bb 就是函数活动对象的属性。所以函数执行时会输出 2。函数执行完后，函数的活动对象被销毁，也就是局部的这个 bb 被删除了，执行流进入到 window，再输出 bb，值就是 1 了 ## 15 宏任务和微任务 ```js console.log(1) setTimeout(function () { console.log(2) }, 0) new Promise((resolve) => { console.log(3) resolve() }).then(() => { console.log(4) }) console.log(5) //正确答案 1 3 5 4 undefined 2 ``` `解析：` 1. `script`是一个宏任务，按照顺序执行这些代码，先打印`1`; 2. 遇到定时器`setTimeout`，它是一个宏任务，放入宏任务队列; 3. 首先进入`Promise`，执行该构造函数中的代码，打印`3`; 4. 碰到`resolve`函数，将`Promise`的状态改变为`resolve`，并将结果保存下来; 5. 碰到`Promise.then`这个微任务，将它放入微任务队列; 6. 继续往下走，输出`5`; 7. 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行），所以执行`.then()` 输出`4` 8. 接着执行`resolve`输出`undefined` 9. 微任务队列执行完毕之后，检查宏任务队列，最后执行定时器(宏任务)输出`2` 微任务包括了 promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。宏任务包括了 script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。 ## 16 parentInt ```js console.log([1, 2, 3, 4].map(parseInt)) ``` 输出一个数组 [1, NaN, NaN, NaN] 这道题考察的点： 1. 对数组`map`方法的掌握 2. 对`parseInt`函数的了解 3. 考察对进制转化的掌握 4. parseInt 与 parseFloat 有何区别解析： map 迭代过程如下：、 [1，2，3，4].map(parseInt) 就是将数 1，2，3 作为元素；`0，1，2`作为下标分别调用 parseInt 函数。即分别求出 parseInt('1',0), parseInt('2',1), 1. `parseInt(1, 0)`, 前面讲到 `parseInt`第二个参数不传、传的是`0`或者`undefined`,默认当做十进制处理，输出结果为：1 ; 2. `parseInt(2, 1)`, 第二个参数为 1，不在 2-36 之间, 返回结果 NaN; 3. `parseInt(3, 2)`, 将 3 作为二进制转换为十进制整数，但是二进制只有 0 和 1，找二进制数字就什么都没有找到，所以输出 NaN ； 4. `parseInt(4, 3)`，这里也是，4 不是 3 进制中数字，输出结果 NaN 这道题的答案就出来了: `1 NaN NaN NaN` ### map 数组的 map 方法，是 ES5 中为数组定义的迭代方法，返回结果是一个新数组，其结果是该数组中的每一个元素调用一次提供的函数后的返回值： ```js var new_array = arr.map(function callback(currentValue[, index[, array]]) { // 新数组的返回元素}[, thisArg]) ``` `参数：` - callback：数组迭代的每一项执行的回调函数，可以有三个参数： - - currentValue：当前迭代项 - index:当前迭代项的索引 `(可选)` - array: map 方法调用的数组`(可选)` - thisObject：在执行回调函数时定义的 this 对象(没有传递或者为 null，将会使用全局对象)。 ### parseInt `p37` `语法` ``` parseInt(string, radix); ``` `返回值` 从给定的字符串中解析出一个整数，或者`NaN`。关于返回`NaN`: - radix 小于 2 或大于 36 - 第一个`非空格字符`不能转换为数字（第一个字符不是数值字符，加号或减号）也就是空字符串也会返回 NaN `parseInt(string, radix)` 解析一个字符串并返回指定基数的十进制整数， radix 是 2-36 之间的整数，表示被解析字符串的基数。 `parseInt 转化规则` > 1. 如果第一个参数传入的不是字符串，首先会默认将传入的参数转为字符串（使用`toString`） > 2. 从左边开始查找有效数字字符，转为数字；当遇到非有效数字字符，则停止查找举几个例子： ```JS parseInt(12); // 12parseInt('20px') // 20parseInt("p20") //NaN ``` 通过上面的代码，结合转化规则来看: `parseInt(12)`,首先是将数值`12`转为字符串`'12'`, 然后再转为整数。 `parseInt('20px')`,从左边开始查找，当找到字符`p`时，发现是非有效字符，停止查找，对已找到的有效数字进行转换，所以结果是将字符串`'20'`转为整数。 parseInt("p20")`,当第一个字符不能转为数字，`parseInt`会返回`NaN radix 的规则 - parseInt 是将`radix`进制的字符串`转为十进制的整数`（很多人弄混成：转成 radix 进制的整数）。也就是说 parseInt 返回的的结果只能是`十进制的整数`或者`NaN` - `radix`如果为`undefined`、0 或者未指定的： - - 一般情况下，`radix`为 10(十进制) - 如果`string`传入的是以`0x`(一个 0，后面是小写或大写的 X)开头，那么`radix`就会被当作传入的为 16， `string`就被的看作 16 进制去解析 - `radix`是在 2-36 之间的整数，表示 2-36 进制; 如果不在 2-36 之间，最后返回结果都是`NaN` 同样举几个例子，结合规则看一下： ``` parseInt('0x11') // 17parseInt('10', 2) // 1parseInt('12', 2) // 1 ``` - `parseInt('0x11')`省略了`radix`参数，并且以`0x`开头，那么就将`0x11`看作 16 进制来解析，`11`转为十进制整数，结果为 17 - `parseInt(’10‘, 2)`, `radix`传入 2，将`'10'`看作 2 进制，转换成十进制整数就是 1。 - `parseInt('12', 2)`, 这个转换结果也为 1, 这里又有一个坑需要注意，当解析到字符串`'2'`时，发现是非有效数字，（有的人可能会说：2 怎么不是有效数字了！！），咳，这里要注意，我们是将`'12'`看作二进制的，二进制只有`0`和`1`,所以`2`当然不是有效数字，将字符串`'2'`忽略，转换结果就是 1。 ### 再来一题 ```js var arr = [10, 18, 0, 10, 42, 23]arr = arr.map(parseInt)console.log(arr) //[10, NaN, 0, 3, NaN, 13] ``` 1. `parseInt(10, 0)`, 前面讲到 `parseInt`第二个参数不传、传的是`0`或者`undefined`,默认当做十进制处理，输出结果为：10 ; 2. `parseInt(18, 1)`, 第二个参数为 1，不在 2-36 之间, 返回结果 NaN; 3. `parseInt(0, 2)`, 将 3 作为二进制转换为十进制整数，所以输出 0 ； 4. `parseInt(10, 3)`， 10 是 3 进制中数字，输出结果 3 5. `parseInt(42, 3)`， 4 是不是 4 进制中数字，输出结果 NaN 6. `parseInt(23, 3)`， 23 是 5 进制中数字，输出结果 13 [透过网红面试题，超级详细的解析 parseInt](https://mp.weixin.qq.com/s/LXQ7txDrPFiytRQfn_EObg) ## 17 typeof typeof null 和 null instance of Object 的运行结果是 A : null false B : “object” false C: “object” true D: 其他选项都不对 :::details 答案： B 解析： typeof 其他基础都能得到正确的答案，比如 typeof undefined 为“undefined” ，typeof ”abc” 为“string”，但 typeof null 却是 object，这是一个古老的 bug，没有什么，自娘胎带出来的，具体可以参考这是个历史遗留 bug, 参考 [typeof - JavaScript](https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 还有一个特殊的是 typeof 一个函数，显示的不是 object 而是 function 记住这两个特殊就可以了，经常考而 null 它是没有显式原型的，所以 instanceof 任何东西都会显式 false，而如果你直接输出`null.__proto__`则会报这样的一个错误：`TypeError: Cannot read property '__proto__' of null`，undefined 和 null 也是类似的，也会报错：`TypeError: Cannot read property '__proto__' of undefined` ::: ## 18 window 对象以下不属于 JavaScript 中 window 的子对象的是 A: document B: history C: message D：self :::details 答案：D A B 都没有疑问，肯定是 window 的子对象，我们也用到比较多，主要纠结的就是 C 和 D，这两个都没怎么用，所以大多情况下只能二选一了，这道题不难，这要是看你 API 的熟练程度。 self 属性返回指向当前 window 对象的引用，利用这个属性，可以保证在多个窗口被打开的情况下，正确调用当前窗口内的函数或属性而不会发生混乱。 self 属性是只读的 `注：`window、self、window.self 是等价的。其他的 window 身上的属性和方法参考[菜鸟教程](https://www.runoob.com/jsref/obj-window.html) ::: ## 19 parseInt 和 toString `parseInt("1bar0").toString(2)`的输出结果为？ A: 10 B: 1010 C: 1 D: NaN :::details 答案：C 这里考的主要有两点：parseInt 和 toString 的用法。 parseInt 可能大家都比较熟。不熟的请自行翻开红宝书（我用的是第四版）第 37 页去瞅一眼。【什么，你居然没有这本书，赶紧去买一本，睡不着就去看一眼，睡得贼香(狗头保命)】这里简单说一下，`parseInt()`函数相比于 Number 更专注于字符串是否包含数值模式。转换时字符串最前面的空格会被忽略，从第一个非空格字符开始转换，如果第一个字符不是数值，加号或减号，那么就会立刻返回 NaN（这一点和`Number()`，`Number()`会返回 0）。如果是数值，加号或减号开头，那么就会依次检查每一个字符，知道遇到非数值字符或者到了字符串末尾。比如`1234blue`会被转换为`1234`，`22.5`会被转换为`22`，因为小数点在`parseInt`看来不是有效字符，就是这么人性，如果浮点数要想正确转换，请出门右拐（往后翻一也）找它的兄弟`parseFloat()`。回到这道题，`parseInt("1bar0")`会输出`1` 接下来看 toString 这里的知识点是 toString 的参数，估计有一小部分人平常用 toString 都是直接写`toString()`，而没有关注人家的参数。 toString 的语法是：`number.toString(radix)` `radix`，老朋友了，parseInt 也有它。radix 表示进制，。规定表示数字的基数，是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是 10 以外的其他值。注意的是 parseInt 超过 36 进制会返回 NaN，而 toString 会报错。 ::: ## 20 数组和 toString `new Array(5).toString()`会输出什么? A: “[]” B: “” C: [] D: “,,,,” :::details 答案：D 首先我们在来看一道题`[1,2,3,4,5].toString()`会输出什么？很多人都知道答案是`“1,2,3,4,5”`。但很多人会忽略的是，其实对一个空数组使用`toString`方法，也会返回以`,`分割的字符串，因为数组的`toString`是把每个数组的元素以`,`分割的字符串返回的。对象的`toString`返回的是特定的类型`[object 类型]`；所以即使是空数组【其实严格来说不算是空数组，空数组应给是`一个长度为0的数组`，这个数组没有元素而已】，但数组的长度为 5，所以使用`toString`会返回四个`,`的字符串（注意是 4 个啊） ::: ## 21 == [多项选择题] JavaScript 中关于==运算符说法正确的是？ A：new String("hello QAX")== new String("hello QAX") B：false == '0'+'0' C：null == undefined D：false == null :::details 答案：BC ```js console.log(new String('hello QAX') == new String('hello QAX')) //false console.log(false == '0' + '0') //true console.log(null == undefined) //true console.log(false == null) //false ``` A：字符串是对象，所以 new String 相当于开辟了不同的空间，连个对象进行比较，比较的是地址，如果换成`new String("hello QAX")=="hello QAX"`就对了，因为`==`一个对象，一个字符串，首先会进行对对象调用 valueof 来获取原始值在进行比较，注意的是`===`不会转换操作数，如果换成`===`则为 false B：等号右边首先会进行字符串的相加变为`“00”`，在进行比较的时候，如果有任一操作数是布尔值，则要进行数值转换在比较相等，所以`false`被转换为`0`，而如果有一个操作数是字符串，一个操作数是数值，则需要把字符串转换为数值在进行比较，所以字符串`“00”`会变为数字`0`，所以相等。 C：`“==”`规定，null 和 undefined 不能转换为其他类型在进行比较，且`null==undefined` D：如果有任一操作数是布尔值，则要进行数值转换在比较相等，所以`false`被转换为`0`，而 null 和 undefined 不能转换为其他类型在进行比较，所以为最终是`0==null`为 false ::: ## 其他琐碎的知识点 1. 在标准的 JavaScript 中， Ajax 异步执行调用基于`Event`和`callback`机制才能实现 2. ES5 forEach(), filter(), reduce(), every() 和 some()都会跳过空位。 map()会跳过空位，但会保留这个值 join()和 toString()会将空位视为 undefined，而 undefined 和 null 会被处理成空字符串。 ES6 中都会将空位当做 undefined