前端拿高薪必看面试题

面试之前都会从网上找很多面试题来看,尤其是看到经典面试题,及必会的面试题,都是好好的看上几遍(其实更多的时候都是在背),可是总感觉面试之前看题作用并不大,因为你不理解的问题,还是会不理解,面试管随便一问,就不行了.其实面试几次后就会发现,经常问的问题也就那几个,比如,闭包,原型链,this,等.刚开始的时候真的是理解不了,然后就看书,强烈推荐《javascript高级程序设计(第三版)》以及《你不知道的javascript系列》,在实际项目中遇到坑的时候,就反复看,看的时候很难受,但是当真正理解了之后,就会恍然大悟,所以功夫还是下在平时,临时抱佛脚真的没啥用~

以下是我总结的面试题中常问到的,很多都是我亲身经历的面试中遇到的一些问题,刚开始遇到的时候也不是太清楚,面试完之后就深入的学习了一下相关的知识😜

1,考察this

var length = 10;
function fn() {
  console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);

• 10 ，2
• 第一次输出10应该没有问题。我们知道取对象属于除了点操作符还可以用中括号，所以第二次执行时相当于arguments调用方法，this指向arguments，而这里传了两个参数，故输出arguments长度为2。

var length = 10;
function fn() {
  console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    const fun = arguments[0];
    fun()；
  }
};

obj.method(fn, 1);

• 10 10

  2,var和函数的提前声明

function fn(a) {
  console.log(a); 
  var a = 2;
  function a() {}
  console.log(a); 
}

fn(1);

• function a() {}
• 2
• var和function是会提前声明的.而且function是优先于var声明的(如果同时存在的话),所以刚开始输出的就是一个funciton,接着往下执行a进行重新赋值了,故第二次输出的是2；

3，局部变量和全局变量

var f = true;
if (f === true) {
  var a = 10;
}

function fn() {
  var b = 20;
  c = 30;
}

fn();
console.log(a);
console.log(b);
console.log(c);

• 输出 10 报错 30
• 这是个我犯了很久的错误，很长一段时间我都以为{…}内的新声明的变量是局部变量，后来我才发现function内的新声明的变量才是局部变量，而没有用var声明的变量在哪里都是全局变量。再次提醒切记只有function(){}内新声明的才能是局部变量，while{…}、if{…}、for(..) 之内的都是全局变量（除非本身包含在function内）。

4，变量隐式声明

if( 'a' in window) {
    var a = 10;
}
console.log(a);

• 10
• funciton和var会提前声明,而其实{…}内的变量也会提前声明，于是代码还没执行前a已经被声明了。所以 ‘a’ in window会返回true,a被赋值

5，给基本类型数据添加属性，不报错，但取值时是undefined

var a = 10;
a.pro = 10;
console.log(a.pro + a);

var s = 'hello';
s.pro = 'world';
console.log(s.pro + s);

• NaN undefinedhello
• 给基本类型数据加属性不报错，但是引用的话返回undefined,10+undefined返回NaN,而undefined和string相加时转变成了字符串

6，函数声明优先于变量声明

console.log(typeof fn);
function fn() {};
var fn;

• function
• 因为函数声明优于变量声明。我们知道在代码逐行执行前，函数声明和变量声明会提前进行，而函数声明又会优于变量声明，这里的优于可以理解为晚于变量声明后，如果函数名和变量名相同，函数声明就能覆盖变量声明。所以以上代码将函数声明和变量声明调换顺序还是一样结果。

7,判断一个字符串中出现次数最多的字符，并统计次数

var s = 'aaabbbcccaaabbbaaa';
var obj = {};
var letter;
var maxn = -1;
for (let i = 0; i< s.length; i++) {
        if(obj[s[i]]) {
            obj[s[i]] ++;
            if(obj[s[i]] > maxn) {
                maxn = obj[s[i]];
                letter = s[i];
            }
        } else {
            obj[s[i]] = 1;
            if(obj[s[i]] > maxn) {
                maxn = obj[s[i]];
                letter = s[i];
            }
        }
    }
console.log(`${letter}:${maxn}`);

• 正则

  var s = 'aaabbbcccaaabbbaaa';
  var a = s.split('');
  a.sort();
  s = a.join('');
  var pattern = /(\w)\1*/g;
  var ans = s.match(pattern);
  ans.sort(function(a, b) {
      return a.length < b.length;
  })
  console.log(ans[0][0] + ':' + ans[0].length);

8， 经典闭包

<!--html-->
<ul>
    <li>这是第1个</li>
    <li>这是第2个</li>
    <li>这是第3个</li>
    <li>这是第4个</li>
</ul>

<!--js-->
一：
for(var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = function() {
      alert(this.index);
    };
}
二:
for(var i = 0; i < lis.length; i++) {
    (function(i) {
      lis[i].onclick = function() {
        alert(i);
      };
    })(i); 
}
三：
for(let i = 0; i < lis.length; i++) {
    lis[i].onclick = function() {
    alert(i);
    };
}

• 从0开始隔10s按顺序出现’第一次出现’,’第二次出现’,’第三次出现‘

  const datas = ['1', '2', '3'];
  let timer = null;
  for (let i = 0; i < datas.length; i++) {
      //    const index = i;
      if (timer) {
          clearTimeout(timer);
          let timer = setTimeout(function () {
              console.log(datas[i]);
          }, 10000 * i)
      } else {
          let timer = setTimeout(function () {
              console.log(datas[i]);
          }, 10000 * i)
      }
  };

9，请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如： var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″

function parseQueryString(url) {
  var obj = {};
  var a = url.split('?');
  if(a.length === 1) return obj;
  var b = a[1].split('&');
  for(var i = 0, length = b.length; i < length; i++) {
    var c = b[i].split('=');
    obj[c[0]] = c[1];
  }
  return obj;
}
var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2';
var obj = parseQueryString(url);
console.log(obj.key0, obj.key1, obj.key2);  // 0 1 2

10,this

var baz=3;
var bazz={
   baz: 2,
   getbaz: function() {
         return this.baz
  }
}
console.log(bazz.getbaz())
var g=bazz.getbaz;
console.log(g());
第一个输出2，第二个输出3,函数作为对象本身属性调用的时候this指向对象，作为普通函数调用的时候就指向全局了

11，数组方法

• 数组排序:写一个js函数,将数组对象按照一定的顺序进行排序，且可通过参数决定升降序

const list = [
    {
        "name": "first",
        "index": 1,
    },
    {
        "name": "second",
        "index": 2,
    },
    {
        "name": "third",
        "index": 3,
    },
    {
        "name": "fourth",
        "index": 4,
    },
]
function compare(property){
    return function(a,b){
        return a[property] - a[property];
    }
}
console.log(list.sort(compare('index')))

12,求一个字符串的字节长度

function GetBytes(str){
        var len = str.length;
        var bytes = len;
        for(var i=0; i<len; i++){
            if (str.charCodeAt(i) > 255) bytes++;
        }
        return bytes;
    }

alert(GetBytes("你好,as"));
str = 'hello world';
console.log(str.charCodeAt(0)); // 104, 返回指定索引处字符的 Unicode 数值,大于255为中文
console.log(str.charAt(0)); // h, 返回指定位置的字符,

13 jsonp原理及过程

• 利用
• 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
• 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：callback({“name”:”hax”,”gender”:”Male”})这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

14, link和@import区别

• link属于html标签，而@import是css提供的。
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重高于@import的

15,一个页面从输入url到页面加载显示完成,这个过程都发生了什么?

• 1,浏览器开启一个线程来处理这个请求
• 2,查找浏览器缓存(浏览器缓存-系统缓存-路由器缓存)
• 3,DNS解析,查找该域名对应的IP地址,重定向(301),
• 4,向真实IP地址服务器发出tcp连接,tcp三次握手
• 5,握手成功后,进行http协议会话,浏览器发送报头
• 6,进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
• 7,进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
• 8,处理结束回馈报头，将数据返回至浏览器;
• 9,浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存;
• 10,之后浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM）。
• 11,得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout

浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

16,TCP传输的三次握手四次挥手策略

三次握手 SYN和ACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

四次挥手

• 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
• 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
• 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
• 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

17, new操作符到底干了什么?深入了解

• 1,创建一个空对象,而且this变量引用该对象,同时还继承了该函数的原型.
• 2,属性和方法被加入到this引用的对象中,
• 3,新创建的对象由this所引用,而且最后隐式的返回this

  18, null和undefined的区别?

undefined

• (1)变量被声明了,但是没有赋值,就等于undefined
• (2)调用函数时,应该提供的参数没有提供,该参数等于undefined
• (3)对象没有赋值的属性,该属性的值为undefined
• (4)函数没有返回值时,默认返回undefined
  null
• (1)作为函数的参数,表示该函数的参数不是对象
• (2)作为对象原型链的终点

19, js的基本数据类型

Number,String,Boolean,Null, Undefined,Object,Symbol

20,DOM怎样添加,移除,复制,和创建节点

// 创建新节点
createDocumentFragment(); // 创建一个DOM片段
createElement(); // 创建一个具体的元素
createTextNode(); // 创建一个文本节点
//添加,移除,替换
appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点
// 查找
getElementByTagName() // 通过标签名称
getElementByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() // 通过元素ID,唯一性

参考总结

这10道javaScript笔试题你都会么
正则
2016年十家公司面试小记
浅谈javascript的函数节流
面试题1
面试题2
面试题3
html与css
道阻且长啊TAT(前端面试总结),17年春招面试总结

About

aboutme
github
blog