面试题

面试题

1.什么是盒子模型

元素占维空间有四部分组成，元素内容、外边距、内边距、和边框组成，内容用于显示内容，边距和边框用来隔离其他元素,
ie下元素的宽度为：context + margin
标准下为：context + padding + margin + border
可以通过box-sizing： context-box 为标准， border-box为怪异模式

2.简述下src和href的区别

src类似于将网络资源插入文档中，下载网络资源并应用到文档中，如script img等，所以script放在body下面

href类似指向外部资源，创建文档和外部资源的链接，用于超链接

3.简述下同步异步的区别

同步阻塞模式，执行一个请求后会等这个请求返回后再之前其他任务
异步非阻塞模式，执行请求后不会等返回结果，继续执行其他任务

怎样添加、移出、移动、复制、查找节点？

appendChild();
removeChild();
replaceChild();
insertBefore();
getElementById();
getElementByTagName();
getElementByName();

什么是伪数组，如何将他转为真正的数组

无法操作数组属性，不过还可以通过遍历方法获取他们；
可以通过Array.slice.prototype.call(arr)

new操作做了哪些事情

1.创建一个新对象；
2.把空对象的原型指向构造函数的原型
2.吧函数this用call指向新对象
3.返回新对象

 function new(fn){
    var obj = {};
    obj._proto_ = fn.prototype;
    fn.call(obj,argument);
    return obj
 }

null和undefined的区别

null表示一个函数无返回为null，不存在的对象
undefined，定义一个变量但未赋值未undefined

call和apply的区别及作用

call和apply改变this的指向；
call是一个一个传递，而apply以数组形式传递；
可以用call和apply来实现继承

查找数组元素位置

function indexOf(arr,item){
    if(arr.prototype.indexOf){
        arr.indexOf(item);
    }else{
       for(var i=0;i<arr.length;i++){
         if(arr[i]===item){
           return i
         }
       }
    }
}

数组求和（多方法）

递归，for，foreach，reduce，eval

function summation(arr) {
   if(arr.length < 1){
     return 0
   }else if(arr.lenght == 1) {
     return arr[0]
   }else{
     return arr[0] + summation(arr.slice(1))
   }
}
function summation(arr) {
   return arr.reduce(function(itemA,itemB){
     return itemA + itemB;
   })
}
function summation(arr) {
    var num = 0;
    arr.forEach(function(item){
       num += item;
    })
}
function eval(arr) {
    return eval(arr.join('+'))
}

移出数组中的元素

题目要求不改变原数组，所以可以声明一个数组a用于保存arr中不同于item的值，最后将a返回。
2中方法filter

function delIitemData(arr,item){
    return arr.filter(function(data){
       return data !== item;
    })
}

添加元素

在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组。
3种方法

function afterItem(arr,item){
    return arr.concat(item);
}
function afterItem(arr,item){
    var newArray = arr.slice(0);
    newArray.push(item);
    return newArray
}
function afterItem(arr,item){
    var newArray = [];
    [].push.apply(newArray,arr);
    newArray.push(item);
    return newArray
}
function afterItem(arr,item){
    var newArray = [];
    arr.forEach(function(items){
        newArray.push(items);
    })
    newArray.push(item);
    return newArray
}

删除数组第一个元素

删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组
6中方法
浅拷贝数组4总在通过shift()删除
两种：slice(1),filter

  function beforeArry(arr){
    return arr.slice(1);
  }
  function beforeArry(arr){
    return  arr.filter(function(item,index){
        return index !== 0;
    })
  }

添加元素

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组。
浅拷贝数组还是4种方法:sclie(0),concat();[].push.apply(newArr,arr);迭代拷贝数组
slice+concat

function addItemData(arr,item,index){
    return arr.slice(0,index).concat(item,arr.slice(index))
}

查找重复元素

function duplicate(arr) {
    var a = [], b = [];
    for(var i = 0; i< arr.length; i++){
        if(!a[arr[i]]){
            a[arr[i]] = 1;
            continue;
        }
        arr[arr[i]]++;
    }
    return b.filter(function(item){ return item > 1; });
}
//sort
function duplicate(arr){
    var arr = [];
    arr.sort().sort(function(itema,itemb){
        if(itema==itemb && arr.indexOf(itema) === -1){
            arr.push(itema);
        }
    })
    return arr;
}

如何解决跨域

JSONP

通过标签来实现跨域请求。就是个请求链接；
客户端注册一个callback，然后把callback名字传给服务器，服务器将json数据直接以入参的方式放到funton总，这样就生成了一段js，然后客户端解析script标签执行callback函数
缺点：只能是get请求，

cors

前后端约定好，设置cors头一致。设置域名白名单。
缺点：不兼容ie8。

降域

//a.bbb.com
//b.bbb.com
两个iframe下：都设置document.domin='bbb.com'

postMessage

两个iframe下
window.frames[0].postMessage('getcolor','http://lslib.com');
window.parent.postMessage(color,'*');

GET和POST的区别是什么

get更加轻便，get是明文传值（URL传），不能超过4000，POST可以通过body传值更大差不多4兆，（深入：get，GET产生一个TCP数据包，一次性把header和data一并发过去，POST产生两个TCP数据包，先发送header服务器响应100后，继续，再发送data，服务器响应200，返回数据）

Promise

Promise.all 是个数组将所有请求结果都返回后才做另外的操作
Promise.race 当数组中的其中一个变成res或者rej的时候就调用then方法 {jsons数据}

angular组件之间的通讯。生命周期

生命周期8种

ngOnChanges @input发生变化的时候会调用，对象属性发生变化不会调用，只有对象引用变化会调用
ngOnInit 执行一次，组件初始化
ngDocheck 发送变换检测的时候调用
ngAfterContentInit 内容初始化
ngAfterContentChecked 内容变更检查的时候
ngAfterViewInit 视图初始化
ngAfterViewChecked 视图变更监察的时候
ngOnDestroy 组件销毁的时候

组件通讯

父->子： @input() 父组件添加子组件的引用@ViewChild()来获取子组件
子-> 父： @Output()
通过service
EventEmitter
订阅Subject next订阅

css盒子模型

从内到外：content + padding + border + margin

IE怪异盒子

说一下一个未知宽高元素怎么上下左右垂直居中。