For data visualization
1, forEach () method
Traversing the role of enhanced version of the for loop in array against
Significance of various parameters
list.forEach( function(ele,index,self) {
console.log(ele,index,self,this);
},document.getElementsByTagName('li'));
参数 //ele 数组每一项
//index 序列号
//self 数组本身
//this 没有第二个参数window 有第二个参数指向
Package achieve 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 () returns the filter to meet the conditions of the new array
This method returns a boolean value based on the data processing Boolean
//过滤 通过返回值的真假返回满足条件的项目
var newArr = list.filter(function(ele,index,self) {
console.log(ele,index,self,this);
return true
},[1,2,2])
console.log(newArr);
Package filter function ()
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 () method returns a new array hash map
x ------------- ---> certain rules ---------------> y Note that the processing method is changed will be on the basis of the original array Note that the original array causes subsequent errors when using
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);
The method of packaging 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 () method returns a Boolean value of the final false, true distinction filter method
//只要有一个不满足条件就终止循环,区别于for 如果每一项返回值为true最终返回值为true 否则 false
var flag = arr.every(function(ele,index,self){
console.log(ele,'--------->',index,'------>',self,this);
return 1
})
The method of packaging 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 () method
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'})
Package reduce () method
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
}