前端面试题

• JavaScript篇
• • 数组去重？
  • 深拷贝和浅拷贝
  • 数组扁平化有几种方法？
  • 防抖和节流的区别

JavaScript篇

数组去重？

const array = [' ', 1,  2, ' ',' ', 3];
// 1: "Set"
[...new Set(array)];
// 2: "Filter"
array.filter((item, index) => array.indexOf(item) === index);
// 3: "Reduce"
array.reduce((unique, item) => 
  unique.includes(item) ? unique : [...unique, item], []);
// RESULT:
// [' ', 1, 2, 3];

深拷贝和浅拷贝

深拷贝：

1. 最简单的方法就是JSON.parse(JSON.stringify())；
   注意：这种方法不可以拷贝一些特殊属性（例如：正则表达式，undefine,funtion）

unction deepCopy(o) {
   return JSON.parse(JSON.stringify(o))
}
var c = {
   age: 1,
   name: undefined,
   sex: null,
   tel: /^1[34578]\d{9}$/,
   say: () => {
       console.log('hahha')
   }
}
// { age: 1, sex: null, tel: {} }

2. 用递归去复制所有层级属性

function deepCopyTwo(obj) {
   let objClone = Array.isArray(obj) ? [] : {};
   if (obj && typeof obj == 'object') {
       for (const key in obj) {
           //判断obj子元素是否为对象，如果是，递归复制
           if (obj[key] && typeof obj[key] === "object") {
               objClone[key] = deepCopyTwo(obj[key]);
           } else {
               //如果不是，简单复制
               objClone[key] = obj[key];
           }
       }
   }
   return objClone;
}

浅拷贝：object.assign(target,source)

数组扁平化有几种方法？

1. flat()

// 1、二维数组
let arr=[[1, 2],[3, 4],[5, 6]].flat()
// [1, 2, 3, 4, 5, 6]
// 2、多维数组
// 需要给flat()传一个参数，var newArray = arr.flat([depth])，参数：depth ，可选，指定要提取嵌套数组的结构深度，默认值为 1。
let arr = [[1,2],[3,4],[5,6]].flat(Infinity)

2. 迭代实现（ES6拓展运算符）

const arr = [1,2,[3,4,5,[6,7],8],9,10,[11,[12,13]]];
const flatten = (arr) => {
	while(arr.some(item => Array.isArray(item))) {
		arr = [].concat(...arr)
	}
	return arr
}

3. 普通递归

const arr = [1, 2, [3, 4, 5, [6, 7], 8], 9, 10, [11, [12, 13]]];
const flatten = (arr) => {
 let result = [];
 arr.forEach(item => {
   if (Array.isArray(item)) {
     result = result.concat(flatten(item));
   } else {
     result.push(item);
   }
 });
 return result;
};
console.log(flatten(arr));

4. 高级递归：reduce

const arr = [1, 2, [3, 4, 5, [6, 7], 8], 9, 10, [11, [12, 13]]];
const flatten = (array) =>
 array.reduce((acc, cur) => (Array.isArray(cur) ? [...acc, flatten(cur)] : [...acc, cur]), []);
console.log(flatten(arr));

5. toString():利用了 toString 把数组变成以逗号分隔的字符串，然后可通过遍历数组把每一项再变回原来的类型

const flatten = (arr) => arr.toString().split(',').map((item) => +item);
console.log(flatten(arr));)
// "1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13".split(',')

6. [].concat.apply

const flatten = (arr) => {
	while (arr.some(item => Array.isArray(item))){
		arr = [].concat.apply([], arr);
	}
	return arr;
}

防抖和节流的区别