Web前端最新【值得收藏】面试会用到的十个常用的数组方法JS实现(一),前端 400道面试题通关宝典助你进大厂

最后

我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限,仅展示部分截图:

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 分隔的字符串。

6.1 参数

  • array (Array): 要转换的数组。

  • [separator=’,’] (string): 分隔元素。

6.2 返回值

  • (string): 返回连接字符串。

6.3 实现

const _join = (array, separator = “,”) => {

return array.reduce((prev, next) => {

return prev ? prev + separator + next : prev + next;

}, “”);

};

6.4 测试

_join([‘a’, ‘b’, ‘c’], ‘~’);

// => ‘abc’

七、pop


删除数组的最后一个元素并返回删除的元素。

注意: 此方法改变数组的长度!

7.1 返回值

  • (any): 返回删除的元素。

7.2 实现

const _pop = function (array) {

const result = array[array.length - 1];

array.length - 1;

return result;

}

7.3 测试

const sites = [‘Google’, ‘Runoob’, ‘Taobao’, ‘Zhihu’, ‘Baidu’];

console.log(pop(sites));

// 输出结果为: “Baidu”

console.log(sites);

// 输出结果为: [‘Google’, ‘Runoob’, ‘Taobao’, ‘Zhihu’]

八、push


向数组末尾添加新项目,并返回新长度。

8.1 参数

  • array (Array): 要改动的数组

  • value1 … valueX: (必需)要添加的项目。

8.2 返回值

  • (Number): 返回数组的新长度。.

8.3 实现

const _push = function (array, …params) {

const len = array.length;

for (let i = 0; i < params.length; i++) {

array[len + i] = params[i]

}

return array.length;

};

8.4 测试

const arr = [1, 2, 3];

_push(arr, 4);

console.log(arr)

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

九、remove


移除数组中callback返回为真值的所有元素,并返回移除元素组成的数组。

最后

我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限,仅展示部分截图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值