面试总结

1.undefined和null的区别

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

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

2.js基本的数据类型

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

而 typeof 的返回类型包含：undefined、boolean、string、number、object 和 function。

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='']

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；（eg: cat__proto __ == Animal.prototype）
4.原型上绑定的属性或方法，只能在new 出的实例上使用。（eg: Animal.prototype.say 的say方法，只能在cat实例上使用。）

所以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;//垂直居中
}
.inner {
    background-color: #F00;
    display: inline-block;
    margin: auto;//水平居中
    width: 100px;
    height: 100px;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,542评论 6赞 504
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,822评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,912评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,449评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,500评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,370评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,193评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,074评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,505评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,569评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,168评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2赞 354

推荐阅读更多精彩内容

  • 面试总结
    $HTML， HTTP，web综合问题 1、前端需要注意哪些SEO 3、HTTP的几种请求方法用途 4、从浏览器地...
    peng凯阅读 772评论 0赞 1
  • JS原型与继承
    前言 如果你觉得JS的继承写起来特别费劲，特别艰涩，特别不伦不类，我想说，我也有同感。尤其是作为一个学过Java的...
    光头韩阅读 459评论 0赞 2
  • 自我推崇
    各位爱美的女士和爱看美女的男士，大家现在好！ 我叫赵连竹，我的名字由来是这样的，我外公呢一直以来都是重男轻女的思想...
    赵连竹阅读 387评论 0赞 0
  • 【原创育儿故事大赛】面具国
    文／大轮子 面具国的人都喜欢戴面具，但是全国只生产两种面具，一种是笑脸，一种是哭脸。人们都喜欢戴笑脸，没有人愿意戴...
    大轮子阅读 1,586评论 18赞 17
  • 人生过场
    他们说，该嫁了 同龄嫁了，小几岁的也嫁了 你该像颗种子一样 找片沃土落下 你站在过去和将来之间 为有悔的青春痛哭 ...
    小灰兔讲故事阅读 350评论 1赞 2