部分常用JS API源码学习

萝らか妹 提交于 2020-01-15 05:04:28

部分常用JS API源码学习

map()

// map()

Array.prototype.gMap = function(fn){
    var arr = [] //创建一个新数组 循环并对新数组进行操作 最后返回新数组 这样就不会改变原数组
    for(var i = 0; i < this.length; i ++){
        arr.push(fn(this[i], i))
    }
    return arr
}

var arr1 = [1, 2]
console.log(arr1.gMap(function(item, index){
    return item * 2;
})) // [2, 4]

filter()

// filter()

Array.prototype.gFilter = function(fn){
    var arr = [] //创建一个新数组 循环并对新数组进行操作 最后返回新数组 这样就不会改变原数组
    for(var i = 0; i < this.length; i ++){
        if(fn(this[i], i)){ //这里的fn返回bool值
            arr.push(this[i])
            // 这里只是举例数组
            // 如果 typeOf this[i] === "Object" 就要对push的元素进行深拷贝
        }
    }
    return arr
}

var arr1 = [1, 2]
console.log(arr1.gFilter (function(item, index){
    return item > 1;
})) // [2]

some()

// some()
Array.prototype.gSome = function (fn) {
  let res
  for (let i = 0; i < this.length; i++) {
    res = fn(this[i], i, this)
    if (res) {
      break // 只要找到符合条件的 就打断循环
      // 同理 如果是Array.every() 只要有一个 item 调用的结果为 false 就打断循环 并return false
    }
  }
  return !!res
}


var arr1 = [1, 2, 3]
console.log(arr1 .gSome ((item, index) => {
  console.log(item)
  return item === 2
}))
//1
//2
//true

forEach()

// forEach()

Array.prototype.gForEach = function(fn){
    for(var i = 0; i < this.length; i ++){
        fn(this[i], i) // 直接通过回调回函操作原数组
        // 也是这个原因 相较于map()中是对新数组进行push操作
        // 在循环时若遇到空元素,foreach会直接跳过,而map会跳过后对其进行保留push进新数组
    }
}

var arr = [1, 2]
console.log(arr.gForEach (function(item, index){
    return item * 2;
})) // [2, 4]

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!