前端面试总结

前端 / 面试
字数统计: 2k字   |   阅读时长≈ 10分钟

最近一直在面试，却很少总结，反思了一下，这是不应该的。所以打算认真写一下。

先说下笔试题

Q1:

关于基本类型和==typeof==, 问的还是挺偏的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// number
typeof NaN
// number
typeof 12
// string
typeof "12"
// object
typeof null
// undefined
typeof undefined
// object
typeof Date
// object
typeof {a:1}
// object
typeof [1]
// function
typeof function(){}
// true
null == undefined
// false
NaN == NaN

类型判断这块的东西，比较基础，却容易混乱，接下来让我们深层次了解下这个东西。

img

既然是数据类型判断，无可避免需要先说一下，==基本类型==有哪几种：

  • String
  • Number
  • null
  • undefined
  • Boolean
  • Symbol(Es6)

这六个属于基本数据类型，当然除此之外还有 ==Object== 这个属于引用类型。对象类型是有名字和键值的一个组合。

看到这里我们不禁会问，==arrays==、==functions==、==regular expressions==、==Date==、==Error==等等又算什么。它们只是特殊的Object.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
console.log(typeof ""); // "string"
console.log(typeof "hello"); // "string"
console.log(typeof String("hello")); // "string"
console.log(typeof new String("hello")); // "object"

console.log(typeof 0); // "number"
console.log(typeof -0); // "number"
console.log(typeof 0xff); // "number"
console.log(typeof -3.142); // "number"
console.log(typeof Infinity); // "number"
console.log(typeof -Infinity); // "number"
console.log(typeof NaN); // "number"
console.log(typeof Number(53)); // "number"
console.log(typeof new Number(53)); // "object"

console.log(typeof true); // "boolean"
console.log(typeof false); // "boolean"
console.log(typeof new Boolean(true)); // "object"

console.log(typeof undefined); // "undefined"

console.log(typeof null); // "object"

console.log(typeof Symbol()); // "symbol"

console.log(typeof []); // "object"
console.log(typeof Array(5)); // "object"

console.log(typeof function () {}); // "function"
console.log(typeof new Function); // "function"

console.log(typeof new Date); // "object"

console.log(typeof /^(.+)$/); // "object"
console.log(typeof new RegExp("^(.+)$")); // "object"

console.log(typeof {}); // "object"
console.log(typeof new Object); // "object"
value typeof
undefined "undefined"
null "object"
true or false "boolean"
all numbers or NaN "number"
all strings "string"
all symbols "symbol"
all functions "function"
all arrays "object"
native objects "object"
host objects dependent on implementation
other objects "object"

你或许经常碰到这句话；

1557903486895

这句话其实是在某些点上是错的。

很多人也许会问，那为什么有些不是对象但是我们依然可以如下调用对象的方法呢？

1
2
3
4
5
6
// getting length property of the string
(“Hello World!”).length
//   getting the character of the string at index 8
(“Another String”)[8]
//  calling Number.prototype.toFixed() method on the number
(53.12345).toFixed(2)

真实的原因是javascript引擎创造了一个wrapped object 和这个原始语句相对应。

1
2
3
4
5
6
7
8
// wrapper object: new String("Hello World!")
(new String("Hello World!")).toLowerCase();

// wrapper object: new String("Another String")
(new String("Another String"))[8];

// wrapper object: new Number(53.12345)
(new Number(53.12345)).toFixed(2);

再次说下类型比较，==null== 和 ==[]==通过==typeof== 判断都返回 ==object==， 此时我们怎么样才能进行深层次的区分呢？

比较精确的类型比较，大概要通过下面几种方法

  • instanceof operator

  • checking the constructor property of the object

  • 使用 toString() 方法检查类型.

Checking for null

1
2
3
4
5
6
function isNull(val){
	return val === null
}

console.log(undefined == null); // true
console.log(undefined === null); // false

Checking for NaN

NaN是一个计算导致的结果，一般没有实质意思。前面说过 typeof NaN = number 如果想进一步区分，可以通过 isNaN 或者 es6的 Number.isNaN()

1
2
3
4
5
6
7
8
9
10
11
typeof NaN //number

console.log(isNaN(NaN)); // true
console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true
console.log(isNaN(Infinity)); // false

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(null)); // false
console.log(Number.isNaN(undefined)); // false
console.log(Number.isNaN(Infinity)); // false

最终用法,兼容es6：

1
2
3
Number.isNaN = Number.isNaN || (function(value) {
  return value !== value;
})

Checking for arrays

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// METHOD 1: constructor property
// Not reliable
function isArray(value) {
  return typeof value == 'object' && value.constructor === Array;
}

// METHOD 2: instanceof
// Not reliable since an object's prototype can be changed
// Unexpected results within frames
function isArray(value) {
  return value instanceof Array;
}

// METHOD 3: Object.prototype.toString()
// Better option and very similar to ES6 Array.isArray()
function isArray(value) {
  return Object.prototype.toString.call(value) === '[object Array]';
}

// METHOD 4: ES6 Array.isArray()
function isArray(value) {
  return Array.isArray(value);
}

其实最常用的 Object.prototype.toString.call(data) 是很有用的（apply也可以）。不过我们可以封装一下：

1
2
3
4
5
function type(value){
	const regex = /^\[object (\S+?)\]$/;
	const matches = Object.prototype.toString.call(value).match(regex) || [];
	return (matches[1] || "undefined").toLowerCase();
}

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
console.log(type('')); // "string"
console.log(type('hello')); // "string"
console.log(type(String('hello'))); // "string"
console.log(type(new String('hello'))); // "string"

console.log(type(0)); // "number"
console.log(type(-0)); // "number"
console.log(type(0xff)); // "number"
console.log(type(-3.142)); // "number"
console.log(type(Infinity)); // "number"
console.log(type(-Infinity)); // "number"
console.log(type(NaN)); // "number"
console.log(type(Number(53))); // "number"
console.log(type(new Number(53))); // "number"

console.log(type(true)); // "boolean"
console.log(type(false)); // "boolean"
console.log(type(new Boolean(true))); // "boolean"

console.log(type(undefined)); // "undefined"

console.log(type(null)); // "null"

console.log(type(Symbol())); // "symbol"
console.log(type(Symbol.species)); // "symbol"

console.log(type([])); // "array"
console.log(type(Array(5))); // "array"

console.log((function() { return type(arguments) })()); // "arguments"

console.log(type(function() {})); // "function"
console.log(type(new Function)); // "function"

console.log(type(class {})); // "function"

console.log(type({})); // "object"
console.log(type(new Object)); // "object"

console.log(type(/^(.+)$/)); // "regexp"
console.log(type(new RegExp("^(.+)$"))); // "regexp"

console.log(type(new Date)); // "date"
console.log(type(new Set)); // "set"
console.log(type(new Map)); // "map"
console.log(type(new WeakSet)); // "weakset"
console.log(type(new WeakMap)); // "weakmap"

Q2:

考察变量作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var name = "Hello body";
var a = {
	name: "A",
	sayHi: function(){
		console.log(this.name)
	}
};
var b = {
	name: 'B'
};
var sayHi = a.sayHi;
name = "Hello C";

//依次写出返回值
console.log(name);//Hello C
// 此时 this 指向仍是 a
a.sayHi();// A
// 此时 this 指向是 window 也就是全局变量 name
sayHi(); // Hello C
// 改变 this 指向 b
a.sayHi.call(b);// 'B'

这应该是个大部分面试都会问的问题吧。

1557908240751

搞笑一下，言归正传，继续。

Q3:

考察 栈(Stack) && 堆(Heap)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let name = "a";
const a = {
  name: name,
  php: ['Hello']
}
const b = a;
name = "CC";
b.php = ['world'];

/**
* a = b = {name: 'a', php: [world]}
*/
console.log(a)
console.log(b)

Stack

存储有顺序的数据，所以存储 variables和指向堆内存中的该对象的指针

heap

无序存储数据，放置 objects

1557916548775

扩展知识：

javascript 是一种垃圾回收机制的语言。所谓垃圾回收，就是用完就会注销。

并且是一种==单线程并发==的语言。

Q4:

trim 去除前后空格，实现方法？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const str = " hello world ";
function trim(str){
  const regex = /^\s|\s+$/g;
  return str.replace(regex, '');
}
console.log(trim(str));// "hello world"

// trimLeft
String.prototype.trimLeft = function(){
	return this.replace(/^\s+/g, '');
}
// trimRight
String.prototype.trimRight = function(){
	return this.replace(/\s+$/g, '');
}

Q5:

请把“my-name-is-andy”变成驼峰格式？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const str = "my-name-is-andy";
// 正则
function formatString(str){
  if(!str) return '';
  return str.replace(/-(\w+)/g, function(...args){
			return args[1] ? args[1].replace(/^\w{1}/g, function($1){
        return $1.toUpperCase();
      }) : str
  })
}

// 第二种
function formatString(str){
  if(!str) return '';
  if(str.includes('-')){
    const arr = str.split('-');
    let reuslt = '';
    // forEach 循环  n 是不能被重新赋值，如果是object,array 则可以操作增加删除
    arr.forEach(function(n,i){
      if(i>0){
        result += n.substr(0, 1).toUpperCase() + n.substr(1);
      }else{
       	result = n;
      }
    })
    return result;
  }
}

扩展知识：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Array.forEach(function callback(currentValue[, index [, array]]){
  // your iterator
}[, thisArg])


Example:

//base useage
[1,2,3].forEach((n, i)=>{
  console.log(`a[${i}]=${n}`);
});
/*
a[0]=1
a[1]=2
a[2]=3
*/


// thisArg

const items = [1, 2, 3];
function Counter(){
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(arr){
  arr.forEach(function(n){
    this.sum += n;
    this.count++;
  }, this)
};
const obj = new Counter();
obj.add(items);
console.log(obj.sum);//6
console.log(obj.count);//3


// deep copy a object 深度复制
function copy(obj){
  const copy = Object.create(Object.getPrototypeOf(obj));
  const propNames = Object.getOwnPropertyNames(obj);

  propNames.forEach(function(name){
    const desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  })
  return copy;
}

const obj1 = {a: 1};// {a: 1}
const obj2 = copy(obj1);// {a: 1}
obj1.a = 2;
console.log(obj1);// {a: 2}
console.log(obj2);// {a: 1}

Q6:

执行以下代码，会发送什么，又如何改进？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const spans = document.getElementsByTagName('span');// 5个
for(var i=0; i< spans.length; i++){
	spans[i].onclick = function(){
		alert(i)
	}
}
console.log(i)//5
/**
结果是 点击任何一个span 都是 alert(5)
var i = 0 其实是一个全局变量，整个循环结束后 i == spans.length 依然存在
*/

// 改进1 var 更改为 let，这样 i 就是一个当前代码块里的一个局部变量
for(let i=0; i< spans.length; i++){
	spans[i].onclick = function(){
		alert(i)
	}
}
console.log(i)// Uncaught ReferenceError: i is not defined


// 使用闭包  closure functon 这样就避免了最后只读 i
for(let i=0; i<spans.length;i++){
  spans[i].onclick = (function(n){
    return function(){
      alert(n)
    }
  })(i)
}

Q7:

写出Es6的几种用法

1
2


下是面谈的问题

Q8:

Vue 生命周期实现过程？

1
2


Q9:

vuex中 mumation 和 action 有什么不同？ 实现原理是什么？

1
2


Q10：

vue v-if 和 v-show 的区别？ Key的作用？

1
2


Q11:

vue keep-alive 用法？

Q12:

vue router 如何返回和刷新？

Q13：

Vue 框架特点

Q14

es6 箭头函数

Q15:

bind 和 call apply 区别

Q16:

Promise 和 async await 区别？

Q17:

移动端适配

1
2


打赏
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2014-2020 Alex Wong
  • Powered by Hexo Theme Ayer
  • PV: UV:

请我喝杯咖啡吧～～～

支付宝
微信