面试总结

1.undefined和null的区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当声明了一个变量而未初始化时，得到的就是undefined，使用typeof运算得到 “undefined”。

2.js基本的数据类型

ECMAScript中有5中简单数据类型（也称为基本数据类型）: Undefined、Null、Boolean、Number和String。
还有1中复杂的数据类型————Object。Object本质上是由一组无序的名值对组成的。

3.原生获取元素的方法

JS获取DOM元素的方法（8种）

通过ID获取（getElementById）

通过name属性（getElementsByName）

通过类名class（getElementsByClassName）

通过标签名（getElementsByTagName）

通过选择器获取一个元素（querySelector）

通过选择器获取一组元素（querySelectorAll）

获取html的方法（document.documentElement） 
document.documentElement是专门获取html这个标签的

获取body的方法（document.body） 
document.body是专门获取body这个标签的。

4.css选择器
①.ID选择器 #
②.类选择器 .
③.标签选择器 p,div,span
④.伪类选择器 :link :active :visited :hover
⑤.通用选择器 *
⑥.属性选择器 [attr='']
⑦.伪类选择器 :first-child :nth-child() :first-letter :after :before

5.js中的new关键字

一、认识new运算符：

    function Animal(name){                      // 创建Animal构造函数
        this.name = name;
    }
    Animal.color = "black";
    Animal.prototype.say = function(){
        console.log("I'm " + this.name);
    };
    var cat = new Animal("cat");                // 创建cat实例

    console.log(
       cat.name,      //cat
       cat.color      //undefined
    );
    cat.say();        //I'm cat

    console.log(
       Animal.name,   //Animal
       Animal.color   //black
    );
    Animal.say();     //Animal.say is not a function

1、代码解读

1-3行---创建了一个函数Animal，并在其this上定义了属性:name，name的值是函数被执行时的形参。

第4行---在Animal对象（Animal本身是一个函数对象）上定义了一个静态属性:color，并赋值“black”。

5-7行---在Animal函数的原型对象prototype上定义了一个say()方法，say方法输出了this的name值。

第8行---通过new关键字创建了一个新对象cat。

10-14行---cat对象尝试访问name和color属性，并调用say方法。

16-20行---Animal对象尝试访问name和color属性，并调用say方法。

2、重点解析

第8行代码是关键：

var cat = new Animal("cat");

JS引擎执行这句代码时，在内部做了很多工作，用伪代码模拟其工作流程如下：

new Animal("cat") = {
    var obj = {};
    obj.__proto__ = Animal.prototype;
    var result = Animal.call(obj,"cat");
    return typeof result === 'object'?result:obj;
}

代码解析：

（1）创建一个空对象obj;

（2）把obj的__ proto__ 指向Animal的原型对象prototype，此时便建立了obj对象的原型链：obj->Animal.prototype->Object.prototype->null

如果你不了解JS原型链，请先阅读：JS原型和原型链

（3）在obj对象的执行环境调用Animal函数并传递参数“cat”。 相当于var result = obj.Animal("cat")。当这句执行完之后，obj便产生了属性name并赋值为"cat"。

关于JS中call的用法请阅读：JS的call和apply

（4）考察第3步返回的返回值，如果无返回值或者返回一个非对象值，则将obj返回作为新对象；否则会将返回值作为新对象返回。

理解new的运行机制以后，我们知道cat其实就是过程（4）的返回值，因此我们对cat对象的认知就多了一些：

image.png

cat.__ proto__ == Animal.prototype

Animal.prototype.__ proto__ == Object.prototype

Object.prototype.__ proto__ == null

__ proto__和prototype 以下三点需要谨记：

1.每个对象都具有一个名为__ proto__的属性；

2.每个构造函数（构造函数标准为大写开头，如Function()，Object()等等JS中自带的构造函数，以及自己创建的）都具有一个名为prototype的方法（注意：既然是方法，那么就是一个对象（JS中函数同样是对象），所以prototype同样带有__ proto__属性）；

3.每个对象的__ proto__属性指向自身构造函数的prototype；

所以cat的原型链是：

cat->Animal.prototype->Object.prototype->null

cat上新增了一个属性：name属性。

所以此时cat对象为：

image.png

★：实例对象(cat)的 __ proto __ == 构造函数(Animal)的prototype。
即：cat.__ proto __ == Animal.prototype
(注：#proto前后无空格，若不输入空格，在此无法显示__，故在此加上前后空格)

★：实例对象(cat)的constructor == 构造函数(Animal)。
即：cat.constructor == Animal

image.png

分析完了cat的产生过程，我们再看看输出结果：

cat.name -> 在过程（3）中，obj对象就产生了name属性。因此cat.name就是这里的obj.name

cat.color -> cat会先查找自身的color，没有找到便会沿着原型链查找，在上述例子中，我们仅在Animal对象上定义了color,并没有在其原型链上定义，因此找不到。

cat.say -> cat会先查找自身的say方法，没有找到便会沿着原型链查找，在上述例子中，我们在Animal的prototype上定义了say,因此在原型链上找到了say方法。

另外，在say方法中还访问this.name，这里的this指的是其调用者obj，因此输出的是obj.name的值。

对于Animal来说，它本身也是一个对象，因此，它在访问属性和方法时也遵守上述查找规则，所以：

Animal.color -> "black"

Animal.name -> "Animal" , Animal先查找自身的name,找到了name,注意：但这个name不是我们定义的name,而是函数对象内置的属性。

一般情况下，函数对象在产生时会内置name属性并将函数名作为赋值（仅函数对象）。

Animal.say -> Animal在自身没有找到say方法，也会沿着其原型链查找，话说Animal的原型链是什么呢？

image.png

Animal.__ proto __ == Function.prototype

Function.prototype.__ proto__ == Object.prototype

Object.prototype.__ proto__ == null

所以Animal的原型链是：

Animal->Function.prototype->Object.prototype->null

二、new存在的意义

认识了new运算符之后，我们再回到开篇提到的问题：JS中万物皆对象，为什么还要通过new来产生对象？要弄明白这个问题，我们首先要搞清楚cat和Animal的关系。

通过上面的分析，我们发现cat继承了Animal中的部分属性，因此我们可以简单的理解：Animal和cat是继承关系。

我们用这个方法来判断一下cat和Animal

cat instanceof Animal; //true

从执行结果看：cat确实是Animal实例对象，要想证实这个结果，我们再来了解一下JS中instanceof的判断规则：

var L = cat.__ proto __;
var R = B.prototype;
if(L === R) return true;

如果A的__ proto __ 等价于 B的prototype，就返回true。

在new的执行过程（2）中，cat的proto指向了Animal的prototype，所以cat和Animal符合instanceof的判断结果。因此，我们认为：cat是Animal的实例对象。

简单的总结语

在javascript中, 通过new可以产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。因此，new存在的意义在于它实现了javascript中的继承，而不仅仅是实例化了一个对象！

6.GET和POST请求方式的区别

GET和POST是HTTP请求的两种基本方法。

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

①.GET请求只能进行url编码，而POST支持多种编码方式。

②.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

③.GET请求在URL中传送的参数是有长度限制的，而POST没有。

④.对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

⑤.POST比GET更安全，因为GET参数直接暴露在URL上，所以不能用来传递敏感信息。

⑥.GET参数通过URL传递，POST放在Request body中。

7.rem.js

适配移动端的Rem.js：

window.onload = function(){
    /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(750,100)
};
window.onresize = function(){
    getRem(750,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

8.数组去重：

①.第一种方法

var arr=[1,2,3,4,5,6,7,6,5,4,3];
var newArr=[];
for(var i=0; i<arr.length; i++){
    if(arr.indexOf(arr[i])==i){
        newArr.push(arr[i])
    }
}
console.log(newArr);

②第二种方法

var arr=[1,2,3,4,5,6,7,6,5,4,3];
var newArr=[];
for(var i=0; i<arr.length; i++){
    if(newArr.indexOf(arr[i])==-1){
        newArr.push(arr[i])
    }
}
console.log(newArr);

③第三种方法

var arr=[1,2,3,4,5,6,7,6,5,4,3];
function quchong(arr){
    var res = [arr[0]]
    for(var i=1; i<arr.length; i++){
        var repeat = false;
        for(var j=0; j<res.length; j++){
            if(arr[i] == res[j]){
                repeat = true;
                break;
            }
        }
        if(!repeat){
            res.push(arr[i]);
        }
    }
    console.log(res);
}
quchong(arr)

9.驼峰命名法

var str='get-element-by-id';
function join(str){
    var arr=str.split('-');
    var newStr='';
    for(var i=0;i<arr.length;i++){
        if(i==0){
            newStr+=arr[i]
        }else{
            newStr+=arr[i].slice(0,1).toUpperCase()+arr[i].slice(1);
        }
    }
    console.log(newStr);
}
join(str);

10.垂直水平居中

①

#box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
.inner {
    background-color: #F00;
    display: inline-block;
    width: 100px;
    height: 100px;
}

②

#box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px,-50px);
}
.inner {
    background-color: #F00;
    display: inline-block;
    width: 100px;
    height: 100px;
}

③

#box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
            
    /*flex*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner {
    background-color: #F00;
    display: inline-block;
    width: 100px;
    height: 100px;
}

④

#box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    /*table-cell*/
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.inner {
    background-color: #F00;
    display: inline-block;
    width: 100px;
    height: 100px;
}