上海公司面试题

Posted on Edited on

title: 上海公司面试题 date: 2019-11-16 16:28:19

tags: 面试题

云印(以 vue 为主)

1.页面初始化一般放在哪个生命周期里,为什么?

2.vue 组件之间如何传递参数

3.同步组件和异步组件之间的区别,优缺点

4.vue-router 实现原理

5.微信小程序的跳转方式有哪几种

  1. ajax 的同步和异步有什么区别

7.css 那些属性是默认继承的?

  1. canvas 和 style 怎么进行绑定?

  2. v-for 中 in 和 of 的区别

  3. watch 如何使用

  4. 如何存储 localstorage

  5. router 如何传值,如何取值

  6. vuex 如何存储值

  7. 分页组件的实现

  8. 如何监听物理返回键

报关(以 http 为主)

  1. http 请求原理
  2. http 请求的几种方式,有什么区别
  3. 如何进行登录验证,token 失效如何处理
  4. 如何调换数组中两个元素的位置.例如:[1,2,3,4,5]中调换 3 和 4 的位置,变成[1,2,4,3,5].
  5. 向后端发送文件的格式?

外包公司 1

  1. js 中如何检测一个变量是 String 类型.请写出函数具体实现
  2. 写出下面函数输出什么(tips:闭包)
1
2
3
4
5
6
7
8
9
10
11
var count = 10;
function add() {
  var count = 0;
  return function () {
    count += 1;
    console.log(count);
  };
}
var s = add();
s();
s();

输出

1
2
3
//考察闭包
1;
2;
  1. 如何阻止事件冒泡和默认事件
  2. 下面的问题打印什么
1
2
3
4
5
6
7
8
var str = "我是MT";
test();
function test() {
  console.log(str);
  var str = "哈哈哈";
  console.log(str);
}
console.log(str);

输出

1
2
3
4
5
//考察变量声明和作用域
undefined; //因为打印str时,首先从str所在的作用域找变量str,
//因为有声明前置,var str,但是未赋值,是undefined.所以不再从外部找str
哈哈哈;
我是MT;
  1. 什么是盒子模型
  2. sessionStorage,localStorage 和 cookie 的区别
  3. px 和 em 的区别
  4. 列举不同的清除浮动的技巧
  5. display: none和visibility: hidden的区别
  6. 组件中<style scoped>的scoped的作用.
  7. v-show 和 v-if 的共同点和区别
  8. vue 注册组件使用什么关键字
  9. vue 如何实现父子组件通信
  10. vue 的双向数据绑定原理是什么?

外包公司 2

  1. 使用 js 将数组: [{ name: "king", age: 18}, {name: "bob", age: 22}]变成[18,22],并且筛选出大于 20 的值.
  2. 使用 js 获取页面一个 id 为 myP 的<p>标签,并为其增加点击事件,并说明一下 addEventLister 方法的第三个可选参数的冒泡和捕获.
  3. 控制台运行一下代码:
1
2
3
4
5
6
for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0);
}
console.log(i);

输出什么

1
2
3
4
5
6
3 //先执行for循环,i=1,有异步代码,封存数据,console.log(i).
//i=2,console.log(i)
//i=3,console.log(i)
//此时i的最终形态是3,执行最后一行的console.log(i),是3

3个3 //同步代码执行完,看任务队列中排着3个console.log(i),i=3,连续输出3个3

大钱

  1. 写一个原生 ajax 请求
  2. 写几个常用的数组,字符串,对象的方法
  3. npm install --save和npm install --save --dev的区别
  4. IE 与火狐的事件机制有什么区别?如何阻止冒泡?
  5. 什么是闭包? 闭包的用途
  6. css3 动画最后一帧如何恢复到原样?
  7. sessionStorage,localStorage 和 cookie 的区别?分别在什么时候用?
  8. HTML5 新特性?移除那些?如何处理 HTML5 新标签的浏览器兼容问题?做过的项目中,那些 CSS 样式需要单独写兼容样式?
  9. ES6 运算符…是用来做什么的?用 ES6 语法遍历一个数组.
  10. px,em,rem 的区别
  11. prototype 是什么?什么时候用
  12. js 添加,移除,替换,删除,创建,查找节点的方法是什么
  13. 如何优化网站性能(js)
  14. 编写一个方法,去掉以下数组的重复元素
  15. vue 如何监听一个对象的变化,写个例子
  16. setTimeout,promise,async/await 的区别
  17. intercepter 用在什么地方
  18. 路由拦截在什么地方
  19. 切换用户如何处理
  20. 用户不是提交验证进来而是输入 url 进来如何处理
  21. 组件里 name 的作用

外包公司 3

  1. js 有哪些基本数据类型
  2. var let const 的区别
  3. 数字计算: 在 js 中,0.1+0.2 的结果是?
  4. 下面代码有什么问题?(tips:闭包)
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>
<script>
 var lis = document.querySelectorAll('ul li');
 for(var i = 0; i <lis.length; i++){
     lis[i].addEventListener('click', function(){
         console.log(i)
     },false)
 }
</script>

无论点击哪个都会输出 3

解决方法:

1.将 var 换成 let

  1. for 循环改造
1
2
3
4
5
6
7
8
9
10
11
for (var i = 0; i < lis.length; i++) {
  (function (i) {
    lis[i].addEventListener(
      "click",
      function () {
        console.log(i);
      },
      false
    );
  })(i);
}
  1. 请写出下面输出结果,
1
2
3
let obj = {},arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }));
console.log(obj, arr);

输出

1
2
3
4
{
  prop: 123;
}
[true];
  1. promise 有几种状态,什么时候会进入 catch?
  2. 在 8*8 的国际象棋摆放八个皇后,使其不同相互攻击,即任意两个皇后不能处在同一行,同一列,同一对角线.总共有多少种摆法.
  3. git 命令有哪些?

外包公司 4 才匠

  1. 下面代码的输出是什么?
1
2
3
4
5
6
7
8
9
const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius,
};
shape.diameter();
shape.perimeter();

输出

1
2
20;
NaN; //考察箭头函数的this
1
2
3
4
5
let c = { greeting: "hey" };
let d;
d = c;
c.greeting = "hello";
console.log(d.greeting);

输出

1
hello; //考察引用类型的指针,或者说堆内存
1
2
3
4
5
6
7
8
9
10
11
class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor;
  }
  constructor({ newColor = "green" } = {}) {
    this.newColor = newColor;
  }
}

const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");

输出

1
2
3
//考察class中static的方法
"freddie.colorChange is not a function";
//static不能在类的实例上调用
1
2
3
4
5
6
7
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
const member = new Person("Lydia", "Hallie");
Person.getFullName = () => this.firstName + this.lastName;
console.log(member.getFullName());

输出

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
//考察ES6中的class
"member.getFullName is not a function"
//getFullName并没有写到Person的原型上,member并不能调用该函数
解决办法:
ES6:
class Person{
  constructor(firstName, lastName){
    this.firstName = firstName
    this.lastName = lastName
  }
  getFullName = () => this.firstName + this.lastName;
}
const member = new Person("Lydia","Hallie")
console.log(member.getFullName())
ES5原型法:
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
Person.prototype.getFullName = function(){
  return this.firstName + this.lastName;
  } //这里不能用箭头函数,否则this指向window

const member = new Person("Lydia", "Hallie");
console.log(member.getFullName());
1
2
3
4
5
6
7
8
function checkAge(data) {
  if (data === { age: 18 }) {
    console.log("you are an adult!");
  } else {
    console.log("hh");
  }
}
checkAge({ age: 18 });

输出

1
2
3
//考察引用类型
hh; //考点在{age: 18} === {age: 18}是否相等,
//两个不同的地址,所以不相等