--- theme: smartblue highlight: atom-one-dark --- ## 前言上个月阅读了一本好书```你不知道的JavaScript```，特在此记录下```从第1章到第3章```的学习笔记及引发的知识点扩展(包含手敲代码尝试及```翻阅各路大神笔记```的```free style```，在文中我均以注明出处，并加入了一些```自己的思考和扩展```)。各位看官可以选择自己感兴趣的部分进行阅读，相信大家看完一定会有所收获。同时，文章很多总结都来源于个人理解，可能会存在误区。大家如有任何疑问，欢迎在评论区指出哦~ ## 0. 数据类型 1. ```JavaScript```有八种内置数据类型(基本类型：```缩写为：nnsbusb(基本类型首字母集合，方便记忆)```，引用类型： ```object```)。其中，```nnsbusb(number、null、symbol、BigInt、undefined、string、boolean)```是```基本类型```， ```object是引用类型。``` - **数字(number)** - **空值(null)** - **符号(symbol, ES6新增)** - **BigInt** - **未定义(undefined)** - **字符串(string)** - **布尔值(boolean)** - **对象(object)** 2. 可以使用```typeof```运算符查看类型(记录几种结果): ```js // typeof返回结果为首字母小写的字符串 // typeof这两个单词首字母都是小写字符 typeof undefined "undefined" NaN也是一个数字，只不过是无效数值或者坏数值 typeof NaN 'number' // ES6中新加入的类型 typeof Symbol() "symbol" typeof {life: 42} "object" typeof [1,2,3] "object" typeof null "object" // 真正检测是否为null的方法 var a = null; (!a && typeof a === "object"); // true typeof function a(b,c){ /* .. */ } "function"; 返回函数的命名参数b和c a.length; // 2 typeof typeof 42; // "string" ```` 3.```undefined```和```undeclared``` ```js var a; a; // undefined(未定义) b; // ReferenceError: b is not defined(其实是undeclared，未声明) ``` 4.```关于Symbol``` （参考: [公司大佬的github博客](https://yang-zebo.github.io/)) ```js // Symbol值都是唯一的，它能作为对象属性的标识符。 // Symbol 不用 new 直接使用就行 let smb0 = Symbol('abc') let smb1 = Symbol('abc') // 还是新创建的一个 smb0 === smb1 // false Symbol.for 有自己的一个注册池，使用 Symbol.for 时会看看注册池里有没有注册过，如果没有就会注册一个 Symbol 值，并把这个值放入注册池，如果有，就把注册过的那个 Symbol 值拿出来使用 let smb2 = Symbol.for('abc') // 对全局进行注册并保存 let smb3 = Symbol.for('abc') // 从全局注册中获取 smb3 === smb2 // true ``` 5.```关于BigInt``` （参考: [公司大佬的github博客](https://yang-zebo.github.io/)) `BigInt`，它提供了一种方法来表示大于 `2^53 - 1` 的整数。`2^53 - 1`是 `Javascript` 中可以用 `Number` 表示的最大数字。可以用 `Number.MAX_SAFE_INTEGER`（最大安全数）来得到`2^53 - 1`这个最大值。但是这个值再大之后就会导致`Js`计算不准确。`BigInt` 可以展示任意大的整数。可以解决这个问题。 ```js let max = Number.MAX_SAFE_INTEGER; // 最大安全整数 let max1 = max + 1 let max2 = max + 2 max1 === max2 // true 超出阈值，计算不准确 BigInt 也不用 new 直接使用，BigInt 类型的值不能与普通的数值相加 // let bi1 = 9007199254740991n 与下一行代码效果一致，数字后加一个 n 是 BigInt 的字面量创建方式 let bi1 = BigInt(Number.MAX_SAFE_INTEGER) let max3 = bi1 + 1n let max4 = bi1 + 2n max3 === max4 // false ``` ## 1. 值 ### 1. 数组 **数组可以容纳任何类型的值，可以是字符串、数字、对象（object），甚至是其他数组（多维数组就是通过这种方式来实现的)** ```js var a = [ 1, "2", [3] ]; a.length; // 3 a[0] === 1; // true a[2][0] === 3; // true ``` **对数组声明后即可向其中加入值，不需要预先设定大小** ```js var a = [ ]; a.length; // 0 a[0] = 1; a[1] = "2"; a[2] = [3]; a.length; // 3 ``` **在创建“稀疏”数组（sparse array，即含有空白或空缺单元的数组）时要特别注意：** ```js var a = [ ]; a[0] = 1; // 此处没有设置a[1]单元 a[2] = [ 3 ]; a[1]; // undefined a.length; // 3 ``` **数组通过数字进行索引，但有趣的是它们也是对象，所以也可以包含字符串键值和属性（但这些并不计算在数组长度内):** ```js var a = []; a[0] = 1; a["foobar"] = 2; a.length; // 1 a["foobar"]; // 2 a.foobar; // 2 ``` **这里有个问题需要特别注意，如果字符串键值能够被强制类型转换为十进制数字的话，它就会被当作数字索引来处理:** ```js var a = [ ]; a["13"] = 42; a.length; // 14 ``` **数组展开方法:** ```js let arr= [1,2,[[3,4],[5,6]]] console.log(arr.flat(Infinity)); // 展开所有嵌套层 [ 1, 2, 3, 4, 5, 6 ] console.log(arr.flat()); // 默认展开一层，得到 [ 1, 2, [3,4],[5,6] ] console.log(arr.flat(1)); // [ 1, 2, [3,4],[5,6] ] console.log(arr.flat(2)); // [ 1, 2, 3, 4, 5, 6 ] ``` **数组填充方法fill: [MDN之fill传送门](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)** ```js 1.重在理解fill函数的参数: arr.fill(value, start, end) `value`: 用来填充数组元素的值。 `start(可选)`: 填充的起始索引，默认为0。 `end(可选)`: 终止索引，默认为`this.length`。 2.new Array(11).fill([1,2])创建二维数组时所有的[1,2]都会指向同一个数组，这也就意味着，修改数组中某一个数组的值，数组中其它数组的值也会相应发生变化。 ``` ### 2. 类数组 **一些 DOM 查询操作会返回 DOM 元素列表，它们并非真正意义上的数组，但十分类似。另一个例子是通过 arguments 对象（类数组）将函数的参数当作列表来访问（从ES6 开始已废止）。** ```js function foo() { // 方法一 // 改变array的this指向,使其指向arguments // 或者[].slice.call(arguments) // [] instanceof Array true `注意：箭头函数中没有自己的arguments和this，但是this可以来自于箭头函数的上下文, arguments可以从闭包父级作用域的arguemnts中得到` var arr = Array.prototype.slice.call(arguments); // 方法二 var arr = Array.from(arguments); // 方法三 var arr = [...arguments] ; arr.push("bam"); } foo("bar", "baz"); // ["bar","baz","bam"] `说起类数组，不得不提对象的类数组形式，需要在最后返回一个length(且这个key的value必须为正数,否则用slice会返回[])：` Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) // [a, b] Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 1 }) // [a] ``` **call方法用于修改this的指向并立即执行，一个函数后面直接加```.call()```，表示直接执行函数。** ```js 求一个数组中的最大值(call和apply都会改变函数内部this指向，并执行函数) 方法一：Math.max.call(...[1,2,3]) 方法二：Math.max.call(null,...[1,2,3]) 方法三：Math.max.apply(null,[1,2,3]) // apply方法会自动展开数组，供Math.max方法传参 ``` **call方法还有一个重要的用法就是继承:** ```js 使用call方法可以使子构造函数继承父构造函数的属性和方法 function Father(uname, age, sex) { this.uname = uname this.age = age this.sex = sex } function Son(uname, age, sex) { 使用call方法调用Father方法，并将Father构造函数实例的this指向子构造函数的实例 Father.call(this, uname, age, sex) } var son = new Son('刘德华', 18, '男') // console.log(son) // Son {uname: '刘德华', age: 18, sex: '男'} ``` **使用bind方法返回的是原函数改变this之后产生的新函数。如果有些函数我们不需要立即调用，但是又想改变这个函数内部的this指向，此时使用bind方法。eg:** ```js var a = {name: 'fl'} // 定义一个函数fn fn.bind(a) // 这个返回的是函数，如果需要执行，需要在其后再加入一个() 比如我们有一个按钮，当我们点击之后，就禁用这个按钮，并在3秒之后开启这个按钮 var btn = document.querySelector('button') 错误的写法1： btn.addEventListener('click', function () { this.disabled = true setTimeout(function () { this.disabled = false // setTimeout是window.setTimeout,其中的this指向window，因此无效 },3000) }) 正确的写法(推荐)： btn.addEventListener('click', function () { this.disabled = true // 这个this指向的是btn这个按钮 setTimeout(function () { // 定时器函数里面的this 指向的是window this.disabled = false }.bind(this), 3000) // 此时定时器里面的this指向了btn // 这里使用this最好，不会随btn名称的变化而变化 // bind()是在定时器的外面绑定的，所以这个this指的是btn这个对象 }) 正确的写法(通过定义一个全局变量来改变this指向，不推荐)： btn.addEventListener('click', function () { this.disabled = true var that = this setTimeout(function () { that.disabled = false }, 3000) }) ``` ```js `在同一个页面，光标只能在一处聚焦，无法多处聚焦` 比如我们有多个按钮，对每个按钮，当我们点击之后，就禁用这个按钮，并在3秒之后开启这个按钮 var btns = document.querySelectorAll('button') for(var i = 0; i < btns.length; i++) { btns[i].onclick = function() { this.disabled = true // 指向循环的每一个btn setTimeout(function(){ // 这里不能用btns[i].disabled = false,因为随着for循环完，这里变成3 // 除非把var改成let,形成块级作用域 this.disabled = false }).bind(this),2000) } } ``` **```this.function()```代表立刻执```function```函数,```this.function```代表调用函数。** **扩展： [call、bind、apply的区别](https://www.runoob.com/w3cnote/js-call-apply-bind.html)** **[MDN之slice方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)** ```js `slice方法用于截取数组中的数据，两个参数(从0开始，包含起始项，不包括结束项)` `参数可以为字符串或者汉字等，此种情况下返回为空数组` `如果参数为浮点数，则会将参数向下取整，没有结果则返回空数组` `` slice数组浅拷贝，如果数组里面是基本数据类型 const a = [1,2,3] const b = a.slice() b[0] = 4 // b [4,2,3] // a [1,2,3] 如果数组里面是对象类型 const d = [{name: '1',age: 20}, {name: '2',age: 30}] const e = d.slice() d[0].name = "3" // d和e中的第一个name属性的值都变成了3 ``` ### 3. 字符串 **字符串具有一些和数组一样的方法:** ```js var a = "foo"; var b = ["f","o","o"]; a.length; // 3 b.length; // 3 a.indexOf( "o" ); // 1 b.indexOf( "o" ); // 1 var c = a.concat( "bar" ); // "foobar" var d = b.concat( ["b","a","r"] ); // ["f","o","o","b","a","r"] JavaScript 中字符串是不可变的，而数组是可变的。 a[1] = "O"; b[1] = "O"; a; // "foo" b; // ["f","O","o"] charAt(1) 表示获取字符串第二位的值,不能赋值 a.charAt(1) = "O" // 此种方法会报错，因为是获取值而不是赋值 charCodeAt(index) 获取字符串第index位置上的字符的ASCII码 'Flavio'.charCodeAt(0) //70 'Flavio'.charCodeAt(1) //108 'Flavio'.charCodeAt(2) //97 `在此记录下：字符串类型的includes方法` `接收两个参数，第一个参数为待搜索的字符串，且只能为字符串或者数字，如果是数字，则会自动转换为字符串，第二个参数为索引位置, 从0开始。如果不提供任何参数，会返回false` var str = 'To be, or not to be, that is the question.' str.includes('To be', 1) // false str.includes('To be', 0) // true 扩展：那么如何修改字符串对应位置的值呢？ // 1. 将第一个出现的指定字母转换为其它字母 "hello".replace("l","a") //'healo' // 2. 将所有出现的指定字母转换为其它字母 "hello".replaceAll("l","a") //'heaao' // 3. 将指定索引位置的字符转换为其它字符 // 比如将'hello'第三位字符变为'a' // 方法一(通过字符串的substring方法去截取)： // 自己封装的一个小方法: function getString(string,index,char) { if(typeof string == 'string' && typeof index == 'number' && index <= string.length) { return string.substring(0, index - 1) + char + string.substring(index, string.length) } else if(typeof string != 'string') { throw new Error("请输入字符串") } else if(index > string.length) { throw new Error("修改的索引值不能超过字符串长度") } } getString('hello',3,'a') // 方法二（先将字符串转换为数组，对数组操作后，再转换为字符串） // 就不封装方法了 const arr = "hello".split("") arr[2] = "a" arr.join("") ``` **字符串反转(面试常考):** ```js 对于split方法需要特别主要的是: 将字符串转换为数组 // "hello world".split() // ['hello world'] // "hello world".split('') // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd'] // "hello world".split(" ") // ['hello', 'world'] `"hello, world".split('l') // ['he', '', 'o, Wor', 'd']` 对于join方法需要特别注意的是: 将数组转换为字符串 //['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd'].join() // 'h,e,l,l,o, ,w,o,r,l,d' //['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd'].join('') // 'hello world' // 第一种方法： var c = a .split("") // 将数组中的字符进行倒转 .reverse() // 将数组中的字符拼接回字符串 .join(""); // 第二种方法： var c = [...a].reverse().join(""); c; // "oof" 重点:字符串运用展开运算符： [..."hello world"] // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd'] ["hello world"].reverse().join("") // 'hello world',因为数组只有一项 ["hello world","a"].reverse() // ['a', 'hello world'] ["hello world","a"].reverse().join(""); // 'ahello world' ``` **字符串不可变是指字符串的成员函数不会改变其原始值，而是创建并返回一个新的字符串。而数组的成员函数都是在其原始值上进行操作。** ```js c = a.toUpperCase(); a === c; // false a; // "foo" c; // "FOO" b.push( "!" ); b; // ["f","O","o","!"] ``` **重点：虽然字符串没有这些函数，但可以通过“借用”数组的非变更方法来处理字符串：** ```js a.join; // undefined a.map; // undefined 使得字符串类型具有join的作用 // var c= [].join.call(a,"_"); var c = Array.prototype.join.call( a, "-" ); 使得字符串类型具有map的作用 var d = Array.prototype.map.call( a, function(v){ return v.toUpperCase() + "."; } ).join( "" ); c; // "f-o-o" d; // "F.O.O." // 下面这种方式会报错，因为字符串具有不变性 Array.prototype.reverse.call( a ); ``` ### 4. 数字 **JavaScript 中的数字字面量一般用十进制表示。** ```js // 小数点前面的 0 可以省略： var a = 0.42; var b = .42; // 小数点后小数部分最后面的 0 也可以省略： var a = 42.0; var b = 42.; var a = 5E10; a; // 50000000000 // 转换为指数形式 a.toExponential(); // "5e+10" var b = a * a; b; // 2.5e+21 var c = 1 / a; c; // 2e-11 ``` **toFixed()方法和toPrecision()方法** ```js var a = 42.59; a.toFixed( 0 ); // "43" a.toFixed( 1 ); // "42.6" a.toFixed( 2 ); // "42.59" a.toFixed( 3 ); // "42.590" a.toFixed( 4 ); // "42.5900" // 特别注意: // 无效语法：重点: JS引擎无法确定这里的`.`是什么意思，是点运算符（对象方法）还是浮点数 // 42.toFixed(3) 是无效语法，因为.被视为常量 42. 的一部分（如前所述）， // 所以没有.属性访问运算符来调用 toFixed 方法。 // 1.toString()同样也会因为这个原因而报错 42.toFixed( 3 ); // SyntaxError // 下面的语法都有效： (42).toFixed( 3 ); // "42.000" 0.42.toFixed( 3 ); // "0.420" 42..toFixed( 3 ); // "42.000" 42 .toFixed(3); // "42.000" var a = 42.59; // toPrecision(..) 方法用来指定有效数位的显示位数： a.toPrecision( 1 ); // "4e+1" a.toPrecision( 2 ); // "43" a.toPrecision( 3 ); // "42.6" a.toPrecision( 4 ); // "42.59" a.toPrecision( 5 ); // "42.590" a.toPrecision( 6 ); // "42.5900" // 指数形式 var onethousand = 1E3; // 即 1 * 10^3 var onemilliononehundredthousand = 1.1E6; // 即 1.1 * 10^6 ``` **重点：判断0.1 + 0.2和0.3是否相等** ```js // 通过比较两个数差值的绝对值是否小于机器精度2^-52 (2.220446049250313e-16)来判断 function numbersCloseEnoughToEqual(n1,n2) { return Math.abs( n1 - n2 ) < Number.EPSILON; } var a = 0.1 + 0.2; var b = 0.3; numbersCloseEnoughToEqual( a, b ); // true numbersCloseEnoughToEqual( 0.0000001, 0.0000002 ); // false ``` **最小/大整数和最大/小浮点数** ```js Number.MAX_VALUE // 最大浮点数 1.798e+308 Number.MIN_VALUE // 最小浮点数 5e-324 Number.MAX_SAFE_INTEGER // 最大整数 2^53 - 1(9007199254740991) Number.MIN_SAFE_INTEGER // 最小整数 -9007199254740991 ``` **整数/安全的整数判断** ```js // 判断一个值是否为整数 Number.isInteger( 42 ); // true Number.isInteger( 42.000 ); // true Number.isInteger( 42.3 ); // false // 判断一个值是否为安全的整数 Number.isSafeInteger( Number.MAX_SAFE_INTEGER ); // true Number.isSafeInteger( Math.pow( 2, 53 ) ); // false Number.isSafeInteger( Math.pow( 2, 53 ) - 1 ); // true ``` ### 5. 特殊数值 **undefined和null的比较** ```js • null 指空值（empty value), `进行计算时可以将其视为0。` 312 + null // 312 260 - null // 260 120 * null // 0 120 / null `Infinity(即js中的分母可以为0)` 任何正数 / 0 // Infinity 任何负数 / 0 // -Infinity 0 / 0 // NaN 120 % null // NaN 任何数 % 0 // NaN • undefined 指没有值（missing value） • undefined 指从未赋值 • null 指曾赋过值，但是目前没有值 • null 是一个特殊关键字，不是标识符，我们不能将其当作变量来使用和赋值。 • undefined 却是一个标识符，可以被当作变量来使用和赋值。 ``` **使用void运算符返回undefined** ```js void让表达式返回undefined var a = 42; console.log(void a, a ); // undefined 42 ``` **不是一个数字的数字NaN** ```js NaN和自身不相等 NaN == NaN // false NaN === NaN // false ``` **window.isNaN()用来判断参数是否不是NaN,也不是数字(即用于判断参数是否不为除NAN以外的数字),Number.isNaN()用来判断参数是否为NaN** ```js var a = 2 / "foo"; var b = "foo"; a; // NaN b; // "foo" window.isNaN( a ); // true window.isNaN( b ); // true window.isNaN(2); // false Number.isNaN( a ); // true Number.isNaN( b ); // false NaN 是 JavaScript 中唯一一个不等于自身的值，因此可以进行判断： function isNaN(n) { return n !== n; }; ``` **无穷数** ```js var a = 1 / 0; // Infinity(Number.POSITIVE_INfINITY) var b = -1 / 0; // -Infinity(Number.NEGATIVE_INfINITY) var a = Number.MAX_VALUE; // 1.7976931348623157e+308 a + a; // Infinity a + Math.pow( 2, 970 ); // Infinity a + Math.pow( 2, 969 ); // 1.7976931348623157e+308 Infinity / Infinity // NaN ``` **-0的奇怪操作** ```js 加法和减法运算不会得到负零 // 负零在开发调试控制台中通常显示为 -0，但在一些老版本的浏览器中仍然会显示为 0 var a = 0 / -3; // -0 var b = 0 * -3; // -0 -0从数字转为字符串会得到"0" a.toString(); // "0" a + ""; // "0" String( a ); // "0" JSON.stringify( a ); // "0" "-0"从字符串转换为数字，会得到正确的结果 +"-0"; // -0 Number( "-0" ); // -0 JSON.parse( "-0" ); // -0 -0 == 0 // true -0 === 0 // true "-0" === "0" // false ```` ### 6. 值和引用 ```js var a = 2; var b = a; // b是a的值的一个复本 b++; a; // 2 b; // 3 var c = [1,2,3]; var d = c; // d是[1,2,3]的一个引用 d.push( 4 ); c; // [1,2,3,4] d; // [1,2,3,4] ``` ```js 一种特殊情况是，重新分配地址 var a = [1,2,3]; var b = a; a; // [1,2,3] b; // [1,2,3] b = [4,5,6]; a; // [1,2,3] b; // [4,5,6] ``` **重新分配地址的应用：用于交换** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6af13d4c9b594e119c0ff3b72962bbce~tplv-k3u1fbpfcp-watermark.image?) ## 2. 原生函数 ### 1. Object.prototype.toString.call方法 **重点：[深度解析Object.prototype.toString.call(obj)的功能及原理(比typeof判断得到的数据类型更加全面)](https://blog.csdn.net/hanyanshuo/article/details/104620122?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-104620122-blog-107785840.pc_relevant_antiscanv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-104620122-blog-107785840.pc_relevant_antiscanv4&utm_relevant_index=5)** **所有数据类在继承Object的时候，改写了toString()方法，所以都拥有一套属于自己的toString()方法。当删除对应数据类原型上的toString()方法时，就会向上查找，继承Object原型链上的toString()方法，用于区分不同的数据类别。** ```js // 定义一个数组 var arr = [1, 2, 3] // 数组原型上是否具有 toString() 方法 console.log(Array.prototype.hasOwnProperty('toString')) //true // 数组直接使用自身的 toString() 方法 console.log(arr.toString()) // '1,2,3' delete操作符删除数组原型上的 toString() delete Array.prototype.toString // 删除后，数组原型上是否还具有 toString() 方法 console.log(Array.prototype.hasOwnProperty('toString')) //false 删除后的数组再次使用 toString() 时，会向上层访问这个方法，即 Object 的 toString() ```重点1:``` 此时因为改变了原型链上Object.toString()的指向，指向了arr，所以返回'[object Array]' console.log(arr.toString()) // '[object Array]' 否则，Object原型链上的toString方法的参数无论是什么(只要不是给没定义的值)，都会返回'[object Object]'：因为它都指向Object: Object.prototype.toString(undefined) // '[object Object]' Object.prototype.toString(nul) // 'Uncaught ReferenceError: nul is not defined' Object.prototype.toString('123') // '[object Object]' Object.prototype.toString([]) // '[object Object]' Object.prototype.toString({}) // '[object Object]' ```重点2:``` 构造函数上的toString()方法返回本身，且调用的是Function原型链上的方法，结果只与构造函数的名称有关，与传递的参数无关。需要注意区分： Object.prototype.toString('123') // '[object Object]' Object.toString() // 'function Object() { [native code] }' Array.toString() // 'function Array() { [native code] }' Function.toString() // 'function Function() { [native code] }' Object.toString({a: 1}) === Object.toString({b:2}) // true `对象在和字符串进行加法运算时，会自动调用对象原型链上的toString方法，并与字符串进行拼接。` ``` ### 2. 封装对象包装及拆封 **包装的方法一：js中的```原生(内建)函数String()```和```java```中的```字符串构造函数String()```的对比(构造函数名称的首字母必须大写)** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/435d2961ad0c451b87a2ee2a952fd1da~tplv-k3u1fbpfcp-watermark.image?) ```js 1.a是继承了string原型的一个包装类，其本质是对象。当a找不到String的方法时，就会向上查找继承的原型，从而使用字符串的方法。 2.String构造函数中的参数需要可以隐式转换为字符串，相当于调用自身数据类的toString()方法 3.String构造函数只接受一个参数 const c = new String(1,2,3) // String {'1'} a == 'abc' // true 这里为true的原型是因为使用了隐式转换，调用了字符串的toString方法 a === 'abc' // false 这里不能强制隐式转换 a.toString() // 'abc' a.toString() === 'abc' // true typeof a.toString() // 'string' a.length // 3 b.length // 3 ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfe369bbf8eb42e3ad137d496ce37c35~tplv-k3u1fbpfcp-watermark.image?) **包装的方法二：直接使用Object()封装对象的包装** ```js var a = "abc"; var b = new String( a ); var c = Object( a ); typeof a; // "string" typeof b; // "object" typeof c; // "object" ```重点:``` a instanceof String; // false b instanceof String; // true c instanceof String; // true Object.prototype.toString.call(b); // "[object String]" Object.prototype.toString.call(c); // "[object String]" b == c // false, 因为地址不一样 b === c // faslse, 因为地址不一样 a == b // true,触发隐式转换，b会调用valueOf()方法 a === b // false,不会触发隐式转换 `如果参数是原始类型的值，Object方法会将其转为对应的包装对象的实例` var obj = Object(1) obj instanceof Object // true obj instanceof Number // true typeof(obj) // 'object' var obj = Object('foo') obj instanceof Object // true obj instanceof String // true typeof(obj) // 'object' var obj = Object(true) obj instanceof Object // true obj instanceof Boolean // true typeof(obj) // 'object' `方法的参数是一个对象，它总是返回该对象，即不用转换。` var arr = [] var obj = Object(arr) // 返回原数组 obj === arr // true var value = {} var obj = Object(value) // 返回原对象 obj === value // true var fn = function () {} var obj = Object(fn) // 返回原函数 obj === fn // true `判断给定数据是否为对象类型：` 方法一： function isObject(value) { return value === Object(value) } isObject([]) // true isObject(true) // false 方法二： let obj = {} Object.prototype.toString.call(obj) === '[Object Object]' 方法三： let obj = {} obj.constructor === Object 方法四： let obj = {} obj instanceof Object `Object(value) 和 new Object(value)得到的结果是等价的，但是它们的语义是不同的。前者表示将value转成一个对象，后者是表示生成一个对象，它的值是value。` ``` **给Object()方法传入不同的参数类型，会得到不同类型的包装类。传入什么参数类型(除null和undefined)，就会返回什么参数类型且值为自身的包装类。** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92042fd9fbcc40a589dee5c7bf47172f~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cba20fcc54684a79bf24022a351563cf~tplv-k3u1fbpfcp-watermark.image?) **拆封的方法一: 使用valueOf()方法** ```js var a = new String( "abc" ); var b = new Number( 42 ); var c = new Boolean( true ); a.valueOf(); // "abc" b.valueOf(); // 42 c.valueOf(); // true ``` **拆封的方法二: 使用加号运算符的隐式拆封** ```js var a = new String( "abc" ); var b = a + ""; // b的值为"abc" typeof a; // "object" typeof b; // "string" ``` ### 3. 暗号-北京烤鸭 **这一小节主要用于记录探索js中一些不为人知的秘密：** **(1)valueOf方法: [valuOf方法的传送门](https://blog.csdn.net/u011140116/article/details/121844689)** ```js 1.对于valueOf方法，我们可以手动进行重写: var a = {} a.valueOf = function(){return true} 1 + a // 2 2.(重点) 在valueOf方法下，还有一个比较底层的方法`Symbol.toPrimitive`，可以重新定义数据类型构造函数的原型对象的方法(优先级高于valueOf)： ``` **对于对象构造函数的原型对象方法：** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42418d4b13134383bf7af26e20d23099~tplv-k3u1fbpfcp-watermark.image?) **对于字符串构造函数的原型对象方法：** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48eb832d9a9b47aa954dcbc05690e5cb~tplv-k3u1fbpfcp-watermark.image?) **(2)```{}.toString()```报错原因分析: [理解js机制(把自己想象成机器)](https://www.imooc.com/wenda/detail/519484)** ```js // https://www.zhihu.com/question/55823852 1 + {} // '1[object Object]',{}调用valueOf()方法,没得到基本的值类型，继续调用toString()方法 {} + 1 // 1 +号左边的{}被视作了空代码块，执行了 + 1 {a: 1} + 1 // 1 理由同上 ({}) + 1 // '[object Object]1' ``` **(3)Number({})和Number([])** ```js Number({}) // NaN, 这是因为{}会调用toString()方法，得到'[object Object]',再进行类型转换 Number([]) // 0, []调用toString()方法，得到''，再转换为Number类型 ``` **(4)[] == [] 和 {} == {}: [引用地址不同](https://www.cnblogs.com/wisewrong/p/10396002.html)** ```js [] == [] // false {} == {} // false [] === [] // false {} === {} // false ``` **(5)[] == ![]类似问题解析: [问题原理](https://segmentfault.com/a/1190000017571299)** ```js 重点：!可将变量转换成boolean类型，null、undefined、NaN以及空字符串('')取反都为true，其余都为false。 !{} // fasle ![] // false [] == ![] // true, [] == false => '' == 0 => 0 == 0 => true {} == !{} // false, '[object Object]' == false => NaN == 0 => false [] == !{} // true, [] == false => true {} == ![] // false, '[object Object]' == false => false ``` **(6)+号运算符的理解: [加号运算符的认知](https://blog.csdn.net/MeiLuan_yahoho/article/details/89066461)** ```js 加号运算符存在隐式转换，单独对某一个数据类型使用加法运算符，会将其转换为数字类型 1.当“+”号左右两边都是数值时，有以下特殊情况: (1). 当有一个操作数是NAN，则结果是NAN; (2). 如果是Infinity加上Infinity，则结果是Infinity （Infinity表示无穷大); (3). 如果是 - Infinity + -Infinity，则结果是-Infinity （Infinity表示无穷大); (4). 如果是 Infinity + -Infinity，则结果是 NaN; 2.字符串 + 其他基本数据类型和function类型，字符串优先级最高，直接拼接； 3.字符串 + 引用类型数据(除function类型)，先调用自身toString()方法，再相加; '1' + {name: 'fl'} // '1[object Object]' '1'+ [1,2,3] // '11,2,3' 4.数字 + 其他非字符串的原始数据类型 1 + true // 2 1 + null // 1 1 + undefined // NaN 5.当数字与字符串以外的，其他原始数据类型直接使用加号运算时，就是转为数字再运算，这与字符串完全无关。 Number(undefined) NaN Number(NaN) NaN Number(null) 0 true + true // 2 true + null // 1 undefined + null // NaN 6.空数组 + 空数组以及空对象 + 空对象 [] + [] // '',先调用valueOf方法，再调用toString()方法，'' ({}) + {} // "[object Object][object Object]",原理同上,如果对象不加括号，在不同浏览器会得到不同结果 // 主要是两种，"[object Object][object Object]" 以及 NaN 7.空对象+空数组 VS 空数组+空对象 {} + [] // {}被视为代码块，[]强制转换为number类型，得到0 ({}) + [] //'[object Object]' [] + {} //'[object Object]' [] + {} == ({}) + [] // true,比较的是字符串 [] + {} === ({}) + [] // true 8.data类型 (1) valueOf方法返回值: 给定的时间转为UNIX时间(自1 January 1970 00:00:00 UTC起算)，但是以微秒计算的数字值； (2) toString方法返回值: 本地化的时间字符串； (3) 其他数据类型在做加法运算的转换时都会先调用valueOf()方法，再调用toString()方法。而data类型在做加法运算的转换时，会调用toString()方法； 1 + (new Date()) // '1Sat Jun 25 2022 11:04:18 GMT+0800 (中国标准时间)' +new Date() // 1656126287960,将字符串类型强制转换为数字类型 ``` ### 4. 回归正传: 原生函数作为构造函数 **使用构造函数```new Array()```创建数组的弊端** ```js 使用Array()或者new Array()构造函数创建数组,两者会得到相同的结果 var a = new Array(1,2,3) // [1,2,3] var b = [1,2,3] // [1,2,3] 弊端在于： (1) 当传入的参数只有一个值时，他会默认这个传参为数组的长度，而非给数组赋值,得到一个空数组: var a = new Array(3) // (3) [empty × 3] (2) 构造函数得到的空数组无法使用map进行遍历，因为数组中并不存在任何单元： a.map((item,index) => index) // (3) [empty × 3] var b = [undefined,undefined,undefined] b.map((item,index) => index) // (3) [0, 1, 2] (3) 所以，尽量不要创造空数组，或者使用`apply()`函数创造包含`undefined`单元的数组: var a = Array.apply( null, { length: 3 } ) // (3) [ undefined, undefined, undefined ] (4) 当传入的参数不止一个值时，它会返回一个包裹这些参数的数组; (5) 也可以使用Array.of(根据传递的参数)来创建数组 Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8] Array.of() // [] Array.of(3) // [3],相比构造函数的好处是，只传递一个参数不会被视为数组长度， //因此除了不传递参数外，不会产生空数组，方便后续数组的循环操作 Array.of(3, 11, 8) // [3,11,8] Array.of(3).length // 1 Array.of(undefined) // [undefined] ``` **```Array.apply```的用法:** **(1) Array的原型链上并不存在apply方法，但因为它是构造函数，是函数的实例。而apply是Function原型链```Function.prototype```上的方法，即```Array.__proto__ === Function.prototype```。因此Array中找不到```apply```方法时，会根据原型链逐级向上查找的原则，找到```Array.__proto__```中的```apply```方法。可以调用apply方法，改变this指向，并调用Array构造函数。** **(2) 从ES5开始，apply的参数可以是一个通用的类数组对象，而不是必须为一个数组。** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a738d716567d4df5868bacdfcd3559c6~tplv-k3u1fbpfcp-watermark.image?) ### 5. 重中之重：类、构造函数、原型对象、原型链 **[黑马js进阶-类、原型链](https://www.bilibili.com/video/BV1Kt411w7MP?p=3&vd_source=a540d41ff453db4580db0168b87afe38)** **[原型链部分笔记](https://www.jianshu.com/p/d5df7e236a21)** **[借用公司大佬的图片镇楼](https://yang-zebo.github.io/guide/JavaScript/Note/Difficulty.html#_3-%E5%8E%9F%E5%9E%8B%E9%93%BE)** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae1d3a0dfc1a485183483944a97f932a~tplv-k3u1fbpfcp-watermark.image?) ```js 在此记录b站未列出的知识点 typeof Number.prototype // 'object' typeof String.prototype // 'object' typeof Array.prototype // 'object' typeof Object.prototype // 'object' 1. 比较特殊的是函数的原型对象 typeof Function.prototype // 'function' 2. 也只有这个比较特殊(注意__proto__左右两边都是两下划线) `一切皆对象，所以函数也是对象的一种，所以函数也有__proto__属性` `生成它的就是Function函数，所以下面两个是相等的` Function.prototype === Function.__proto__ // true 3. 任何构造函数的__proto__都是函数的__proto__, 或者说是函数的prototype `因为任何构造函数都是对象的一种，所以都可以看作是对象。既然是对象，就有__proto__属性` `而这些函数是Function生成的构造函数，因此` Array.__proto__ === Function.prototype // true Object.__proto__ === Function.prototype // true 所以，任何构造函数的__proto__都是完全相同的，它们都指向Function的prototype Array.__proto__ === Object.__proto__ // true `同时，也因为相等性，可以转换为如下式子` Array.__proto__ === Function.__proto__ // true 4. 原型对象上的constructor方法用于查看原型对象上的构造方法，指向构造函数本身 typeof(Object.prototype.constructor) // 'function' Object.prototype.constructor // ƒ Object() { [native code] } Array.prototype.constructor // ƒ Array() { [native code] } Function // ƒ Function() { [native code] } 也可以创建一个原型对象，两者本质是相同的 const superman= {name: 'fl'} superman.constructor // ƒ Object() { [native code] } 所以，它们之间的比较是不相等的 Array.prototype.constructor === Object.prototype.constructor // false Array.prototype.constructor === Function // false 因此，它们之间的比较： Array.prototype == Function.prototype // false Array.prototype == Object.prototype // false 原型对象上的constructor指向自身的构造函数 Array.prototype.constructor === Array // true Object.prototype.constructor === Object // true 5. 但是对不同构造函数的constructor方法: Array.constructor // ƒ Function() { [native code] } Object.constructor // ƒ Function() { [native code] } Function.constructor // ƒ Function() { [native code] } 任何一个类型构造函数的constructor都指向Function,因为他们都是Function的实例 Array.constructor === Function // true Array.constructor === Function.constructor // true，可以一直迭代，因为Function.constructor指向Function Array.constructor === Function.constructor.constructor.constructor.constructor // true Array.constructor === Object.constructor // true 6. 一般来说，`__proto__`是挂载在对象上的，而`prototype`是挂载在函数上的, 因此有了第`8`点知识 ` 对象由函数生成，所以普通对象的__proto__指向创建该实例的构造函数的原型对象任何构造函数的__proto__指向Function.prototype ` 7.原型链是逐级向上找的，最上层是Object，所以Object.prototype是所有对象`直接或者间接`的原型 `因此，除Object外，原型对象中的__proto__会嵌套多级__proto__` Number.prototype == (123).__proto__ // true Array.prototype.__proto__ // 有值 Array.prototype.__proto__.__proto__ // null Object.prototype.__proto__ ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a88040620574f54a9401bdf7b940bf8~tplv-k3u1fbpfcp-watermark.image?) ### 6. 函数闭包 **高阶函数** ```js 1.第一种，函数作为参数传递给另一个函数进行调用，一般用于回调 function sum(a,b,callback) { callback && callback(a,b) } sum(1,2,function(a,b){ console.log(a + b) return a + b }) 2.第二种，一个函数中返回另外一个函数(主要用于闭包，所以闭包本质是一种高阶函数) function fn() { return function() {} } fn() ``` **变量作用域** ```js 变量根据作用域的不同分为两种: 全局变量和局部变量。 1. 函数内部可以使用全局变量。 2. 函数外部不可以使用局部变量。 3. 当函数执行完毕，本作用域的局部变量会销毁。 ``` **闭包** ```js (1) 闭包的定义：有权访问另一个函数作用域中变量的函数 -来自JS高级程序设计的定义简单来说，就是一个作用域可以访问另一个函数内部的局部变量。 (2) 闭包的主要作用：延伸了变量的作用范围,被引用的变量不会被释放，未被引用的变量会被释放。 (3) 闭包的主要特点： 1.函数套函数，闭包一定有嵌套函数； 2.外层函数一定有局部变量，且内层函数一定操作了外层函数的这个变量； 3.内层函数会使用return返回（如果不返回这个内层函数，你就没办法使用这个闭包，返回内层函数的最终的目的就是让外部可以访问到这个闭包）； (4) 立即执行函数中的this指向window； 1.在外层函数中执行定义好的内层函数，此时内层函数可以访问外层函数作用域中的变量： function fn() { var num = 10 function fun() { // fun中的作用域可以访问到fn中的变量num // 那么这个函数fn()就是一个闭包 console.log(num) } fun() } // 执行函数 fn() 2.直接在外层函数中返回定义好的内层函数，此时全局作用域中的f()访问到fn()中的局部变量num: function fn() { var num = 10 function fun() { // 内层函数访问到外层函数作用域中的变量 console.log(num) } return fun } var f = fn() // 此时返回的是一个函数，如需调用，还要在后面再加上一个()执行 f() // 3.直接在外层函数中返回匿名内层函数，此时全局作用域中的f()访问到fn()中的局部变量num: function fn() { var num = 10 return function() { // 内层函数访问到外层函数作用域中的变量 console.log(num) } } var f = fn() // 此时返回的是一个函数，如需调用，还要在后面再加上一个()执行 f() ``` **闭包的应用(面试常考，使用闭包和立即执行函数获取当前li的索引):** ```js 点击li输出当前li的索引号 var lis = document.querySelector('.nav').querySelectorAll('li') for(var i = 0; i < lis.length; i++) { lis[i].onclick = function() { 1. 因为有4个li，for循环是同步执行，点击li是异步执行，所以最后使用var声明的变量i最后为4，分别点击，输出4个4 2. 如果想解决这个问题，第一种方法，可以使用let来声明变量 3. 第二种方法，可以给每个li增加一个index属性，点击打印每个li的index值即可 // lis[i].index = i // console.log(this.index) 此时的this指向每个li console.log(i) } } 4. 第三种方法，使用闭包和立即执行函数相结合的方式获取li的索引,传入一个参数i，并接收它 var lis = document.querySelector('.nav').querySelectorAll('li') for(var i = 0; i < lis.length; i++) { (function(i) { lis[i].onclick = function() { // 内层函数使用到了外层函数中的变量i console.log(i) } })(i) } ``` ### 7. 函数碎冰冰 **a. 函数的属性：** **(1) 函数的长度length：** - `只有形参：` ```js `函数的长度等于参数个数(无默认值的情况下)` function f0() { } console.log(f0.length) //0 function f1(a) { } console.log(f1.length) //1 function f2(a, b) { } console.log(f2.length) //2 function f3(a, b, c) { } console.log(f3.length) //3 ``` - `有默认值：` ```js `函数的长度，就是第一个具有默认值之前的参数个数` function f1(a = 0) { } console.log(f1.length) // 0 function f2(a, b = 0) { } console.log(f2.length )// 1 function f3(a, b, c = 0) { } console.log(f3.length) // 2 function f4(a, b = 0, c) { } console.log(f4.length) // 1 ``` - `特殊情况：含有剩余参数...args` ```js `剩余函数不计入函数长度内` function f1(name, ...args) {} console.log(f1.length) // 1 ``` **(2) 函数的原型prototype：** ```js function fn() {} var obj = new fn() `相当于创建了一个obj，是fn的实例` obj instanceof fn // true fn.prototype.a = 1 fn.prototype === obj.__proto__ `// true` obj.a `// 1, 因为在obj上找不到，就会在obj的原型链上找，结果找到了fn的prototype, 也相当于obj.__proto__` fn instanceof Function // true Function instanceof Object // true `// fn上找不到，就会在Function上找，结果Function.prototype.a也是undefined` `// 就会向上到Object上找，结果Object.prototype.a也是undefined，所以最后值为undefined` fn.a `// undefined, 相当于fn上的静态方法。` ` 一般函数(除了Function构造函数为"function"类型)默认的prototype是一个类型为object的对象，它有两个属性：constructor和__proto__。其中constructor属性指向这个函数自身， __proto__属性指向Object.prototype，这说明一般函数的prototype属性是由Object函数生成的。 ` function fn(){} typeof fn.prototype // "object" fn.prototype.constructor === fn // true fn.prototype.__proto__ === Object.prototype // true 原型链中有一点比较特殊： Function instanceof Object `因为一切皆对象，原型链的顶端是Object` Object instanceof Function `因为任何构造函数都是Function的实例` ``` **(3) 函数的名称name：** ```js 这个属性的值永远等于跟在`function`关键字后面的标识符，`匿名函数的name属性为空`。即：`函数名称.name == 函数名称(除匿名函数)` ``` **b. 函数表达式：** ```js `将一个匿名函数赋值给变量，这个匿名函数就被称为函数表达式。` const hello = function (a) { console.log(a) } `将一个具名函数赋值给变量` `具名函数fn和hello是同一个函数，但是作用范围不一致，fn只能在函数体内使用，相当于函数的一个局部变量，hello可在函数内部，外部调用。` const hello = function fn(a) { console.log(a) console.log(fn) `// fn()` console.log(fn === hello) // true } console.log(fn) `// ReferenceError: fn is not defined` `函数在非严格模式下，this被绑定到全局对象。在严格模式下，this是undefined` ``` **c. 构造函数：** ```js `可以传递任意数量的参数给Function构造函数，但只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。` `注意：此处是否使用new，结果都一样` const add = new Function('x', 'y', 'return x + y') `等价于` function add(x, y) { return x + y } add(1, 2) // 3 `注意：如果构造函数没有实参，可以省略括号()` ` const o = new Object() // 等价于 const o = new Object ` ``` **d. 函数的返回值：** ```js 1. `return`只能出现在函数中，可以没有`return` 2. 一个函数可以有多个`return`，但最终只会以第一个`return`为准 3. `注意：` `return`之后除了在`finally`中的代码，都不会执行 `return`后面如果没有返回值，则返回`undefined` 4. `注意：` 如果使用`new`构造函数，且返回值不是一个对象或者没有返回值，则返回`this`(该新对象) ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e1365c4457449238a21cc3f18236e7c~tplv-k3u1fbpfcp-watermark.image?) **e. 函数调用方式：** **(1) 函数调用模式：** ```js function test() { console.log("我被调用了") } test() ``` **(2) 方法调用模式：** ```js var p = { a: 1, fn: function() { `谁调用fn，this就指向谁` this.a = 2 } } console.log(p.a) // 1 p.fn() console.log(p.a) // 2 ``` **(3) 构造器调用模式：** ```js `obj必然带有__proto__` const obj = new Object ``` **(4) 间接调用模式：** ```js function sum(x, y) { return x + y } console.log(sum.call(null, 1, 2)) //3 console.log(sum.apply(null, [1, 2])) //3 ``` **f. 函数调用方式：** ## 3. 碎碎念 ### 1. 浅谈Object.assign()方法 **浅析Object.assign()方法的作用: 接收多个参数来合并对象，如果有相同的属性，后面的值会覆盖前面的值，第一个参数如果是变量，那么它的值也会发生变化。** ```js 1. 合并多个对象 Object.assign({name: 'fl'}, {age: 28}, {sex: '男'}) // {name: 'fl', age: 28, sex: '男'} 2. 如果不传递任何参数，则会报错 3. 如果只传递一个参数，则相当于赋值 var a = {name: 'fl'} var b = Object.assign(a) b // {name: 'fl'} a.name = 'admin' a // {name: 'admin'} b // {name: 'admin'} 或者 b.name = 'admin' a // {name: 'admin'} b // {name: 'admin'} 重点： (1) Object.assign(10) // 会强制转换为对象(包装类) Object(10) // 因为null或者undefined没有对应的构造函数，所以他们无法被包装 (2) Object.assign(null) // 报错，Cannot convert undefined or null to object (3) Object.assign(undefined) // 报错，Cannot convert undefined or null to object (4) Object(null) // {}，得到一个空对象 4. 接受多个参数的情况下，如果将定义的变量放在第一个参数，则这个参数会是合并的结果，同时也相当于赋值 var a = {name: 'fl'} var b = Object.assign(a, {age: 28, sex: '男'}) a // {name: 'fl', age: 28, sex: '男'} a === b // true 5. 接受多个参数的情况下，如果将定义的变量不放在第一位，则这个参数的值不会被赋值 var a = {name: 'fl'} var b = Object.assign({age: '28',job: 'front'}, a) b // {age: '28', job: 'front', name: 'fl'} a // {name: 'fl'} 6. (重点)如果非对象参数出现在源对象的位置(即非首参数)，那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果 `undefined` 和 `null` 不在首参数，就不会报错。 let obj = { a: 1 } Object.assign(obj, undefined, null) === obj // true 7. (重点)布尔值，字符串,数值都会被转为包装对象，但是布尔值，数值转成的包装对象没有枚举属性所以被忽略，只有字符串的包装对象会产生可枚举属性，所以字符串会被合入目标对象。 const a = 'abc' const b = true const c = 10 const obj = Object.assign({}, v1, v2, v3) // { "0": "a", "1": "b", "2": "c" } 8. (重点)参数可以是数组 Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3] ``` **Object.assign的应用：浅拷贝对象** ```js // a和b外层地址不一样，其余都一样 // 改变a中的基本数据类型时，b对应的基本数据类型不会发生变化 // 改变b中的引用数据类型时，a和b对应的引用数据会同时变化，因为他们指向同一个地址。 var a = {name: 'fl'} var b = Object.assign({},a) ``` **Object.assign的特别注意事项：当定义的变量为参数之一，且变量里面有引用类型，且合并结果中的引用类型取的是变量中的引用类型地址。那么合并结果中引用类型的key和value会与原变量相互影响，因为他们指向同一个地址。** ```js (1) 相当于赋值 var a = {name: 'fl',job: ['front']} var b = Object.assign(a, {name: 'admin'}) a === b // true (2) 浅拷贝(拷贝了a中的job属性，这个属性是地址) var b = Object.assign({name: 'admin'}, a) // 后面覆盖前面的,浅拷贝 a === b // false a.job === b.job // true ``` **Object.assign变量地址改变的实例：** ```js var a = {name: 'fl',job: ['front']} var b = Object.assign({},a) a.job === b.job // true b.job = ['IT'] // 重点：此时b发生变化，a没变，这是因为给b重新分配了地址 b.job[0] = 'IT' // 重点：此时a和b都发生了变化，这是因为它们地址相同 ``` ### 2. Object.defineProperty() **方法的定义(如果prop不存在，则是给对象添加新属性；如果prop存在，则是修改原属性的值)：** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d89343f3a88540f3b22b1e6c9d026477~tplv-k3u1fbpfcp-watermark.image?) ```js var obj = { id: 1, name: 'fl' } Object.defineProperty(obj, 'sex', { value: 'male' }) // {id: 1, name: 'fl', sex: 'male'} 配置属性： 1. writable属性: 指定对象的某个属性是否能被修改,默认为false 2. enumerable属性: 指定对象的某个属性是否可以使用Object.keys进行遍历，默认为false 3. configurable属性：指定对象的某个属性是否可以被删除或者重新修改定义，默认为false ``` **(重点)Object.defineProperty函数中的get与set:** **Tips：personObj的sex属性其实已经发生过变化，只不过在重新打印的过程中，触发了personObj中sex属性的get方法，又重置了sex属性的值。** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98cfb37c7c284d8a8cb28b0d2501e810~tplv-k3u1fbpfcp-watermark.image?) ### 3. 浅析Object.create()方法 ```js 1.Object.create()方法有两个参数proto、propertiesObject 第一个参数是`必须`的，是新建对象的原型对象第二个参数是可选的，是新创建的实例对象上的属性，默认无法修改，无法枚举，无法修改创建一个对象，并将它的原型对象指向第一个参数 // 原型对象上的属性 var skill = { sing: function() {console.log("他唱歌贼溜")}, game: function() {consol.log("他游戏贼溜")} } var personObj = Object.create(skill, { // 对象上的属性，使用{}包裹自定义的属性 name: { value: 'fl'， // 下面还有四个参数可选，和Object.defineProperty的参数一样 ``` writable: false // 设置该 key 的值是否可改/写，默认为 false。 enumerable: false, // 是否可以枚举出内部属性，默认为 false，是否可以使用object.keys遍历 configurable: false // 默认为false ``` }, age: { value: '28' } } ) var student = { school: '北京大学' }; var stu = Object.create(student, { name: { value: '张三', writable: true, configurable: true, enumerable: true } }); console.log(stu); //{name: "张三"} console.log(stu.name); //"张三" console.log(stu.__proto__ === student); //true：stu的原型对象为student console.log(stu.school); //北京大学，stu中找不到，会向上在原型对象上找 for (var key in stu) { console.log(key); //name school, 注意默认不可枚举 } 2. new Object()也是用于创建对象，但是new Object()生成对象的速度要比Object.create()快大约43倍 `注：Object.create(null) 创建的对象是一个空对象，在该对象上没有继承Object.prototype原型链上的属性或者方法` 3. 同理，也可以使用原型对象.`constructor`创建对象，这个等价于new Object()，会指向到Object构造函数 const name = new {}.constructor('fl') 4. 最后，也可以使用`ES6`中Reflect的construct方法来创建对象(第一个参数必须为构造函数，且必须有两个参数，不然会报错) 当第一个参数为Object构造函数时，Reflect中的第二个参数必须为类数组结构(且必须为数组才能成功创建对象)，否则会报错 Reflect.construct(Object,[{name: 'fl'}]) // 和 new Object({name: 'fl'})一样 // new Object({})、new Object(null或者undefinde)不会报错，只是返回空对象 Reflect.construct(Object,{name: 'fl'}) // 和 new Object({})、new Object(null或者undefinde)一样 Reflect的construct方法第二个参数只接收数组中的第一个值 Reflect.construct(Object,[1,2,3,4]) // Number {1} Reflect.construct(Object,['fl','admin']) // String {'fl'} ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/144807e82ec4420cb0e262d0a61487ce~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e57c982df45d4100a90bbde0f1b59f98~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2dec8c0e31440d899d89fc8a94c606a~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08348e2dbb8447238e665828bc75f16d~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33c3539067f8461195c0b12cfeaeb9b6~tplv-k3u1fbpfcp-watermark.image?) ### 4.对象定义中的get和set **敲代码偶然间发现的知识点，以前从未见过，特此记录下。个人理解比较像```vue```计算属性中的```get```和```set```:** ```js const person = { nickName: 'fl', // 如果前面有定义name字段，则会被下面的这个方法覆盖掉 // 获取name的值会调用这个函数 get name() { console.log('我在获取name的值',this.nickName) // return this.name 这样会报栈溢出的错误，因为会一直调用自身 return this.nickName }, set name(val) { console.log('我在修改name的值',val) this.nickName = val } } person.name // 触发name的get方法,给perosn的name字段赋值(结果见图一) // 再次输入person，会触发name的get方法(结果见图一) person.name = 'admin' // 触发name的set方法，修改perosn的nickName字段的值(结果见图二) // 再次输入person，会触发name的get方法(结果见图二) ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f16ce4a2b53f40b0bb1f658bd150ee92~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f5ec568659b478d9f317a4a3311583e~tplv-k3u1fbpfcp-watermark.image?) ### 5.Object.freeze方法解析: **[Object.freeze传送门](https://blog.csdn.net/cai_niao5623/article/details/121095017)** ```js 1. Object.freeze方法用来冻结数组或者对象，但它本身属于浅冻结 var obj = { name: '张三', info: { a: 1, b: 2 } } Object.freeze(obj) obj.name = '李四' console.log(obj) // {info: {a: 1, b: 2},name: "张三"} obj.info.a = 66 console.log(obj.info) // {a: 66, b: 2} 2. 使用递归的思想封装深冻结方法 function deepFreeze(obj) { // 得到一个获取所有属性的数组 var propNames = Object.getOwnPropertyNames(obj) // 遍历属性数组 propNames.forEach(item => { var prop = obj[item] // 如果某个属性的属性值是对象，则递归调用 if (prop instanceof Object && prop !== null) { deepFreeze(prop) } }) // 冻结自身 return Object.freeze(obj) } ``` ```js 1.Object.freeze方法在vue中的应用，使data中的变量不具有响应式的效果，提升网页性能。 //https://blog.csdn.net/muzidigbig/article/details/122121002 new Vue({ data: { // vue不会对list里的object做getter、setter绑定 list: Object.freeze([ { value: 1 }, { value: 2 } ]) }, created () { // 界面不会有响应 this.list[0].value = 100; // 下面两种做法，界面都会响应 this.list = [ { value: 100 }, { value: 200 } ]; this.list = Object.freeze([ { value: 100 }, { value: 200 } ]); } }) ``` ### 6. ES6之Proxy、Reflect：**[阮一峰ES6——非官网(风格比较淡雅)](https://www.bookstack.cn/read/es6-3rd/spilt.2.docs-reflect.md)** ```js 关于Reflect的`apply`: const ages = [11, 33, 12, 54, 18, 96] 旧写法： const youngest = Math.min.apply(Math, ages); const oldest = Math.max.apply(Math, ages) const type = Object.prototype.toString.call(youngest) 新写法： const youngest = Reflect.apply(Math.min, Math, ages) const oldest = Reflect.apply(Math.max, Math, ages) const type = Reflect.apply(Object.prototype.toString, youngest, []) // '[object Number]' 重点：这句话的意思就是调用`Object.prototype.toString`方法，并将this指向youngest 11。因此等价于 Object.prototype.toString.call(youngest, []) // '[object Number]', 与第二个参数的类型无关关于Math.floor()向下取整的四种调用方法： 1.直接调用Math.floor() 无参数会返回NaN,不是Number类型的参数会自动转换为Number类型: Math.floor([1.75]) // 1 2.通过使用call、apply、bind方法执行(在此只演示call方法): Math.floor.call(undefined,1.75) // 1 3.通过apply和call`(狗都不愿意使用系列)`这两个方法来调用： Function.prototype.apply.call(Math.floor,undefined,[1.75]) // 1 怎么理解这行代码呢? (1) Function.prototype.apply可以看作是Function原型链上的apply方法； (2) 后面的call方法是调用Function原型链上的apply方法,call方法需要指定一个对象Math.floor来改变this的指向; (3) 整行代码就变成了Math.floor.apply(undefined,[1.75]),最后就得到了结果1。 4.通过Reflect的API进行调用(因为使用了apply方法，因此特别注意，传参需要使用数组的形式)： Reflect.apply(Math.floor,undefined,[1.75]) // 1 ``` ```js 关于`proxy`: 个人理解是将person与personProxy之间做了一层浅拷贝，会相互影响但只有修改或者赋值personProxy的属性时，才会触发代理拦截的get和set方法 let person = { name: 'fl', age: 28, skill: { sing: 'rainbow', game: 'Glory of Kings' } } let handler = { get(obj,key) { // 切记这个key值是最外层的属性 return key in obj ? obj[key] : 666 }, set(obj,key,val) { obj[key] = val } } let personProxy = new Proxy(person,handler) 此处为undefined的原因是，personProxy.skill(skill为person的key，返回一个对象) 然后对象中找不到eat这个属性，所以返回undefined personProxy.skill.eat // undefined personProxy.skill.sing // 'rainbow' ``` ```js 拓展: JS引擎无法确定这里的`.`是什么意思，是点运算符（对象方法）还是浮点数(对应上文`toFixed`) 123.ad // 报错 123.0.ad // undefined (123).ad // undefined 123..ad // undefined var age = 28 age['name'] = 'fl' age['name'] // undefined ``` **关于Object.defineProperty和Proxy的比较:** ```js 传送门：`https://blog.csdn.net/yuqing1008/article/details/104421552` 个人总结: 1. Object.defineProperty中的`get`和`set`方法是针对对象/数组中存在的字段属性触发的。如果有新增字段，又想达到响应式的效果，需要再次手动`observe`。如果删掉原对象/数组中的值，则再次访问或者赋值也不会触发方法。 2. Object.defineProperty之所以不能通过`数组.push`方法来触发`set`方法的原因是，因为会先调用get方法，获取数组的值，然后手动增加了一个新的索引值，而这个索引值在第一次`observe`时时没有的，无法触发set方法。所以，`vue`通过修改索引的方式重构了数组原型链上的方法,在`vue2`中使用`defineProperty`作为双向绑定原理的底层方法。 3. 而`proxy`和`defineProperty`最大的不同之处至于，`proxy`可以监测到对象/数组上新增的字段，并触发get 和set方法(包括数组上的一些方法，比如`push`，因为它能监测到新增的key)。所以这也是`vue3`使用`proxy` 做响应式的原因。 4. 对于对象，`key`是键名，`value`是值；对于数组，`key`是索引，`value`是值。传送门：`https://juejin.cn/post/7069397770766909476#heading-4` 1. 使用`Object.defineProperty`做`vue`响应式: (1) 错误的定义(`无限循环调用，导致栈溢出的结果`)： let person = {name: 'fl', age: 28} Object.keys(person).forEach(function (key) { Object.defineProperty(person, key, { enumerable: true, configurable: true, // 默认会传入this get() { // person[key]会触发get方法，get方法又会获取person[key]的值，最终导致栈溢出 return person[key] }, set(val) { console.log(`对person中的${key}属性进行了修改`) person[key] = val // 修改之后可以执行渲染操作 } }) }) (2) 正确的定义(`未实现数组的响应式`)：既然`person[key]`又会触发`get`方法，干脆直接将这个作为值传递到函数中进行调用，于是有了下面的思路: // 实现一个响应式函数 function defineReactive(obj, key, val) { //如果某对象的属性也是一个对象，递归进入该对象，进行监听 if (typeof val === 'object') { observer(val) } Object.defineProperty(obj, key, { get() { console.log(`访问了${key}属性`) return val }, set(newVal) { // 如果newVal是一个新对象，递归添加对象属性，以达到响应式效果 // 因为defineProperty是无法对新添加的对象属性进行响应式监听的 if (typeof newVal === 'object') { observer(key) } console.log(`${key}属性被修改为${newVal}了`) val = newVal } }) } // 实现一个遍历函数Observer function observer(obj) { //如果传入的不是一个对象，则直接return if (typeof obj !== 'object' || obj === null) { return } Object.keys(obj).forEach((key) => { defineReactive(obj, key, obj[key]) }) } 传送门：`https://blog.csdn.net/pagnzong/article/details/120389514` 2. 使用`proxy`做`vue`响应式: // 创建响应式 function reactive(target = {}) { if (typeof target !== 'object' || target == null) { // 不是对象或数组，则返回 return target } // proxy的代理配置，单独拿出来写 const proxyConf = { get(target, key, receiver) { // 只处理本身（非原型的）属性 const ownKeys = Reflect.ownKeys(target) if (ownKeys.includes(key)) { console.log('get', key) // 监听 } const result = Reflect.get(target, key, receiver) // 深度监听，vue获取数据，会调用get方法，收集依赖 // 如果不递归调用，则只会触发一次get方法，获取对象类型的数据需要多次调用get方法 return reactive(result) }, set(target, key, val, receiver) { // 重复的数据，不处理 if (val === target[key]) { return true } const ownKeys = Reflect.ownKeys(target) if (ownKeys.includes(key)) { console.log('已有的 key', key) } else { console.log('新增的 key', key) } const result = Reflect.set(target, key, val, receiver) console.log('set', key, val) return result // 是否设置成功 }, deleteProperty(target, key) { const result = Reflect.deleteProperty(target, key) console.log('delete property', key) return result // 是否删除成功 } } // 生成代理对象 return new Proxy(target, proxyConf) } // 测试数据 const data = { name: 'xiaoming', age: { young: 18, old: 26 } } const proxyData = reactive(data) ``` ### 7. 深拷贝 vs 浅拷贝 (重点) **浅拷贝：个人理解浅拷贝就是对数据a做拷贝得到数据b。a和b除了最外层的地址不一样，其他都一样。就好比相同规格的风扇一样，零件的构造完全相同，不同的只是包装袋。因此，a的基本数据类型值发生变化时，b对应的基本数据类型的值不会发生变化。而a或者b中的引用数据类型发生变化时，另外一个引用数据类型的值也会发生相应变化，因为他们指向的是相同的地址。** **常见的浅拷贝类型:** ```js 传送门： https://yang-zebo.github.io/guide/JavaScript/ECMAScript/04/04_02.html (1) 对于数组： var arr = [1, 2, 3] 1.`第一种方式`： var arr1 = arr.slice() // 如果不传参数，那么会返回一个一样的新数组，完成浅拷贝 2.`第二种方式:` var arr2 = [].concat(arr) // 拼接数组，创建一个空数组，并把原数组拼接上去，完成浅拷贝 3.`第三种方式:` var arr3 = [...arr] //展开运算符进行浅拷贝 4.`第四种方式:` var arr4 = Array.from(arr) 5.`第五种方式:` var arr5 = _.clone(arr) // 使用lodash的_.clone方法 6.`第六种方式:` var arr6 = Object.assign([],arr) // 使用Object.assign对数组做浅拷贝 PS: Array.from 只针对类数组数据类型(`数组、集合、字符串、函数传参arguments等`)进行数组的转换 Array.from({name: 'fl',sex: 'male'}) // [] Array.from({name: 'fl',sex: 'male',length: 2}) // [undefined, undefined] Array.from({0: 'fl',1: 'male',length: 2}) // ['fl', 'male'] Array.from第二个参数用于做map循环，和map的参数`(item,index,arr)`一样 Array.from({0: 'fl',1: 'male',length: 2},(item,index)=> item = index) // [0, 1] (2) 对于对象： var obj = { a: 1, b: 2 } 1.`第一种方式`： var obj1 = { ...obj } //展开运算符进行浅拷贝 2.`第二种方式`： var obj2 = Object.assign({}, obj) // 使用Object.assign做浅拷贝 3.`第三种方式`： var obj3 = _.clone(obj) // 使用lodash的_.clone方法 ``` **深拷贝：个人理解就是对数据a做拷贝得到数据b。a和b除了里面的数据一样，其他都不一样，包括存储地址。他们相互独立，互不关联。深拷贝的深是体现在先对数据做浅拷贝，然后对浅拷贝中的引用数据类型做递归浅拷贝，直到浅拷贝中的引用数据类型完全展开为基础数据类型为止，相当于对里面展开的每一项基础数据类型做浅拷贝。** **常见的深拷贝类型:** ```js var obj = { a: { b: { c: 2 } } } 1.`第一种方式`(对普通对象或者数组)： var obj1 = JSON.parse(JSON.stringify(obj)) 2.`第二种方式`： var obj2 = _.cloneDeep(obj) ``` **深拷贝的实现:** ```js 1. Map、Set、RegExp、Date都是Object类型; 2. 环形数据就是a中有b,b中有a,这样无限循环嵌套下去的结构，是无法通过遍历循环完的，最终导致栈溢出; 例如： var a = {name: 'fl'} var b = {age: 18} a.b = b b.a = a 这样得到的a和b都是环形数据，无限循环调用自身。 ``` ```js 实现的传送门：https://yang-zebo.github.io/guide/JavaScript/ECMAScript/04/04_02.html 深入理解Map与WeakMap：http://t.zoukankan.com/Leophen-p-14794561.html 实现思路: 1.先判断数据类型，如果是null或者不是object类型就返回自身； 2.对object类型的数据进行判断，分别使用对应的构造函数创建并赋值，最后返回; 3.针对环形结构，如果这个key值已经存在过，就直接返回对应的value，不再递归调用循环； function deepClone(obj) { // 先判断出基础数据类型和方法 if (obj === null || typeof obj !== 'object') { return obj // null undefined number string boolen symbol bigint function // 遇到这几个类型直接返回出去 } // 预防环形对象的处理 if (!deepClone.cached) { // 创建一个 WeakMap 对象挂载在 deepClone 的属性 cached 上 deepClone.cached = new WeakMap() // 虚引用map } // 如果 obj 已经保存过，无需执行后续 if (deepClone.cached.has(obj)) { return deepClone.cached.get(obj) } // 判断几大类型 if (obj instanceof Map) { // 新建一个map 替代老Map let tmp = new Map() // 让 obj 作为 key, tmp 作为 value 保存在 deepClone.cached 的属性上 deepClone.cached.set(obj, tmp) for (let [key, value] of obj) { // of 取值 in 是取 key tmp.set(key, deepClone(value)) // value可能是引用数据类型，需要递归处理！！ } return tmp } else if (obj instanceof Set) { let tmp = new Set() deepClone.cached.set(obj, tmp) for (let val of obj) { tmp.add(deepClone(val)) // value可能是引用数据类型，需要递归处理！！ } return tmp } else if (obj instanceof RegExp) { let tmp = new RegExp(obj) deepClone.cached.set(obj, tmp) return tmp } else if (obj instanceof Date) { let tmp = new Date(obj) deepClone.cached.set(obj, tmp) return tmp } else { // 还剩下数组和普通对象类型的数据 // 创建一个跟 obj 相同的数据类型 // 由于实例的 constructor 指向它的构造器（构造函数），所以可以 new 出相同数据类型 let tmp = new obj.constructor() deepClone.cached.set(obj, tmp) for (let key in obj) { tmp[key] = deepClone(obj[key]) // obj[key]可能是引用数据类型，需要递归处理！！ } return tmp } } ``` ### 8. 对象遍历的方法 **`ES5` 引入了`Object.keys`方法，返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历`(enumerable)`属性的键名。** ```js 1.在对象上使用: Object.keys({name: 'fl',sex:'male'}) // ['name', 'sex'] 2.在数组上使用 Object.keys(['a','b','c']) // ['0', '1', '2'] ``` **`ES2017` 引入了跟`Object.keys`配套的`Object.values`和`Object.entries`，作为遍历一个对象的补充手段，供`for...of`循环使用。** ```js 传送门1：https://yang-zebo.github.io/guide/JavaScript/ECMAScript/02/02_07.html 传送门2：https://blog.csdn.net/weixin_46151381/article/details/121703298 let {keys, values, entries} = Object; let obj = { a: 1, b: 2, c: 3 }; for (let key of keys(obj)) { console.log(key); // 'a', 'b', 'c' } for (let value of values(obj)) { console.log(value); // 1, 2, 3 } for (let [key, value] of entries(obj)) { console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3] } (1) `Object.values`的使用： 1. `Object.values`方法返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历`(enumerable)`属性的键值。针对对象：const obj = { name: 'fl', age: 18 } Object.values(obj) // ['fl', 18] 针对数组: const Arr = ['a','b','c'] Object.values(Arr) // ['a', 'b', 'c'] 2.`Object.create`方法的第二个参数添加的对象属性，如果不显式声明，默认是不可遍历的。属性描述对象的 `enumerable`默认是`false`。 `Object.values`不会返回这个属性，只要把`enumerable`改成`true`, `Object.values`就会返回属性的值。 const obj = Object.create({}, { p: { value: 42 } }) Object.values(obj) // [] const obj = Object.create( {}, { p: { value: 42, enumerable: true } } ) Object.values(obj) // [42] 3. `Object.values` 会过滤属性名为 `Symbol` 值的属性。 Object.values({ [Symbol()]: 123, foo: 'abc' }) // ['abc'] 4. 如果 `Object.values` 方法的参数是一个字符串，会返回各个字符组成的一个数组。 Object.values('foo') // ['f', 'o', 'o'] 5. 如果参数不是对象，`Object.values` 会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。所以，`Object.values` 会返回空数组。 Object.values(42) // [] Object.values(true) // [] (2) `Object.entries`的使用: 1. 返回数组 const obj = { foo: 'bar', baz: 42 }; Object.entries(obj)// [ ["foo", "bar"], ["baz", 42] ] Object.entries({ [Symbol()]: 123, foo: 'abc' }); // [ [ 'foo', 'abc' ] ] 2. 遍历对象的属性 let obj = { one: 1, two: 2 }; for (let [k, v] of Object.entries(obj)) { console.log( `${JSON.stringify(k)}: ${JSON.stringify(v)}` ); } // "one": 1 // "two": 2 3. 对象转为真正的Map结构 const obj = { foo: 'bar', baz: 42 }; const map = new Map(Object.entries(obj)); map // Map(2) {'foo' => 'bar', 'baz' => 42} (3) `Object.fromEntries`的使用： 1.`Object.fromEntries()`方法是`Object.entries()`的逆操作，用于将一个键值对数组转为对象。 Object.fromEntries([ ['foo', 'bar'], ['baz', 42] ]) // { foo: "bar", baz: 42 } 2. Map 结构转为对象 // 例一 const entries = new Map([ ['foo', 'bar'], ['baz', 42] ]); Object.fromEntries(entries) // { foo: "bar", baz: 42 } // 例二 const map = new Map().set('foo', true).set('bar', false); Object.fromEntries(map)// { foo: true, bar: false } ``` ### 9. [完美的文档整理集-改编自阮一峰老师](https://blog.csdn.net/weixin_46151381/category_11339616.html?spm=1001.2014.3001.5482) ### 10.js操作中的与、或、非 ```js Boolean(null) // false Boolean(undefined) // false Boolean(NaN) // false 传送门：https://juejin.cn/post/6844903944817213448 1. 与操作, 默认会隐式转换为布尔型进行判断如果有一个操作数是null，返回null 如果有一个操作数是undefined，返回undefined 如果有一个操作数是NaN，返回NaN 如果第一个操作数是null、undefined或者NaN之一，则返回对应操作数第一个操作数是对象，返回第二个操作数例子： ({}) && 2 // 2 第二个操作数是对象，只有第一个操作数为true的时候，才会返回该对象反例子： 0 && {} // 0 如果两个操作数都是对象，返回第二个操作数 2. 或操作(短路运算符), 默认会隐式转换为布尔型进行判断第一个操作数是对象，返回第一个对象第一个操作数是false，返回第二个操作数如果两个操作数都是对象，则返回第一个对象 3.非操作对任何类型的数据，都会返回一个布尔值对任何对象，返回false 任意非空字符串，返回false 空字符串，返回true 任意非0数字，返回false 0，返回true null、undefined、NaN，返回true ``` ### 11.事件循环 ```js 传送门：https://juejin.cn/post/7016298598883131423 总结： ```1.微任务：``` (1) Promise.prototype.then catch finally (2) process.nextTick (3) MutationObserver ```2.宏任务：``` (1) I/O (2) setTimeout (3) setInterval (4) setImmediate (5) requestAnimationFrame ```3.微任务执行时机要优于宏任务，先执行微任务，再执行宏任务。一个宏任务中的所有微任务执行完毕之后，如果该宏任务中还有嵌套的宏任务，则将这个宏任务放入放入事件队列中的宏任务的最下方。``` `promise.then是同步代码` 关卡(文章自带及```思维发散```案例): ```关卡1```: console.log(1) setTimeout(() => { console.log(2) Promise.resolve().then(() => { console.log(3) }) }); console.log(4) new Promise((resolve,reject) => { // 注意：Promise的executor是同步的哦！！！ console.log(5) resolve() }).then(() => { console.log(6) setTimeout(() => { console.log(7) }) }) console.log(8) ```输出```：1 4 5 8 6 2 3 7 ```关卡2(注意与关卡1的区别)```: console.log(1) setTimeout(() => { console.log(2) setTimeout(() => { console.log(3) }) }); console.log(4) new Promise((resolve,reject) => { ```注意：Promise的executor是同步的哦！！！``` console.log(5) resolve() }).then(() => { console.log(6) setTimeout(() => { console.log(7) }) }) console.log(8) ```输出```：1 4 5 8 6 2 7 3 ```关卡3```: setTimeout(() => { console.log(1) }, 0) console.log(2) const p = new Promise((resolve) => { ```注意：promise中不会返回其他东西``` console.log(3) resolve() }).then(() => { console.log(4) ```注意：then中就算不返回，也会默认返回成功回调，即promise.resolve(undefined)或者return undefined``` }).then(() => { console.log(5) }) console.log(6) ```输出```：2 3 6 4 5 1 ```关卡4```: new Promise((resolve,reject)=>{ console.log(1) resolve() }).then(()=>{ console.log(2) new Promise((resolve,reject)=>{ console.log(3) resolve() ```注意：resolve的作用只是将它加入到异步队列中，下方的两个then进入异步队列``` ```代码同步向下执行，return undefined，将第二个then加入异步队列``` ```取出异步队列中的第一个微任务，打印4,返回undefined，将5加入异步队列下方，所以先打印4``` ```再执行6，最后打印最后加入异步队列中的5``` }).then(()=>{ console.log(4) }).then(()=>{ console.log(5) }) }).then(()=>{ console.log(6) }) ```输出```：1 2 3 4 6 5 ```转化:``` new Promise((resolve, reject) => { console.log(1) resolve() }) .then(() => { console.log(2) return new Promise((resolve, reject) => { console.log(3) resolve() // 异步加入任务队列 }).then(() => { console.log(4) promise.resolve(undefined) }).then(() => { console.log(5) }) console.log('end') //异步加入任务队列 return undefined }) .then(() => { console.log(6) }) ```关卡5(注意与关卡4的区别)```: new Promise((resolve,reject)=>{ console.log(1) resolve() }).then(()=>{ console.log(2) new Promise((resolve,reject)=>{ console.log(3) ```因为此时没有改变promise，处于pending状态，就不会向下调用then方法``` ```但另外一个then方法是由上一个then方法的状态决定的，所以会执行``` }).then(()=>{ console.log(4) }).then(()=>{ console.log(5) }) }).then(()=>{ console.log(6) }) ```输出```：1 2 3 6 ```关卡6(注意与关卡4的区别)```: new Promise((resolve, reject) => { console.log(1) resolve() }).then(() => { console.log(2) ```多了个return，此时then方法有返回,then方法返回值之后，再执行下一个then方法``` return new Promise((resolve, reject) => { console.log(3) resolve() }).then(() => { console.log(4) }).then(() => { // 相当于return了这个then的执行返回Promise console.log(5) }) }).then(() => { console.log(6) }) ```输出```：1 2 3 4 5 6 ```关卡7(注意与关卡6的区别)```: new Promise((resolve, reject) => { console.log(1) resolve() }).then(() => { console.log(2) return new Promise((resolve, reject) => { console.log(3) ```这个promise和then方法的状态都是pending，就不会向下执行后一个then方法了``` }).then(() => { console.log(4) }).then(() => { // 相当于return了这个then的执行返回Promise console.log(5) }) }).then(() => { console.log(6) }) ```输出```：1 2 3 ```关卡8```: new Promise((resolve, reject) => { console.log(1) resolve() }).then(() => { console.log(2) new Promise((resolve, reject) => { console.log(3) resolve() }).then(() => { console.log(4) }).then(() => { console.log(5) }) }).then(() => { console.log(6) }) new Promise((resolve, reject) => { console.log(7) resolve() }).then(() => { console.log(8) }) ```输出```：1 7 2 3 8 4 6 5 ```关卡9: async与await: 相当于微任务：``` async function async1() { console.log(1); await async2(); console.log(2); ```转换：``` ```————转换开始:————``` console.log(1) // 同步 new Promise((resolve, reject) => { console.log(3) // 同步 resolve() }).then(() => { // 异步：微任务 then1 console.log(2) }) ``` ————转换结束:————``` } async function async2() { console.log(3); } console.log(4); setTimeout(function () { console.log(5); }); async1() new Promise(function (resolve, reject) { console.log(6); resolve(); }).then(function () { console.log(7); }); console.log(8); ```输出```：4 1 3 6 8 2 7 5 ```关卡10(注意与关卡9的联系)：``` let a = async () => { await console.log(1) await console.log(2) ```————转换开始:————``` new Promise((resolve, reject) => { console.log(1) // 同步 resolve() }).then(() => { new Promise((resolve, reject) => { console.log(2) resolve() }) ``` ————转换结束:————``` } a() console.log(3) ```输出```：1 3 2 ``` ### 12.函数的length属性 ```js 传送门：https://segmentfault.com/a/1190000041201277 123['toString'].length + 123 = 124 原理： `因为123是Number的原型对象，所以它会调用Number.prototype.toString方法` 123['toString'] === Number.prototype.toString // true Number.prototype.toString === Number.toString // false Number.toString === Function.prototype.toString // true Number.toString函数的```length```为0 Number.prototype.toString函数的```length```为1，参数为基数，即转换的进制数，默认为10 也只有Number原型链上的toString方法的参数的长度为1，其余为0 所以，结果为123 + 1 = 124 ``` ### 13.(a == 1 && a == 2 && a == 3) 有可能是 true 吗？ ``` 传送门：https://juejin.cn/post/6950664413317693470#comment 答案：```可以``` 方法一：```对象类型转换``` 当两个类型不同时进行==比较时，会将一个类型转为另一个类型，然后再进行比较。比如`Object`类型与`Number`类型进行比较时，`Object`类型会转换为`Number`类型。 `Object`转换为`Number`时，会尝试调用`Object.valueOf()`和`Object.toString()`来获取对应的数字基本类型。 var a = { i: 1, toString: function () { return a.i++; } } console.log(a == 1 && a == 2 && a == 3) // true 方法二：```数组类型转换``` 数组调用`toString()`会隐含调用`Array.join()`方法而数组`shift`方法的用法： `shift()` 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组是空的，那么 `shift()` 方法将不进行任何操作，返回 `undefined` 值。请注意，该方法不创建新数组，而是直接修改原有的数组。所以我们可以看到， `a == 1`时会调用`toString()`,`toString()`调用`join()`，`join()`等于`shift`，则转换为`Number`类型后为1。 var a = [1, 2, 3]; a.join = a.shift; console.log(a == 1 && a == 2 && a == 3); // true 方法三：```使用defineProperty``` var val = 0; Object.defineProperty(window, 'a', { // 这里要window，这样的话下面才能直接使用a变量去 == get: function () { return ++val; } }); console.log(a == 1 && a == 2 && a == 3) // true ``` ### 14. ?.的妙用 ```js 传送门：https://juejin.cn/post/6995334897065787422#heading-40 ```1. 对象?.属性:``` const obj = { cat: { name: '哈哈' } } const dog = obj?.dog?.name // undefined ```2. 数组?.索引:``` const item = arr?.[1] ```3. 函数?.执行:``` const res = fn?.() ```4. 数组?.长度:``` const length = list?.length ```5. 数组?.循环``` priceList?.map(({ price }) => price) ``` ### 15.Set和Map的基本使用： ```js 传送门：https://juejin.cn/post/6995334897065787422#heading-21 ```set的使用：``` ```1.set的基本用法``` // 可不传数组 const set1 = new Set() set1.add(1) set1.add(2) console.log(set1) // Set(2) { 1, 2 } // 也可传数组 const set2 = new Set([1, 2, 3]) // 增加元素使用 add set2.add(4) set2.add('林三心') console.log(set2) // Set(5) { 1, 2, 3, 4, '林三心' } // 是否含有某个元素使用 has console.log(set2.has(2)) // true // 查看长度使用 size console.log(set2.size) // 5 // 删除元素使用 delete set2.delete(2) console.log(set2) // Set(4) { 1, 3, 4, '林三心' } ```2.set的不重复性``` // 增加一个已有元素，则增加无效，会被自动去重 const set1 = new Set([1]) set1.add(1) console.log(set1) // Set(1) { 1 } // 传入的数组中有重复项，会自动去重 const set2 = new Set([1, 2, '林三心', 3, 3, '林三心']) console.log(set2) // Set(4) { 1, 2, '林三心', 3 } ```注意：两个对象都是不同的指针，所以没法去重``` const set1 = new Set([1, {name: '林三心'}, 2, {name: '林三心'}]) console.log(set1) // Set(4) { 1, { name: '林三心' }, 2, { name: '林三心' } } ```注意：如果是两个对象是同一指针，则能去重``` const obj = {name: '林三心'} const set2 = new Set([1, obj, 2, obj]) console.log(set2) // Set(3) { 1, { name: '林三心' }, 2 } ```注意：咱们都知道 NaN !== NaN，NaN是自身不等于自身的，但是在Set中他还是会被去重``` const set = new Set([1, NaN, 1, NaN]) console.log(set) // Set(2) { 1, NaN } ```map的使用：``` // 定义map const map1 = new Map() // 新增键值对使用 set(key, value) map1.set(true, 1) map1.set(1, 2) map1.set('哈哈', '嘻嘻嘻') console.log(map1) // Map(3) { true => 1, 1 => 2, '哈哈' => '嘻嘻嘻' } // 判断map是否含有某个key 使用 has(key) console.log(map1.has('哈哈')) // true // 获取map中某个key对应的value 使用 get(key) console.log(map1.get(true)) // 2 // 删除map中某个键值对使用 delete(key) map1.delete('哈哈') console.log(map1) // Map(2) { true => 1, 1 => 2 } // 定义map，也可传入键值对数组集合 const map2 = new Map([[true, 1], [1, 2], ['哈哈', '嘻嘻嘻']]) console.log(map2) // Map(3) { true => 1, 1 => 2, '哈哈' => '嘻嘻嘻' } ``` ### 16.判断当前点击位于`特定元素el`的内部还是外部： ```js window.addEventListener('mousedown', e => { // 获取被点击的元素 const clickedEl = e.target if (el.contains(clickedEl)) { // 在 "el "里面点击了 } else { // 在 "el "外点击了 } }) ``` ### 17.`sort`方法的应用 ```js (1) `语法：` arr.sort([compareFunction]) (2) `使用：` `a. 如果未指定函数，则默认根据元素按照转换为的字符串的各个字符的Unicode位点进行排序：` var arr = [12, 13, 24, 46, 49, 32, 34] arr.sort() // (7) [12, 13, 24, 32, 34, 46, 49] ['Javascript','Vue','React','Node','Webpack'].sort() // `b. 指定函数的情况下：` 如果想按照其他标准进行排序，就需提供比较函数compareFunction(a,b)，数组会按照调用该函数的返回值排序，即a和b是两个将要比较的元素： 1.如果compareFunction(a,b)小于0，则a排列到b之前； 2.如果 compareFunction(a, b)等于0，a和b的相对位置不变（并不保证）; 3.如果 compareFunction(a, b)大于0，b排列到a之前； let Users = [ {name:'鸣人', age:16}, {name:'卡卡西', age:28}, {name:'自来也', age:50}, {name:'佐助', age:17} ]; Users.sort((a, b) => { return a.age - b.age }) // => 鸣人、佐助、卡卡西、自来也的对象数组 (3) `注意：使用该方法会改变原数组, 原数组会变化为排序后的结果` ``` ### 18. `去重`最常用的两种方法 ```js `方法一(推荐)：` const IdList = [...new Set(this.checkedIdList)] `方法二：` const IdList = Array.from(new Set(this.checkedIdList)) ``` ### 19. [你知道如何实现`js`中的`方法重载`吗？](https://juejin.cn/post/7160513296733323300) ### 20. 使用`bluebird`提升`promise`的执行速度 ```js `先安装包：npm install -S bluebird(`3.7.2`)，然后在main.js中：` import Promise from 'bluebird' Promise.config({ // Enable warnings 启用警告 warnings: false, // Enable long stack traces 启用长堆栈跟踪 longStackTraces: false, // Enable cancellation 启用取消 cancellation: true, // Enable monitoring 启用监视 monitoring: true, // Enable async hooks 启用异步挂钩 asyncHooks: false }) window.Promise = Promise `在执行的promise较少的时候，这种差距并不明显，随着promise的数量增加，就可以明显看到两者的差距` ` 验证： // Promise1为执行的蓝鸟promise // Promise为执行的普通promise const promises = [] const bluebirds = [] for (let i = 0; i < 10; i++) { promises.push(new Promise((resolve) => { setTimeout(() => { resolve(i) }, 1) })) bluebirds.push(new Promise1((resolve) => { setTimeout(() => { resolve(i) }, 1) })) } console.log('promise') console.time() Promise.all(promises) console.timeEnd() console.log('bluebirds') console.time() Promise1.all(bluebirds) console.timeEnd() ` ``` ![`8`Z}038U32$~@%@Z6AEJNT.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4539d12c77444e778dfc293e3e9803d0~tplv-k3u1fbpfcp-watermark.image?) ### 21. 使用`big.js`解决`浮点数精度`问题 ```js `先安装插件：npm install big.js` `官网传送门：https://github.com/MikeMcl/big.js` ``` ### 22. 发起`axios请求`的优化 ```js `传送门：https://cloud.tencent.com/developer/article/1471778` `npm install slow-json-stringify` `1. 在使用axios发起请求时，axios其实帮我们将传给后端的对象转换为字符串，但这个过程很慢。因此在请求拦截器中，我们可以对这个过程手动进行优化。axios提供了一个transformRequest方法，在这个方法中拿到的数据还是对象类型，我们可以通过slow-json-stringify手动将对象转换为字符串，重写transformRequest方法。` `2. 在获取后端返回的数据时，也是将字符串转换为json格式，这个过程很慢。我们同样可以在响应拦截器中，手动进行优化，自行将字符串转换为json格式, axios提供的这个方法是transformResponse。` `3. 我们可以在发起axios请求时压缩数据。` ``` ### 23. `es6`模块化每个 `js` 文件都是一个独立的模块，导入模块成员使用 `import` 关键字，暴露模块成员使用 `export` 或者 `export default` 关键字。每个模块中，只允许使用唯一的一次 `export default`，否则会报错！ - **1. 在js文件中定义的变量全部使用默认导出：需要全部导入，不能解构导入，否则无效** ```js `导出js文件(const.js)：` export default { name: 'cxk', age: 18 } ``` ```js `导入文件(index.vue)：使用解构导入无效` ``` **效果浏览：**

```js `导入文件(index.vue)：全部导入` ``` **效果浏览：**

- **2. 按需导出：按需导入** ```js `导出文件(const.js)` export const name = 'cxk' export const age = '18' ``` ```js `导入文件(index.vue): 使用全部导入报错` ``` **效果浏览：**

```js `导入文件(index.vue): 按需导入` ``` **效果浏览：**

- **3. 默认导出与按需导出的混合情况** ```js `混合导出(const.js)` export const hobby = 'sing, dance and rap' export default { name: 'cxk', age: 18 } ``` ```js `全部导出与按需导出相结合: 全部导出只包含export default里面定义好的变量` ``` **效果浏览：**

### 24. reduce函数剖析 ``` `js的reduce函数有两个参数，第一个参数为支持四个参数的必填函数，否则会报错，第二个参数为初始值` `调用者需要是一个数组，不然会返回不是一个函数的错误，这个函数其实利用了递归的思想` js函数的四个参数： `(1) previousValue: 必填，如果不提供初始值，这个值初始为数组的第一个成员，以后每次执行，都是上次函数返回的结果。` `切记函数第一个参数在非第一次执行时，使用的是函数上次返回的结果，而不是previousValue。` `(2) currentValue: 数组中当前被处理的元素。第一次执行时，默认为数组的第二个成员；以后每次执行时，都是下一个成员。` `(3) index: 当前元素再数组中的索引。` `(4) array: 调用reduce方法的原数组` `第二个参数是，在第一次调用reduce方法时，将这个初始值赋值给函数的第一个参数` [1,2,3].reduce(() => {}) // undefined [1,2,3].reduce( a => a) // 1 `1. 未提供初始值:` var arr = [1, 2, 3, 4]; var sum = arr.reduce((prev, cur, index, arr) => prev + cur) // `sum的结果为10` `2. 有提供初始值:` var arr = [1, 2, 3, 4]; var sum = arr.reduce((prev, cur, index, arr) => prev + cur, 10) // `sum的结果为20` `3. 最好提供初始值(防止空数组时报错，最差也会返回初始值)` TypeError: Reduce of empty array with no initial value `4. 利用reduce函数统计数组中每个元素出现的次数` let names = ['fl', 'yll', 'yll', 'lgy','fl'] `核心思想是提供初始值{}, 利用key和value。如果对象中存在key值,则value[key]加1，否则赋予初始值1` let statistics = names.reduce((pre, cur)=>{ if(cur in pre) pre[cur]++ else pre[cur] = 1 return pre }, {}) console.log(statistics) `结果为：{fl: 2, yll: 2, lgy: 1}` `5. 利用reduce函数进行对象的属性求和` var result = [ { subject: 'math', score: 10 }, { subject: 'chinese', score: 20 }, { subject: 'english', score: 30 } ] var sum = result.reduce((pre, cur) => pre + cur.score, 0) // 60 `6. 利用reduce函数对数组去重` let namesList = ['fl', 'yll', 'yll','fl', 'lgy'] let uniqueArr = namesList.reduce((pre, cur) => { if(!pre.includes(cur)) return pre.concat(cur) else return pre }, []) `结果为： ['fl', 'yll', 'lgy'] ` ``` ## 结语大概就这样吧~