JavaScript面试题

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

       

  2. 列举常用的数组方法
    1. 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. js有7中数据类型
基础数据类型:
    1、String类型，用于表示字符串；
    2、Number类型，用于表示数字；
    3、Boolean类型；
    4、Undefined类型；
    5、Null类型；
引用数据类型:
    1、Array数组；
    2、Object类型。

      　　

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

      　　

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

      　　

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

      　

  7. 数组冒泡排序的原理
    1. 冒泡排序原理冒泡排序(Bubble Sort)是一种简单的排序算法,它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来
  8. javascript的typeof返回哪些数据类型
    1. string,boolean,number,undefined,function,object

       

  9. 如何阻止事件冒泡
    1. ie:阻止冒泡ev.cancelBubble = true;
      非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. 所有的构造函数在初始化时，都会自动生成一个特殊的实例话对象，构造函数的prototype属性指向该对象，该对象称为原型对象，或prototype对象

       

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

      　　

  24. 前端性能优化可以从哪些方面?
    1. 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. 让构造函数中的this指向空的实例化对象
3. 执行（调用）构造函数，从而创建实例化对象自身的属性和方法
4. 返回实例化对象

      　　

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

      　　

  27. 常见HTTP状态码的含义
    1. http状态码及代表意思为：
1、1xx，信息性状态码，表示请求已经接收，继续处理；
2、2xx，成功状态码，表示请求已经被成功接收、理解、并处理；
3、3xx，重定向状态码，表示请求需要进一步操作，以完成请求；
4、4xx，客户端错误状态码，表示客户端的请求有问题；
5、5xx，服务器错误状态码，表示服务器处理请求时出现了错误。
  28. 什么是防抖和节流，描述防抖的原理和节流的原理
    1. 本质上是优化高频率执行代码的一种手段;
为了优化体验，需要对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. 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、变量提升
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. 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返回哪些数据类型 

 

posted @ 2023-12-01 12:21  冉姑娘  阅读(398)  评论(0)  编辑  收藏  举报