JS面试题大全！！！

曾经终败给现在 2022-12-21 14:51 226阅读 0赞

> **1.基本数据类型有哪几种？**

undefined，Null，Boolean，String，Number，Symbol（es6）

Symbol--定义对象的唯一标识（类似于id标识）

let name = Symbol();
    console.log(typeof name)  // Symbol

> **2.引用数据类型有哪些？**

Object,Array

> **3.JavaScript中typeof返回那些数据类型？ **

undefined；string；number；boolean；Function；Object； symbol

> **4.强制类型转换 **

原始数据类型（string,number,boolean,null,undefined）

转成字符串：1.toString();   2.字符串拼接

// toString
    let a = '1';
    console.log(typeof a)  //黑色字体 1
    
    
    // 字符串拼接
    let a = '1';
    let b = a + ''
    console.log(b) //黑色字体 1

转成数字：1.Number；2.parseInt；3.parseFloat

// Number
    let a = '124'
    a = Number(a)
    console.log(typeof a)  // number:124
    
    // 如果是纯数字的字符串，则直接转换成数字;如果字符串中有非数字，转换成NaN;如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
    var a="abc";
    a=Number(a);
    console.log(a);    结果：NaN
    
    Number(true)="1" 
    Number(Null)=0
    Number(undefined)="NaN"
    
    // parseInt()   parseFloat()   专门用来对付字符串
    var a = "123px";
    a=parseInt(a);
    console.log(typeof a);    结果：number
    console.log(a);               结果：123 
    var b=true;
    b=parseInt(b);
    console.log(typeof b);    结果：number
    console.log(b);               结果：NaN
    
    // 如果对非string使用parseInt()或parseFloat()它会先将其转换为string，然后再操作。

转成boolean直接就用Boolean

// 使用Boolean()函数
    // 除了0、NaN、空串、null、undefined其余都是true。对象也会转换为true
    var a= 123;
    a=Boolean(a);
    console.log(typeof a);   结果：boolean
    console.log(a);              结果：true

> **5.隐式类型转换有哪几种？**==和===

扩展：通过==比较两边的值是否相等的结果？  
1==’1’  
null==undefined

js中的数据类型是非常弱的，在使用算数运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和一个数字相加。之所以不同的数据类型之间可以做运算，是因为js引擎在运算之前会悄悄地把他们进行了隐式类型转换。

console.log([] == []) // false
    console.log([] == ![]) // true
    console.log([] !== [])  // true
    console.log(NaN != NaN) // true
    console.log(null == undefined) // true
    console.log(null === undefined) // false
    console.log(1 == true) // true
    console.log(null > 0) // false
    console.log(true + 1) // 2
    console.log(undefined + 1) // NaN
    console.log({} + 1) // [object Object]1
    console.log([] + {}) // [object Object]
    console.log([2,3] + [1,2])  // 2,31,2

> **6.“=="和“===”区别**

*   前者会自动进行类型转换，在判断是否相等
 *  后者不会自动类型转换，直接去比较

1== ‘1’
    null==undefined;//==true

>  **7.逻辑运算符：与,或,非**

*  || : 只要其中有一个为true，整体结果是true； 
 *  && : 只要有一个是false，整体结果是false； 
 *  !：取 （比较：转布尔，在取反）

>  **8.null和undefined是否相等?null和undefined的区别？**

console.log(null==undefined)//true
    console.log(null===undefined)//false

*  null:  没有定义的时候是null值，报错not found;null表示“无”，转成数值时为0。
 *  undefined:只是初始化，创建变量，但是没有赋值；undefined是表示“无”的原始值，转为数值为NaN。

> **9.JS的四种检测类型 **

1.  typeof:检测基本数据类型。    // console.log(typeof 1)   --number
2.  instanceOf:检测当前实例是否属于某个类的方法（检测引用数据类型，而不能检测基本数据类型） // var arr = \[\]; console.log(arr instanceof Array)  --true
3.  constructor：检测属性是否存在于构造函数的原型上，用\_proto\_在原型上找   // var arr = \[\];arr.constructor === Array;//true
4.  Object.prototype.toString.call： 最准确的方式；用来检测数据类型的    // console.log(Object.prototype.toString.call(1));//\[object Number\]

> **10.break，continue,return区别**

相同点：都是将此时进行的语句停止

*  break:立即结束语句，并跳出循环
 *  continue:立即停止语句，并向下执行
 *  return:停止函数

> **11.for…in..和for…of..的区别？ **

*  for...in用于遍历数组或者对象的属性；
 *  for...of遍历循环数组

> **12.map，forEach区别 **

相同点：

1.  都是循环遍历数组中的每一项
2.  每次执行匿名函数，都支持3个参数，参数分别是item（当前每一项），index（索引值），arr（原数组）
3.  只能遍历数组
4.  匿名函数中this都指向window

不同点：map有返回值,不会改变原数组，返回一个新的数组;forEach没有返回值,对原数组数据直接进行修改

// map
    var arr = [0,2,4,6,8];
    var str = arr.map(function(item,index,arr){
    console.log(this); //Window
    console.log(item);
    console.log('原数组arr：',arr); // 会执行五次
    return item/2;},this);console.log(str); //[0,1,2,3,4]
    
    // forEach
    arr.forEach((value, key) => {
     return arr[key] = value * value;
    });

> **13.循环(while,do...while,for,for...in)**

1.  while 先判断--------->后执行
2.  do......while 先执行------------->再判断
3.  for循环
4.  for...in    ---->用于对象遍历

// while
    var i = 0;
    while(i < 100){
    console.log('i为' + i)
    }
    
    // do...while
    var x = 3;
    var i = 1;
    do {
    console.log(i);
    i++;
    } while (i < x)
    
    // for...in
    var person = {name: "张”}
    for(var key in person){
    if(person.hasownproperty){
    }
    }

> **14.Number方法**

*  `isNaN` : 检查数字是否非法    // console.log(isNaN(123))   // false
 *  `Number` :将其他数据类型的值强制转换成number类型； 
 *  `parseInt` :经常用于字符串提取数字的方法； 
 *  `parseFloat`:和parseInt 用法一样；区别是多识别一位小数点 
 *  `toFixed` : 保留小数点位数的方法;返回值是一个字符串；

> **15.字符串的方法**

*  `toUpperCase` : 把小写字母转成大写 
 *  `toLowerCase` 把大写转小写 
 *  `replace`:替换;原有字符串不变；用新字符替换旧的字符 
 *  `concat` : 拼接

> **16.字符串的运算**

`- * /`: 会先把字符串转换成数字，然后再进行计算

注意：

*  任何数字和NaN 计算，结果都是NaN;
 *  任何数字和undefined运算，得到也是NaN；

> **17.split() join() 的区别**

*  split():把一个字符串分割成字符串数组，并返回。  // “hello".split("")   // \["h", "e", "l", "l", "o"\]
 *  join():把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,并返回。

在本例中，我们将创建一个数组，然后把它的所有元素放入一个字符串：
    
    <script type="text/javascript">
    var arr = new Array(3)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    
    console.log(arr.join())
    
    </script>
    输出：
    
    George,John,Thomas

> ** 18.js精度误差**

1.  toFixed()，保留两位小数
2.  先乘10再除以10

var a = 1;
    var b = 2.344544;
    console.log((a+b).toFixed(2))

> ** 19.获取元素的方法**

*   `document.getElementById`:通过ID名来获取元素 
 *  `document.getElementsByTagName`: 通过标签名来获取元素 
 *  `document.querySelectorAll()`;获取所有的元素

> **20.DOM操作——怎样添加、移除、移动、复制、创建和查找节点。  **

创建节点

*  createElement();    // 创建一个具体元素
 *  createTextNode();   // 创建一个文本节点

查找

*  getElementByName()   // 通过元素的Name属性的值
 *  getElementById()          // 通过元素ID，唯一性
 *  getElementTagName()    // 通过标签名称

添加、移除、替换、插入

*  appendChild(node)
 *  removeChild(node)
 *  replaceChild(new,old)
 *  insertBefore(new,old) // 在已有的子节点前插入一个新的子节点

> ** 21.已知ID的input输入框，希望获取这个输入框的输入值，怎么做？**

document.getElementById("ID").value

> **22.怎么检测数组？**

*  isArray
 *  instanceOf

> **23.改变数组长度的方法有哪些？**

pop,push,unshift,shift

> **24.数组的方法 **

*  length():返回数组的长度
 *  push()尾部添加，返回数组长度(向数组末尾新增一项；可以传多个)
 *  pop()尾部删除，返回被删除的元素（删除数组的最后一项；不需要传参数；）
 *  unshift()头部添加 ，返回数组长度
 *  shift()头部删除，返回被删除的元素
 *  reverse():反转数组项的顺序
 *  concat()：数组的拼接 。构建成一个新的数组,原数组并未改变.
 *  slice(m,n): 数组的截取 ,从数组索引m开始，截取到索引n，但是不包含n;\[前包后不包\] ,原有数组不发生改变

> **25.对象的方法？**

*  concat():拼接字符串
 *  slice():对字符串进行分割
 *  split():把字符串分割成字符串数组 
 *  toLowerCase():把字符串转换为小写
 *  toUpperCase():把字符串转换为大写

> **26.数组的去重 **

*  new Set 
 *  双for循环

// new Set
    const set = new Set([1, 2, 3, 4, 4]);
    [...set]
    
    
    //for--双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
    var arr = [1,2,3,4,5,6,54,5,67]
    function unique(arr){
    for(let i = 0; i< arr.length;i++){
    for(let j = i + 1; j< arr.length;j++){
    if(arr[i] == arr[j]){
      arr.splice(j,i)    // 第一个等同于第二个，splice方法删除第二个
    }
    }
    }
    return arr;
    }

> ** 27.**.**闭包是什么，有什么特性，对页面有什么影响？为什么要用他？**

闭包：内部函数调用外部函数

缺点：

*  更多的消耗内存
 *  会造成内存泄漏。因为闭包中引用到的函数中定义的变量永远都不会被释放。解决办法：闭包在不使用的时候，及时释放。将引用内层函数对象的变量赋值为null

为什么使用它？局部变量：仅函数内可用不会被污染

function init(){
       var name="zhangsan";    // 创建局部变量name和局部函数alertName
       function alertName(){   //alertName()是函数内部方法，是一个闭包
            console.log(name)  //使用了外部函数声明的变量，内部函数可以访问外部函数的变量
        }
       alertName()
    }
    init()

> **28.JavaScript this、闭包、作用域**

*  this：指向调用上下文
 *  作用域：定义一个函数就开辟了一个局部作用域，整个js执行环境有一个全局作用域
 *  闭包：内部函数调用外部函数里面的变量(例子如上)

> ** 29.函数（function)和方法(method)**

*  函数：可以实现一定功能的一段代码的封装
 *   方法：函数定义到对象里面

区别：

*  方法在对象里，方法也是函数
 *  函数可以随意调用

本质上是一样的，方法是函数的特例，将函数赋值给了对象

// 函数
    // 注意：函数创建后，在内存堆中以一段字符串文本存储，不执行时不会调用，就单单是存了一段字符串。
    function f() {
     console.log('我是函数');   //调用函数 f();
    } 
    
    // 方法
    var obj = {
     function f(){ 
    console.log("我是方法"); 
    } 
    }; 
    //对象调用方法 (对象调用通过点对象的属性名) obj.f();

> **30.简述创建函数的几种方式**

**函数三要素：函数名，参数，返回值（每个函数都必须有return,如果没有return语句，计算机会自动补一个，返回值是undefined）**

*  函数声明-------语法：关键字  标识符 小括号\{函数体\} 
 *  匿名函数表达式-----------语法：   关键字 标识符 = function() 函数体
 *  Function构造函数的方式---------语法：关键字  标识符 = new Function()

// 字面量（函数声明）
    function sum1(num1,num2){ return num1+num2}
    
    // 表达式（匿名函数表达式）
    // 匿名函数：没有函数名称，无法通过函数名称调用
    // function(){}:只能自己调用自己
    var sum2 = function(num1,num2){return num1+num2}
    
    // 构造函数方式
    var sum3 = new Function('num1','num2','return num1+num2')

> ** 31.什么是函数的封装？**

把实现相同功能的代码放到同一个函数体中，当想实现这个功能的时候，直接调用这个函数。减少了冗余代码，高内聚，低耦合。

> **32.函数的执行过程 **

1.  形成一个私有作用域
2.  形参赋值
3.  变量提升
4.   代码从上往下执行
5.  作用域销毁

注意：在函数执行时，函数体中可以找到函数外面的变量；但是函数外面不能访问里面的变量；

> ** 33.构造函数与普通函数的区别**

*  构造函数的方法名首字母要大写，普通函数不需要
 *  构造函数的调用方法为： new  Show();普通函数：show（）。
 *  构造函数的类名和方法名一样

// 定义构造函数
    function Show(){
    this.name = "张三"
    this.age = "12"
    }
    var show = new Show()  // 调用构造函数
    alert(show.name)    // 张三
    
    // 普通函数
    function show (name,age){
            this.name = zhangsanm;
            this.age = 12;
    }
    alert(show(this.name))   //zhangsanm

> ** 34.new对象时发生了什么？**

1.  初始化一个空对象
2.  绑定this
3.  执行构造函数
4.  返回这个对象（不需要return来返回）

[https://blog.csdn.net/w13508763507/article/details/83449359][https_blog.csdn.net_w13508763507_article_details_83449359]

> **35.call,apply,bind有什么用？区别是什么？**

改变this的指向有哪些？call，apply,bind

call和apply相同点：改变函数中this的指向

不同点：

call和apply一样，只是传参数不一样，apply参数是以数组的形式传参；bind和call传参方式一样，但是bind会立即执行

建议使用es6箭头函数：这样就解决了this指向问题

// 无参调用
    function fn(){
        alert(this.name)
    }
    var p1 = {name: 1}
    fn.call(p1)
    fn.apply(p1)
    
    
    // 有参调用
    function fn2(name,age){
        this.name = name;
        this.age = age;
    }
    var p1 = {}
    fn2.call(p1,"张三",20)
    fn2.apply(p1,["张三",20])

> **36.形参（parameter)和实参(argument)的区别**

*  形参就是函数声明时的变量
 *  实参就是函数随时参入的具体参数

// a,b是形参，1，3是实参
    function add(a,b){
    return a+ b
    }
    add(1,3)

> **37.哪些操作会造成内存泄漏？**

函数中使用的变量使用完不会自动释放

*  闭包---使用后的变量得不到释放---解决办法：将时间处理函数定义在外部
 *  setTimeout--定时器一直在执行---解决办法：使用setInterval
 *  意外的全局变量 ---全局变量不会被回收----解决办法：使用严格模式

> **38.什么是 “use strict”; ? 使用它的好处和坏处分别是什么？**

ES5引入的严格模式

好处：1.消除语法的不合理不严谨之处     2.提高编译器效率，增加运行速度

具体体现：1.防止意外为全局变量赋值      2.防止重名

坏处：1.一些正常模式下可以运行的语句，在严格模式下不能运行

> **39.你使用哪些工具和技术来调试 JavaScript 代码？**

*  alert
 *  console.log
 *  Debugger断点（具体的说就是通过在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。）

> ** 40.普通事件和事件绑定有什么区别**

*   普通事件（onClick）:只支持单个事件，会被其他事件覆盖
 *  事件绑定（addEventListener):可以添加多个事件，不用担心会被覆盖

区别：addEventListener对任何DOM都是有效的，而onclick仅限于HTML

// 普通事件
    // 输出结果只会是‘你好222’
    var btn = document.getElementById("btn")
    btn.onclick = function(){ alert('你好111') }
    btn.onclick = function(){ alert('你好222') }
    
    
    // 事件绑定
    // 结果会弹出'你好111','你好222'的弹窗
    var btn = document.getElementById("btn")
    btn.addEventListener('click',function(){ alert('你好111') }, false)
    btn.addEventListener('click',function(){ alert('你好222') }, false)

> **41.ajax请求时，如何解析json数据**

json.parse

> **42.阻止默认事件；；；取消默认事件**

*  默认事件：return false
 *  取消事件：e.preventDefault

> **43.捕获异常的方法？**

try catch finally

> **44.什么是JSON**

前后台一种交互的数据格式

> **45.ajax同步,异步的区别**

*  同步：async: false
 *  异步：async: true

> **46.Math的方法 **

*  Math.ceil()：向上取整  console.log(Math.ceil(.95));     // 1
 *  Math.max(): 取最大值  // console.log(Math.max(1,3,2)     //  3
 *  Math.min(): 取最小值    // console.log(Math.min(1,3,2)    // 1

> **41.设置定时器 **

相同点：指定的毫秒内执行指定的函数

区别

*  setTimeout(cb,ms)--只执行一次指定的函数
 *  setInterval (cb,ms)--不停的调用

// setTimeout
    function printHello(){
        console.log('Hello World')
    }
    var timer = setTimeout(printHello,2000)
    
    // setInterval
    function printHello(){
        console.log('Hello World')
    }
    var timer = setInterval(printHello,2000)

> ** 42.清除定时器**

*  clearTimeout()
 *  clearInterval()

> **43.js延迟加载的方式有哪些？**

*  使用setTimeout
 *  加loading
 *  让js最后加载（把JS外部引入的文件放到页面底部，让JS最后引入，提高加载速度）

> ** 44.请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。怎么解决异步问题？**

*  同步：如果在同一时间内有很多任务，这些任务需要排队完成，一个一个的执行，前一个任务执行完，再去执行下一个任务
 *  异步：如果在同一时间内有很多任务，这些任务不需要排队就可以去完成，任务都完成就结束了

> **45.js的同源策略，跨域，解决办法？ **

同源策略：协议，域名，端口号

*  协议：http；https
 *  域名：baidu.com;localhost;
 *  端口号：一个网站对应一个端口号；http默认端口号8080 ，https默认端口号是8083

跨域：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

为什么会有跨域:所谓同源是指，**域名，协议，端口**均相同，只要有一个不同，就是跨域。

解决办法？

1.跨域资源共享CORS（Cross-Origin Resource Sharing）

*  普通的跨域请求：只需要服务器端设置（Access-Control-Allow-Origin)
 *  带cookie的跨域请求：前后端都需要设置.

//java中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：
        header("Access-Control-Allow-Origin: *")

2.通过jsonp跨域：服务器与客户端跨源通信的常用方法

*  优点：简单适用，兼容性好
 *  缺点：只支持get请求，不支持post请求。

// Vue
    this.$http.jsonp('http://www.domain2.com:8080/login',{
        params:{},
        jsonp:'handleCallback'
    }).then((res) =>{
        console.log(res)
    })

3.nginx代理跨域

4.nodejs中间件代理跨域

> **46.js（es5)类:用的构造函数；es6类用的:class类**

es5:

*  获取对象： new 类名称（）
 *  访问：对象.成员

es6:

function 类名称（）\{...\}   // 与方法不同的是：类名称首字母要大写

// es5  定义类的方法，向类中添加属性
    function Person(name){
        this.name = name,   // 在类内部定义一个属性
        this.say = function(){ alert(this.name) }
    }
    var p1 = new Person('zh')
    p1.say();
    alert(typeof (p1));//object
    alert(typeof (Person('zhh')));//Undefined 函数没有返回值则为Undefined
    alert(typeof(Person));//function
    
    
    // es6  通过class关键字 定义类
    class Point{
        contructor(x,y){
            this.x = x;
            this.y = y;
        }
        toString(){
            return '(' + this.x + ',' + this.y + ')'
        }
    }

> **47.js的三大特性：继承，封装，多态**

*   封装：一个公共的方法
 *  继承：当多个方法存在相同的属性和方法时，就把这些相同属性和方法提取到一个公共方法中，通过prototype继承该方法。当然也可以通过cal和apply来继承该方法中的属性和方法
 *  多态：就是在执行同一操作且作用域不同对象时，返回不同的结果。其实也就是把做什么和由谁去做分开，这样使得代码更容易维护，且条例清晰

// 封装
    function Person(name , age , sex){
        this.name = name ; //共有变量 
        var age = age ;  //私有变量
        var sex = sex ; //私有变量
        this.show = function (){
            console.log(age+"===="+sex);
        }
    }
    var person = new Person('Sunshine',18,'女');
    console.log(person.age);    // undefined
    console.log(person.name);   // Sunshine
    console.log(person.show());     // 18====女
    
    
    // 继承
    function Person(name , age , sex){
        this.name = name ; 
        this.age = age ; 
        this.sex = sex ; 
        this.show = function (){
            console.log( this.age + "========"+ this.sex );
        }
    }
    function Student(name , age , sex , score){
        this.score = score ; 
        Person.apply(this,[name , age , sex]);
    }
    function Worker(name , age , sex , job){
        this.job = job ; 
        Person.call(this,name , age , sex);
    }
    Dancer.prototype = new Person('Sunshine',18,'女');
    function Dancer(salary ){
        this.salary = salary ;
    }
    var student = new Student('Sunshine',18,'女',100);
    var worker = new Worker('Sunshine',18,'女','IT');
    var dancer = new Dancer(20000);
    console.log(student);
    console.log(worker);
    console.log(dancer);
    
    
    // 多态
    function dwn(s){
        document.write(s+"<br/>");
    }
    function Animal(){
        this.bite=function(){
            dwn("animal bite!");
        }
    }
    function Cat(){
        this.bite=function(){
            dwn("Cat bite!");
        }
    }
    Cat.prototype=new Animal(); ///inherit Animal
    function Dog(){
        this.bite=function(){
            dwn("Dog bite");
        }
    }   
    Dog.prototype=new Animal();  ///inherit Animal
    function AnimalBite(animal){
        if(animal instanceof Animal) //这里是判断animal的原型是否指向Animal
        animal.bite();
    }
    var cat = new Cat();
    var dog = new Dog();
    AnimalBite(cat);
    AnimalBite(dog);
    //最终输出的结果如下：
    /*
        Cat bite!
        Dog bite
    */

> **48.prototype （原型链）**

挡在一个对象上找一个属性的时候，要先在这个对象本身去找，所有对象上都有\_proto\_属性，这个属性值是指它构造函数的prototype的，如果对象本身没有这个属性，就会去它的\_proto\_上找（也就是构造函数的prototype）如果还没有就去 \_proto\_的\_proto\_上找 就这么一直找，这个搜索的过程，就叫做原型链

> **49.原型指针 **

就是\_proto\_使指向它构造函数的原型

> **50.垃圾回收机制**

JS觉得这块东西或这个变量不需要了，就会自发现，然后清除（js自动执行）

怎么解决？

*  标记清除法
 *  引用计数：用完直接赋值为空

> **51.SEO是什么？**Search Engine Optimization--搜索引擎优化

根据你输入的内容，浏览器检索出关键字

> **52.对象的深拷贝？ES6、ES5**

*   浅拷贝：当原对象发生变化时，拷贝对象也跟着变化
 *  深拷贝：另外申请一块内存，内容和原对象一样，更改原对象，拷贝对象不会跟着发生变化

// 1.浅拷贝
    var a = {count: 1,deep:{count: 2}}
    var b = Object.assign({}, a)   或者 var b = {...a}
    
    
    // 2.通过Object.assign
    // Object.assign(es6)方法可以把任意多个源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象
    var obj1 = {
        a: 'hello',
        b: {
            a: 'hello',
            b: 21
        }
    }
    var cloneObj1 = Object.assign({},obj1)
    cloneObj1.a = 'changed';
    cloneObj.b = 'changed';
    console.log(obj1.a);  //hello
    console.log(obj.b.a); // "changed"
    
    
    
    // 1.深拷贝
    // 手动赋值--一个一个赋值
    var obj1 = {a: 10, b: 20, c:30}
    var obj2 = {a: obj1.a, b: obj1.b, c: obj1.c}
    obj2.b = 100;
    console.log(obj1);
    // { a: 10, b: 20, c: 30 } <-- 沒被改到
    console.log(obj2);
    // { a: 10, b: 100, c: 30 }
    
    
    // 2.深拷贝
    var deepCopy = (obj) => {
        var ret = {}
        for (var key in obj) {
            var value = obj[key]
            ret[key] = typeof value === ‘object‘ ? deepCopy(value) : value
        }
        return ret
    }

> **53.防抖节流**

*  防抖：触发事件后再n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行的时间
 *  节流：连续触发事件但是在n秒内只执行一次函数

解决办法：加loading,加定时器

> **53.async和await的用法**

都是用来解决异步的

*   async函数：声明异步函数，返回promise对象
 *  await: 等待一个async函数的返回值

// async
    async function test(){
        return 'test'
    }
    test()
    // 控制台输出结果--返回的是一个promise对象
    返回值为 Promise {<resolved>: "test"}
    
    
    // await
    function getSomething(){
        return 'something'
    }
    async function testAsync(){
        return Promise.resolve('hello async')
    }
    async function test(){
        const v1 = await getSomething();
        const v2 = await testAsync()
        console.log(v1,v2)
    }
    test()
    // 控制台输入结果
    something hello async
    Promise {<fulfilled>: undefined}

[https://segmentfault.com/a/1190000007535316][https_segmentfault.com_a_1190000007535316]

> **54.如何规避javascript多人开发函数重名问题？**

少使用全局变量

> **55.说出3中降低页面加载的方法**

*  优化图片
 *  优化css
 *  减少请求

> **56.暂时性死区 **

凡是在变量没声明之前就赋值的都属于暂时性死区 。

let 和 const 声明的变量不存在变量提升，其作用域都是块级作用域，凡是在声明变量之前使用变量就会报错，所以，在代码块内，使用`let`命令声明变量之前，该变量都是不可用的。

if(true){
        // 死区开始
        lzp = 'lut'
        console.log(lzp)
    
        // 开始声明变量，死区结束
        let lzp; 
        console.log(lzp); // undefined
     
        lzp = 520;
        console.log(lzp); // 520
    }

> **57.JS的作用域链是什么及其作用**

一般情况，变量取值是先上所在的变量函数的作用域中取值，没有的话，就会去上级作用域去查，直到查到全局作用域，这个查找的过程就是作用域链。

作用：解析变量的值

> **58. JS运行机制**

*   所有同步任务都在主线程上执行，形成一个执行栈
 *  主线程之外还有一个“任务队列”。只要异步任务有了结果，就在“任务队列”之中放置一个事件
 *  一旦“执行栈”中所有同步任务都执行完成，系统就会读取“任务队列”，看看里面有哪些事件，哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
 *  主线程不断重复上面第三步

> **59.事件循环**

主线程从“任务队列”中读取事件，这个过程是不断循环的 ，所以整个的这种运行机制就是事件循环

> **60.宏任务和微任务**

*  任务队列里面包括宏任务和微任务
 *  宏任务和微任务就是区分异步里面谁先执行
 *  先执行微任务再执行宏任务（有微则微 无微则宏）
 *  异步里先执行promise这种，最后执行settimeout这种，nexttick也是微任务
 *  同步肯定按顺序执行

==================================================================

ES6

> **1.const let var 区别？**

*  var声明变量存在变量提升，let和const不存在变量提升
 *  const声明常量let声明变量，两个都可以形成块级作用域
 *  const声明之后必须赋值，否则会报错；一旦赋值，常量的值就不能改变，为什么？其实并不是说变量的值不能改变，而是指变量指向的那个内存地址所保存的数据不能改动（因此就相当于常量）

> **2.变量提升:变量提升会优先声明**

*  变量提升：var声明变量时是先声明在赋值
 *  函数提升：将整个代码块提升到他所在的作用域，最开始执行
 *  匿名函数不能被提升

// 变量提升
    var a = 5;
    function test3(){
        var a;
        console.log(a);
    }
    test3();    ----undefined
    
    
    var a = 5;
    function test3(){
        var a = 3;
        console.log(a);
    }
    test3()    -------3(变量提升）
    
    
    // 函数提升
    var a = 1;
    function foo(){
    var a =  function(){}   ----->函数提升
    a = 10;
    console.log(a) ------>10
    return
    }
    foo()
    console.log(a)  ------->1

> **3.什么是匿名函数**

*  语法：（function()\{...\}()） 
 *  前面的括号包含函数体，后面的括号就是给匿名函数传递参数并立即执行
 *  匿名函数的作用是避免全局变量的污染以及函数名冲突
 *  小括号作用：小括号返回的就是匿名函数的Function对象

(function(x,y){
        alert(x,y)
        return x+y
    }(3,4))

>  **4.JS执行上下文**

当代码运行时，会产生一个对应的执行环境。代码呈上往下执行的过程就是执行上下文。

运行环境：

*  全局执行上下文：window对象（全局环境）
 *  函数上下文：this自己 （函数环境）
 *  eval上下文：一般不会用

> **5.js中this对象的指代**

*  全局环境this指向window对象
 *  当前函数，this指向当前函数
 *  箭头函数没有this指向问题，this指向的就是箭头函数外部的函数，指向函数上下文

> **6.箭头函数，使用箭头函数应注意什么？**

优点：

*  语法简洁，函数定义不再使用关键字function,而是用（）=>来进行定义
 *  解决了this指向问题，有一个确定的作用域

注意：

*  用了箭头函数，this就不是指向window,而是指向父级（指向是可变的）
 *  不能用作构造函数，这就是说不能使用new命令，否则会报错

// es5 构造函数
    var x = function(x,y){
        return x * y
    }
    
    // es6 箭头函数
    1.()内是参数，一个参数的时候是可以省略的
    2.=>后面是返回值，省略return
    3.作用域，不会绑定this;箭头函数会默认绑定外层的this的值，所以箭头函数中this的值和外层this的值一样
    4.如果函数部分只有一条语句，可以省略return关键字和大括号()
    const x = (x,y) => x * y

>  **7.模板字符串**

用反引号标识，用$\{\}将变量括起来

var name="zzw";
    `${name},no matter what you do,I trust you.`

> **8. ... 展开运算符**

可以将数组和对象里面的值展开；还可以将多个值收集为一个变量

数组合并的时候用

var arr1 = [1,2,3,4]
    var arr2 = [4,5,6]
    var arr3 = [...arr1,arr2,7,8] // [1,2,3,4,4,5,6,7,8]
    arr1.push(...arr2) // 当然也可以用concat等数组合并的方法

> ** 9.结构赋值 **

所谓的解构赋值其实就是分解出一个对象的解构，分成两个步骤：

*  变量声明
 *  变量赋值

let node = {
        type: 'Identtifier',
        name: 'foo'
    }
    let {type,name} = node
    console.log(type)  // Identtifier
    console.log(name)  // foo

> ** 10.promise(异步)--解决异步问题**

promise是一个对象。

特点：

*  对象的状态不收外界影响（3中状态：Pending状态（进行中），Fullfilled状态（已成功），Rejected状态（已失败）） 
 *  一旦状态改变就不能在更改（2种状态：成功和失败。Pending->Fullfilled，Pending->Rejected）

// Promise构造函数接受一个参数作为参数，该函数的两个参数是resolve和reject
    // resolve作用是Pending(未成功)-->Fulfilled(成功)时调用，并将异步操作的结果作为参数传递出去
    var promise = new Promise(function(resolve, reject){
        // ... some code
        if (/* 异步操作成功 */) {
            resolve(value);
        } else {
            reject(error);
        }
    })

方法：

*  then方法可以接收两种状态回调的参数。 Resolve和Rejected
 *  all：多个请求一起发出根据请求顺序和使用数据的场景
 *  catch：reject状态时才会进入，捕获错误信息
 *  finally:成功失败都进finally

Promise 中reject 和 catch 处理上有什么区别？

reject 是用来抛出异常，catch 是用来处理异常

reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

// then
     routeInfo (type = 'edit') {
        return new Promise((resolve, reject) => {
          this.listData(type).then(result => {
            return new Promise((resolve) => {
              let res = result.list[0]
              if (result.list.length !== 1) {
                console.warn('待办结果不唯一')
              }
              resolve(res)
            })
          }).then(res => {
            this.dataValidator(res, type).then(res => {
              resolve({
                name: this.info[this.typeCode][type].routerName,
                query: this.info[this.typeCode][type].query(res),
                params: this.info[this.typeCode][type].params && this.info[this.typeCode][type].params(res)
              })
            }).catch(e => {
              reject(e)
            })
          }).catch(e => {
            reject(e)
          })
        })
      }
    
    
    // all
        getData () {
          Promise.all([
            this.getCreditData(),
            this.getProjectData()
          ]).then(result => {
          }).finally(() => {
            this.loading.detail = false
          })
        },
    
    
    // catch
    let p2 = new Promise((resolve, reject) => {
            reject('123');
    }).catch(e => e);

> **11.Symbol（第七种基本数据类型）**

Symbol是一种基本类型.函数返回的symbol是唯一的

好处：用来定义对象的唯一属性名（类似于id一样是唯一标识）

缺点：Symbol类型是不能通过Object.keys()或者for...in来枚举,因为不包含在对象自身的属性名集合(property name)中

因此：使用JSON.stringify()将对象转成JSON字符串的时候，Symbol这个属性也会排除在外

（1）**为什么引入Symbol?**

之前的对象属性名是字符串,容易造成属性名冲突

**（2）typeof运算符用于Symbol类型值,返回symbol**

let name = Symbol()
    console.log(typeof name)   // Symbol

（3)**Symbol的值和谁都不相等,是独一无二的值.**

let symbol1 = Symbol()
     let symbol2 = Symbol()
     console.log(symbol1 === symbol2)  // false
     console.log(symbol1 == symbol2)   // false
     symbol1和symbol2相等吗?

不相等.因为Symbol类型的值是独一无二的值.

（4）**.为什么Symbol不能用new关键字?**

let obj = new Symbol()     // TypeError

symbol值不是对象，所以不能添加属性

（5）**console.log(Symbol(‘Alice’) + “bruce”)   // TypeError,为什么错误?**

Symbol值不能与其他类型的值进行运算

（6）**如何读取Symbol的属性值?**

let name = Symbol()
     let obj = {}
     obj[name] = “Alice”
     cosnole.log(obj[name])

Symbol值定义属性时，必须放在方括号内，不能用点运算符。

（7）Symbol的值显示的转成字符串或者布尔值,但是不能转成数值.

> **12.set数据结构**

Set本身是一种构造函数。类似于数组，但是成员的值是唯一的，不能重复

用法：

1.//  数组去重
      [...new Set([1,2,3,3])]  // [1,2,3]
    //  字符串去重
      [...new Set([‘zyy’])].join(‘’)   // ‘zy’

注意：向Set加入值的时候，不会发生类型转换，所以5和’5’是两个不同的值。

let set = new Set()
    set.add(NaN)
    set.add(NaN)
    console.log(set)   // Set{NaN}
    // 也就是说NaN是相等的
    let set = new Set()
    set.add({})
    set.add({})
    console.log(set.size)		// 2
    // 也就是说，上面的2个空对象是不相等的

[https_blog.csdn.net_w13508763507_article_details_83449359]: https://blog.csdn.net/w13508763507/article/details/83449359
[https_segmentfault.com_a_1190000007535316]: https://segmentfault.com/a/1190000007535316