JavaScript学习日记 : Day26 - 重做原生方法 -- Array

算是检验自己对JavaScript理解一个很好的方法:

范例 :

const cat1 = {
    name:"咪咪",
    age:2,
    color:"白色"
}

const cat2 = {
    name:"妹妹",
    age:1,
    color:"虎斑"
}

const cat3 = {
    name:"Toby",
    age:2,
    color:"虎斑"
}

const cats = [cat1,cat2,cat3]

1. forEach

Array.prototype.ownForEach = function(callback) {
    for(let i = 0; i < this.length; i++) {
        callback(this[i],i,this)
    }
}


cats.ownForEach((cat) => {
    console.log(cat)
})

//
{name: "咪咪", age: 2, color: "白色"}
{name: "妹妹", age: 1, color: "虎斑"}
{name: "Toby", age: 2, color: "虎斑"}

2. map

Array.prototype.ownMap = function(callback) {
    const result = [];
    for(let i = 0; i < this.length; i++) {
        result.push(callback(this[i],i,this))
    }
    return result;
}

console.log(cats.ownMap((item) => `一只${item.color}的猫`))
// ["一只白色的猫", "一只虎斑的猫", "一只虎斑的猫"]

3. filter

Array.prototype.ownFilter = function(callback) {
    const result = [];
    for(let i = 0; i < this.length; i++) {
        if(callback(this[i],i,this)) {
            result.push(this[i]);
        }
    }
    return result;
}

console.log(cats.ownFilter((item) => item.color == '虎斑'))
// 
0: {name: "妹妹", age: 1, color: "虎斑"}
1: {name: "Toby", age: 2, color: "虎斑"}

这边有另外一个写法 :

Array.prototype.ownFilter = function(callback) {
    const result = [];
    for(let i = 0; i < this.length; i++) {
        callback(this[i],i,this) && result.push(this[i]) // 前者true就会执行後者
    }
    return result;
}

4. every

Array.prototype.ownEvery = function(callback) {
    let isAllTrue = true;
    for(let i = 0; i < this.length; i++) {
        isAllTrue = callback(this[i],i,this);
        if(!isAllTrue) break;
    }
    return isAllTrue;
}

console.log(cats.ownEvery((item) => item.age === 1)); // false

5. some

Array.prototype.ownSome = function(callback) {
    let isTrue = false
    for(let i = 0; i < this.length; i++) {
        isTrue = callback(this[i],i,this);
        if(isTrue) break
    }
    return isTrue;
}
console.log(cats.ownSome((item) => item.color === '黑色')); //false

6. reduce

Array.prototype.ownReduce = function(callback, initValue) {
    let startIndex = 0;
    let pre;
    if(initValue || initValue===0) {
        pre = initValue
    } else {
        pre = this[0];
        startIndex = 1;
    }
    
    for(let i = startIndex; i < this.length; i++) {
        pre = callback(pre, this[i], this)
    }
    return pre
}

const ageTotal = cats.ownReduce((pre,cur) => pre + cur.age,0); 
console.log(ageTotal); // 5

<<:  来做一个铁人赛倒数计时器吧!

>>:  利用十字链结串列概念思考流程 - DAY 24

30天完成家庭任务平台:第二十七天

驻列的目的是希望在幕後执行耗时的工作来加快反应时间,对於不熟悉驻列的人,Laracast一开始提供小...

django新手村11-----缓存

缓存对於服务器的好处,在於使用者会将数据加载到内存,减少了对资料库的访问 终端输入 python m...

Day24 - [丰收款] 以Django Web框架实作永丰API线上支付模拟情境(5) - 我的订单

今天这篇是我们实作库米狗屋●KummyShop的情境电商模拟的最终章了!今天我们要把先前建的一堆订单...

30-13 之 Domain Layer - Table Module

这篇文章接下来我们要谈谈《 企业应用架构模式- Martin Fowler 》这本书中所提 doma...

Day05 - Android Jetpack: Navigation

这篇会稍微从前几篇的内容抽离出来,因为中秋节连假家人来找,只能先做点简单的事情... Android...