js常见面试题

instanceof的用法：

// 判断是不是一个数组对象2种方法：
// instanceof判断是不是一个数组对象 console.log(arr   instanceof  Array)
 console.log(Aaary.isAaary(arr))

promise链式编程：

//不了解promise可以先去看看，了解后再来相信大家读能看的懂
function Promise1(resolve, reject) {
    setTimeout(function() {
        resolve('1');
    },5000);
}

function Promise2(resolve, reject) {
    setTimeout(function() {
        resolve('2');
    },5000);
}

function Promise3(resolve) {
    setTimeout(function() {
        resolve('3');
    },5000);
}
new Promise(Promise1).then(function(val){
    console.log(val + 5);
    return new Promise(Promise2);
}).then(function(val){
    console.log(val);
    return  new Promise(Promise3);
}).then(function(val){
    console.log(val);
});

三元运算表达式在常见的循环中怎么使用：

var obj = [
    {"title":'222',"status":0},
    {"title":'111',"status":1}
]
for(var i = 0; i < obj.length;i++){
    // console.log(obj[i].status)
    var status = (obj[i].status === 0) ? '已完成' : '未完成'
    var str = ""
        str+=`<p>${status}</p>`
        console.log(str)
        $("#box").append(str)
        
}

switch常见的使用：

//onclick调用-switch判断：
const getText = (status)  =>{
    switch(status){
        case 1:
        $("body").css({'background':'red'})
        break;
        case 2:
        $("body").css({'background':'green'})
        break
        default:
        $("body").css({'background':'pink'})
        break

    }
}

使用闭包进行数据的获取和存储：

//闭包的作用是为了设置或者获取数据；这样写便于项目的维护和层级明确；
function  user(name){
  var age;
  return {
      getname:function(){
          return name
      },
      setname:function(newname){
          name = newname
      },
      getage:function(){
          return age
      },
      setage:function(newage){
          age = newage
      }
  }
}

var lk = user('李康')
lk.setage('22')
lk.setname('哇哈哈')
var name = lk.getname()
var age = lk.getage()
console.log(lk)
console.log(age)
console.log(name)

回调函数的简单使用：

//执行callback 并且把callback 拿过来

var a = [1,4,5,6,77,8,9,53,32,112]
var b = [232,4,522,6,77,8,9,53,32,112]
function each(arr,callback){
    for(var i = 0; i < arr.length;i++){
        var item = arr[i]
        callback(item)
    }
}
each(a,function(item){
    if(item>100){
        console.log(item)
    }
})

//简单的写法
each(b,master)
function master(item){
    if(item > 200){
        console.log(item)
    }
}

使用call apply bind封装方法：

function charst(url,number){
  var list  =   this.number
  var text  =   this.number
  var from  =   this.from
    $.ajax({
        type:"post",
        url: url,                       
        dataType:"jsonp",
        success:function(data){
            console.log(data.num[0].num)
            var numbers = data.num[0].num + list + text + from
            $("#box").append(numbers)
        }
    })
}
var a = {
    number:12,
    text:13
}
a.from = 123
charst.apply(a,["http://app.zsbtv.com.cn/daping/get_topic.php?model=1",22])

列举DOM元素的增删查改Api

//创建dom节点：
document.createElement()
//查找：
document.getElementById()
document.querySelector()
document.querySelectorAll()
//追加：
document.appendChild()
//删除：
document.removeChild()

BOM常见的对象：

location
location.href  //url地址
location.reload //刷新页面
location.search //查询字符串

navigator    //浏览器信息

history    //历史信息

screen  //屏幕的对象

常见的浏览器的兼容问题(简单说几个)：

1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
2.IE9一下浏览器不能使用opacity；
3.IE不支持addEventListener，IE用attachEvent；
4.获取事件源参数，主流浏览器event.target ;IE用evnent.srcElement
防止冒泡和捕获
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

实现多个标签页之间通信的几种方法：

websocket、setInterval+cookie、localstorage、SharedWorker和postMessage

解释ajax的工作原理：

var   xhr = new XMLHttpRequest   //创建异步对象 
xhr.open('请求方式','请求地址')    //设置请求行
xhr.send(null)    //发送请求

网站性能优化：

1.减少http请求次数；
2.压缩css,js文件；
3.不要滥用闭包；
4.使用图片懒加载；

es7的新特性：

//使用includes()验证数组中是否存在某个元素，这样更加直观简单：
let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('react存在');
}

es8新特性(padStart) (padEnd)：

String.prototype.padStart( maxLength [ , fillString ] )
String.prototype.padEnd( maxLength [ , fillString ] )