# 前言近期整理了JavaScript知识体系，65个知识点由浅入深掌握Js，建议收藏，如有问题，欢迎指正。 # 1. **说说你对JS的理解** 1995年，**布莱登·艾奇**（美国人）在网景公司，用10天写的一门语言。 Js是一门：动态的，弱类型的，解释型的，基于对象的脚本语言，同时Js又是单线程的。 - 动态类型语言：代码在执行过程中，才知道这个变量属于的类型。 - 弱类型：声明变量一般用var，数据类型不固定，可以随时改变。可以将字符串'12'和整数3进行连接得到字符串'123'，在相加的时候会进行强制类型转换。 - 解释型：一边执行，一边编译，不需要程序在运行之前需要整体先编译。 - 基于对象：最终所有对象都指向`Object`。 - 脚本语言：一般都是可以嵌在其它编程语言当中执行。 - 单线程：依次执行，前面代码执行完后面才执行。组成部分： | ECMAscript | DOM |BOM | | --- | --- | --- | | JavaScript的语法部分 | 文档对象模型| 浏览器对象模型 | 主要包含JavaScript语言语法 | 主要用来**操作页面**元素和样式| 主要用来**操作浏览器**相关功能 # 2. **JS是面向对象语言吗** 面向对象：编程思想，对应的是面向过程。面向对象：以类构建对象，对象中有属性和方法。面向过程：凡事都要自己亲力亲为。 `Javascript`不是面向对象语言，而是一种**基于原型的面向对象**的脚本语言。面向对象包括三大特征：继承、封装、多态；而`JavaScript`中只有封装，JS继承也只是模拟继承，谈不上面向对象。 # 3. **JS数据类型有哪些？值是如何存储的？** Js中一共有8种数据类型：7个基本数据类型和1个对象。基本数据类型: - Number - String - Boolean - undefined - null - **Symbol**（ES6新增，表示独一无二的值） - **BigInt**（ES6新增，以n结尾，表示超长数据）对象： - **Object** - **function** - **Array** - Date - RegExp 基本数据类型值是不可变的，多次赋值，只取最后一个。 ```javascript var name = 'DarkHorse'; name.toUpperCase(); // 'DARKHOURSE' console.log(name); // 'DarkHorse' ``` 基本数据类型存储在**栈**中，占据空间小、属于被频繁使用数据。对象值是可变的，可以拥有属性和方法，并且是可以动态改变的。 ```javascript var a={name:'DarkHorse'}； a.name='xiaohong'； console.log(a.name) //xiaohong ``` 引用数据类型存储在堆中。引用数据类型占据空间大，如果存储在栈中，将会影响程序运行的性能。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在**栈**中的地址，取得地址后从**堆**中获得实体。 ![QQ截图20230327113517副本.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78fe97df10154f07980893dfb7eaa52a~tplv-k3u1fbpfcp-watermark.image?) # 4. **Undefined 与 undeclared 的区别？** 变量声明未赋值，是 `undefined`。未声明的变量，是` undeclared`。浏览器会报错`a is not defined` ，ReferenceError。 # 5. Null和undefined的区别 `null`和 `undefined` 都是基本数据类型，这两个数据类型只有一个值，`null`和 `undefined`。 `null`表示空的，什么都没有，不存在的对象，他的数据类型是`object`。初始值赋值为`null`，表示将要赋值为对象，不再使用的值设为`null`，浏览器会自动回收。 `undefined`表示未定义，常见的为`undefined`情况：一是变量声明未赋值，二是数组声明未赋值；三是函数执行但没有明确的返回值；四是获取一个对象上不存在的属性或方法。 # 6. JS数据类型转换 **JS的显式数据类型转换一共有三种：** （1）第一种是：转字符串。有`.toString()`方法和`String()`函数，`Sting()`函数相比于`toString()`函数适用范围更广，可以将`null`和`undefined`转化为字符串，`toString()`转化会报错。（2）第二种是：转数值。可以用`Number()`函数转数值，`.parseInt`转整数,`parseFloat`函数转小数。 `Number()`函数适用于所有类型的转换，比较严格,字符串合法数字则转化成数字，不合法则转化为`NAN`；空串转化为0，`null`和`undefined`转0和`NAN`；`ture`转1，`false`转0。 `parseInt()`是从左向右获取一个字符串的合法整数位，`parseFloat()`获取字符串的所有合法小数位。（3）第三种是：转布尔。像`false`、0、空串、`null`、`undefined`和`NaN`这6种会转化为`false`。常用的隐式类型转换有：任意值+空串转字符串、+a转数值、a-0 转数值等。 ```js var a = 1 + 2 + '3'; // 123 // 任何值和字符串做加法运算，都会先转换为字符串然后进行拼串 var a = 10 - '5' // 5 // 如果对非数字的值进行算数运算，JS解析器会将值转化为数值再运算 // 总结：字符相连，数值相加（- * /） ``` # 7. 数据类型的判断（1）基本类型的判断——**typeof** `typeof`的返回值有六种，返回值是**字符串**，不能判断**数组和null**的数据类型，返回`object`。 ```javascript typeof ''; // string 有效 typeof 1; // number 有效 typeof true; //boolean 有效 typeof undefined; //undefined 有效 typeof new Function(); // function 有效 typeof null; //object 无效这个是一个设计缺陷，造成的 typeof [] ; //object 无效 ``` （2）引用数据类型判断 —— **instanceof** **检查对象原型链上有没有该构造函数**，可以精准判断引用数据类型，不能判断基本数据类型。 ```javascript [] instanceof Array; //true {} instanceof Object;//true new Date() instanceof Date;//true new RegExp() instanceof RegExp//true var arr = [1, 2, 3]; console.log(arr instanceof Array) // true console.log(arr instanceof Object); // true function fn(){} console.log(fn instanceof Function)// true console.log(fn instanceof Object)// true ``` （3）类似instanceof of —— **constructor** 每一个对象实例都可以通过 `constrcutor` 对象来访问它的构造函数。既可以检测基本类型又可以检测对象，但不能检测`null`和`undefined`。 ```javascript console.log((10).constructor===Number);//true console.log([].constructor===Array);//true var reg=/^$/; console.log(reg.constructor===RegExp);//true console.log(reg.constructor===Object);//false ``` 需要注意的一点是函数的 `constructor` 是不稳定，如果把**函数的原型进行重写**，这样检测出来的结果会不准确。 ```javascript function Fn(){} Fn.prototype = new Array() var f = new Fn console.log(f.constructor)//Array ``` （4）最准确方式 —— **Object.prototype.toString.call()** 获取`Object`原型上的`toString`方法，让方法执行，让`toString`方法中的`this`指向第一个参数的值，最准确方式。第一个`object`：当前**实例是对象数据类型的**(object)，第二个`Object`：**数据类型**。 ```javascript Object.prototype.toString.call('') ; // [object String] Object.prototype.toString.call(1) ; // [object Number] Object.prototype.toString.call(true) ; // [object Boolean] Object.prototype.toString.call(undefined) ; // [object Undefined] Object.prototype.toString.call(null) ; // [object Null] Object.prototype.toString.call(new Function()) ; // [object Function] Object.prototype.toString.call(new Date()) ; // [object Date] Object.prototype.toString.call([]) ; // [object Array] Object.prototype.toString.call(new RegExp()) ; // [object RegExp] Object.prototype.toString.call(new Error()) ; // [object Error] ``` # 8. JS中三个基本包装对象 **数字、字符串、布尔值**作为构造函调用（加new）即为包装对象包装对象指的是数字、字符串、布尔值分别对应的Number、String、Boolean三个原生对象，这三个原生对象可以把原始对象的值包装成对象。 ```js var v1 = new Number(123); var v2 = new String('abc'); var v3 = new Boolean(true); typeof v1 // "object" typeof v2 // "object" typeof v3 // "object" ``` # 9. a++ 和 ++a 区别无论是前++还是后++，都会使原来变量立刻自增1。不同在于a++是原值，++a是新值。 ```js var a = 4; console.log(a++); //4 原值 var b = 4; console.log(++b) //5 新值 ``` # 10. 0.1+0.2 === 0.3吗在开发过程中遇到类似这样的问题： ```js let n1 = 0.1, n2 = 0.2 console.log(n1 + n2) // 0.30000000000000004 ``` 显然，这里得到的不是想要的结果。计算机是使用二进制存储数据，整数转换没有误差，如9转换成二进制是1001,而小数的话用二进制转化不准确，比如0.2会转化成0.1100…，所有用二进制表示数据的计算机编程语言都是这样的。使用.toFixed()，四舍五入 ```js (n1 + n2).toFixed(2) ``` 经常操作小数要求精度，使用第三发库：Math.js # 11. **JS的作用域和作用域链** 作用域就变量起作用的范围和区域。作用域的目的是隔离变量，保证不同作用域下同名变量不会冲突。 JS中，作用域分为三种，**全局作用域、函数作用域和块级作用域。** 全局作用域在`script`标签对中，无论在哪都能访问到。在函数**内部**定义的变量，拥有函数作用域。块级作用域则是使用`let`和`const`声明的变量，如果被一个大括号括住，那么这个大括号括住的变量区域就形成了一个块级作用域。作用域层层嵌套，形成的关系叫做作用域链，作用域链也就是查找变量的过程。查找变量的过程：当前作用域 --》上一级作用域 --》上一级作用域 .... --》直到找到全局作用域 --》还没有，则会报错。作用域链是用来保证——**变量和函数**在执行环境中有序访问。 # 12. **LHS和RHS查询** LHS和RHS查询是JS引擎查找变量的两种方式，这里的“Left”和“Right”，是相对于赋值操作来说，当变量出现在赋值操作左侧时，执行LHS操作。 LHS 意味着 **变量赋值**或**写入内存**，,他强调是**写入**这个动作。 ```js var name = '小明' ``` 当变量出现在赋值操作右侧或没有赋值操作时，是RHS。 ``` js var Myname = name console.log(name) ``` RHS意味着 **变量查找**或**读取内存**，它强调的是**读**这个**动作**。 # 13. **词法作用域和动态作用域** Js底层遵循的是词法作用域，从语言的层面来说，作用域模型分两种： > 词法作用域：也称静态作用域，是最为普遍的一种作用域模型 > > 动态作用域：相对“冷门”，bash脚本、Perl等语言采纳的是动态作用域词法作用域：在代码**书写时完成划分**，作用域沿着它**定义的位置**往外延伸。动态作用域：在代码**运行时完成划分**，作用域链沿着他的**调用栈**往外延伸。更多详细的内容可看我之前文章：[《深入理解JS中的词法作用域与作用域链》]() # 14. 什么是匿名函数，有什么作用匿名函数也叫一次性函数，没用名字，且在定义时执行，且执行一次，不存在预解析（函数内部执行的时候会发生）。匿名函数的基本形式为： ``` js (function(){ ... }()); ``` 除此之外，还有常见的以下写法 ```js (function(){ console.log('我是一个匿名函数') })(); var a = function(){ console.log('我是一个匿名函数') }() // 使用多种运算符开头，一般是用! !function(){ console.log('我是一个匿名函数') }(); ``` 匿名函数的作用有：（1）对项目的初始化，页面加载时调用，保证页面有效的写入Js，不会造成全局变量污染（2）防止外部命名空间污染（3）隐藏内部代码暴露接口 # 15. 什么是回调函数，常见的回调函数有哪些回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）。在Js中函数也是对象的一种，同样对象可以作为参数传递给函数，因此函数也可以作为参数传递给另一个函数，**这个做为参数的函数就是回调函数**。简单来说：回调函数即别人调用了这个函数，即函数作为参数传入另一个函数。一般来说回调函数满足三个条件：自己定义的函数、自己没有调用，函数最终执行了。在开发中经常看到的回调函数有： ```js // 点击事件的回调函数 $('#btn').click(function(){ console.log('click btn'); }) // 异步请求的回调函数 $.get('ajax/test.html',function(data){ $('#box').html(data); }) // 计时器 var timeId = setTimeout(function{ console.log('hello') },1000) ``` # 16. 什么是构造函数，与普通函数的区别在ES6之前，我们都是通过构造函数创建类，从而生成对象实例。 **构造函数就是一个函数**，只不过通常我们把构造函数的名字写成大驼峰，构造函数和普通函数的区别，构造函数通过new关键字进行调用，而普通函数直接调用。 ```js // 创建一个类（函数） function Person(name,age){ this.name = name; this.age = age; this.eat = function(){ console.log('我爱吃'); } } // 普通函数调用 var result = Person('张三',18); console.log(result); // 构造函数调用 var p1 = new Person('李四',16); console.log(p1); var c2 = new Person('王五',14); console.log(p2); ``` # 17. 函数中arguments 的对象是什么函数在调用时JS引擎会向函数中传递两个的隐含参数，一个是`this`（后面我们会说到），另一个就是`arguments`，`arguments`是一个伪数组，主要作用是：**获取函数中在调用时传入的实参**。 ```js function add(){ console.log(arguments); return arguments[0] + arguments[1]; } add(10,20); ``` 使用**arguments.length**可以获取**传递实参的个数**，同时也可以让我们的函数具有多重功能。 ```js function addOrSub(a,b,c){ if(arguments.length == 2){ return a - b; }else if(arguments.length == 3){ return a + b + c; } } console.log(addOrSub(10,20));//传递两个实参就做减法 console.log(addOrSub(10,20,30));//传递的是三个实参就做加法 ``` # 18. 列举常用字符串方法 **方法名** | **功能** | **原字符串是否改变** | | --------------------- | --------------------------------------- | ---------------- | | charAt() | 返回指定索引的字符 | n | | charCodeAt(0) | 返回指定索引的字符编码 | n | | concat() | 将原字符串和指定字符串拼接，不指定相当于复制一个字符串 | n | | String.fromCharCode() | 返回指定编码的字符 | n | | indexOf() | 查询并返回指定子串的索引，不存在返回-1 | n | | lastIndexOf() | 反向查询并返回指定子串的索引，不存在返回-1 | n | | localeCompare() | 比较原串和指定字符串：原串大返回1,原串小返回-1，相等返回0 | n | | slice() | 截取指定位置的字符串，并返回。包含起始位置但是不包含结束位置，位置可以是负数 | n | | substr() | 截取指定起始位置固定长度的字符串 | n | | substring() | 截取指定位置的字符串，类似slice。起始位置和结束位置可以互换并且不能是负数 | n | | split() | 将字符串切割转化为数组返回 | n | | toLowerCase() | 将字符串转化为小写 | n | | toUpperCase() | 将字符串转化为大写 | n | | valueOf() | 返回字符串包装对象的原始值 | n | | toString() | 直接转为字符串并返回 | n | | includes() | 判断是否包含指定的字符串 | n | | startsWith() | 判断是否以指定字符串开头 | n | | endsWith() | 判断是否以指定字符串结尾 | n | | repeat() | 重复指定次数 | n # 19. 列举常用数组方法 | **方法名** | **功能** | **原数组是否改变** | | ------------- | ------------------------------------------------------------- | --------------- | | concat() | 合并数组，并返回合并之后的数据 | n | | join() | 使用分隔符，将数组转为字符串并返回 | n | | pop() | 删除最后一位，并返回删除的数据，在原数组 | y | | shift() | 删除第一位，并返回删除的数据，在原数组 | y | | unshift() | 在第一位新增一或多个数据，返回长度，在原数组 | y | | push() | 在最后一位新增一或多个数据，返回长度 | y | | reverse() | 反转数组，返回结果，在原数组 | y | | slice() | 截取指定位置的数组，并返回 | n | | sort() | 排序（字符规则），返回结果，在原数组 | y | | splice() | 删除指定位置，并替换，返回删除的数据 | y | | toString() | 直接转为字符串，并返回 | n | | valueOf() | 返回数组对象的原始值 | n | | indexOf() | 查询并返回数据的索引 | n | | lastIndexOf() | 反向查询并返回数据的索引 | n | | forEach() | 参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值 | n | | map() | 同forEach，同时回调函数返回数据，组成新数组由map返回 | n | | filter() | 同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回 | n | | Array.from() | 将伪数组对象或可遍历对象转换为真数组 | n | | Array.of() | 将一系列值转换成数组 | n | | find | 找出第一个满足条件返回true的元素 | n | | findIndex | 找出第一个满足条件返回true的元素下标 | n | **注意：重点关注方法的：功能、参数、返回值** # 20. 如何判断一个对象是空对象方法一：将对象转换成JSON字符串，**再判断是否等于“** **{}** **”** ```js let obj={}; console.log(JSON.stringify(obj)==="{}"); //返回true ``` 方法二：Object.keys()方法，返回对象的属性名组成的一个数组，若长度为0，则为空对象 ```js console.log(Object.keys(obj).length==0); //返回true ``` 方法三：for in循环 ```js let result=function(obj){ for(let key in obj){ return false;//若不为空，可遍历，返回false } return true; } console.log(result(obj)); //返回true ``` # 21. 什么是DOM和BOM **DOM**：文档对象模型，将文档看做是一个对象，这个对象主要定义了处理网页内容的方法和接口，**通过JS操作页面元素**。 **BOM**：浏览器对象模型，将浏览器看做是一个对象，定义了与浏览器进行交互的方法和接口，**通过JS操作浏览器**。 **BOM**的核心是`window`,`window` 对象子有 `location` `navigator` `history`。 **DOM**的最根本的`document`对象也是`window` 对象的子对象。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0094519ccc544489bf7499b47a297334~tplv-k3u1fbpfcp-watermark.image?) **window对象** - ` window`对象是BOM的顶级对象，称作浏览器窗口对象 - 全局变量会成为`window`对象的属性 - 全局函数会成为`window`对象的方法 ```js - window.onload - window.onresize - window.onscroll ``` **Location对象** - 提供了url相关的属性和方法。一些常用的有： ```js // url相关属性 location.href // 返回当前加载页面的完整URL location.protocal // 返回页面使用的协议 location.search // 返回URL的查询字符串，查询？开头的的字符串 location.reload(); // reload():实现的是页面刷新 location.assign("https://www.baidu.com"); // assign():可以打开新的页面，并且可以返回，可以产生历史纪录的 location.replace("https://www.baidu.com"); // replace():用新文档替换当前的文档，但不能返回，没有产生历史记录 ``` **history对象** - 提供了对象包含浏览器的历史记录，这些历史记录以栈的形式保存。页面前进则入栈，页面返回则出栈。 ```js history.back();//历史记录返回上一页 history.forward();//去到下一页 history.go(-2);//去到指定的历史记录页 0代表当前页 -1代表之前 1代表之后 ``` **navigator对象** - 提供了浏览器相关的信息，比如浏览器的名称、版本、语言、系统平台等信息。 ```js console.log(window.navigator.appName);//Netscape console.log(window.navigator.appVersion);//浏览器版本 console.log(window.navigator.appCodeName);//浏览器内核版本，但是打印出来一般 ``` **screen对象** - 提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度。 ```js console.log(window.screen.width);//屏幕的宽分辨率 console.log(window.screen.height);//屏幕的高 ``` # 22. DOM树简单描述一下以**Html**为根节点，形成的一棵倒立的树状结构，我们称作DOM树。这个树上所有的东西都叫节点，节点有很多类（元素、属性、文本），通过**DOM方法**去获取或者去操作节点，就叫DOM对象。 ![src=http___images2015.cnblogs.com_blog_740839_201702_740839-20170210181415635-217958893.png&refer=http___images2015.cnblogs.webp](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a505f48d6dc74deab1d37cf40ae5ee13~tplv-k3u1fbpfcp-watermark.image?) **Document对象** 指这份文件，也就是这份 HTML 档的开端。**当浏览器载入 HTML 文档, 它就会成为 Document 对象**。 **重绘**：DOM元素的**样式**发生改变，浏览器会**重新渲染**这个元素。 **回流**：DOM元素**结构或者位置**发生改变（删除、增加、改变位置大小），浏览器重新计算渲染整个DOM树。 # 23. DOM操作有哪些 **（1）查找节点** ```js - getElementById //按照 id 查询 - getElementsByTagName //按照标签名查询 - getElementsByClassName //按照类名查询 - querySelectorAll //按照css 选择器查询 ``` **（2）创建节点** ``` js document.write() innerHTML createElement()和appendChild() ``` **（3）添加、移除、替换、插入** ```js appendChild(node); //插入节点 removeChild(node); //移除节点 replaceChild(new,old); //替换节点 insertBefore(new,old) //追加节点 ``` **（4）属性操作** ```js getAttribute(key); //获取自定义属性 setAttribute(key, value); //设置自定义属性 hasAttribute(key); //是否存在该属性 removeAttribute(key); //移除属性 ``` **（5）内容修改** ```js InnerText(); // 无标签效果 InnerHTML(); // 有标签效果 Text-content // IE9以上支持，类似innerText ``` # 24. 什么是事件传播当事件发生在`DOM`对象上，该事件并不完全发生在这个元素上。关于事件传播，IE和网景公司有不同的理解，IE认为，事件应该是冒泡阶段，网景公司认为事件应该是捕获阶段，随后W3C综合了两个公司的方案，JS同时支持冒泡和捕获流，并以此确定事件流标准。这个标准也叫DOM2事件流。 **事件传播的三个阶段：** （1）事件捕获事件从`window`开始，从外向内，直到到达目标事件或`event.target` （1）目标阶段事件到达目标元素，触发监听事件（2）事件冒泡事件从目标元素开始冒泡，从内向外，直到到达`window`。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b5e24f402304de18c382aa4d8b203d4~tplv-k3u1fbpfcp-watermark.image?) 当事件被触发时，首先经历的是一个捕获过程，事件会从最外层元素开始“穿梭”，逐层“穿梭”到最内层元素。这个穿梭过程会持续到事件抵达他目标的元素（也就是真正触发这个事件的元素）为止。此时事件流接切换到了“目标阶段”——事件被目标元素所接收然后事件会会弹，进入到冒泡阶段——他会沿着来时的路“逆流而上”，一层一层再走回去。也就是说当事件在层层`DOM`元素穿梭时，所到之处都会触发事件处理函数。 # 25. 三种事件模型是什么 **DOM0级事件模型** 通过对象`.onclick`形式绑定，同一元素绑定多个相同事件，后会覆盖前边，事件不会传播，不存在事件流概念。 ```html