前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于数组的前端面试题,你是否都能答对?

关于数组的前端面试题,你是否都能答对?

作者头像
用户1687375
发布2018-06-08 12:09:13
1.3K0
发布2018-06-08 12:09:13
举报
文章被收录于专栏:较真的前端较真的前端

总结面试题不一定是为了准备面试,更是对于自己的一种温故知新,了解自己知识的熟练度和理解度

问题一览

  1. 如何判断一个变量是否为数组
  2. 数组的原生方法有哪些?
  3. 如何将一个类数组变量转化为数组?
  4. 说一说ES6中对于数组有哪些扩展
  5. 数组去重,你能说出多少种方法?
  6. 你知道Array.prototype的类型是什么吗?
  7. 如何“打平”一个嵌套数组,如[1,[2,[3]],4,[5]] => [1,2,3,4,5]?你能说出多少种方法?
  8. 如何克隆一个数组?你能说出多少种?
  9. 说一说Array.prototype.sort()方法的原理?(追问:不传递参数会如何?)
  10. 找出Array中的最大元素,你能说出几种方法?

问题答案

如何判断一个变量是否为数组?

本题在上一章中——《关于数据类型的前端面试题》已经做了一个简单的解答,这里再展开一下。

为什么不用typeof?

Array继承与Object,所以typeof 会直接返回object,所以不可以用typeof方法来检测

为什么不用instanceof?

代码语言:javascript
复制
var list = [1,2,3];
list instanceof Array    //true

instanceof 表面上看确实是返回了true,但其实并不可靠。原因是Array实质是一个引用,用instanceof方法(包括下面的constructor方法)都是利用和引用地址进行比较的方法来确定的,但是在frame嵌套的情况下,每一个Array的引用地址都是不同的,比较起来结果也是不确定的,所以这种方法有其局限性。

为什么不用constructor方法?

代码语言:javascript
复制
var list = [1,2,3];
list.constructor === Array;    //true

原因已经解释过了,不再赘述。

可靠的检测数组方式

1.利用Object的toString方法

代码语言:javascript
复制
var list = [1,2,3];
Object.prototype.toString.call(list);    //[object Array]

2.利用ES6的Array.isArray()方法

代码语言:javascript
复制
var list = [1,2,3];
Array.isArray(list);    //true

数组的原生方法有哪些?

这道题真心会是一道必问题,看似简单,但其实考察的内容还是很多的。

一是考察面试者平时使用的是否足够平凡;二是观察面试者是否对于日常的知识有所归纳

建议回答者可以根据自己的平时归纳的手法来回答,如果你没有归纳总结,而是用到哪个方法临时去w3school上或MDN上查的话,那正是面试官不希望见到的情况。

可以用MDN中给出的方式来回答:

会改变自身的方法

copyWithin、fill、pop、push、reverse、shift、sort、splice、unshift

不会改变自身的方法

concat、includes、join、slice、toSource、toString、indexOf、lastIndexOf

遍历方法

forEach、entries、every、some、filter、find、findIndex、keys、map、reduce、reduceRight、values

如何将类数组的变量转化为数组?

这道题在上章也提到了,这里再写一篇。

是如果是ES6,可以用Array.from()方法。

如果不确定环境的话,可以用Array.prototype.slice.call()的方法,将类似数组转换为。

说一说ES6对于数组的扩展

增加了扩展运算符(spread)...

它将一个数组转化为以逗号分隔的一个参数序列。

增加了两个方法,Array.from()和Array.of()方法。

增加了一些实例方法,如copyWithin()、entries()、keys()、values()等。

数组去重,你能说出多少种方法?

1.利用一个空Object来实现

代码语言:javascript
复制
Array.prototype.unique = function(){
	var tmp = {},res=[];
	this.forEach(function(i){
		!tmp[i] && res.push(i) && (tmp[i] = true);
	})
	return res;
}
var list = [0,0,1,2,3,6,6];
console.log(list.unique());    //[0,1,2,3,6]

2.利用ES6 的Set数据结构

代码语言:javascript
复制
console.log([...new Set(list)]);    //[0,1,2,3,6]

你知道Array.prototype的类型是什么吗?

很多人都不知道,其实Array.prototype是一个数组,只不过length为0

如何“打平”一个嵌套数组,如[1,[2,[3]],4,[5]] => [1,2,3,4,5]?你能说出多少种方法?

这个方法很多,如果你的答案是用递归的话,那确实有点low,而且代码会比较复杂。

我的觉得可以用以下方法来解决这个问题:

1.利用Array.prototype.toString()方法

代码语言:javascript
复制
var list = [1,[2,[3]],4,[5]];
console.log(list.toString());    //1,2,3,4,5

原理:toString 方法返回一个字符串,该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接(由逗号隔开)组成。

2.利用Array.prototype.join()方法

代码语言:javascript
复制
var list = [1,[2,[3]],4,[5]];
console.log(list.join());    //1,2,3,4,5

原理:join方法会让所有的数组元素转换成字符串,再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null, 则会转化成空字符串。

PS:如果你觉得上面输出的不是一个数组,可以稍微加工一下

代码语言:javascript
复制
var list = [1,2,3,4,5];
JSON.parse(`[${list.toString()}]`);     //[1,2,3,4,5]
JSON.parse(`[${list.join()}]`);     //[1,2,3,4,5]

如何克隆一个数组?你能说出多少种?

1.借用concat方法

代码语言:javascript
复制
var arr1 = [1,2,3];
var arr2 = arr1.concat();

2.借用slice方法

代码语言:javascript
复制
var arr1 = [1,2,3];
var arr2 = arr1.slice(0);

原理:数组本质上也是Object,直接赋值的话,只是将引用赋值给另一个变量,最终会导致被复制的变量也会随着原来的数组变化而变化。

说一说Array.prototype.sort()方法的原理?(追问:不传递参数会如何?)

语法

sort方法接受一个“比较函数”作为参数。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下: 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。 若 a 等于 b,则返回 0。 若 a 大于 b,则返回一个大于 0 的值。

找出Array中的最大元素,你能说出几种方法?

1.自己实现一个冒泡算法,实现就不多说了

2.利用Math的max方法

代码语言:javascript
复制
var list = [1,100,23,65,43,2,9];
Math.max.apply(null, list);    //[1, 2, 9, 23, 43, 65, 100]

3.利用Array的sort方法先排序再取值

代码语言:javascript
复制
var list = [1,100,23,65,43,2,9];
list.sort((a, b) => {return a-b;})    //[1, 2, 9, 23, 43, 65, 100]

总结

数组是平时开发中经常用到的,所以经常被面试官问到也是正常的。希望每一个开发者都能够在平时用的时候不仅是机械的应用Array的原生方法,也应该勤思考、多想为什么,这也是面试官希望见到的。

参考

面试题数组篇(1) javascript/前端 有关数组的面试题 MDN Array 阮一峰的ES6入门——《数组的扩展》

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-09-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 较真的前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档