前端面试题

皮小强
147 阅读3分钟

1.说出几种数组去重的方式

let originalArray = [1,2,3,4,5,3,2,4,1];

// 方式1
const result = Array.from(new Set(originalArray));
console.log(result); // -> [1, 2, 3, 4, 5]

// 方式2
const result = [];
const map = new Map();
for (let v of originalArray) {
    if (!map.has(v)) {
        map.set(v, true);
        result.push(v);
    }
}
console.log(result); // -> [1, 2, 3, 4, 5]

// 方式3
const result = [];
for (let v of originalArray) {
    if (!result.includes(v)) {
        result.push(v);
    }
}
console.log(result); // -> [1, 2, 3, 4, 5]

// 方式4
for (let i = 0; i < originalArray.length; i++) {
    for (let j = i + 1; j < originalArray.length; j++) {
        if (originalArray[i] === originalArray[j]) {
            originalArray.splice(j, 1);
            j--;
        }
    }
}
console.log(originalArray); // -> [1, 2, 3, 4, 5]

// 方式5
const obj = {};
const result = originalArray.filter(item => 
obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true));
console.log(result); // -> [1, 2, 3, 4, 5]

2.对象数组如何去重

const responseList = [
  { id: 1, a: 1 },
  { id: 2, a: 2 },
  { id: 3, a: 3 },
  { id: 1, a: 4 },
];
const result = responseList.reduce((acc, cur) => {
    const ids = acc.map(item => item.id);
    return ids.includes(cur.id) ? acc : [...acc, cur];
}, []);
console.log(result); // -> [ { id: 1, a: 1}, {id: 2, a: 2}, {id: 3, a: 3} ]

3.前端性能优化方案

这个其实方案还是比较多的，可以从DOM层面，CSS样式层面和JS逻辑层面分别入手，大概给出以下几种：
(1) 减少DOM的访问次数，可以将DOM缓存到变量中；
(2) 减少重绘和回流，任何会导致重绘和回流的操作都应减少执行，可将多次操作合并为一次；
(3) 尽量采用事件委托的方式进行事件绑定，避免大量绑定导致内存占用过多；
(4) css层级尽量扁平化，避免过多的层级嵌套，尽量使用特定的选择器来区分；
(5) 动画尽量使用CSS3动画属性来实现，开启GPU硬件加速；
(6) 图片在加载前提前指定宽高或者脱离文档流，可避免加载后的重新计算导致的页面回流；
(7) css文件在<head>标签中引入，js文件在<body>标签中引入，优化关键渲染路径；
(8) 加速或者减少HTTP请求，使用CDN加载静态资源，合理使用浏览器强缓存和协商缓存，小图片可以使用Base64来代替，
    合理使用浏览器的预取指令prefetch和预加载指令preload；
(9) 压缩混淆代码，删除无用代码，代码拆分来减少文件体积；
(10) 小图片使用雪碧图，图片选择合适的质量、尺寸和格式，避免流量浪费。

4.盒模型

指的是页面在渲染时，DOM元素所采用的布局模型，一个元素占用的空间大小由几个部分组成，
内容(content)、内边距(padding)，边框(border)和外边距(margin)。
可以通过box-sizing来进行设置，其中IE盒模型的content包含了padding和border，这是区别于W3C标准盒模型的地方。

5.选择器优先级

!important > 行内样式 > id选择器 > class选择器 > 标签选择器 > * > 继承 > 默认

6.forEach，map和filter的区别

forEach遍历数组，参数为一个回调函数，回调函数接收三个参数，当前元素，元素索引，整个数组；
map与forEach类似，遍历数组，但其回调函数的返回值会组成一个新数组，新数组的索引结构和原数组一致，原数组不变；
filter会返回原数组的一个子集，回调函数用于逻辑判断，返回true则将当前元素添加到返回数组中，否则排除当前元素，原数组不变。
avatar
文章
阅读
粉丝