前端面试汇总

一、JavaScript

1. 对象深拷贝

var symbol = Symbol(1);
var symbol2 = Symbol(1);
var o1 = { p1: "p1", [symbol]: "symbol1", [symbol2]: "symbol2" };
var o2 = { o1, a1: [o1, null] };
console.log(o1);
console.log(Object.keys(o1));
console.log(Object.getOwnPropertySymbols(o1));
console.log(Reflect.ownKeys(o1));

var deepCopy1 = function (obj) {
  if (typeof obj !== "object") return;
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] =
        typeof obj[key] === "object" ? deepCopy1(obj[key]) : obj[key];
    }
  }
  return newObj;
};

console.log("deepCopy1 start");
console.log(deepCopy1(o1));
console.log(deepCopy1(o2));
console.log("deepCopy1 end");

var deepCopy2 = function (obj, uniqueList) {
  if (typeof obj !== "object" || obj === null) return obj;
  uniqueList = uniqueList || []; //   初始化数据
  var newObj = obj instanceof Array ? [] : {};
  var uniqueData = uniqueList.find((item) => item.source === obj);
  if (uniqueData) return uniqueData.target;
  uniqueList.push({
    source: obj,
    target: newObj,
  });
  for (var key of Reflect.ownKeys(obj)) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] =
        typeof obj[key] === "object"
          ? deepCopy2(obj[key], uniqueList)
          : obj[key];
    }
  }
  return newObj;
};

console.log("deepCopy2 start");
o1[symbol] = o2;
console.log(deepCopy2(o1));
console.log(deepCopy2(o2));
console.log("deepCopy2 end");

{ p1: 'p1', [Symbol(1)]: 'symbol1', [Symbol(1)]: 'symbol2' }
[ 'p1' ]
[ Symbol(1), Symbol(1) ]
[ 'p1', Symbol(1), Symbol(1) ]
deepCopy1 start
{ p1: 'p1' }
{ o1: { p1: 'p1' }, a1: [ { p1: 'p1' }, {} ] }
deepCopy1 end
deepCopy2 start
<ref *1> {
  p1: 'p1',
  [Symbol(1)]: { o1: [Circular *1], a1: [ [Circular *1], null ] },
  [Symbol(1)]: 'symbol2'
}
<ref *1> {
  o1: { p1: 'p1', [Symbol(1)]: [Circular *1], [Symbol(1)]: 'symbol2' },
  a1: [
    { p1: 'p1', [Symbol(1)]: [Circular *1], [Symbol(1)]: 'symbol2' },
    null
  ]
}
deepCopy2 end

2.继承 - 搞懂寄生组合式就够了

function Animal(type) {
  this.type = type;
}
Animal.prototype.run = function run() {
  console.log(this.type, "run");
};

function Cat(name) {
  Animal.call(this, "Cat");
  this.name = name;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
console.log(Cat.prototype.__proto__===Animal.prototype) //true


function Dog(name) {
  Animal.call(this, "Dog");
  this.name = name;
}
function F(){} 
F.prototype=Animal.prototype
Dog.prototype = new F();
Dog.prototype.constructor = Dog;

console.log(Dog.prototype.__proto__===Animal.prototype) //true

3. 闭包就是能够读取其他函数内部变量的函数

function Counter(start) {
  var count = start;
  return {
    increment: function () {
      count++;
    },
    get: function () {
      return count;
    },
  };
}
var foo = Counter(4);
foo.increment();
var num = foo.get(); // 5
console.log(num);



var test_obj = {
  closure_fn: function () {
    console.log("closure_fn", this);
    console.log(process.memoryUsage());
    var that = this;
    var val = setTimeout(function () {
      console.log("setTimeout!", that);
      that.closure_fn();
    }, 1000);
  },
};
test_obj.closure_fn();
test_obj = null;



var test_obj_2 = {
  closure_fn: function () {
    var that = test_obj_2;
    var val = setTimeout(function () {
      console.log("setTimeout!");
      that ? that.closure_fn() : clearTimeout(val);
    }, 1000);
  },
};
test_obj_2.closure_fn();
test_obj_2 = null;




function func() {
  var newElem;

  function outer() {
    var someText = new Array(1000000);
    var elem = newElem;

    function inner() {
      if (elem) return someText;
    }

    return function () {};
  }

  var start = new Date();
  var interval = setInterval(function () {
    newElem = outer();
    if (new Date() - start > 10000) clearInterval(interval);
  }, 500);
}
func();

4.作用域

var scope="global";
function t(){
    console.log(scope);//undefinde
    var scope="local"
    console.log(scope);
}
t();

var scope="global";
function t(){
    var scope;
    console.log(scope);//undefinde
    scope="local"
    console.log(scope);
}
t();

var name = "global";
if (true) {
  console.log(name);
  var name = "local";
  console.log(name);
}
console.log(name);


name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();
// ss()->t()->window,所以name是”tlwy"


person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}

5.this

console.log(this); // this === window
var that = this;
var o1 = {
  name: "o1",
  af: () => {
    console.log(this === that); //true
  },
  f() {
    console.log(this === o1); //true
  },
};
o1.af();
o1.f();

function F1(name) {
  this.name = name;
  this.af = () => {
    console.log(this === that); //false
  };
  console.log(this)
}
F1.f1 = () => {
  console.log(this === that); //true
};
F1.prototype.f1 = () => {
  console.log(this === that); //true
};
var f1 = new F1("F1");
f1.af();
f1.f1();
F1.f1();
F1()

6. 原型链

CSDN

7. Promise

8. Observer

function Observer(){
    this.observers=new Set()
}
Observer.prototype.subscribe=function(fn){
    this.observers.add(fn)
    let self = this
    return function unsubscribe(){
        self.observers.delete(fn)
    }
}
Observer.prototype.dispatch=function(){
    this.observers.forEach(ob=>ob())
}

const ob=new Observer()

const sb1=ob.subscribe(function(){alert(1)})
const sb2=ob.subscribe(function(){alert(2)})
ob.dispatch()
sb2()
ob.dispatch()

9. 柯里化

Introduction · 函数式编程指北

函数式编程入门教程 - 阮一峰的网络日志

// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9

10.箭头函数

（a,b）=>a+b;没有原型对象,没有arguments,(...args)=>{}

11.垃圾回收

12.H5离线存储

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

二、HTML

• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

---

Fidelity（大连）职位内推，长期有效，请发私信