我是靠谱客的博主 鲜艳香菇,这篇文章主要介绍JavaScript进阶手写系列,手写13个数组方法的原理实现JavaScript进阶手写系列,手写数组方法的原理实现,现在分享给大家,希望可以做个参考。

文章目录

  • JavaScript进阶手写系列,手写数组方法的原理实现
    • 1、forEach
    • 2、map
    • 3、filter
    • 4、every
    • 5、some
    • 6、reduce
    • 7、findIndex
    • 8、find
    • 9、fill
    • 10、includes
    • 11、join
    • 12、flat
    • 13、splice

JavaScript进阶手写系列,手写数组方法的原理实现

1、forEach

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身
复制代码
1
2
3
4
5
6
7
// forEach Array.prototype.myForEach = function(callback){ for(let i=0;i<this.length;i++){ callback(this[i],i,this) } }

2、map

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

复制代码
1
2
3
4
5
6
7
8
9
// map Array.prototype.myMap = function(callback){ let res = [] for(let i=0;i<this.length;i++){ res.push(callback(this[i],i,this)) } return res }

3、filter

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

复制代码
1
2
3
4
5
6
7
8
9
//filter Array.prototype.myFilter = function(callback){ let res = [] for(let i=0;i<this.length;i++){ callback(this[i],i,this) && res.push(this[i]) } return res }

4、every

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

复制代码
1
2
3
4
5
6
7
8
9
//every Array.prototype.myEvery = function(callback){ for(let i=0;i<this.length;i++){ if(!callback(this[i],i,this)) return false // 如果有一个不通过都返回false } return true }

5、some

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

复制代码
1
2
3
4
5
6
7
8
//some Array.prototype.mySome = function(callback){ for(let i=0;i<this.length;i++){ if(callback(this[i],i,this)) return true } return false }

6、reduce

参数代表含义

  • pre:前一项
  • next:下一项
  • index:当前索引
  • arr:数组本身

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//reduce Array.prototype.myReduce = function(callback,...initial){ let start = 0,pre if(initial.length){ pre = initial[0] }else{ pre = this[0] start = 1 } for(let i =start;i<this.length;i++){ pre = callback(pre,this[i],i,this) } return pre }

7、findIndex

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

复制代码
1
2
3
4
5
6
7
8
9
10
//findeIndex Array.prototype.myFindIndex = function(callback){ for(let i =0;i<this.length;i++){ if(callback(this[i],i,this)){ return i } } return -1 }

8、find

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

复制代码
1
2
3
4
5
6
7
8
9
10
//find Array.prototype.myFind = function(callback){ for(let i=0;i<this.length;i++){ if(callback(this[i],i,this)){ return this[i] } } return undefined }

9、fill

参数代表含义

  • item:遍历项
  • index:遍历项的索引
  • arr:数组本身

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

复制代码
1
2
3
4
5
6
7
8
9
//fill Array.prototype.myFill = function(value,start = 0,end){ end = end || this.length for(let i =start;i<end;i++){ this[i] = value } return this }

10、includes

用处:查找元素,查到返回true,反之返回false,可查找NaN

复制代码
1
2
3
4
5
6
7
8
9
10
11
Array.prototype.myIncludes = function(value,start = 0){ if(start<0) start = this.length + start const isNaN = Number.isNaN(value) for(let i=0;i<this.length;i++){ if(this[i] === value || isNaN && Number.isNaN(this[i])){ return true } } return false }

11、join

用处:将数组用分隔符拼成字符串,分隔符默认为,

复制代码
1
2
3
4
5
6
7
8
9
10
//join Array.prototype.myJoin = function(s = ','){ let str = '' for(let i =0;i<this.length;i++){ if(i === 0) str = `${this[i]}` else str = `${str}${s}${this[i]}` } return str }

12、flat

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
Array.prototype.myFlat = function(num = 1){ let arr = this let i = 0 while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr) i++ if (i >= num) break } return arr }

13、splice

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

难点

  • 截取长度和替换长度的比较,不同情况
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Array.prototype.sx_splice = function (start, length, ...values) { if (length === 0) return [] length = start + length > this.length - 1 ? this.length - start : length console.log(length) const res = [], tempArr = [...this] for (let i = start; i < start + values.length; i++) { this[i] = values[i - start] } this.length = start + values.length if (values.length < length) { const cha = length - values.length console.log(cha) for (let i = start + values.length; i < tempArr.length; i++) { this[i] = tempArr[i + cha] } this.length = this.length - cha } if (values.length > length) { for (let i = start + length; i < tempArr.length; i++) { this.push(tempArr[i]) } } for (let i = start; i < start + length; i++) { res.push(tempArr[i]) } return res }

最后

以上就是鲜艳香菇最近收集整理的关于JavaScript进阶手写系列,手写13个数组方法的原理实现JavaScript进阶手写系列,手写数组方法的原理实现的全部内容,更多相关JavaScript进阶手写系列,手写13个数组方法内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(89)

评论列表共有 0 条评论

立即
投稿
返回
顶部