前端高薪面试题必看

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

sort() 方法用于对数组的元素进行排序。
语法：arrayObject.sort(sortby)；参数sortby可选。规定排序顺序。必须是函数。
注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
参考MDN上的详解

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

利用

posted @ 2017-09-11 17:44 funnycoderstar 阅读(268) 评论(0) 收藏举报

刷新页面返回顶部

funnycoderstar