贝壳前端一面

贝壳前端一面

全程40min

1.自我介绍

巴拉巴拉~~

2.实习经历

巴拉巴拉~~

2. == 和 ===之间的区别

==是相等的符号，比较值（先进行类型转换，在比较）
===是严格相等符号，比较类型和值（先进行类型判断再比较 吧）

==：在类型判断的时候，会进行格式转化；

转换规则：

• 等号两边存在数值类型，转化为数值类型在比较。例1
• 一个是对象，另一个不是，调用对象的valueOf和toString方法把对象做一个转换。例2
• null和undefind比较,只有三个等号，其他都不等 例3
• 如果有一个操作数是 NaN，无论另一个操作数是什么，相等操作符都返回 false；
• 如果两个操作数都是对象，则比较它们是不是同一个对象。如果指向同一个对象（同一地址），则相等操作符返回 true；例4

//例1
1 == '1' // true
1 == true // true

//例2
[].toString()//""
{}.toString()//[object Object]
[]=={}//false
[]==""//true

//例子3
null == null//true
undefined == null//true
undefined == undefined//true
null == 0 //false
undefined == 0 //false

//例4
[]==[]//false 不是同一地址
{}=={}//false 不是同一地址
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

===：先类型比较，后值比较
比较规则：

• 类型不同，或者类型相同值不同，false，
• 对象比较，比较引用地址，相同则true,不同false

1 === "1"  //false
[] === ""  //false
null === undefined //false
let a = {}
let b = {}
a == b //false
a === b // false

1
2
3
4
5
6
7
8

3.多维数组扁平化

// 扁平化素数组:多维数组转化为一维数组

// 方法一：递归实现
const a = [1, [2, [3, [4, 5]]]];
const flatten = (arr) => {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      //concat方法进行拼接
      result = result.concat(flatten(arr[i]));
      // console.log(result)
    } else {
      result.push(arr[i]);
    }
  }
  return result;
};
// console.log(flatten(a))
// 方法二：reduce函数
const flatten1 = (arr) => {
  return arr.reduce((prev, next) => {
    return prev.concat(Array.isArray(next) ? flatten(next) : next);
  }, []);
};
// console.log(flatten1(a))

// 方法三：扩展运算符
const flatten2 = (arr) => {
  //some方法把数组中仍然是组数的项过滤出来
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr);
    // console.log(arr);
  }
  return arr;
};
// console.log(flatten2(a));

// 方法四：split&toString
const flatten3 = (arr) => {
  return arr.toString().split(",");
};
// console.log(flatten3(a));

//传入参数，决定扁平阶数
Array.prototype._flat = function (n) {
  let result = [];
  let num = n;
  for (let item of this) {
    // 如果是数组
    if (Array.isArray(item)) {
      n--;
      //   没有扁平化的空间 直接推入
      if (n < 0) {
        result.push(item);
      }
      // 继续扁平化 并将n传入 决定item这一个数组中的扁平化
      else {
        result.push(...item._flat(n));
      }
    }
    // 不是数组直接推入
    else {
      result.push(item);
    }
    // 每次循环 重置n 为传入的参数 因为每一项都需要扁平化 需要进行判断
    n = num;
  }
  return result;
};
let arr = [1, 2, [3, 4], [5, 6, [7, 8]]];
let res = arr._flat(1);

// console.log(res); // [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

4.场景题：

淘宝页面弹出天猫页面的链接，用户进入后，可直接在天猫购买商品不需要登录直接付款，咱们如何实现跨端登录？
我讲了cookie,localstorage.实现，但是这两种只会保留在用户访问的浏览器里面，且他们不能进行跨域。
面试官：实际解决方法，在服务器端实现数据保存session，天猫和淘宝共享这份数据。

5.场景题

react for循环题，将十条数据的key写死为1，渲染结果是一条数据还是十条数据？
回答：一条。浏览器端会报错，key值必须唯一，不唯一的话，dom更新会依据key值，不设置key或者key不唯一。会影响浏览器性能。

6.cdn了解

内容分发机制，帮用户找到最近响应的服务器，返回数据。提升用户体验感。
CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
核心是缓存。

7.边款宽度改变触发重绘还是回流？重绘和回流的关系？

答：边款宽度改变触发回流
回流一定会触发重绘，重绘不一定触发回流。

回流：改变元素所在位置尺寸属性时，会重新进行样式计算，布局，绘制后面所有流程

会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）

导致回流的属性和方法：

clientWidth`、`clientHeight`、`clientTop`、`clientLeft
offsetWidth`、`offsetHeight`、`offsetTop`、`offsetLeft
scrollWidth`、`scrollHeight`、`scrollTop`、`scrollLeft
scrollIntoView()`、`scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()
1
2
3
4
5
6
7

重绘：改变元素颜色等，不修改位置布局等属性。会触发样式计算

触发样式：color,background-color,visibility

8.编程题：0-10000中所有0数字的总和？

let res = new Array(10000).fill('').map((_, index) => index + 1)
        .filter(item => /0/.test(item))  // 返回包含零的数
        .reduce((count, item) => {   // 计数  初始值0
            return count + (String(item).match(/0/g) || []).length
            }, 0);
console.log(res)

1
2
3
4
5
6
7

9.项目相关？技术难点？

根据自己实际说就很好了

10.为什么选择前端行业？

巴拉巴拉

11.反问

1.公司的作息安排
2.对新员工的培养计划