code2021-l
Version:
前端自定义工具
154 lines (140 loc) • 5.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数组声明式方法</title>
</head>
<body>
<!-- <script src="../dist/190719-utils.js"></script> -->
<script>
Array.prototype.map = function(callback){
const arr = []
// 遍历当前数组中的每个元素，调用callback 得到一个结果数据，添加arr中
for (let index = 0; index < this.length; index++) {
const element = this[index];
const result = callback(element,index)
arr.push(result)
}
return arr
}
Array.prototype.reduce = function(callback, initValue){
// 结果为初始值
let total = initValue
// 遍历当前数组每个元素，调用callback得到一个累加的结果数据
for (let index = 0; index < this.length; index++) {
const element = this[index];
total = callback(total,element,index)
}
// 返回结果
return total
}
Array.prototype.filter = function(callback){
const arr = []
//遍历当前数组每个元素，调用callback得到一个布尔值，如果true ，将当前element添加到arr
for (let index = 0; index < this.length; index++) {
const element = this[index];
let result = callback(element,index)
if(result){
arr.push(element)
}
}
return arr
}
Array.prototype.find = function(callback){
//遍历当前数组每个元素，调用callback得到一个布尔值，如果true ，返回当前元素
for (let index = 0; index < this.length; index++) {
const element = this[index];
let result = callback(element,index)
if(result){
return element
}
}
return undefined
}
Array.prototype.findIndex = function(callback){
//遍历当前数组每个元素，调用callback得到一个布尔值，如果true ，返回当前下标
for (let index = 0; index < this.length; index++) {
const element = this[index];
let result = callback(element,index)
if(result){
return index
}
}
return -1
}
Array.prototype.every = function(callback){
//遍历当前数组每个元素，调用callback得到一个布尔值，一旦是false 返回 false
for (let index = 0; index < this.length; index++) {
const element = this[index];
let result = callback(element,index)
if(!result){
return false
}
}
return true
}
Array.prototype.some = function(callback){
//遍历当前数组每个元素，调用callback得到一个布尔值，一旦是true 返回 true
for (let index = 0; index < this.length; index++) {
const element = this[index];
let result = callback(element,index)
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 aUtils2 = {
// map (array, callback) {
// const arr = []
// for (let index = 0; index < array.length; index++) {
// const element = array[index];
// arr.push(callback(element, index))
// }
// return arr
// }
// }
const arr = [1, 3, 6, 9, 15, 19, 16]
// 1. 产生一个每个元素都比原来大10的新数组
console.log(arr.map((item,index) => item + 10))
// 2. 得到所有奇数的和
console.log(arr.reduce((preTotal, item ,index) => preTotal + (item%2 ===1 ? item : 0),0))
// 3. 得到值大于8且下标是偶数位的元素组成的数组
console.log(arr.filter((item, index) => index%2===0 && item > 8))
// 4. 找出一个值大于8且下标是偶数位的元素
console.log(arr.find((item, index) => item>8 && index%2 ===0))
// 5. 找出一个值大于8且下标是偶数位的元素的下标
console.log(arr.findIndex((item,index) => item>8 && index%2 ===0))
// 6. 判断下标为偶数的元素是否都为奇数
console.log(arr.every((item,index) => index%2===1 || (index%2===2 && item%2===1)))
// 7. 判断是否有下标为偶数的元素值为奇数
console.log(arr.some((item,index) => index%2===1 || (index%2===2 && item%2===1)))
</script>
<script>
</script>
</body>
</html>