0216tool_xiaoye
Version:
叶永洁自定义工具函数库
139 lines (123 loc) • 5.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组声明式编程</title>
</head>
<body>
<script>
//自定义数组常用方法
Array.prototype.map = function (callback){
const arr = []
//遍历本来的数组(this),调用回调,添加到新数组中
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传入item,index,返回一个值
let result = callback(element,index)
arr.push(result)
}
//最终返回一个新数组
return arr
}
Array.prototype.reduce = function (callback,initValue){
//赋初始化给回调的第一个参数
let total = initValue
//遍历本来的数组(this),调用回调,
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传total,item,index,返回一个值
let result = callback(total,element,index)
//赋值给回调的第一个参数,达到累计效果
total = result
}
//最终返回一个值
return total
}
Array.prototype.filter = function (callback){
const arr = []
//遍历本来的数组(this),调用回调
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传入item,index,返回一个布尔值,true则添加
callback(element,index) ? arr.push(element) : null
}
//最终返回一个新数组
return arr
}
Array.prototype.find = function (callback){
//遍历本来的数组(this),调用回调
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传入item,index,
let result = callback(element,index)
// 回调返回值为true,则将该元素返回
if ( result ){
return element
}
}
return undefined
}
Array.prototype.findIndex = function (callback){
//遍历本来的数组(this),调用回调
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传入item,index,
let result = callback(element,index)
// 回调返回值为true,则将该下标返回
if ( result ) return index
}
return -1
}
Array.prototype.every = function (callback){
//遍历本来的数组(this),调用回调
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传入item,index,
let result = callback(element,index)
// 只要有假,直接返回false
if ( !result ) return false
}
//全部为真,才返回true
return true
}
Array.prototype.some = function (callback){
//遍历本来的数组(this),调用回调
for (let index = 0; index < this.length; index++) {
const element = this[index];
//传入item,index,
let result = callback(element,index)
// 回调返回true,
if ( result ) return true
}
return false
}
</script>
<script>
/*
1). map
2). reduce( )
3). filter()
4). find()
5). findIndex()
6). every()
7). some ( )
1.产生一个每个元素都比原来大10的新数组
2.得到所有奇数的和
3.得到值大于8且下标是偶数位的元素组成的数组
4.找出一个值大于8且下标是偶数位的元素
5.找出一个值大于8且下标是偶数位的元素的下标
6.判断下标为偶数的元素是否都为奇数
7.判断是否有下标为偶数的元素值为奇数
*/
const arr = [1,3,5,7,9,10]
console.log(arr.map(item => item + 10))
console.log(arr.reduce((pre,item,index)=> pre + (item % 2 === 1 ? item : 0),0))
console.log(arr.filter((item,index)=> item > 8 && index % 2 === 0))
console.log(arr.find((item,index) => item > 8 && index % 2 === 0))
console.log(arr.findIndex((item,index) => item > 8 && index % 2 === 0))
console.log(arr.every( (item,index) => index % 2 ===1 || ( index % 2 === 0 && item % 2 === 1 ) ))
console.log(arr.some( (item,index) => index % 2 ===1 || ( index % 2 === 0 && item % 2 === 1 ) ))
</script>
</body>
</html>