HTML5h5JAVASCRIPT

前端拿高薪面试题必看

2017-08-14  本文已影响454人  IOneStar

面试之前都会从网上找很多面试题来看,尤其是看到经典面试题,及必会的面试题,都是好好的看上几遍(其实更多的时候都是在背),可是总感觉面试之前看题作用并不大,因为你不理解的问题,还是会不理解,面试管随便一问,就不行了.其实面试几次后就会发现,经常问的问题也就那几个,比如,闭包,原型链,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);


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);

2,var和函数的提前声明

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

fn(1);

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);

4，变量隐式声明

if( 'a' in window) {
    var a = 10;
}
console.log(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);

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

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

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);
    };
}


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，数组方法

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原理及过程

14, link和@import区别

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

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

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

三次握手 SYN和ACK

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

四次挥手

17, 常见web安全问题及防御

sql注入原理及防范

就是通过把SQL命令插入web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令

XSS,跨站脚本攻击, 允许恶意web用户将代码植入到提供给其他用户使用的页面中,比如这些代码包括HTML代码和客户端脚本
比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

title

CSRF （Cross-site request forgery）即跨站伪造请求;
要完成一次CSRF攻击,受害者依次完成两个步骤:


title

防御:
从客户端和服务端两方面着手,一般在服务端着手效果比较好,现在一CSRF也在服务端;服务端的CSRF方式很多,但是总体思想就是在客户端页面增加随机数;

XSS和CSRF的区别

XSS是获取信息,不需要提前知道其他用户页面的代码和数据包;CSRF是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包
要完成一次CSRF攻击,受害者依次完成两个步骤:

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

19, null和undefined的区别?

undefined

null

20, js的基本数据类型

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

21,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
持续更新中......
希望大家多多来交流javasript学习过程中遇到的问题及难点,共同学习进步

上一篇 下一篇

猜你喜欢

热点阅读