JavaScript面试题

1. 列举常用的字符串方法

   1. indexOf(要查找的字符，开始索引) 查找某个字符串第一次出现的位置
      lastIndexOf(要查找的字符，开始索引) 查找某个子字符串最后一次出现的位置
      replace(被替换的内容，要替换的内容)  替换好的字符串
      substr(从哪个索引开始，截取多少个) 返回截取到的内容
      substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引;返回截取到的内容
      slice(起始索引，结束索引)  截取出来的字符串
      split(指定的切割符)  一个用指定切割符切割好的数组
      toLowerCase() 转成 小写字母
      toUpperCase() 转成 大写字母
      charAt() 是找到字符串中指定索引位置的内容返回
      trim() 去除空白内容以后的字符串

       

2. 列举常用的数组方法
   1. ?

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

      join()：用指定的分隔符将数组每一项拼接为字符串 push() ：向数组的末尾添加新元素 pop()：删除数组的最后一项 shift()：删除数组的第一项 unshift()：向数组首位添加新元素 slice()：按照条件查找出其中的部分元素 splice()：对数组进行增删改 fill(): 方法能使用特定值填充数组中的一个或多个元素 concat()：用于连接两个或多个数组 indexOf()：检测当前值在数组中第一次出现的位置索引 lastIndexOf()：检测当前值在数组中最后一次出现的位置索引 includes()：判断一个数组是否包含一个指定的值 sort()：对数组的元素进行排序 reverse()：对数组进行倒序 find():返回匹配的值 findIndex():返回匹配位置的索引 toLocaleString()、toString():将数组转换为字符串   ES5新增的数组方法 forEach()：ES5 及以下循环遍历数组每一项,没有return返回值 map()：ES6 循环遍历数组每一项 filter():“过滤”功能 reduce() 汇总功能 every()：判断数组中每一项都是否满足条件 some()：判断数组中是否存在满足条件的项 entries() 、keys() 、values():遍历数组

      　

3. js的数据类型有哪些
   1. ?

      1 2 3 4 5 6 7 8 9 10

      js有7中数据类型 基础数据类型:     1、String类型，用于表示字符串；     2、Number类型，用于表示数字；     3、Boolean类型；     4、Undefined类型；     5、Null类型； 引用数据类型:     1、Array数组；     2、Object类型。

      　　

4. 什么是作用域链
   1. ?

      1	在函数中如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样一个查找过程形成的链条就叫做作用域链

      　　

5. 什么是事件委托，应用场景，优缺点
   1. ?

      1	事件委托也称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上；它是利用事件冒泡原理，管理某一类型的所有事件，<br>利用父元素来代表子元素的某一类型事件的处理方式

      　　

6. 什么是深拷贝?什么是浅拷贝?如何实现深拷贝?
   1. ?

      1	如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，<br>拿人手短，如果B没变，那就是深拷贝，自食其力。

      　

7. 数组冒泡排序的原理

   1. 冒泡排序原理冒泡排序(Bubble Sort)是一种简单的排序算法,它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来

8. javascript的typeof返回哪些数据类型

   1. string,boolean,number,undefined,function,object

       

9. 如何阻止事件冒泡
   1. ?

      1	ie:阻止冒泡ev.cancelBubble = true;<br>非IE ev.stopPropagation();

10. 数组排序的方法

    1. 1. sort()方法
       2. 冒泡排序
       3. 选择排序
       4. 插入排序
       5. 快速排序
       6. 希尔排序

        

11. 如何阻止默认事件

    1. (1)return false；
       (2) ev.preventDefault();
       (3) ev.returnValue = false

12. 谈谈你对this的理解

    1. this是Javascript语言的一个关键字, 它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
       随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象
       
       this的多种用法
       - 全局范围内
       - 函数调用
       - 作为对象方法的调用
       - call/apply/bind 的调用
       - 作为构造函数调用

13. get请求和post请求的区别
14. DOM常见的操作及API

    1. 1.获取元素：
       document.getElementById(id): 根据元素的id属性获取元素。
       document.getElementsByClassName(className): 根据元素的class属性获取元素。
       document.getElementsByTagName(tagName): 根据元素的标签名获取元素。
       document.querySelector(selector): 根据选择器获取第一个匹配的元素。
       document.querySelectorAll(selector): 根据选择器获取所有匹配的元素。
       
       2.创建元素：
       document.createElement(tagName): 创建一个指定标签名的元素节点。
       document.createTextNode(text): 创建一个包含指定文本内容的文本节点。
       
       3.修改元素属性和内容：
       element.setAttribute(name, value): 设置元素的属性值。
       element.getAttribute(name): 获取元素的属性值。
       
       4.添加和删除元素：
       parentElement.appendChild(newChild): 将一个新的子节点添加到指定父节点的子节点列表的末尾。
       parentElement.insertBefore(newChild,哪个元素前插入):一个新的子节点插入到指定父节点的子节点的前面
       parentElement.removeChild(child): 从指定父节点的子节点列表中删除一个子节点。

15.  let、const、var的区别 
16.  从输入url到浏览器显示页面发生了什么
17. for循环，while循环，do-while循环的区别

    1. for循环是指定次数的循环
       while循环是满足条件的循环
       while 先判断，再循环
       do-while 先循环，再判断

18. 如何阻止默认事件的发生

    1. return false
       event.returnValue = false
       event.preventDefault()

19. 将其他类型转为number类型

    1. 自动转换：
       string - 纯数字字符串转为数字，不是纯数字的转为NaN
       boolean - true是1 false是0
       null - 0
       undefined - NaN
       强制转换：
       Number() 
       parseInt() 
       parseFloat()
       保留小数点后的位数
       toFiexd(2)

20.  如何实现前端性能优化
21. 什么是事件流，什么是事件冒泡，什么是事件委托

1. 事件流：一个事件触发后，会在子元素和父元素之间的传播
   这种传播分为3个阶段：
       捕获阶段：从 window 对象传到目标节点（外到里）
       目标阶段
       冒泡阶段：从目标节点触发传回 window 对象（里到外）
   
   事件冒泡：事件由子元素传递给父元素的过程（向上响应）
   
   事件捕获：事件由父元素传递给子元素的过程（向下响应）
   
   事件委托：也称事件代理，原理就是利用事件冒泡，是js中常用的绑定事件的方式，将事件委托给父元素，让父元素担当事件监听的职务；就是把原本绑定在子元素上的事件委托给父元素，让父元素触发事件，
   优点：减少内存消耗、动态绑定事件
   缺点：消耗性能（ 绑定的事件是在父元素身上，但是触发的对象是子元素 ）
   
   事件源：谁调用就是谁（Event.target）

    

22. 什么是原型对象
    1. ?

       1	所有的构造函数在初始化时，都会自动生成一个特殊的实例话对象，构造函数的prototype属性指向该对象，该对象称为原型对象，或prototype对象

        

23.  什么是原型链
    1. ?

       1 2	原型链：由一系列__proto__属性，串联起来的原型对象，称为原型链 原型链的意义：实例化对象在访问属性和方法时，会先访问自身的属性和方法，如果自身不存在对应的属性和方法，则会自动通过__proto__属性在整个原型链上查找，只要找到对应的属性和方法，<br>就能正确执行，如果原型链上没找到，则报错

       　　

24. 前端性能优化可以从哪些方面?
    1. ?

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

       1..loading 2.骨架屏 3.压缩 HTML 4.删除不必要的注释 5.删除不必要的属性 6.使用语义化标签 7.减少iframe数量 8.削减DOM数量和层级数量 9.减少 HTTP 请求次数 10.减少重排重绘 11.javascript脚本放到页面底部 12.将javascript和css从外部引入 13.减少DOM操作 14.节流与防抖 15.合理的ajax恳求 16.尽量少用@import 17.避免！important，可以选择其他选择器 18.CSS文件压缩 19.CSS层级嵌套最好不要超过3层 20.删除无用的css 21.慎用*通配符 22.小图片引入雪碧图。 23.图片压缩 24.图片懒加载 25.采用svg图片或者字体图标 26.Base64 27.缓存加载器 28.Hot update 热更新 29.DNS预解析 参考连接:https://blog.csdn.net/chaoPerson/article/details/130743570

       　　

25. new一个实例化对象的四个阶段
    1. ?

       1 2 3 4

       1. 创建一个空的实例化对象 2. 让构造函数中的this指向空的实例化对象 3. 执行（调用）构造函数，从而创建实例化对象自身的属性和方法 4. 返回实例化对象

       　　

26. 什么是回流和重绘
    1. ?

       1 2 3

       回流指的是元素的尺寸,布局,位置发生变化,导致页面的布局需要重新计算 重绘指的是元素的外观发生变化,但尺寸和布局不变,只需要重新绘制元素. 回流必将引起重绘，而重绘不一定会引起回流。

       　　

27. 常见HTTP状态码的含义

    1. http状态码及代表意思为：
       1、1xx，信息性状态码，表示请求已经接收，继续处理；
       2、2xx，成功状态码，表示请求已经被成功接收、理解、并处理；
       3、3xx，重定向状态码，表示请求需要进一步操作，以完成请求；
       4、4xx，客户端错误状态码，表示客户端的请求有问题；
       5、5xx，服务器错误状态码，表示服务器处理请求时出现了错误。

28. 什么是防抖和节流，描述防抖的原理和节流的原理
    1. ?

       1 2 3 4

       本质上是优化高频率执行代码的一种手段; 为了优化体验，需要对resize、scroll、keypress、mousemove 等事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率 防抖: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 节流: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

       　　

29. 什么是事件循环
30. call、apply、bind的区别

    1. call，apply，bind，改变的是方法前面的函数的this指向
       call和apply的区别：
            call传递参数是一个一个传递的，apply是以数组的形式传递的；
       bind和call的区别：
            bind和call的传参方式是一样的
            call会自动调用，bind返回的是函数体，需要手动调用

        

31. 什么是闭包，闭包的优缺点
32. 简述js的垃圾回收机制
33. 什么是内存泄露
34. ES6新特性，并简述她们的作业
    1. ?

       1 2 3 4 5 6 7 8 9 10

       let关键字，用于声明只在块级作用域起作用的变量。 const关键字，用于声明一个常量。 结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值。 Symbol数据类型，定义一个独一无二的值。 Proxy代理，用于编写处理函数，来拦截目标对象的操作。 for...of遍历，可遍历具有iterator 接口的数据结构。 Set结构，存储不重复的成员值的集合。 Map结构，键名可以是任何类型的键值对集合。 Promise对象，更合理、规范地处理异步操作。 Class类定义类和更简便地实现类的继承。

       　　

35. 说一下promise
36. 说一个async await
37. promise.all 和 promise.race 的用法和区别
38. promise的特点是什么？也就是三个状态

    1. promise一共有三个状态，分别是进行中，成功或者失败，如果成功的话通过resolve方法将正确结果返回出去，通过.then的方式接收，
       失败的话通过reject的方式将错误结果返回出去，通过.catch的方式接收，pending状态是进行中，一旦进行，状态就是不可逆的

39. for-in和for-of的区别
40. 说说var、let、const之间的区别
    1. ?

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

       1、变量提升 var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错   2、暂时性死区 var不存在暂时性死区。let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量   3、块级作用域 var不存在块级作用域 let和const存在块级作用域   4、重复声明 var允许重复声明变量 let和const在同一作用域不允许重复声明变量   5、修改声明的变量 var和let可以 const声明一个只读的常量。一旦声明，常量的值就不能改变   6、使用 能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var

       　　

41. 箭头函数和普通函数的区别
42. 三种本地存储的区别
43. 说说最近最流行的一些东西吧？常去哪些网站？
44. 列举10条移动端兼容性问题
45. 如何将最终的金额，专为","逗号分隔的形式
1. ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   function numberFormate(num) { // 数字格式化为x,xxx,xxx,xxx     // 1. 将num专为数字类型     num = parseFloat(num);     // 2. 判断是否是一个数字     if (!Number.isNaN(num)) {         // 3. 将数字按照.进行分割（主要是针对浮点数）         let str = Math.abs(num).toString().split('.');         // 4. 整数部分按照3个一组，看可以分为几组         const a = Math.ceil(str[0].length / 3);         // 5. 不够3个一组的，自动补充0         str[0] = str[0].padStart(a * 3, '0');         const numArr = [];         // 6. 将数字按照3个一组进行截取         for (let i = 0; i < a; i++) {             numArr.push(str[0].substring(i * 3, (i + 1) * 3));         }         // console.log(numArr);         // 7. 将数组中的第一个值中前面补充的0去除         numArr[0] = parseInt(numArr[0]);         // 8. 将数组中的数字按照逗号进行拼接，并且拼接上小数点后面的值         const formateStr = numArr.join(',') + (str[1] ? '.' + str[1] : '');         // 9. 判断初始值是正值还是负值，需不需要添加-         return num < 0 ? "-" + formateStr : formateStr;     } else {         throw new TypeError("传入的参数必须是数字");     } } console.log(numberFormate(1123456789.2234)); // 结果为1,123,456,789.2234

46. 大文件的分割处理（大文件切片上传，断点续传）
47. 前端常用的几种加密方法
48. 前端常见的攻击手段及防御方法
49. 用类的方式编写一个b继承a的方法，描述代码实现流程
50. 了解Node么? Node的使用场景都有哪些？
51. 对于前端自动化构建工具有了解吗，简单介绍下
52. js的typeof返回哪些数据类型