滴滴

Sunny 4/9/2021 Interview

# 一面

# 笔试题

用 JS 实现二分查找（折半查找）算法，并写出时间复杂度。

/**
 * 时间复杂度 O(logn)
 */
function binary(arr, data) {
  let start = 0;
  let end = arr.length - 1;
  while (end >= start) {
    const point = Math.floor((end + start) / 2);
    if (data > arr[point]) {
      start = point;
    } else if (data < arr[point]) {
      end = point;
    } else {
      return point;
    }
  }
  return -1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

用 JS 实现深拷贝。

function deepCopy(obj, cache = []) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const hit = cache.find(item => item.o === obj);
  if (hit) {
    return hit.copy;
  }

  const copy = Array.isArray(obj) ? [] : {};

  cache.push({
    original: abj,
    copy: copy
  });

  Object.keys(obj).forEach(key => {
    copy[key] = deepCopy(obj[key], cache);
  });

  return copy;
}

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

如下代码，分别弹出什么信息？

// 题目1
var a = 100
function create() {
  var a = 200
  return function () {
    alert(a)
  }
}
var fn = create()
fn()
// 200

// 题目2
var a= 100
function invoke(fn) {
  var a = 200
  fn()
}
function fn() {
  alert(a)
}
invoke(fn)
// 100

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

用 flex 实现下图效果。容器宽高不定，子元素宽高固定？

<style>
  .parent {
    border: 2px solid gray;
  }

  .row {
    display: flex;
  }

  .row div {
    width: 100px;
    height: 50px;
    background-color: gray;
  }

  .row1 {
    justify-content: flex-start;
  }

  .row2 {
    justify-content: center;
  }

  .row3 {
    justify-content: flex-end;
  }
</style>
<section class="parent">
  <section class="row row1">
    <div></div>
  </section>
  <section class="row row2">
    <div></div>
  </section>
  <section class="row row3">
    <div></div>
  </section>
</section>

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

现有瀑布流式图片页面（页面下拉时无限加载图片），用 JS 监听每个图片的点击事件。

<section id="root">
  <img />
  <img />
  <img />
</section> 
<script>
  // 事件代理
  const root = document.querySelector('#root');
  root.addEventListener('click', function (event) {
    const element = event.target.tagName === 'IMG';
    console.log(element);
  })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

HTTP 常用状态码及其含义。

200 成功
301 永久重定向
302 暂时重定向
401 未登录
403 没有权限
404 未找到资源
500 服务端错误
503 服务不可用
...

1
2
3
4
5
6
7
8
9

Git 常用命令有哪些？

git pull
git add .
git commit -m "message"
git push
git rebase -i HEAD~3
git rebase continue
git rebase --abort
git merge <brach-name>
git merge --abort
git checkout <brach-name>
git checkout .
git checkout -b <new-brach-name>
git status
git diff
git log

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Linux 基础命令有哪些？

mkdir <dir> 
cd <dir>
ll -a
mp
mv
rm -rf node_modules

1
2
3
4
5
6

执行如下代码，然后点击每个标签分别弹出什么信息？并写明原因。

let $body = $('body')
let arr = [1, 2, 3, 4, 5]
let i, length = arr.length, $a
for (i = 0; i < length; i++) {
  $a = $(`<a>${i}</a>`)
  $body.append($a)
  $a.click(function () {
    alert(i)
  })
}
// 结果：5 5 5 5 5
// 原因：竟然有坑

1
2
3
4
5
6
7
8
9
10
11
12

执行下面代码会输出什么信息

const obj = {
  a: 100
}
const obj1 = obj;
let a1 = obj.a;

obj1.a = 200;
console.log(obj.a);
console.log(a1);
a1 = 300;
console.log(obj.a);
console.log(obj1.a);
// 200
// 100
// 200
// 200

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

执行如下代码，会输出什么信息？


async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
console.log('script start');
setTimeout(() => {
  console.log('settimeout');
}, 0);
async1();
new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
})
console.log('script end');
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// settimeout

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

执行如下代码，abc 会是什么颜色？并且说明原因。

<style>
  #p1 {
    color: red;
  }

  p.container {
    color: blue;
  }

  .p {
    color: yellow;
  }
</style>
<p id="p1" class="container p">abc</p>
<!-- red，ID选择器重要性更大 -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

执行如下代码，分别打印出什么？

123 instanceof Number
new Number(123) instanceof Number
Number(123) instanceof Number
// false
// true
// false

1
2
3
4
5
6

# 问答题

vue生命周期
vue组件通信
vue中key的作用
vue的diff算法
小程序的生命周期
webpack打包流程

老冯博客

Choose mode

滴滴

滴滴

# 一面

# 笔试题

# 问答题