【值得收藏】面试会用到的十个常用的数组方法JS实现，2024年最新蚂蚁金服的面试流程

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

1.1 参数

• array (Array): 需要处理的数组

• [size=1] (number): 每个数组区块的长度

1.2 返回

• (Array): 返回一个包含拆分区块的新数组（注：相当于一个二维数组）。

1.3 实现

const _chunk = function (array, size = 1) {

const length = array == null ? 0 : array.length;

if (!length || size < 1) return [];

const len = Math.ceil(length / size);

const result = new Array(len);

let index = -1;

while (++index < len) {

const start = size * index;

result[index] = array.slice(start, size + start)

}

return result;

}

1.4 测试

const arr = [‘a’, ‘b’, ‘c’, ‘d’]

_chunk(arr, 2);

// => [[‘a’, ‘b’], [‘c’, ‘d’]]

_chunk(arr, 3);

// => [[‘a’, ‘b’, ‘c’], [‘d’]]

二、concat

---

创建一个新数组，将array与任何数组 或 值连接在一起。

2.1 参数

• array (Array): 被连接的数组。

• values: 连接的值。

2.2 返回值

• (Array): 返回连接后的新数组。

2.3 实现

const _concat = function (array, …values) {

const result = […array];

values.forEach(val => {

if (Array.isArray(val)) {

result.push(…val);

} else {

result.push(val);

}

})

return result;

}

2.4 测试

var array = [1];

var other = _concat(array, 2, [3], [[4]]);

console.log(other);

// => [1, 2, 3, [4]]

console.log(array);

// => [1]

三、difference

---

创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。返回过滤的新数组

3.1 参数

• array (Array): 被过滤的数组。。

• [values] (…Array): 排除的值。

3.2 返回值

• (Array): 返回一个过滤值后的新数组。

3.3 实现

const _difference = (array, diff = []) => {

if (!diff.length || !array.length) return […array];

return array.filter((val) => !diff.includes(val));

};

3.4 测试

_difference([3, 2, 1], [4, 2]);

// => [3, 1]

四、fill

---

使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。

注意： 这个方法会改变 array

4.1 参数

• array (Array): 要填充改变的数组。

• value (*): 填充给 array 的值。

• [start=0] (number): 开始位置（默认0）。

• [end=array.length] (number):结束位置（默认array.length）。

4.2 返回值

• (Array): 返回 array。

4.3 实现

const _fill = (array = [], value, start = 0, end = array.length) => {

const { length } = array;

// 空数组

if (!length) return array;

// 边界

const ends = end > length ? length : end;

if (start > end) return array;

for (let i = start; i < ends; i++) {

array[i] = value;

}

return array;

};

4.4 测试

const array = [1, 2, 3];

_fill(array, “a”);

// => [‘a’, ‘a’, ‘a’]

_fill(Array(3), 2);

// => [2, 2, 2]

_fill([4, 6, 8, 10], “*”, 1, 3);

// => [4, ‘', '’, 10]

五、flattenDepth

---

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

5.1 参数

• depth（Number）: 指定要提取嵌套数组的结构深度，默认值为 1。

5.2 返回值

• (Any): 返回通过测试（函数内判断）的数组的第一个元素的值。

5.3 实现

// 余光

Array.prototype._flattenDepth = function (depth = 1) {

// 获取调用者

let arr = this;

// 拍平层数校验

if (depth < 1) return arr;

return arr.reduce(

(prev, next, i, n) => [

…prev,

…(Array.isArray(next) ? next._flattenDepth(depth - 1) : [next]),

],

[]

);

};

5.4 测试

const res = [[1], [[2]]];

console.log(res.flat(1))

// => [1, [2]]

console.log(res.flat(2))

// => [1, 2]

六、join

---

将 array 中的所有元素转换为由 separator 分隔的字符串。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-jjEt57E2-1712793461318)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-6ULqegmh-1712793461319)]