用于数据可视化
1、forEach() 方法
遍历作用 加强版本的for循环 针对于数组
各个参数意义
list.forEach( function(ele,index,self) {
console.log(ele,index,self,this);
},document.getElementsByTagName('li'));
参数 //ele 数组每一项
//index 序列号
//self 数组本身
//this 没有第二个参数window 有第二个参数指向
封装实现forEach
Array.prototype.myForEach = function(fun) {
var _arr = this,
len = _arr.length,
param2 = arguments[1] || window;
for(var i = 0; i < len; i++) {
fun.apply(param2,[_arr[i],i,_arr])
}
}
list.myForEach( function(ele,index,self) {
console.log(ele,index,self,this);
this[index].innerText = ele.title
},document.getElementsByTagName('li'));
2、filter() 过滤 返回满足条件的新数组
该方法就返回一个布尔值 依据布尔值进行数据处理
//过滤 通过返回值的真假返回满足条件的项目
var newArr = list.filter(function(ele,index,self) {
console.log(ele,index,self,this);
return true
},[1,2,2])
console.log(newArr);
封装filter函数()
Array.prototype.myFilter = function(fun) {
var _arr = this,
len = _arr.length,
param2 = arguments[1] || window,
newArr = [];
for(var i = 0; i <len; i ++) {
fun.apply(param2,[_arr[i],i,_arr]) ? newArr.push(_arr[i]) : ''
}
return newArr
}
3、map()方法 哈希映射 返回新的数组
x ------------- --->一定规则---------------> y 注意该方法是在原数组的基础上进行处理 会改变原数组 注意使用时造成后续错误
var neewArr = list.map(function(ele,index,self) {
console.log(ele,index,self,"--------",this);
// 此处对数组元素进行处理 会导致原数组发生改变 慎重(没有将原数组复制,而是在原数组基础上进行改变
ele.name = ele.name + 'pp'
return ele.name
})
//返回值是选取元素组成的新数组
// console.log(neewArr);
封装map方法
// 封装map方法
Array.prototype.myMap = function (fun) {
var _arr = this,
len = _arr.length,
param2 = arguments[1] || window,
newArr = []
for (var i = 0; i < len; i++) {
newArr.push(fun.apply(param2, [_arr[i], i, _arr]))
}
return newArr
}
list.myMap(function (ele, index, self) {
console.log(ele,index,self,this);
},{name:'taotao'})
4、every()方法 最终的返回值为布尔值 false 、true 注意区分filter方法
//只要有一个不满足条件就终止循环,区别于for 如果每一项返回值为true最终返回值为true 否则 false
var flag = arr.every(function(ele,index,self){
console.log(ele,'--------->',index,'------>',self,this);
return 1
})
封装every方法
Array.prototype.myEvery = function(fun) {
var _arr = this,
len = _arr.length,
param2 = arguments[1] || window,
flag = true
for(var i = 0;i < len; i ++) {
//fun.apply 取得是该函数的执行结果
if(!fun.apply(param2,[_arr[i],i,_arr])) {
flag = false
break
}
}
return flag
}
5、reduce()方法
var initialValue = {name:'wtt'}
//返回一个值 第一个参数函数 第二个参数必填 initialValue 函数执行多少次取决于数组大小
//第一个参数函数必须要有返回值 将会作为下一次比较的preValue的值
var lastValue = arr.reduce(function(pre,cur,index,self) {
console.log(pre,cur,index,self,this);
return 999
//注意该方法this指向不可以改变
},initialValue,{dom:'dom'})
封装reduce()方法
Array.prototype.myReduce = function(fun,initialValue) {
var _arr = this,len = _arr.length,param2 = arguments[2] || window
for(var i = 0; i < len; i ++){
initialValue = fun.apply(param2,[initialValue,_arr[i],i,_arr])
}
return initialValue
}