【javaScript面试题】2024前端最新版javaScript模块，高频提问

1、i++和++i的区别？

    i++:先取i的值，作为表达式i++的结果，然后在对i进行+1【先赋值后加1】

    ++i：先取i的值进行+1,然后取i的值作为++i的表达式的结果【先加1后赋值】

2、while和do while有啥区别？

    while必须是条件成立才能执行循环体。

    do while就算条件不成立也能执行一次循环。先执行一次循环然后再去判断条件是否成立。

    如果成立接着循环，不成立结束循环

3、break和continue区别？

    break:终止循环，看到break后面的代码就不执行了

    continue:跳出当前循环，开始执行下一次循环

4、小九九乘法表

for(var i=1;i<10;i++){  for(var j=1;j<=i;j++){    document.write(j+"*"+i +"="+j*i +" ")  }  document.write("<br>")}

5、for与forEach区别？

    forEach不能够使用break,forEach没有返回值。return 返回的是undefined

6、什么是全局，局部变量？

    全局变量：在函数体外部声明的变量就是全局变量，省略var声明的变量也称作全局变量。全局变量在函数体内部和外部都可以使用。

    局部变量：在函数体里面定义的变量叫做局部变量，只能在函数体内部使用，函数体外部不能使用

7、splice和slice的区别

    splice和slice是数组里的两个重要的方法，其splice和slice的区别为：

    (1).splice改变原数组，slice不改变原数组。

    (2).splice除了可以删除之外，还可以插入。

    (3).splice可传入3个参数，slice接受2个参数

8、请说一下数组常用的方法有哪些?

    push():添加到数组的最后

    splice():删除指定的元素,并且在删除的位置添加元素

    Sting()、toString():将数组转为字符串

    join():拼接字符串,将数组用什么符号转为字符串

    split():将字符串转为数组

    shift():删除数组的第一项

    pop():删除数组的最后一项

    unshift():将内容添加到数组的开头

    sort():正序排序从小到大

    concat():合并数组

    reverse():反转

9、请说常用的获取dom方法有几种？

    document.getElementById("id选择器")：获取单个元素

    document.getElementsByTagName("标签名")：获取的是一组数据，伪数组。

    document.getElementsByName("name名称")：获取的是一组数据，伪数组。

    document.getElementsByClassName("类名选择器")：获取的是一组数据，伪数组。

    document.querySelector("选择器"):通过选择器获取单个节点

    document.querySelectorAll("选择器"):通过选择器获取多个节点。伪数组，可以通过下标取值

10、dom操作的方法

    appendChild：添加节点到最后

    insertBefore：在某个位置插入

    removeChild：删除子节点

    replaceChild：修改子节点

    cloneNode：复制克隆节点

11、获取设置类名的方法

    className:获取或者设置类名，其中设置类名会覆盖原来的类名。所以设置类名的时候要把之前的类名也加上

    .classList.add(""):添加类名

    .classList.remove(""):移除类名

12、冒泡排序

var arr = [9, 8, 7, 6, 5, 4]​  for (var i = 0; i < arr.length; i++) {​    for (var j = 0; j < arr.length - i; j++) {​      if (arr[j] > arr[j + 1]) {​        var temp = arr[j]​        arr[j] = arr[j + 1]​        arr[j + 1] = temp​      }​    }​  }​

13、innerHTML和innerText的区别

    相同点:都可以获取或者设置内容

    innerHTML:以代码的形式设置/获取内容

    innerText:以文本的形式设置/获取内容

14、 js获取或者设置属性的方法

    ①通过dom进行获取或者设置属性.dom.属性

    ②通过getAttribute()获取自定义属性

    通过setAttribute()设置自定义属性

15、用过深拷贝，浅拷贝吗？深拷贝浅拷贝的区别？如何实现深拷贝浅拷贝？

    深拷贝:就是b复制了a,当修改a的时候，b不会随着a的变化而变化，拥有独立的内存。

    浅拷贝就是b复制了a,当修改a时，b中的子元素不会随着a的变化而变化，但是b中的子对象中的元素会随着a的改变而改变。原数据和复制后的数据的第一层不会改变，第二层或者深层会改变

    浅拷贝方法：slice，concat，es6剩余运算符

    深拷贝：

        JSON.parse()、JSON.stringify()

        jquery的extend方法

        通过递归去拷贝所有的层级

16、什么是面向对象，面向对象的特点

    面向对象就是一种编程思想，是由属性和方法组成

    面向对象的特点：封装，继承，多态

17、什么是构造函数？构造函数偷偷帮我们干了那两件事情

    用new关键字调用的函数称为构造函数

    （1)帮我们偷偷创建了一个空白对象

      (2) 替我们将结果返回出去

18、面向对象的继承方式

    call或者apply方法

    原型链prototype

    利用空对象作为中介

19、什么是异步什么是同步：

    同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，只有接收到返回的值或消息后才往下执行其他的命令。  具有等待功能

    异步，执行完函数或方法后，不必等待返回值或消息，就可以直接执行下一个命令。不用等待

20、知道promise对象吗？promise有几种状态

    promise对象，处理异步函数的，就是将异步改成同步执行。

    pending(未待定状态)

    fulfilled(成功状态)

    rejected(失败的状态)

21、http定义？http的三次握手？

    http是一种网络传输协议，浏览器作为http客户端通过url向http服务器发起请求，服务器接收的请求向客户端发送响应信息

    (1) 客户端向服务端发送请求

    (2) 服务端接收到请求需要进行核对操作，发送的请求服务端能不能接收到，如果接收到，就向客户端返回接收到的请求信息

    (3 )客户端拿着服务器返回成功接收到的这个信息再去向服务器发送请求，两者才能建立联系

22、说一下js的模块化

      作用：

        一个模块就是实现某个特定功能的文件，在文件中定义的变量、函数、类都是私有的，对其他文件不可见。

        为了解决引入多个js文件时，出现 命名冲突、污染作用域 等问题

    AMD：

        浏览器端模块解决方案

        AMD即是“异步模块定义”

        在AMD规范中，我们使用define定义模块，使用require加载模块

        提前执行：它采用异步方式加载模块，一边加载一边执行

        依赖前置：依赖必须在定义时引入

    CMD：

        浏览器端模块解决方案

        CMD即是“通用模块定义”

        在CMD规范中，我们使用define定义模块，使用require加载模块

        延迟执行：它采用异步方式加载模块，先加载完毕再按需执行

        依赖就近：依赖可以在代码的任意一行引入

    CommonJS：

        服务器端模块解决方案

        在CommonJS规范中，我们使用module.exports导出模块，使用require加载模块

        立即执行：它采用同步方式加载模块，先加载后执行，执行完毕会被缓存

        依赖就近：依赖可以在代码的任意一行引入

    ESModule：

        浏览器端 和 服务器端 通用的模块解决方案

        在ESModule规范中，我们使用export导出模块，使用import加载模块

        延迟执行：它采用异步方式加载模块，先加载完毕再按需执行

        依赖就近：依赖可以在代码的任意一行引入

23、请求的方式有哪些？post和get的区别？

    delete put post get等等等

    (1) 安全性问题：

       ​ get请求参数会被拼接到地址栏上，信息会暴漏

     ​   post请求参数不可见

    (2) 数据传输量：

     ​   get有长度限制的

     ​   post没有

    (3) 缓存问题

     ​   get数据会被缓存

    ​    post是不会

24、创建ajax的步骤

    ​(1)创建XMLHttpRequest对象，也就是创建一个异步调用对象

    ​(2)创建一个http请求，并指定请求方法 （建立连接）

    ​(3)发送http 请求

    ​(4)获取返回的数据

25、mouseover与mouseenter的区别

    ​mouseover:鼠标指向的时候触发,当鼠标指向被选元素及其后代元素时触发，会产生事件冒泡

    ​mouseenter:鼠标指向的时候触发,当鼠标指向被选元素时触发，不会产生事件冒泡

26、什么是防抖？什么是节流

    ​防抖就是多次执行变为最后一次执行，实现函数的防抖：延时器

    ​节流就是多次执行变成每隔一段时间执行。实现函数节流的方法：定时器和时间戳

27、sessionStorage，localStorage，cookie区别

    ​共同点：都是保存数据

    ​① sessionStorage生命周期是当前窗口或者标签页，一旦窗口或者标签页关闭，所有的存储的数据也会被清空

    ​② localStorage生命周期是永久的。除非用户手动清除信息，否则这些信息永久存在

    ​③ cookie是浏览器与服务器之间来回传递，cookie浏览器关闭数据一直保存，只在过期时间内有效，可以设置过期时间。cookie存储数据不能超过4k,sessionStorage，localStorage存储的数据可以是5M，甚至更多。

28、var let const的区别

    ​1 var声明的变量属于全局变量，属于window,var声明的变量可以声明多次，可以修改，并且var声明的变量存在变量的提升

    ​2 let只在块级作用域中使用即{}，不存在变量提升，let只能声明一次不能重复定义，let声明的变量存在暂时性死区。

    ​3 const声明的是一个只读常量，声明之后不允许改变，而且必须初始化，const定义的基本数据是不可以改变的，但是定义的对象或者是数组可以通过下标或者属性来修改

29、类型转换

    ​转数字：Number()

    ​转字符串：toString()、String()

    ​保留两位小数：toFixed()

    ​数组转字符串方法：Sting()、toString()、join()

    ​字符串转数组：split()

    ​字符截取：substring()、substr()

    ​字符串修改：replace()

    ​json字符串转json对象：JSON.parse()

    ​json对象转json字符串：JSON.stringify()

    ​检测字符串开头：startWith

    ​检测字符串结尾：endWith

    ​字符串前面填充：padStart() 

​    ​字符串后面填充：padEnd()