其他人面试题

Posted on Edited on

title: 其他人面试题 date: 2019-11-16 18:40:25

tags: 面试题

第一份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person() {}
Person.prototype.name = "nick";
Person.prototype.age = 20;
Person.prototype.job = "Engineer";
Person.prototype.sayName = function () {
  console.log(this.name);
};

var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
console.log(person1.name);
console.log(person2.name);
console.log(person1.hasOwnProperty("name"));

输出

1
2
3
Greg;
nick; //实例并没有改变对象的属性
true;
  1. 请列举 js 的数据类型
  2. 请写出 dom 事件流的三个阶段
  3. js 如何添加,移除,创建,复制,查找 dom 节点
  4. jQuery 的 bind,live,delegate 的区别
  5. 请写出至少 4 种 vue 的指令和用法
  6. 什么是闭包,什么时候使用闭包
  7. 如何编写响应式网页
  8. 简单描述一下微信小程序的文件类型
  9. 如何优化代码
  10. 请列举 ES6 的语法

第二份

  1. this 原型链 new 结合的题,问输出什么
  2. css 有什么选择器,优先级,什么属性,哪些可以继承,哪些不能继承,css3 新增的伪类有哪些
  3. vue 组件通信
  4. ajax 返回三个状态码,成功失败未知,假如是未知就轮询,1 到 5 秒延迟 3 秒发请求,6 到 10 秒延迟 1 秒,10 到 20 延迟 0.5 秒,轮询 20 次失败,手写可运行的代码
  5. 数组{城市,省份,代号}输出成{省份,城市[城市名,代号]}
  6. js 有什么 bug 让你写代码出错,答类型判断.追问,怎么通过原型链判断一个对象是 json,
  7. 平时写代码有什么逻辑上的错误
  8. 当前端有什么技巧?(不是优化).答:console 二分法定位错误

第三份

  1. 将下列数据封装成 json

    数据名 值 类型
    name kate string
    age 10 int
    phone 15455234376 string
    phone 15455234376 string
    date_time 2019-01-01 15:00:00 string

  2. 将如下 json 字符串转化成 js 对象并获取到 name 的值

1
var json_str = { name: "tiger" };

输出

1
2
3
var json_str = { name: "tiger" };
var str = JSON.parse("json_str");
console.log(str.name);
  1. 获取如下变量中的月和日
1
var date_time = "2019-01-01 15:00:00";

输出

1
2
new Date(date_time).getMonth() + 1;
new Date(date_time).getDate();
  1. 写出尽可能多的 dom 事件和 js 事件
  2. 写出尽可能多的伪类和伪元素
  3. css3 2D 转换,如右图效果(效果是第二个 div 方块向上位移一半,能够覆盖一点第一个 div,然后顺时针旋转 30 度),代码如下,请填写 div2 的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<head>
<style>
div {
    width: 100px;
    height: 75px;
    background-color: lightgray;
    border: 1px solid black;
}
div#div2{
    /*请写代码 */

}
</style>
</head>
<body>
<div>1号div元素</div>
<div id="div2">2号div元素</div>
</body>
</html>

输出

1
2
3
4
5
div#div2{
transform: translateY(-20%);
transform: rotate(30deg);

}
  1. css 动画使用哪个属性,过渡使用哪个属性
  2. 写一种灰色的 rgb 值
  3. 尽可能多的 vue 的生命周期,并标注运行时间
  4. 控制元素是否显示的 vue 属性
  5. 下面代码的打印结果. 简述什么是变量的作用域,全局变量和局部变量的区别
1
2
3
4
5
6
7
8
9
10
var a = 10;
function test() {
  a = 100;
  console.log(a);
  console.log(this.a);
  var a;
  console.log(a);
}
test();
console.log(a);

输出

1
2
3
4
100; //声明前置,函数内部a=100
10; //this指向window,a=10
100; //继续输出函数内部的a
10; //函数内部的a只在函数内有效,在外部看全局的a,a=10
  1. 简述 cookie 和 session 的区别
  2. 简述 axios 的作用和优势.

第四份

  1. v-show 和 v-if 的区别
  2. let 和 const 的区别
  3. fetch 和 axios 支持跨域请求吗?fetch 第一次得到什么数据,怎么进行转换?
  4. 什么是 MVC 和 MVVM,vue 属于那一种?小程序是什么思想实现双向数据绑定的?
  5. async 和 await 实现同步的好处
  6. React/Vue 中 key 会影响 diff 算法吗
  7. Vue-router 的路由原理
  8. 什么是虚拟 dom

第五份

  1. 使用 css 让该节点不可见,方法越多越好
1
<div class="hidden">Hi</div>

输出

  1. 在哪些场景下用过 position 的哪些值,他们分别有什么特性.
  2. 什么是单进程?什么是单进程异步?
  3. 输出结果
1
2
3
4
5
6
7
8
9
10
var fn = [];
for (var i = 0; i < 10; i++) {
  fn[i] = function (param) {
    console.log(i + param);
  };
}

fn[5](5);
var data = { a: 10, b: 20 };
console.log("第" + i + "条数据:" + data);

输出

1
2
15; //闭包,打印最后是10个闭包,且i=10,传入[5],打出来i也是10
("第10条数据:[object Object]"); //字符串+对象就会把对象打印成[object Object].这是+运算符的特点
  1. 输出结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);

console.log(3);

new Promise((resolve, reject) => {
  console.log(4);
  resolve();
}).then(
  () => {
    console.log(5);
  },
  () => {
    console.log(6);
  }
);
console.log(7);

输出

1
2
3
4
5
6
7
8
//考察微任务和宏任务
1;
3;
4; //此时并未执行异步,仍属于宏任务中script下同步代码
7; //此时同步代码执行完毕,执行栈为空,
5; //开始执行微任务,promise属于微任务
//不输出6是因为那是失败时的回调
2; //开始下一轮event loop,执行宏任务中的异步代码.setTimeout开始执行.
  1. 输出结果
1
2
3
4
5
6
7
8
9
10
const a = [1, 1, 1, 1, 1];
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    a[i] = a[i] + a[j];
  }
}

for (let i = 0; i < 5; i++) {
  console.log(a[i]);
}

输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//双重遍历
//可以假设外层的不变
//当i=0时,内层开始遍历,得到
a[0] = a[0] + a[0]; //2
a[0] = a[0] + a[1]; //3
a[0] = a[0] + a[2]; //4
a[0] = a[0] + a[3]; //5
a[0] = a[0] + a[4]; //6,
//此时a[0] = 6
//当i=1时,内层再次遍历,得到
a[1] = a[1] + a[0]; //7
a[1] = a[1] + a[1]; //14
a[1] = a[1] + a[2]; //15
a[1] = a[1] + a[3]; //16
a[1] = a[1] + a[4]; //17,
//此时a[1] = 17

//以此类推,得到
a = [6, 17, 50, 149, 446];
  1. 写出 1 所在的 while 循环的作用.补全 2 的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//isSymmetry用来判断正整数n是否是一个对称数.例如:12321是对称数,123不是.
function isSymmetry(n) {
  let i = n;
  let j = 0;
  //位置1
  while (i) {
    j = j * 10 + (i % 10);
    i = parseInt(i / 10);
  }
  return; //位置2补充代码
}

console.log(isSymmetry(12321)); //true
console.log(isSymmetry(12312)); //false

输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
假设: n = 11,
i = 11,j = 0;
i = 1,j = 1;
i = 0 ,j = 11

n = 111,
i = 111,j = 0;
i = 11,j = 1;
i = 1,j = 11;
i = 0,j = 111.

n = 12,
i = 12,j = 0;
i = 1,j = 2;
i = 0,j = 21.

//结论
return n == j
while的作用: 循环判断是否将输入值的高低位置颠倒.
  1. 把数组倒序输出(不是排序,不能用内置方法)
1
const arr = ["name", "first", "5", 7, 4, "2", 9];

输出

1
2
3
4
5
for (let key in arr) {
  setTimeout(function () {
    console.log(arr[key]);
  }, 100 - key);
}
  1. (过一面必做题)数组中的重复项最多出现 N 次.(时间复杂度越低得分越高)
1
2
3
4
//原题
outputNth([1, 1, 1, 1], 2); //return [1,1]
outputNth([20, 37, 20, 20, 21], 2); //return [20,20,37,21]
//预估时间复杂度
1
2
3
4
//附加题
//如果要求
outputNth([20, 37, 20, 20, 21], 2); //return [20,37,20,21] 按原数组的先后返回
//预估时间复杂度

输出

第六份

  1. 假设有两个数组 a 和 b,数组的内容都是从小到大排好序的数字.现在我们合并这两个数字.并且合并之后的数字也是从小到大排好序的.

请写下你的实现.不要直接使用 js 的 sort 方法,并且确保只使用一次 for 循环.

例如,a=[2,5,10],b=[4,7,9,11],那么合并的结果是 c=[2,4,5,7,9,10,11]

提示,你可以在一个 for 循环中同时控制两个数组下标 i 和 j.比较 a[i]和 a[j].将小的数字加到 c 中,同时更新相应的下标.但是注意各种边界条件.

输出

1
2
3
//考察排序算法
var arr = a.concat(b); //arr=[2,5,10,4,7,9,11]
var c = [];
  1. 输入一个数字组成的字符串,请把它转化成整数并输出.

例如,输入字符串’123’,输出整数 123.不要使用库函数,函数原型为: function strToInt(str)

输出

1
2
3
var str = "123";
console.log(+str);
console.log(parseInt(str));
  1. 合并数组中相邻且重复的元素

说明: 请实现一个函数 merge,传入一个数组,合并数组中相邻且重复的元素,示例:

1
2
3
merge([3, 2, 2, 4, 5, 5, 6, 2, 1]); //[3,2,4,5,6,2,1]
merge([3, 2, 3]); //[3,2,3]
merge([2, 2, 3]); //[2,3]

输出

  1. 请按顺序取出下方 log
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
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(function () {
  console.log("setTimeout");
}, 0);

async1();
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});

console.log("script end");

输出

1
2
3
4
5
6
7
8
script start
async1 start //async 表达式定义的函数是立即执行的
async2
promise1
script end
async1 end //
promise2
setTimeout

第七份

  1. 对 MVC,MVVM 的理解.
  2. vue 对于 jquery 在开发上有什么优点
  3. 前后端分离的思想了解吗
  4. 你上一个项目都用了哪些方法优化 js 的性能
  5. 说一下你对 vue 和 veux 的使用方法,vue 的组件复用机制
  6. js 怎样实现一个类,怎么实例化这个类

第八份

  1. 下面的函数执行后会输出什么
1
2
3
4
5
6
7
8
9
10
11
12
13
const a = () => {
  const b = new Promise((resolve, reject) => {
    resolve("hello world");
    reject("error");
  });
  for (let i = 0; i < 10; ++i) {
    b.then((data) => {
      console.log(data + i);
    });
  }
};

a(); //输出什么

输出

1
2
3
4
5
6
7
8
9
10
hello world0
hello world1
hello world2
hello world3
hello world4
hello world5
hello world6
hello world7
hello world8
hello world9
  1. 下面的函数执行后会输出什么
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = async function () {
  var b = function () {
    return new Promise(function (resolve, reject) {
      resolve("hello");
      reject("error");
    })
      .then(function (data) {
        console.log(data + i);
      })
      .catch(function (err) {
        console.log(err);
      });
  };
  for (var i = 0; i < 10; ++i) {
    await b();
  }
};

a(); //输出什么

输出

1
2
3
4
5
6
7
8
9
10
hello0;
hello1;
hello2;
hello3;
hello4;
hello5;
hello6;
hello7;
hello8;
hello9;

第九份(半截)

  1. 什么是延迟加载?

  2. 请谈谈 vue 中的 mvvm 模式

  3. vue 中引入组件的步骤

  4. 什么是 vuex?为什么要用 vuex?

第十份

  1. 请说明值类型和引用类型的区别?那些是值类型,哪些是引用类型?
  2. 请简述 private,protected,public,internal 修饰符的访问权限.
  3. 简述 session 和 cookie 的作用和区别
  4. 请简述 ajax 工作原理和常用的 ajax 框架
  5. css 规范中, .后面跟一个名称代表什么?#代表什么?
  6. 字符串反转,给定字符串"we;tonight;you;",编码实现输出"ew;thginot;uoy;"

第十一份

1
2
3
4
5
6
7
8
9
10
var name = "The Window";
var obj = {
  name: "My Obj",
  getNameFunc: function () {
    return function () {
      return this.name;
    };
  },
};
console.log(obj.getNameFunc()()); //输出什么

输出

1
2
obj.getNameFunc()的this是obj
obj.getNameFunc()()的this是window
1
2
3
4
5
6
7
8
9
10
11
var name = "The Window";
var obj = {
  name: "My Obj",
  getNameFunc: function () {
    var that = this;
    return function () {
      return that.name;
    };
  },
};
console.log(obj.getNameFunc()()); //输出什么

输出

1
My Obj

第十二份

  1. vue-router 原理
  2. 相关钩子函数
  3. nexttick
  4. css3 常用属性
  5. keep-alive
  6. 屏幕滚动
  7. 箭头函数什么时候就已经绑定 this
  8. 数组方法,map 和 forEach 的区别
  9. route 和 router 的区别
  10. 中间件原理

第十三份

  1. 虚拟 dom
  2. 生命周期,常用的那些,在这些阶段一般都做了什么
  3. Vuex 是干什么的?有哪些属性?怎么操作 state 中的属性
  4. vue-router 有哪些方法?怎么传递参数,获取参数,路由导航钩子有哪几种,全局钩子的移动端适配(媒体查询,flex,viewport,rem)
  5. 常用的 ES6 内容.const a ={b:1},改变 b 的值会不会报错.模板字符串,解构赋值,拓展运算符及使用场景.
  6. element-UI 常用的插件,之前项目是怎么搭建的