Array的原型对象上方法实现

Posted 赏花赏景赏时光

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Array的原型对象上方法实现相关的知识，希望对你有一定的参考价值。

1、Array.prototype.includes(findVal, fromIndex)：查找某元素是否包含在数组中

入参：

findVal----要查找的元素，必填

fromIndex-----指定开始查找的索引位置，非必填，默认为0

返回结果：

boolean：true---元素包含在数组中，false-不包含

示例：[2,3,45].includes(2)----true        [2,3,45].includes(1)----false      [2,3,45].includes(3, 1)----true

<html>
  <body>
    <script>
      Array.prototype.includes = function (findVal, fromIndex) {
        if (!this) {
          return new TypeError('this is not defined')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let i = fromIndex || 0
        i = Math.max(i >= 0 ? i : len - Math.abs(i), 0)
        while(i < len) {
          if (o[i] === findVal) {
            return true
          }
          ++i
        }
        return false
      }
      let aa = [1, 4]
      console.log(aa.includes(4))
    </script>
  </body>
</html>

2、Array.indexOf(findVal, fromIndex)：从前往后查，返回元素在数组中第一次出现的位置

入参：

findVal---要查找的元素，必需

fromIndex---从指定的索引处开始查找，非必需，默认0

注意：fromIndex=Infinity,直接从第一位元素查起；fromIndex=负数，fromIndex + len = a，a<=0,则从第一位元素插起来；如果a>0&& a<len,则从a索引查起来；如果a>=len,返回-1

返回值：

元素包含在数组中，返回元素在数组中第一次出现的位置，否则返回-1

<html>
  <body>
    <script>
      Array.prototype.indexOf = function(findVal, fromIndex) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        let o = Object(this)
        let len = o.length >>> 0
        if (len === 0) {
          return -1
        }
        let i = +fromIndex || 0
        if (Math.abs(i) === Infinity) {
          i = 0
        }
        if (i >= len) {
          return -1
        }

        i = Math.max(i >= 0 ? i : len - Math.abs(i), 0)

        while(i < len) {
          if (o[i] === findVal) {
            return i
          }
          ++i
        }
        return -1
      }
      let aa = [3,2,4,6]
      console.log(aa.indexOf(4, 4))
    </script>
  </body>
</html>

3、Array.prototype.lastIndexOf(findVal, fromIndex)-----从后往前查，找到元素第一次出现的位置

findVal---要查找的元素，必需

fromIndex---从指定的索引处开始查找，非必需，默认0

注意：

返回值：

元素包含在数组中，返回元素在数组中第一次出现的位置，否则返回-1

<html>
  <body>
    <script>
      Array.prototype.lastIndexOf = function(findVal) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        let o = Object(this)
        let len = o.length
        if (len === 0) {
          return -1
        }
        let n = len - 1
        if (arguments.length > 1) {
          n = Number(arguments[1])
          if (n != n) {
            n = 0
          }
        }
        let k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n)
        while(k >= 0) {
          if (o[k] === findVal) {
            return k
          }
          k--
        }
        return -1
      }
      let aa = [3,2,4,6]
      console.log(aa.lastIndexOf(4, -1))
    </script>
  </body>
</html>

4、Array.prototype.find(fn,thisArg)----返回满足回调函数条件的第一个元素，否则返回undefined

入参：

fn----提供条件的函数，必需

thisArg----指定fn的作用域，非必需

返回值：返回满足条件的第一个元素，否则返回undefined

<html>
  <body>
    <script>
      Array.prototype.find = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a fucntion')
        }
        let o = Object(this)
        let len = o.length >>> 0
        if (len === 0) {
          return undefined
        }
        let thisArg = arguments[1]
        for (let i = 0; i < len; i++) {
          let val = o[i]
          if (fn.call(thisArg, o[i], i, o)) {
            return val
          }
        }
        return undefined
      }
      let aa = [3,2,4,6]
      console.log(aa.find(item => item > 4))
    </script>
  </body>
</html>

5、Array.prototype.findIndex(fn,thisArg)----返回满足回调函数条件的第一个元素的索引，否则返回-1

入参：

fn----提供条件的函数，必需

thisArg----指定fn的作用域，非必需

返回值：返回满足条件的第一个元素的索引，否则返回-1

<html>
  <body>
    <script>
      Array.prototype.findIndex = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        if (len === 0) {
          return -1
        }
        let thisArg = arguments[1]
        for (let i = 0; i < len; i++) {
          let val = o[i]
          if (fn.call(thisArg, val, i, o)) {
            return i
          }
        }
        return -1
      }
      let aa = [3,2,4,6]
      console.log(aa.findIndex(item => item > 4))
    </script>
  </body>
</html>

6、Array.prototype.map(fn(val, index, arr){}, thisArg)----返回新数组，数组里面的元素是调用fn后返回的值

入参：

fn----处理函数

thisArg----指定fn的作用域，非必需

返回值：返回新的数组，数组里面返回的元素是调用fn后的返回值

<html>
  <body>
    <script>
      Array.prototype.map = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        let o = Object(this)
        let len = o.length >>> 0
        if (len === 0) {
          return []
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let thisArg = arguments[1]
        let ret = []
        for (let i = 0; i < len; i++) {
          let val = o[i]
          let item = fn.call(thisArg, val, i, o)
          ret.push(item)
        }
        return ret
      }
      let aa = [3,2,4,6]
      console.log(aa.map(item => item + 1))
    </script>
  </body>
</html>

7、Array.prototype.filter(fn(val, index, arr){}, thisArg)----返回新数组，数组里面的元素是满足fn里面设置的条件的arr里面的值

入参：

fn----提供条件的函数

thisArg----指定fn的作用域，非必需

返回值：返回新数组，数组里面的元素是满足fn里面设置的条件的arr的值

<html>
  <body>
    <script>
      Array.prototype.filter = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let thisArg = arguments[1]
        let i = 0
        let ret = []
        if (len === 0) {
          return []
        }
        while(i < len) {
          let val = o[i]
          let flag = fn.call(thisArg, val, i, o)
          if (flag) {
            ret.push(val)
          }
          i++
        }
        return ret
      }
      let aa = [3,2,4,6]
      console.log(aa.filter(item => item > 2))
    </script>
  </body>
</html>

8、Array.prototype.filter(fn(val, index, arr){}, thisArg)----返回新数组，数组里面的元素是满足fn里面设置的条件的arr里面的值

入参：

fn----提供条件的函数

thisArg----指定fn的作用域，非必需

返回值：返回新数组，数组里面的元素是满足fn里面设置的条件的arr的值

<html>
  <body>
    <script>
      Array.prototype.filter = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let thisArg = arguments[1]
        let i = 0
        let ret = []
        if (len === 0) {
          return []
        }
        while(i < len) {
          let val = o[i]
          let flag = fn.call(thisArg, val, i, o)
          if (flag) {
            ret.push(val)
          }
          i++
        }
        return ret
      }
      let aa = [3,undefined,4,6]
      console.log(aa.filter(item => item > 2))
    </script>
  </body>
</html>

9、Array.prototype.forEach(fn(val, index, arr){}, thisArg)----对数组的每一个元素都调用fn方法，返回undefined

入参：

fn----对每一个元素调用的函数，必需

thisArg----指定fn的作用域，非必需

返回值：返回undefined

<html>
  <body>
    <script>
      Array.prototype.forEach = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let thisArg = arguments[1]
        let i = 0
        if (len === 0) {
          return undefined
        }
        while(i < len) {
          let val = o[i]
          fn.call(thisArg, val, i, o)
          i++
        }
        return undefined
      }
      let aa = [3,2,4,6]
      let ret = 0
      console.log(aa.forEach(item => {
        ret += item
      }))
      console.log('ret: ', ret)
    </script>
  </body>
</html>

10、Array.prototype.every(fn(val, index, arr){}, thisArg)----对数组的元素调用fn方法，如果每次调用都返回true，则返回true；否则有一个返回false，就直接返回false

入参：

fn----对每一个元素调用的函数，必需

thisArg----指定fn的作用域，非必需

返回值：根据fn函数，测试数组每一个元素是否满足条件，如果都满足则返回true；否则有一个返回false，就直接返回false

注意：如果arr是一个[]，则直接返回true

<html>
  <body>
    <script>
      Array.prototype.every = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let thisArg = arguments[1]
        let i = 0
        if (len === 0) {
          return true
        }
        while(i < len) {
          let val = o[i]
          if (!fn.call(thisArg, val, i, o)) {
            return false
          }
          i++
        }
        return true
      }
      let aa = [3,2,4,6]
      let ret = 0
      console.log(aa.every(item => item < 10))
    </script>
  </body>
</html>

11、Array.prototype.some(fn(val, index, arr){}, thisArg)----对数组的元素调用fn方法，如果遇到满足条件的元素时，则返回true；如果元素都不满足条件，就返回false

入参：

fn----数组元素调用的函数，必需

thisArg----指定fn的作用域，非必需

返回值：对数组的元素调用fn方法，如果遇到满足条件的元素时，则返回true；如果元素都不满足条件，就返回false

注意：如果arr是一个[]，则直接返回false

<html>
  <body>
    <script>
      Array.prototype.some = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let thisArg = arguments[1]
        let i = 0
        if (len === 0) {
          return false
        }
        while(i < len) {
          let val = o[i]
          if (fn.call(thisArg, val, i, o)) {
            return true
          }
          i++
        }
        return false
      }
      let aa = [3,2,4,6]
      let ret = 0
      console.log(aa.some(item => item > 5))
    </script>
  </body>
</html>

12、Array.prototype.reduce(fn(accumulator,item, index, arr){},initVal)----对数组的元素从左到右调用fn，并将结果汇总为一个返回值

入参：

fn----数组元素调用的函数，必需；accumulator汇总值的变量

initVal----给accumulator的初始化的值，非必需

返回值：对数组的元素从左到右调用fn，将结果汇总返回

注意：

如果arr是一个[]，并且没有提供initVal，则抛错

如果arr是[]，有提供initVal，则返回initVal的值

如果arr不是[]，并且没有提供initVal，则arr的第一个元素的值作为accumulator的初始值，并从arr的第二个元素开始处理

<html>
  <body>
    <script>
      Array.prototype.reduce = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let k = 0
        let val
        if (arguments.length >= 2) {
          val = arguments[1]
        } else {
          if (k >= len) {
            return new TypeError('reduce with a empty array, and initVal is not defined')
          }
          val = o[k++]
        }
        while(k < len) {
          val = fn(val, o[k], k, o)
          k++
        }
        return val
      }
      let aa = [1,2,3]
      let ret = 0
      console.log(aa.reduce((result, item) => result += item, 0))
    </script>
  </body>
</html>

13、Array.prototype.reduceRight(fn(accumulator,item, index, arr){},initVal)----对数组的元素从右到左调用fn，并将结果汇总为一个返回值

入参：

fn----数组元素调用的函数，必需；accumulator汇总值的变量

initVal----给accumulator的初始化的值，非必需

返回值：对数组的元素从右到左调用fn，将结果汇总返回

注意：

如果arr是一个[]，并且没有提供initVal，则抛错

如果arr是[]，有提供initVal，则返回initVal的值

如果arr不是[]，并且没有提供initVal，则arr的第一个元素的值作为accumulator的初始值，并从arr.length - 2位置的元素开始处理

<html>
  <body>
    <script>
      Array.prototype.reduceRight = function(fn) {
        if (!this) {
          return new TypeError('this is undefined')
        }
        if (typeof fn !== 'function') {
          return new TypeError('fn must be a function')
        }
        let o = Object(this)
        let len = o.length >>> 0
        let k = len - 1
        let val
        if (arguments.length >= 2) {
          val = arguments[1]
        } else {
          if (k >= len) {
            return new TypeError('reduce with a empty array, and initVal is not defined')
          }
          val = o[k--]
        }
        while(k >= 0) {
          val = fn(val, o[k], k, o)
          k--
        }
        return val
      }
      let aa = []
      let ret = 0
      console.log(aa.reduce((result, item) => result += item, 0))
    </script>
  </body>
</html>

 

参考文章：

MDN上关于array的方法polyfill：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

 

 

 

 

以上是关于Array的原型对象上方法实现的主要内容，如果未能解决你的问题，请参考以下文章

js里面的对象继承几种方法

内置对象Array的原型对象中添加方法

javascript原型，原型链 有啥特点

ECMAScript5Array对象

在Array的原型上实现数组的去重

javaScript的Array方法