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的原型对象上方法实现的主要内容，如果未能解决你的问题，请参考以下文章
给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目（可能有多个），返回值是一个包含被删除的重复条目的新数组