【前端面试:手写js系列】flat---数组扁平化

JavaScript029

【前端面试:手写js系列】flat---数组扁平化,第1张

数组扁平化定义:在前端项目开发过程中,偶尔会出现层叠数据结构的数组,需要把多层数组转换为一级数组(即提取嵌套数组元素最终合并为一个数组),使其内容合并并且展开。

遍历数组的方案:

for循环

for...of

for...in

forEach()

entries()

keys()

values()

reduce()

map()

判断元素是否是数组的方案:

instanceof

constructor

object.prototype.toString.call

isArray

将数组元素进行展开一层的方案:

扩展运算法 + concat(concat() 方法用于合并两个或多个数组,在拼接的过程中加上扩展运算符会展开一层数组)

concat + apply(主要是利用 apply 在绑定作用域时,传入的第二个参数是一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。也就是在调用 apply 函数的过程中,会将传入的数组一个一个的传入到要执行的函数中,也就是相当对数组进行了一层的展开。)

toString + split(不推荐使用 toString + split 方法,因为操作字符串是很危险的事情,如果数组中的元素所有都是数字的话,toString + split 是可行的,并且是一步搞定。)

最终手写的flat()方法为:

参考博客如下,注明一下出处,感谢大神们,希望自己可以多多练习,多多回顾:

三元博客

JS数组reduce()方法详解及高级技巧

数组flat方法实现

对象类型在赋值的过程中实际上是复制了地址,从而导致了其中一方被改变其他也都被改变的情况,在开发中我们通常不希望出现这样的问题,这里可以使用浅拷贝来解决这个情况。

首先我们可以通过Object.assign来实现浅拷贝,该函数只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,即为浅拷贝而不是深拷贝。

以下为Object.assign浅拷贝的简单实现:

还可以通过展开运算符...来实现浅拷贝:

但是,浅拷贝只解决了第一层的问题,如果对象下还有对象的话,那么又回到最开始的问题了,第二层的对象拷贝过来的只是地址,两者享有相同的地址,这时就需要用到深拷贝了。

我们通常使用JSON.parse(JSON.stringify(object))来解决:

但是该方法具有以下局限性:

遇到函数、undefined和symbol时,会直接忽略掉他们,该对象不能正常的序列化,此时我们需要实现一个更为完善的深拷贝。

小结:以上深拷贝的方法依然只是较为简易的,要想实现一个比较完美的深拷贝其实是很困难的,需要我们考虑很多种边界情况,比如原型链如何处理、DOM如何处理等。该deepClone函数就有两个较为明显的问题,一是没有解决对象的循环引用的问题(参考方案:用弱映射做一个哈希表,存储原对象,若缓存命中,则过滤本次拷贝,直接使用记忆化数据,否则惰性拷贝。一般不是为了解决IE的兼容性问题,都没有问题,考虑兼容性则按需垫片。生产环境其实还需要考虑其它类型的拷贝,一般直接使用辅助工具库。总而言之,按需拷贝);二是无法实现函数的拷贝。

很少,但是也有,纵观当今的互联网巨头,似乎面试涉及手写代码的也是寥寥无几。当然,有时你还是无法逃避手写代码的命运。据采访,一位参加过腾讯面试的程序员就遭遇到了手写代码。三面是视频面试,面试官出了一道算法题:打印三角螺旋数组,限时20分钟。

其实每家公司让面试者手写代码,目的都略有不同,有些是想考察面试者的编码习惯、有些则是考察面试者逻辑思维是否清晰,有些是起到验证的目的,有些呢则是考察面试者的严谨性。

手写代码的意义和作用

手写代码是一个很重要面试过程。在写的过程中,至少能看出这些问题:

1、取名字,随意的取名是维护的噩梦。

2、是解决具体问题,还是能解决一类问题,别的同事如何使用你的代码。

3、思路是否清晰,代码结构是否层次分明。提笔之前,想清楚自己要干什么。

4、代码可读性,可维护性。

5、边界问题,细节处理是否合理。直接关系到这个人的bug率。

6、打算如何测试自己的代码。对代码的责任心。

7、写代码过程中和面试官的沟通次数。这个人的沟通能力和沟通欲望。