浅谈数组方法重构再封装-forEach-Map——push()，unshift()，shift()，Map()，filter()，every()，some()， reduce()
原创
©著作权归作者所有：来自51CTO博客作者wx633288bd5c53e的原创作品，请联系作者获取转载授权，否则将追究法律责任
我之前李姐的方法重构会认为：（这是一个很复杂的代码复盘）但这次暂时不是滴；
浅谈数组方法重构再封装
这次李姐的数组方法重构：
针对这个原有的数组方法进行重新构造，并且完成封装成（放在函数里）（那此时此刻就感觉谁发明的这些词，给我整yue了，太唬人了属于是）
再此过程中理解数组方法的存储地址，理解回调函数的使用方法，和场景；加深自己对封装，回调的理解和应用。
什么是callback回调：
私人解释：
callback：封装异步代码，封装类似循环过程
函数当做实际参数，a是b的回调函数
function a(res){
console.log('aa');
console.log('res:',res);
}
function b(callback){
console.log('bb');
callback(100)
}
b(a)
重构push()方法
Array.prototype.myPush = function(){
console.log(this);
console.log('我是 mypush函数');
for(var i=0;i<arguments.length;i++){
this[this.length] = arguments[i]
}
return this.length;
}
var arr = [1,2,3]
var len = arr.myPush(4,5,6)
console.log('arr:',arr);
console.log("新的arr的长度是",len);
重构unshift()方法
Array.prototype.myUnshit = function(){
var len = this.length;
var inLen = arguments.length;
for(var i=len-1;i>=0;i--){
// this[0] = arguments[i]
this[i+inLen] = this[i]
}
for(var i=0;i<inLen;i++){
this[i] = arguments[i]
}
return this.length;
}
var arr = [1,2,3]
console.log("原来arr:",arr);
console.log("原来arr的长度是",arr.length);
var len = arr.myUnshit(4,5,6)
console.log('新的arr:',arr);
console.log("新的arr的长度是",len);重构shift()方法
Array.prototype.myShit = function(){
if (this.length <=0) return ''
var data = this[0];
for(var i=1;i<this.length;i++){
this[i-1] = this[i]
}
this.length--
return data;
}
var arr = [1,2,3]
console.log("原来arr:",arr);
console.log("原来arr的长度是",arr.length);
var len = arr.myShit()
console.log('新的arr:',arr);
console.log("删除的数据是",len);
原forEach()方法的使用
数组常用方法 forEach
语法: 数组.forEach(function (item, index, origin) {})
item 就是数组内的每一项
index 就是数组内每一项的索引
origin 就是原始数组
返回值: undefined
var arr = [10,20,30]
arr.forEach(function(item,index,origin){
console.log(item);
console.log('index:',index);
console.log('origin:',origin);
})
重构封装forEach()
Array.prototype.myForEach = function(callback){
for(var i = 0;i<this.length;i++){
console.log(this[i]);
callback(this[i],i,this)
}
}
var arr = [1,2,3,4]
var sum = 0
arr.myForEach(function(data,i,arr){
sum += data ;
// console.log("做事");
// console.log("数组的每一项",data);
// console.log("sum:",sum);
})
console.log(sum);
重构封装Map()方法
myMap 方法
根据原始数组 和 我给出的条件, 把 原始数组内的内容 全部修改, 放在一个新数组内返回
Array.prototype.myMap = function(callback){
var res = [];
for(var i=0;i<this.length;i++){
res.push(callback(this[i],i,this));
}
return res;
}
var arr = [10,20,30]
var res =arr.myMap(function(item,index,origin){
return item*10
})
console.log(res);
重构filter()过滤方法
语法: 数组.filter(function (item, index, origin) {})
作用: 从原始数组中过滤出满足要求的项,放在新数组内
返回值: 一个新数组, 存储的是原始数组中满足要求的数据
注意: 以 return 的形式书写 过滤条件
var arr = [1,2,3,4,5,5,1,2,3,8,6,7]
console.log(arr);
Array.prototype.myFultre = function(callback){
var res = []
for(var i=0;i<this.length;i++){
callback(this[i]) && res.push(this[i])
}
return res;
}
arr = arr.myFultre(function(item,index,origin){
// 过滤掉元素值大于3的元素
return item >3
// 过滤掉元素值是3的元素
return item !== 3
})
console.log(arr);
重构find()方法
方法: find()
语法: 数组.find(function (item, index, origin) {})
返回值: 原始数组内满足条件的第一项
注意: 以 return 的形式书写查找条件
var arr = [
{ id: 1, name: 'Jack' },
{ id: 2, name: 'Rose' },
{ id: 3, name: 'Tom' },
{ id: 2, name: 'Jerry'}
]
Array.prototype.myFind = function(callback){
var res = undefined
for(var i=0;i<this.length;i++){
var flag = callback(this[i]) && (res = this[i])
if(flag){
break;
}
// if(callback(this[i])){
// res = this[i]
// break
// }
}
return res;
}
var res = arr.myFind(function(item,index,origin){
return item.id == 2?true:false
})
console.log(res);
res.name = 'timi';
console.log(res);
console.log(arr);
+ find 多用于查找 [] 内存储的是复杂数据类型
+ 作用: 根据一个条件找到一条数据
+ 问题: 你为什么要找他 ?
=> 找到这条信息进行 增删改查
+ 如果 find 方法实现的是 深拷贝
=> 你的返回值和数组内的内容是两个 数据结构
=> 当你使用 返回值修改的时候, 数组内的数据不变
+ 最好的方案, 把数组中某一条数据的 地址 拿出来（即浅拷贝）
=> 利用返回值修改的时候,
重构every()方法
方法: every()
语法: 数组.every(function (item, index, origin) {})
返回值: 必然是一个 布尔值
如果原始数组中每一个数据都满足条件, 返回的是 true
只要有任何一个不满足条件, 返回值就是 false
var arr = [1,2,3,4,5,5,1,2,3,8,6,7]
console.log(arr);
Array.prototype.myEvery = function(callback){
var flag = true;
for(var i=0;i<this.length;i++){
if(!callback(this[i])){
flag = false;
break
}
}
return flag;
}
var res = arr.myEvery(function(item,index,origin){
return item < 110
})
console.log(res);
重构some()方法
方法: some()
语法: 数组.some(function (item, index, origin) {})
返回值:必然是一个布尔值
如果数组中有任意一个满足条件, 最终返回 true
只有数组中所有数据都不满足条件, 最终返回 false
var arr = [1,2,3,4,5,5,1,2,3,8,6,7]
console.log(arr);
Array.prototype.mySome = function(callback){
// 1. 假设都不满足条件
var flag = false;
for(var i=0;i<this.length;i++){
if(callback(this[i])){
flag = true
break;
}
}
return flag;
}
var res = arr.mySome(function(item,index,origin){
return item > 6
})
console.log(res);
重构reduce()方法
+ 语法: 数组.reduce(function (prev, item, index,) {}, init)
=> prev:
-> 循环的第一次表示的是 init 初始值
-> 循环的第二次开始表示的是 上一次的 结果
=> init: 表示叠加的初始值, 选填
-> 如果你填写了 init, 方法内数组遍历的时候, 从 [0] 开始
-> 如果你没有填写 init, 默认使用数组 [0] 数据来充当 init, 方法内遍历的时候从 [1]var arr = [ 10, 20, 30, 40, 50 ]
console.log('原始数组 : ', arr)
Array.prototype.myReduce = function(callback,init){
// 1. 决定一个遍历的开始位置
var start = init !== undefined ? init : 1
// 2. 判断 init 是否传递了, 来决定使用哪一个当做初始值
init = init ?? this[0]
for(var i = start;i<this.length;i++){
var init = callback(init,this[i])
// console.log(init);
}
return init
}
var res = arr.myReduce(function(prev,item){
return prev+item
},0)
console.log(res);
