大前端2022（2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪））

时间2025-08-02 07:47:05分类IT科技浏览3832

导读：目录 css经典高频面试题...

js部分面试题

js的数据类型（关于数据类型相关的）

基本数据类型

ES5的5种：Null ，undefined ，Boolean ，Number ，String ， ES6新增：Symbol表示独一无二的值 ES10新增：BigInt 表示任意大的整数

一种引用数据类型：（本质上是由一组无序的键值对组成）

引用数据类型: Object 。包含Object 、Array 、 function 、Date 、RegExp 。 JavaScript不支持创建任何自定义类型的数据，也就是说JavaScript中所有值的类型都是上面8中之一。

null 和 undefined 的区别？

相同：

在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null 。

不同：

undefined 代表的含义是未定义，

定义了形参，没有传实参，显示undefined

一般变量声明了但还没有定义的时候会返回 undefined

对象属性名不存在时，显示undefined

函数没有写返回值，即没有写return ，拿到的是undefined

null 代表的含义是空对象。也作为对象原型链的终点

null 主要用于赋值给一些可能会返回对象的变量，作为初始化。

ES10新增：BigInt 表示任意大的整数

BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要。使用BigInt ，整数溢出将不再是问题。

此外，可以安全地使用更加准确时间戳，大整数ID等，而无需使用变通方法。 BigInt目前是第3阶段提案，一旦添加到规范中，它就是JS 第二个数字数据类型，也将是 JS 第8种基本数据类型：

要创建BigInt ，只需在整数的末尾追加n即可。比较: console.log(9007199254740995n); // → 9007199254740995n console.log(9007199254740995); // → 9007199254740996 或者，可以调用BigInt()构造函数 BigInt("9007199254740995"); // → 9007199254740995n // 注意最后一位的数字 9007199254740992 === 9007199254740993; // → true console.log(9999999999999999); // → 10000000000000000

数据类型存储以及堆栈内存是什么

基本数据类型：直接存储在栈内存中，占据空间小，大小固定，属于被频繁使用的数据。指的是保存在栈内存中的简单数据段；number string 布尔

引用数据类型：同时存储在栈内存与堆内存中，占据空间大，大小不固定。

引用数据：类型将指针存在栈中，将值存在堆中。当我们把对象值赋值给另外一个变量时，复制的是对象的指针，指向同一块内存地址，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值，数组对象

堆(heap)和栈(stack)有什么区别存储机制

栈： 是一种连续储存的数据结构，具有先进后出后进先出的性质 。

通常的操作有入栈（压栈），出栈和栈顶元素。想要读取栈中的某个元素，就是将其之间的所有元素出栈才能完成。

堆： 是一种非连续的树形储存数据结构，具有队列优先,先进先出；每个节点有一个值，整棵树是经过排序的。特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆。常用来实现优先队列，存取随意。

js数据类型判断，条件分支

if语句和逻辑运算

所有基本类型中Boolean值是false的只有6个，分别是 : 0 NaN null undefined false 引用类型Boolean值全是true.

if条件是单个值时，如果是truly值，条件成立，如果是falsely值，条件不成立

逻辑运算符以及他们的运算规则?

&& 逻辑与两边都是true ，才返回true ，否则返回false || 逻辑或两边只要有一个是true ，就返回true ，否则返回false ！逻辑非用来取一个布尔值相反的值

数据类型判断

typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用 console.log(typeof 2); // number console.log(typeof null); // object `instanceof` 只能正确判断引用数据类型而不能判断基本数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型 console.log([] instanceof Array); // true console.log(function(){} instanceof Function); // true console.log({} instanceof Object); // true constructor 似乎完全可以应对基本数据类型和引用数据类型但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心 console.log((true).constructor === Boolean); // true console.log((str).constructor === String); // true console.log(([]).constructor === Array); // true console.log((function() {}).constructor === Function); // true console.log(({}).constructor === Object); // true console.log((2).constructor === Number); // true Object.prototype.toString.call() 完美的解决方案，可以通过toString() 来获取每个对象的类型， `Object.prototype.toString.call()` 使用 Object 对象的原型方法 toString 来判断数据类型： var a = Object.prototype.toString; console.log(a.call(2)); console.log(a.call(true)); console.log(a.call(str)); console.log(a.call([])); console.log(a.call(function(){})); console.log(a.call({})); console.log(a.call(undefined)); console.log(a.call(null)); 补充：基本数据类型赋值的时候赋的是具体的值引用数据类型传的是地址，一个变另一个跟着变

js数据类型转换

在JavaScript中类型转换有三种情况：

转换为数字（调用Number(),parseInt(),parseFloat()方法）

转换为字符串（调用.toString()或String()方法）

转换为布尔值（调用Boolean()方法）还有隐式转换注意：null 、undefined没有.toString方法

转换为数字 Number()：可以把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回NaN Number(1) // 1 Number(true) // 1 Number(123s) // NaN Number({}) //NaN parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。 parseInt(2) //2 parseInt(2,10) // 2 parseInt(2,2) // NaN parseInt(a123) // NaN 如果第一个字符不是数字或者符号就返回NaN parseInt(123a) // 123 parseFloat(string)：解析一个参数并返回一个浮点数 parseFloat(123a) //123 parseFloat(123a.01) //123 parseFloat(123.01) //123.01 parseFloat(123.01.1) //123.01 隐式转换 let str = 123 let res = str - 1 //122 str+1 // 1231 +str+1 // 124 转换为字符串 .toString() ⚠️注意：null,undefined不能调用 Number(123).toString() //123 [].toString() // true.toString() //true String() 都能转 String(123) //123 String(true) //true String([]) // String(null) //null String(undefined) //undefined String({}) //[object Object] 隐式转换：当+两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串 let a = 1 a+ // 1 转换为布尔值 0, (空字符串), null, undefined, NaN会转成false ，其它都是true Boolean() Boolean() //false Boolean(0) //false Boolean(1) //true Boolean(null) //false Boolean(undefined) //false Boolean(NaN) //false Boolean({}) //true Boolean([]) //true 条件语句 let a if(a) { //... //这里a为undefined ，会转为false ，所以该条件语句内部不会执行 } 隐式转换 !! let str = 111 console.log(!!str) // true {}和[]的valueOf和toString的返回结果？ valueOf：返回指定对象的原始值对象返回值 Array 返回数组对象本身。 Boolean 布尔值。 Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC 。 Function 函数本身。 Number 数字值。 Object 对象本身。这是默认情况。 String 字符串值。 Math 和 Error 对象没有 valueOf 方法。 toString：返回一个表示对象的字符串。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖， toString() 返回 "[object type]" ，其中 type 是对象的类型。 ({}).valueOf() //{} ({}).toString() //[object Object] [].valueOf() //[] [].toString() //

数据类型相比较objected .is ==和===

=== 属于严格判断 ，直接判断两者类型是否相同，如果两边的类型不一致时，不会做强制类型准换，不同则返回false如果相同再比较大小，不会进行任何隐式转换对于引用类型来说，比较的都是引用内存地址，所以===这种方式的比较，除非两者存储的内存地址相同才相等，反之false

== 二等表示值相等。判断操作符两边对象或值是否相等类型可以不同，如果两边的类型不一致，则会进行强制类型转化后再进行比较，使用Number()转换成Number类型在进行判断。例外规则，null==undefined ，null/undefined进行运算时不进行隐式类型转换。通常把值转为Boolean值，进行条件判断。Boolean(null)===Boolean(undefined)>false===false 结果为true

Object.is()在===基础上特别处理了NaN,-0,+0,保证-0与+0不相等，但NaN与NaN相等

==操作符的强制类型转换规则字符串和数字之间的相等比较，将字符串转换为数字之后再进行比较。其他类型和布尔类型之间的相等比较，先将布尔值转换为数字后，再应用其他规则进行比较。 null 和 undefined 之间的相等比较，结果为真。其他值和它们进行比较都返回假值。对象和非对象之间的相等比较，对象先调用 ToPrimitive 抽象操作后，再进行比较。如果一个操作值为 NaN ，则相等比较返回 false（ NaN 本身也不等于 NaN ）。如果两个操作值都是对象，则比较它们是不是指向同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true ，否则，返回 false。 1 == 1 // true 1 === 1 // false NaN == NaN //false +0 == -0 //true +0 === -0 // true Object.is(+0,-0) //false Object.is(NaN,NaN) //true

typeof null 的结果是什么，为什么？

typeof null 的结果是Object 。

在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中，共有五种数据类型：

000: object - 当前存储的数据指向一个对象。 1: int - 当前存储的数据是一个 31 位的有符号整数。 010: double - 当前存储的数据指向一个双精度的浮点数。 100: string - 当前存储的数据指向一个字符串。 110: boolean - 当前存储的数据是布尔值。

有两种特殊数据类型：

undefined的值是 (-2)30(一个超出整数范围的数字)；

null 的值是机器码 NULL 指针(null 指针的值全是 0)

那也就是说null的类型标签也是000 ，和Object的类型标签一样，所以会被判定为Object 。

事件的故事

什么是事件？

事件是文档和浏览器窗口中发生的特定的交互瞬间，事件就发生了。

一是直接在标签内直接添加执行语句，

二是定义执行函数。

addeventlistener 监听事件

事件类型分两种：事件捕获、事件冒泡。

事件捕获就是：网景公司提出的事件流叫事件捕获流，由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。

事件冒泡：IE提出的事件流叫做事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点。

什么是事件流?

事件流就是，页面接受事件的先后顺序就形成了事件流。

自定义事件

自定义事件，就是自己定义事件类型，自己定义事件处理函数。

事件委托

事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了

阻止事件冒泡

event.stopPropagation() .stop修饰符

addEventListener(‘click,函数名,true/false) 默认值为false（即使用事件冒泡）true 事件捕获

好处：提高性能，减少了事件绑定，从而减少内存占用

应用场景在vue中事件委托：

我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现

封装事件绑定

我们在封装这个函数的时候可以用addEventListener(事件监听)来实现，封装的函数有三个参数，第一个是要绑定事件的元素，第二个是要绑定的事件类型，第三个是事件的执行函数。调用这个函数就可以实现给某个元素绑定一个事件了。

Javascript 的作用域和作用域链

作用域： 作用域是定义变量的区域，它有一套访问变量的规则，这套规则来管理浏览器引擎如何在当前作用域以及嵌套的作用域中根据变量（标识符）进行变量查找。简单说：函数内部局部作用域，函数外面全局作用域。

作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域

全局作用域就是Js中最外层的作用域，在哪里都可以访问

函数作用域是js通过函数创建的一个独立作用域，只能在函数内部访问，函数可以嵌套，所以作用域也可以嵌套

Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）

防抖节流

防抖：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流：所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现，分别是时间戳版和定时器版。

鼠标事件 mouseenter与mouseover区别

mouseenter：鼠标进入被绑定事件监听元素节点时触发一次，再次触发是鼠标移出被绑定元素，再次进入时。而当鼠标进入被绑定元素节点触发一次后没有移出，即使鼠标动了也不再触发。

mouseover：鼠标进入被绑定事件监听元素节点时触发一次，如果目标元素包含子元素，鼠标移出子元素到目标元素上也会触发。

mouseenter 不支持事件冒泡 mouseover 会冒泡

引用数据类型 object

object的方法

Object.is() 是一种判断两个值是否相同的方法。语法：Object.is(value1, value2); 参数：value1：要比较的第一个值。value2：要比较的第二个值。返回值：一个布尔表达式，指示两个参数是否具有相同的值。 Object.assign() 方法用于将所有可枚举的自身属性从一个或多个源对象复制到目标对象。语法：Object.assign(target, ...sources) 参数：target：目标对象——应用源属性的对象，修改后返回。sources：源对象——包含你要应用的属性的对象。返回值：修改后的目标对象。 Object.entries() ES8的Object.entries是把对象转成键值对数组， [key, value] 对的数组。语法：Object.entries(obj) 参数：obj：要返回其自己的可枚举字符串键属性 [key, value] 对的对象。返回值：给定对象自己的可枚举字符串键属性 [key, value] 对的数组。 Object.fromEntries则相反，是把键值对数组转为对象 Object.values() 方法返回给定对象自己的可枚举属性值的数组，其顺序与 for...in 循环提供的顺序相同。语法：Object.values(obj) 参数：obj：要返回其可枚举自身属性值的对象。返回值：包含给定对象自己的可枚举属性值的数组。 Object.prototype.hasOwnProperty() hasOwnProperty() 方法返回一个布尔值，指示对象是否具有指定的属性作为它自己的属性。如果指定的属性是对象的直接属性，则该方法返回 true — 即使值为 null 或未定义。如果该属性是继承的或根本没有声明，则返回 false 。语法：hasOwnProperty(prop) 参数：prop：要测试的属性的字符串名称或符号。返回值：如果对象将指定的属性作为自己的属性，则返回true；否则为false。 Object.keys() Object.keys() 方法用于返回给定对象自己的可枚举属性名称的数组，以与普通循环相同的顺序迭代。语法：Object.keys(obj) 参数：obj：要返回可枚举自身属性的对象。返回值：表示给定对象的所有可枚举属性的字符串数组。 Object.prototype.toString() toString() 方法返回一个表示对象的字符串。当对象将被表示为文本值或以期望字符串的方式引用对象时，将自动调用此方法 id 。默认情况下，toString() 方法由从 Object 继承的每个对象继承。语法：toString() 返回值：表示对象的字符串。 Object.freeze() Object.freeze() 方法冻结一个对象，这意味着它不能再被更改。冻结对象可防止向其添加新属性，防止删除现有属性，防止更改现有属性的可枚举性、可配置性或可写性，并防止更改现有属性的值。它还可以防止其原型被更改。语法：Object.freeze(obj) 参数：obj：要冻结的对象。返回值：传递给函数的对象。 Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__ 。（请打开浏览器控制台以查看运行结果。）语法：const me = Object.create(person); 参数： proto：新创建对象的原型对象。 propertiesObject 可选。需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined ，该传入对象的自有可枚举属性(即其自身定义的属性，而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。返回值一个新对象，带着指定的原型对象和属性。

对象和面向对象

对象：属性和方法的集合叫做对象（万物皆对象）。

面向对象：首先就是找对象，如果该对象不具备所需要的方法或属性，那就给它添加。面向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。

创建对象的方式(4种)：new Object 、字面量、构造函数、原型。

什么是深拷贝，浅拷贝，浅拷贝赋值的区别，如何实现

深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。

1.浅拷贝：

将原对象或原数组的引用直接赋给新对象，新数组，新对象只是对原对象的一个引用，而不复制对象本身，新旧对象还是共享同一块内存

如果属性是一个基本数据类型，拷贝就是基本类型的值 ，如果属性是引用类型，拷贝的就是内存地址,

2.深拷贝：

创建一个新的对象和数组，将原对象的各项属性的“值 ”（数组的所有元素）拷贝过来，是“值 ”而不是“引用 ”

深拷贝就是把一个对象，从内存中完整的拷贝出来，从堆内存中开辟了新区域，用来存新对象，并且修改新对象不会影响原对象

3 、赋值：

当我们把一个对象赋值给一个新的变量时，赋的是该对象在栈中的内存地址，而不是堆中的数据。也就是两个对象

具体实现看开头的手写系列

浅拷贝的实现方式： 1 、object.assign() 2、lodash 里面的 _.clone 3 、...扩展运算符 4 、 Array.prototype.concat 5、 Array.prototype.slice 深拷贝的实现方式 1 、 JSON.parse(JSON.stringify()) 2 、递归操作 3 、cloneDeep 4 、Jquery.extend()

数组

数组的方法

1 、sort( )：sort 排序如果下面参数的正反控制升序和降序，返回的是从新排序的原数组 2 、splice( )：向数组的指定index处插入返回的是被删除掉的元素的集合，会改变原有数组；截取类没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的数组，原数组改变；两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的数组，原数组改变；三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。会改变原数据 3 、pop( )：从尾部删除一个元素返回被删除掉的元素，改变原有数组。 4 、push( )：向数组的末尾追加返回值是添加数据后数组的新长度，改变原有数组。 5 、unshift( )：向数组的开头添加返回值是添加数据后数组的新长度，改变原有数组。 6 、shift( )：从头部删除一个元素返回被删除掉的元素，改变原有数组。 7 、reverse( )：原数组倒序它的返回值是倒序之后的原数组 8 、concat( )：数组合并。 9、slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。从数组中截取，如果不传参，会返回原数组。如果只传入一个参数，会从头部开始删除，直到数组结束，原数组不会改变；传入两个参数，第一个是开始截取的索引，第二个是结束截取的索引，不包含结束截取的这一项，原数组不会改变。最多可以接受两个参数。 10 、join( )：讲数组进行分割成为字符串这能分割一层在套一层就分隔不了了 11 、toString( )：数组转字符串； 12、toLocaleString( )：将数组转换为本地数组。 13 、forEach( )：数组进行遍历； 14 、map( )：没有return时，对数组的遍历。有return时，返回一个新数组，该新数组的元素是经过过滤(逻辑处理)过的函数。 15 、filter( )：对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组。 16 、every( )：当数组中每一个元素在callback上被返回true时就返回true 。（注：every其实类似filter ，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。 17 、some( )：当数组中有一个元素在callback上被返回true时就返回true 。（注：every其实类似filter ，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。 18 、reduce( )：回调函数中有4个参数。prev（之前计算过的值），next（之前计算过的下一个的值），index ，arr 。把数组列表计算成一个 19.isArray() 判断是否是数组 20. indexOf 找索如果找到了就会返回当前的一个下标，若果没找到就会反回-1 21. lastIndexOf 它是从最后一个值向前查找的找索如果找到了就会返回当前的一个下标，若果没找到就会反回-1 22. Array.of() 填充单个值 23. Array.from() 来源是类数组 24.fill填充方法可以传入3各参数可以填充数组里的值也就是替换如果一个值全部都替换掉，第一个参数就是值第二个参数从起始第几个第三个参数就是最后一个 find 查找这一组数符合条件的第一个数给他返回出来 findIndex() 查找这一组数符合条件的第一数的下标给他返回出来没有返回 -1 keys 属性名 values属性值 entries属性和属性值 forEach 循环遍历有3个参数无法使用 break continue ，参数一就是每个元素参数二就是每个下标参数三就是每个一项包扩下标和元素 ### 改变数组本身的api 1. `pop()` 尾部弹出一个元素 2. `push()` 尾部插入一个元素 3. `shift()` 头部弹出一个元素 4. `unshift()` 头部插入一个元素 5. `sort([func])` 对数组进行排序,func有2各参数，其返回值小于0 ，那么参数1被排列到参数2之前，反之参数2排在参数1之前 6. `reverse()` 原位反转数组中的元素 7. `splice(pos,deleteCount,...item)` 返回修改后的数组，从pos开始删除deleteCount个元素，并在当前位置插入items 8. `copyWithin(pos[, start[, end]])` 复制从start到end(不包括end)的元素，到pos开始的索引，返回改变后的数组，浅拷贝 9. `arr.fill(value[, start[, end]])` 从start到end默认到数组最后一个位置，不包括end ，填充val ，返回填充后的数组其他数组api不改变原数组 map 映射关系的数组 map 主要就是有返回值可以return 数组判断的会返回boolean 1 、map()方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。 2 、map()方法按照原始数组元素顺序依次处理元素。注意： map()不会对空数组进行检测。 map()不会改变原始数组。 map() 函数的作用是对数组中的每一个元素进行处理，返回新的元素。 filter 满足条件的都能返回是一个数组 some返回boolean 循环数组只要有一个成员通过了就会返回 true 反而 false every返回boolean 循环数组只有全部成员通过了就会返回 true 反而 false reduce() 累加器把上一次计算的值，给下一次计算进行相加 set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用 delete [1] delete 可以删除数组中的一向 **Array.isArray()** 用于确定传递的值是否是一个 [`Array`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array) 。 flat 扁平化将嵌套的数组 “拉平 ”，变成一维数组。该方法返回一个新数组，对原数据没有影响。// 参数写的就是代表要扁平到第几层 //1 、every() var arr = [1,56,80,5]; var main = arr.every(n => n > 0); console.log(main) //输出:true //2 、some() var arr = [1,-56,80,-5]; var main = arr.some(n => n > 0); console.log(main) //输出:true //3 、reducer() var arr = [10,20,30,40] let result = arr.reduce(function(prev,next,index,arr){ return prev + next; }) console.log(result); //输出:100 // 4 、filter 返回满足要求的数组项组成的新数组 var arr3 = [3,6,7,12,20,64,35] var result3 = arr3.filter((item,index,arr)=>{ return item > 3 }) console.log(result3) //[6,7,12,20,64,35] // 5、map 返回每次函数调用的结果组成的数组 var arr4 = [1,2] var result4 = arr4.map((item,index,arr)=>{ return `<span>${item}</span>` }) console.log(result4) /*[ <span>1</span>, <span>2</span>, ]*/ ES6数组的常用方法： 1 、Array.from( )：将对象或字符串转成数组，注意得有length 。 2 、Array.of( )：将一组值转换为数组。 3、copyWithin(target，start(可选) ，end(可选))：数组内数据的复制替换 target：从该位置开始替换数据； start：从该位置开始读取数据，默认为0； end：到该位置停止数据的读取，默认为数组的长度 4 、find( )：用于找出第一个符合条件的数组成员。 5 、findIndex( )：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1 。 6 、fill(value ，start ，end)：使用给定值，填充一个数组。 value：填充的值； start：开始填充的位置； end：填充结束的位置。 7 、keys( )：对键名的遍历。 8 、values( )：对键值的遍历。 9 、entries( )：对键值对的遍历。 10 、includes( )：数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。 11 、flat( )：用于数组扁平，数组去除未定义。可以去除空项。 12 、flatMap( )：对原数组的每个成员执行一个函数。 13 、Map( )：是一组键值对的结构，具有极快的查找速度。 14 、Set( )：Set和Map类似，也是一组key的集合，但不存储value 。由于key不能重复，所以，在Set中，没有重复的key 。 //1 、Array.from() -- Array.of() var arrayLink = { "0":"a", "1":"b", "2":"c", length:3 } var arr = Array.from(arrayLink) console.log(arr) // 输出: [a,b,c] console.log(Array.from("abcdefg")) //输出:["a", "b", "c", "d", "e", "f", "g"] console.log(Array.of(1,2,3,4,5)) //输出: [1, 2, 3, 4, 5] //2、copyWithin() var arr = [1,2,3,4,5]; var main = arr.copyWithin(0,3); console.log(main); //输出:[4,5,3,4,5] //3 、find() var arr = [1,-5,2,9,-6]; var main = arr.find(n => n < 0); console.log(main); //输出:-5 //4 、fill() var arr = ["a","b","c","d"]; console.log(arr.fill(7,1,2));//输出:["a",7,"c","d"] //5、keys() values() entries() var arr = ["a","b","c","d"]; for(let index of arr.keys()){ console.log(index); } for(let elem of arr.values()){ console.log(elem); } for(let [index,elem] of arr.entries()){ console.log(index,elem); } //6 、includes() let arr = [12,34,223,45,67] console.log(arr.includes(45)) //输出:true [1, 2, NaN].includes(NaN) // true [1, 2, NaN].indexOf(NaN) // -1 //7 、Map var m = new Map([[Michael, 95], [Bob, 75], [Tracy, 85]]); m.get(Michael); // 95 //初始化Map需要一个二维数组，或者直接初始化一个空Map 。Map具有以下方法： var m = new Map(); // 空Map m.set(Adam, 67); // 添加新的key-value m.set(Bob, 59); m.has(Adam); // 是否存在key Adam: true m.get(Adam); // 67 m.delete(Adam); // 删除key Adam m.get(Adam); // undefined //由于一个key只能对应一个value ，所以，多次对一个key放入value ，后面的值会把前面的值冲掉： var m = new Map(); m.set(Adam, 67); m.set(Adam, 88); m.get(Adam); // 88 //8 、Set //要创建一个Set ，需要提供一个Array作为输入，或者直接创建一个空Set： var s1 = new Set(); // 空Set var s2 = new Set([1, 2, 3]); // 含1, 2, 3 //重复元素在Set中自动被过滤： var s = new Set([1, 2, 3, 3, 3]); s; // Set {1, 2, 3, "3"} 注意：数字3和字符串3是不同的元素 //通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果： s.add(4); s; // Set {1, 2, 3, 4} s.add(4); s; // 仍然是 Set {1, 2, 3, 4} //通过delete(key)方法可以删除元素： var s = new Set([1, 2, 3]); s; // Set {1, 2, 3} s.delete(3); s; // Set {1, 2}

字符串

字符串的方法

1 、chartAt( )：返回在指定位置的字符； 2 、concat( )：返回新的字符串** ，将一个或多个字符串与原字符串连接合并 3 、indexOf( )：检索字符串，返回第一次出现的索引，没有出现则为-1 4 、lastIndexOf(searchValue[ fromIndex]) 返回从字符串尾部开始第一次出现的索引，没有则-1 ，fromIndex的值相对于从尾部开始的索引 5 、split( )：返回一个以指定分隔符出现位置分隔而成的一个数组，数组元素不包含分隔符 6 、substr( )：从起始索引号提取字符串中指定数目的字符； 7 、substring( )：提取字符串中两个指定的索引号之间的字符； 8 、toLowerCase( )：字符串转小写； 9 、toUpperCase( )：字符串转大写； 10、valueOf( )：返回某个字符串对象的原始值； 11 、trim( )：删除字符串两边的空格； 12 、trimeState 取出开始的空格 13、trimeEnd 去除末尾空格 14 、includes(searchString[, position])返回boolean ，判断一个字符串是否包含在另一个字符串中，从postition索引开始搜寻，默认0 15 、slice( )：提取字符串片段，并在新的字符串中返回被提取的部分； 16 、search(regexp)返回首次匹配到的索引，没有则-1 ，执行正则表达式和 String 对象之间的一个搜索匹配 17 、toString()返回一个表示调用对象的字符串，该方法返回指定对象的字符串形式 18 、trim()返回去掉两端空白后的新字符串还有trimend trimstart 19 、replace() 把指定的字符串替换成为别的字符

超长字符串存储到栈内存中

字符串属于基础类型，所以会觉得字符串是存在栈内存中的，但是要知道，V8默认栈内存是984Kib ，那如果一个超长字符串 > 984Kib能装的进栈内存吗？

字符串的内容存于堆内存中，指针存于栈内存中，且相同的字符串指向同一个堆内存地址

新增或者修改字符串后，如果是一个之前不存在的字符串，则新开辟内存空间，如果是已有的，则直接使用已有的内存空间

当我们新建一个字符串时，V8会从内存中查找一下是否已经有存在的一样的字符串，找到的话直接复用。如果找不到的话，则开辟一块新的内存空间来存这个字符串，并把地址赋给变量。

javascript函数

声明函数的几种方式

函数声明 function 函数名(参数1 ，参数2 ，...){ //要执行的语句 } 函数表达式 var func2=function(b){}//函数表达式 var func3=function func4(c){}//命名式函数表达式 var func5=(function(n1,n2){})();//立即执行的函数表达式 return function(){ };//作为返回值的函数表达式 Function构造器 var 变量名 = new Function("参数1","参数2",...,"参数n","函数体"); 立即执行函数 var func5=(function(n1,n2){})();//立即执行的函数表达式 ()()

函数声明与函数表达式的区别

函数声明会将那个函数提升到最前面（即使你写代码的时候在代码块最后才写这个函数），成为全局函数。

函数声明要指定函数名，而函数表达式不用，可以用作匿名函数。

函数调用的几种方式

1.直接调用函数名加上括号（）

2.函数表达式变量名（）

函数的长度

函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

function fun1(a) { } function fun2(a, b) { } function fun3(a, b, c) { } function fun4(a, b, c, d) { } function fun5(...args) { } function fun6(a = 1, b, c, d) { } console.log(fun1.length) // 1 console.log(fun2.length) // 2 console.log(fun3.length) // 3 console.log(fun4.length) // 4 console.log(fun5.length) // 0 console.log(fun6.length) // 0

立即执行函数（iife）和使用场景

立即执行函数：( function( ){ })( ) 返回值可以为基本数据类型，也能返会任何类型的值。

写法原因：因为在 javascript 里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了() ，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。

作用：立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量。

使用场景： ①代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等。 ②所有的这些工作只需要执行一次，比如只需要显示一个时间。

③需要一些临时的变量，但是初始化过程结束之后，就再也不会被用到，我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中，不会让任何变量泄露成全局变量。

arguments 的对象是什么？

arguments 当我们不知道有多少个参数传进来的时候就用 arguments 来接收，是一个类似于数组的对象，他有length属性，可以arguments[ i ]来访问对象中的元素，但是它不能用数组的一些方法。例如push 、pop 、slice等。arguments虽然不是一个数组，但是它可以转成一个真正的数组。

取之可以用展开运算符来数组和类数组类数组： ①拥有length属性，其它属性(索引)为非负整数；箭头函数里没有arguments ②不具有数组所具有的方法； ③类数组是一个普通对象，而真实的数组是Array类型。

常见的类数组：arguments ，document.querySelectorAll得到的列表，jQuery对象($("div"))；

this指向的问题（高频）

在全局的环境下this是指向window 的

普通函数调用直接调用中的this 会指向 window ，严格模式下this会指向 undefined ，自执行函数 this 指向 window ，定时器中的 this 指向 window

在对象里调用的this ，指向调用函数的那个对象，

在构造函数以及类中的this ，构造函数配合 new 使用, 而 new 关键字会将构造函数中的 this 指向实例化对象，所以构造函数中的 this 指向当前实例化的对象

方法中的this谁调用就指向谁。

箭头函数没有自己的 this，箭头函数的this在定义的时候，会继承自外层第一个普通函数的this

函数式编程含义：

函数式编程是一种强调以函数为主的软件开发风格。通过组合纯函数，避免共享状态、可变作用和副作用来构建软件的过程。目的：使用函数来抽象作用在数据之上的控制流和操作，从而在系统中消除副作用并减少对状态的改变。

闭包

1 、闭包的概念就是：只有权利访问另一个函数作用域中的变量，一般就是函数包裹着函数。

3 、闭包可以重用一个变量，且保证这个变量不会被污染的一种机制。这些变量的值始终保持在内存中，不会被垃圾回收机制处理

4 、闭包的缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

5、为什么要用闭包：使用场景 : 防抖、节流、函数套函数避免全局污染

闭包原理函数执行分成两个阶段(预编译阶段和执行阶段) 。 1.在预编译阶段，如果发现内部函数使用了外部函数的变量，则会在内存中创建一个“闭包 ”对象并保存对应变量值，如果已存在“闭包 ”，则只需要增加对应属性值即可。 2.执行完后，函数执行上下文会被销毁，函数对“闭包 ”对象的引用也会被销毁，但其内部函数还持用该“闭包 ”的引用，所以内部函数可以继续使用“外部函数 ”中的变量利用了函数作用域链的特性，一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中，函数执行完毕，其执行作用域链销毁，但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被烧毁后才被销毁。

call、apply 、bind封装与区别

都是来改变this指向和函数的调⽤，实际上call与apply的功能是相同的，只是两者的传参方式不一样，

call⽅法跟的是⼀个参数列表，

apply跟⼀个数组作为参数，call⽅法和apply使⽤后就直接调⽤

bind 传参后不会立即执行，而是返回一个改变了this指向的函数，这个函数可以继续传参，且执行，需要类似于bind()()两个括号才能调⽤。

call 的性能要比apply好一点（尤其是当函数传递参数超过3个的时候）后期开发 call 多多一点

call 用扩展运算符就可以吧 apply 来代替了

bind 返回的函数可以作为构造函数吗？

可以的如果是直接调用，f1()和f2()的this指针指向会不同.

function f1() { console.log(432,this) // 432 f1 {} } const f2=f1.bind(obj) const obj2=new f2() obj2.a =223 console.log(obj2) // f1 {a: 223} // ---------------- let obj = {a:1} function f1() { console.log(432,this) } const f2=f1.bind(obj)() // 432 {a: 1}

函数柯里化（卡瑞化、加里化）？

概念：把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。容易理解的概念：Currying概念其实很简单，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数（主要是利用闭包实现的）。

特点：

①接收单一参数，将更多的参数通过回调函数来搞定；

②返回一个新函数，用于处理所有的想要传入的参数；

③需要利用call/apply与arguments对象收集参数；

④返回的这个函数正是用来处理收集起来的参数。

作用：能进行部分传值，而传统函数调用则需要预先确定所有实参。如果你在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

用途：我认为函数柯里化是对闭包的一种应用形式，延迟计算、参数复用、动态生成函数(都是闭包的用途) 。

柯里化函数例子

柯里化函数：把一个多参数的函数转化为单参数函数的方法。并且返回接受余下的参数而且返回结果的新函数的技术。

我的理解就是将一个接受多个参数的函数，转化为接收一个参数，并且不改变输出结果的一种办法。我觉得这就是js的柯里化函数

// 简单的相加函数 var add = function (x,y) { return x + y } // 调用： add(1,2) // 柯里化以后 var add = function (x) { //柯里化函数(闭包) return function (y) { return x + y } } add(1)(2)

这样做有什么好处，我得理解是在需要的情况下生成一个中间工具，简化代码，并且清晰代码。

什么是高阶函数？

高阶函数只是，将函数作为参数，函数的返回值返回值是函数

function higherOrderFunction(param,callback){ return callback(param); }

构造函数

new的原理

new实际上是在堆内存中开辟一个空间。 ①创建一个空对象，构造函数中的this指向这个空对象； ②这个新对象被执行[ [ 原型 ] ]连接； ③执行构造函数方法，属性和方法被添加到this引用的对象中； ④如果构造函数中没有返回其它对象，那么返回this ，即创建的这个的新对象，否则，返回构造函数中返回的对象。 function _new(){ let target = {}; //创建的新对象 let [constructor,...args] = [...arguments]; //执行[[原型]]连接,target是constructor的实例 target.__proto__ = constructor.prototype; //执行构造函数,将属性或方法添加到创建的空对象上 let result = constructor.prototype; if(result && (typeof (result) == "object" || typeof (result) == "function")){ //如果构造函数执行的结构返回的是一个对象,那么返回这个对象 return result; } //如果构造函数返回的不是一个对象,返回创建的对象 return target; } 自己理解的new： new实际上是在堆内存中开辟一个新的空间。首先创建一个空对象obj ，然后呢，把这个空对象的原型(__proto__)和构造函数的原型对象(constructor.prototype)连接(说白了就是等于)；然后执行函数中的代码，就是为这个新对象添加属性和方法。最后进行判断其返回值，如果构造函数返回的是一个对象，那就返回这个对象，如果不是，那就返回我们创建的对象。

封装一个通用的事件绑定函数

需要点击每个a ，来。弹出他们的内容 <div id="div3"> <a href="#">a1</a><br> <a href="#">a2</a><br> <a href="#">a3</a><br> <a href="#">a4</a><br> <button id=btn1>加载更多...</button> </div> // 封装通用的事件绑定函数 function bindEvent(elem, type, fn) { elem.addEventListener(type, fn) } //获取父元素 const fu = document.getElementById(div3) bindEvent(fu, click, function (event) { // console.log(event.target) // 获取触发的元素 let target=event.target event.preventDefault() // 阻止默认行为 //过滤符合条件的子元素，主要是过滤掉加载更多 if(target.nodeName.toLowerCase()==="A"){ alert(target.innerHTML; } })

作用域，js的机制

垃圾回收机制和内存机制

垃圾回收

浏览器的js具有自动垃圾回收机制，垃圾回收机制也就是自动内存管理机制，垃圾收集器会定期的找出那些不在继续使用的变量，然后释放内存。但是这个过程不是实时的，因为GC开销比较大并且时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。

内存泄露

如果那些不再使用的变量，它们所占用的内存不去清除的话就会造成内存泄漏

内存泄露其实就是我们的程序中已经动态分配的堆内存，由于某些原因没有得到释放，造成系统内存的浪费导致程序运行速度减慢甚至系统崩溃等严重后果。

比如说：

1 、闭包：在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。

2 、DOM：当原有的DOM被移除时，子结点引用没有被移除则无法回收

3 、Times计时器泄露

作用域

1 、作用域

作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域

全局作用域就是Js中最外层的作用域

函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套