js高频面试知识点

题型整理

学习半个月js之后总结了一些js的比较容易出错的地方 代码如下

    1.call apply bind作用与区别
    //将猫抓老鼠的功能对象变成狗 改变的是函数中的this指向(函数运行上下文环境)
    // kitty.catchMouse.call(doggy, 'Mickey', 'Minnie')
    // kitty.catchMouse.apply(doggy, ['Mickey', 'Minnie'])
    // const doggyCatchMouse = kitty.catchMouse.bind(doggy, 'Mickey', 'Minnie')
    // doggyCatchMouse()
    

    2.substr substring slice区别
    //substr 第二个参数为截取几个字符 且为下标向前截取（方法未标准化一般不用）
    //substring两个参数可以任意指定 无需开头结尾顺序
    //slice必须从头到END截取且END不要 没有END就从头到尾
    //三种方法都不改变原字符串


    3.client screen offect page scroll区别
    //clientLeft 为元素到可视窗口X距离 Height为可视窗口高度不包括水平滚动条
    //screenX Y  元素到屏幕左上角距离
    //offect 相对父级元素定位 包括滚动条 固定定位为BODY
    //scrollTOP 元素相对页面卷出距离 scrollHeight 页面元素总高度（真实内容）
    //pageY,X mouse事件触发后触发位置相对于上和左的距离
    

    4.this在不同时候的指向
    //回调函数时指向window 默认绑定
    //正常情况指向函数运行上下文 隐式绑定
    //apply call bind时指向bind内的对象 显式绑定
    //var a=new Class()绑定会将实例化对象绑定在class对象中 此时this指代class 并且可以调用class内的实例化方法（但不能调用静态）
    //箭头函数绑定this直接指定对象 监听事件中回调函数可以将this绑定点击事件e.target例：e=>{this.clickHandler(e)}将点击事件对象绑定


    5.mouseenter 与moueseover区别
    //mouseenter不触发子元素 mouseover经过子元素会触发

    6.事件委托
    //将子元素事件委托给父元素并通过冒泡执行子元素事件 调用=>解决this指向并修改样式
    
    7.splice方法可以改变切割数组 splice(2,0,1) 从第二位开始删除0个元素并添加数字1返回新数组
    //slice（）返回新数组
    

    8.shift unshift sort
    //sort(funciton(a,b){return a-b}) 
    //shift删除数组第一个元素并返回 unshift添加元素并返回

    9.arguments必须在函数内调用 可以作为上下文this指向 argument.length为参数长度

    10.every some fliter reduce
    //every全满足返回 some有一个 fliter返回所有满足的值 return age>18
    //reduce(function(value item index arr){ return value+=item; })（一般用前两个,分别为初值，当前元素值，索引，数组）
   

    11.递归实际是一个异步执行过程 使用ajax可以多进程执行任务队列（或者使用redis+node.js）

    12.split加reduce切割地址字符串并返回地址
    //.split("?")[1]取？号切割后第二项.reduce(function(value,item{var arr;value[arr[0]]=arr[1]}))
    //返回value对象 返回值时需要判断arr【1】的值是否为NaN为数字转换为数字Number()


    13.var a=new Date().getDate()获取不同时间可做地址

    14.document.querySelector(".div1")获取id时需要加#div1 获取class时需要加.div1 这是一个对象
    //querySelector为一个nodelist 运用时用Array.from()转换为数组

    15.!{}   {}==!{} []==![]
    // !会将后面转换为布尔值  而只有"" undefined null 0  NaN为false 所以！{}为false
    // {}==!{}-->{}==false(和布尔值比较先转换为数值)-->{}.toString()==0-->NaN==0 所以为false
    //[]==![]-->[]==false-->""==0-->true;