我爱编程

面试题总结liebao

2018-05-28  本文已影响0人  胖太_91bf

1. 跨域问题

2. 闭包

3. css3动画

4. 页面性能问题解决和分析

5. 用户交互设计理论

6. js事件绑定

7. 遇到比较难的问题, 怎么解决的

8. 移动端开发经验

9. canvas

10. js作用域 - 函数作用域链

11.原型继承:

// Student的构造函数
function Student(props) {
  this.name = props.name || 'nonamed'
}
Student.prototype.sayHello = function() {
  alert('Hello ' + this.name)
}
// 通过Student扩展出PrimaryStudent
function PrimaryStudent() {
  Student.call(this, props)
  this.grade = props.grade || 1
}
// 声明空对象
function F() {}
// 把空对象原型指向Student
F.prototype = Student.prototype
// 把PrimaryStudent的prototype指向F的实例化对象
PrimaryStudent.prototype = new F()
// 修复PrimaryStudent上的构造函数(constructor)
PrimaryStudent.prototype.constructor = PrimaryStudent
// 验证
var xiaoming = new PrimaryStudent({name: 'zxk', grade: 10})
xiaoming.name // 'zxk'
xiaoming.grade // 10
// 验证原型:
xiaoming.__proto__=== PrimaryStudent.prototype // true
xiaoming.__proto__ .__proto__=== Student.prototype // true
// 验证继承:
xiaoming instanceof PrimaryStudent // true
xiaoming instanceof Student // true

12 排序算法

// 冒泡排序
function sort(arr) {
        for(var i = 0; i < arr.length; i ++) {
            for(var j = 0; j < arr.length; j ++) {
                if (arr[j] > arr[j + 1]) {
                    var oldJ = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = oldJ
                }
            }
        }
    }
//

13 将[1, 2, [3, [4, 5, [6]]]] => [1, 2, 3, 4, 5, 6]

function transArr(arr, res) {
  var res = res || []
  for(var i = 0; i < arr.length; i ++) {
    if(arr[i] instanceof Array) {
      transArr(arr[i], res)
    } else {
      res.push(arr[i])
    }
  }
  return res
}

14 事件委托

15 flex的兼容

.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
 }
.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

16 模块化requirejs

require.config({
  baseUrl: 'js',
  paths: {
    app: 'app' // 如果是目录的话, 这里的名字要和目录一模一样, 如果是文件可以不同
  }
})

//index.html
<script src="js/requirejs" data-main="main"></script>

// a.js
define(function(){
  return {
    name: 'a'
  }
})
// b.js
define(function(){
  return {
    name: 'b'
  }
})

// index.html
<script>
    require(['app/a'], function(a) {
        console.log(a)
    })
    setTimeout(function() {
        require(['app/b'], function(b) {
            console.log(b)
        })
    }, 3000)
</script>

17 css布局

18 for循环和定时器 与 闭包

//瞬间打出0 - 4
    for(var i = 0; i < 5; i++) {
        console.log(i)
    }
    for(var i = 0; i < 5; i++) {
        setTimeout((function(){ // 自调用函数, 立即执行
            console.log(i)
        })(), i * 1000)
    }
    // 顺间打出0, 然后每隔一秒打出1-4
    for(var i = 0; i < 5; i++) {
        (function(i){
            setTimeout(function() {
                console.log(i)
            }, i*1000)
        })(i)
    }
    // 顺间打出5, 每隔1秒打出一个5, 共4个
    for(var i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i)
        }, i*1000)
    }
    for(var i = 0; i < 5; i++) {
        (function(){
            setTimeout(function() {
                console.log(i)
            }, i * 1000)
        })(i)
    }
// promise相关
    setTimeout(function() {
        console.log(1)
    }, 0)
    new Promise(function executor(resolve){
        console.log(2)
        for(var i = 0; i < 1000; i++) {
            i == 999 && resolve(); 
        }
        console.log(3)
    }).then(function() {
        console.log(4)
    })
    console.log(5)
    // logs 2 > 3 > 5 > 4 > 1, promise的then()会放在当前tick的最末尾, 但是setTimeout会把函数踢到下一轮tick中

18 js高阶面试

19 js中的this指向(非严格模式下)

函数中的this在函数被定义的时候并没有确定下来, 只有函数被调用的时候,才知道它到底指向谁

20 js经典面试题

// code 1
var length = 10;
function fn() {
  alert(this.length);
}
var obj = {
  length: 5,
  method: function() {
    fn();
  }
};
obj.method(); // 最后相当于fn(), 函数没有被任何上级调用, this指向window
// code 2
var num = 100;
var obj = {
  num: 200,
  inner: {
    num: 300,
    print: function() {
      console.log(this.num);
    }
  }
};

obj.inner.print(); //300, this指向inner

var func = obj.inner.print;
func(); //100 默认绑定，this指向window

obj.inner.print(); //300 thi指向inner

(obj.inner.print = obj.inner.print)(); //100 this指向window
// code 3
function foo() {
  console.log(this.a);
}
var obj2 = { a: 42, foo: foo };
var obj1 = { a: 2, obj2: obj2 };
obj1.obj2.foo(); // 42 this指向他的直接上级obj2

var obj3 = { a: 2 };
foo.call(obj3); // 2, this指向call的参数obj3

var bar = function() {
  foo.call(obj3);
};
bar(); // 2, 就相当于foo.call(obj3)
setTimeout(bar, 100); // 2, bar的this指向window, 但是执行bar的时候, 其实执行的是foo.cal(obj3), 
bar.call(window); // 2, 同上

var obj4 = { a: 3, foo: foo };
obj2.foo(); // 42, this指向obj2
obj4.foo(); // 3, this指向obj4
obj2.foo.call(obj4); // 3 this指向call的参数obj4
obj4.foo.call(obj2); // 42 this指向call参数obj2
// code 4
function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
};
var a = "oops, global"; // a是全局对象的属性
setTimeout(obj.foo, 100); // "oops, global", setTimeout里的this都会指向window, 相当于var fun = obj.foo, fun()
obj.foo(); // 2, this指向obj

// code 5 (new绑定)
function foo(a) {
  this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2 new可以改变this, 让bar的this指向foo

var obj1 = { foo: foo };
var obj2 = {};

obj1.foo(2); 
console.log(obj1.a); // 2, foo(2)的this指向obj1, this.a相当于给obj1添加a属性

obj1.foo.call(obj2, 3);
console.log(obj2.a); // 3,  obj1的this指向obj2并传参数, 相当于给obj2, 添加a属性

var bar = new obj1.foo(4);
console.log(obj1.a); // 2
console.log(bar.a); // 4 

// code 6

function foo() {
  console.log(this.a);
}

var a = 2;

// 如果你把null或者undefined作为this的绑定对象传入call\apply\bind，这些值在调用的时候会被忽略，实际应用的是默认绑定规则。
foo.call(null); // 2
var bar = foo.bind(null);
bar(); // 2
foo.apply(undefined); // 2

// code 7 箭头函数

function foo() {
  return a => console.log(this.a);
}

var obj1 = { a: 2 };
var obj2 = { a: 3 };
var bar = foo.call(obj1);
bar.call(obj2); // 2 箭头函数是根据外层（函数或者全局）作用域来决定this。并且绑定后无法修改。

 var foo = 1,
 bar = 2,
 j,
 test;
test = function(j) {
 j = 5;
 var bar = 5;
 console.log(bar); // 5
 foo = 5;
};
test(10);
console.log(foo); // 5 改变的全局变量
console.log(bar); // 2 由于函数作用域对全局作用域的隐藏，所以只有在test函数内部，bar=5,并不能影响到全局中的bar
console.log(j); // undefined  test(10)函数调用的时候，是函数内部的参数j接收到了10，但是它也是函数作用域内的变量，并不会改变全局作用域中的j。

if (!("sina" in window)) {
  var sina = 1;
}
console.log("sina:", sina); // undefined
// 变量提升: js会把所有的通过var声明的全局变量, 提升到最顶层,  所有sina液在if之前就存在了, 也不会走if()分支
// 相当于
var sina
f (!("sina" in window)) {
   sina = 1;
}
console.log("sina:", sina); // undefined

function SINA() {
  return 1;
}
var SINA;
console.log(typeof SINA); // function
// 重复声明被忽略了, 所以var没有生效

var arr = [2, [1,2], 3, "2", "a", "b", "a", [1, 2]]
  function quchong(arr) {
      var map = {}
      var res = []
      arr.forEach(item => {
          if(!map[JSON.stringify(item)]) {
              res.push(item)
              map[JSON.stringify(item)] = 1
          }
      })
      return res
  }
  console.log(quchong(arr))

function foo() {
  "use strict";
  console.log(this.a);
}

function bar() {
  console.log(this.a);
}

var a = "this is a 'a'";

bar(); // "this is a 'a'"
foo(); // "TypeError: Cannot read property 'a' of undefined

alert(a); // 输出函数体
a(); // 10
var a = 3;
function a() {
  alert(10);
}
alert(a); // 3
a = 6;
a(); // 报错a不是一个function

alert(a); // undefined
a(); // a is not a function
var a = 3;
var a = function() {
  // 函数表达式
  alert(10);
};
alert(a); // 输出函数体
a = 6;
a(); // a is not a function 因为a已经赋值成6了

function findMax(str) {
      var map = {} // 存储str每个元素和对应数量的对象
      var max = {num: 0} // 存储最大值的对象
      for(var i in str) {
          if(map[str[i]]) {
              map[str[i]] ++
          } else {
              map[str[i]] = 1
          }
          if(map[str[i]] > max.num) {
              max.num = map[str[i]]
              max.key = str[i]
          }
      }
      return max
  }
  var max = findMax(_str)
  console.log(max)

21 数组方法和字符串方法

上一篇 下一篇

猜你喜欢

热点阅读