es6/es5数组方法 find findIndex some every includes map forEach filter from of reduce/reduceRight

from of

from of解析

find 查找元素

用于查找出第一个符合条件的数组成员，没有就返回 undefined
测试函数参数 index:数组索引 item:index索引对应的值 arr:遍历的数
传递 this 参数 箭头函数this传递无效

// 判断数组中是否有name等于app
let arr = [
	{name:'app',cun:2},
	{name:'wxxcx',cun:3},
	{name:'app',cun:5}
]
arr.find((item,index,arr)=>{  // 有返回 {name:'app',cun:2}  否则返回 undefined
	// console.log(item,index,arr)
	if(item.name === 'app'){
		return true //结束遍历
	}
})

arr.find((item,index,arr)=>{  // 有 返回 item  否则返回 undefined
	// console.log(item,index,arr)
	if(item.name === 'app'){
		return item //结束遍历
	}
})

// 简写
// arr.find(item=>item.name === 'app')

// 传递 this 参数
arr.find(function(item,index,arr){ 
	console.log(this);// this指向 window
})

let obj = {name:'obj'}
arr.find(function(item,index,arr){ 
	console.log(this);// this指向 obj
},obj)

模拟系统实现

Array.prototype.myFind = function(callback){
	for(var i = 0; i < this.length; i++){
		if(callback(this[i],i,this)){
			return this[i]
		}
	}
}

findIndex 查找元素

用于查找出第一个符合条件的数组成员的位置，没有就返回 -1
效果 参数同上find
返回 索引

let arr = [
	{name:'app',cun:2},
	{name:'wxxcx',cun:3},
	{name:'app',cun:5}
]
arr.findIndex((item,index,arr)=>{ 
	console.log(item,index,arr);
	return item.cun === 3
})
// 1

模拟系统实现

Array.prototype.myFindIndex = function(callback){
	var j = -1
	for(var i = 0; i < this.length; i++){
		if(callback(this[i],i,this)){
			return i
		}
	}
	return j
}

some 数组遍历

用于查找数组中是否有满足条件的元素
参数同上find
this 参数 同上find
如果有一个满足条件的值则返回true 终止循环 没有就返回 false

let arr = [
	{name:'zfcxcx',cun:-1},
	{name:'app',cun:2},
	{name:'wxxcx',cun:3},
	{name:'web',cun:5}
]
arr.some((item, index, arr)=> item.cun > 0 );//true

every 数组遍历

空数组 一切情况下都会返回 true。
this 参数 同上find
参数同上find
返回布尔值，如果所有数组项都满足条件则返回true

let arr = [
	{name:'app',cun:2},
	{name:'wxxcx',cun:3},
	{name:'app',cun:5}
]
arr.every((item, index, arr)=> item.cun > 3 );// false

includes 数组遍历

注意：对象数组不能使用includes方法来检测。
判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

let arr = [1,2,5]
arr.includes(1);//true
arr.includes(4);//false
arr.includes(2,1);//true  从1 索引处开始查找 2

es5使用indexOf 返回数字

['01','02','03'].indexOf('02') // 1 

map 数组映射

map (回调函数,this指向) 返回一个新的数组

value数组当前项的值, index 索引, arr数组本身

let obj = {name:'obj'}
let arr = [70,56,89,99,68]
let arrMap = arr.map(function(val, key, arrs){
	return val > 60 ? '及格':'不及格'
},obj)

reduce

对数组中所有内容进行汇总

let arr = [70,56,89]
// preValue 上一次返回的值 value 当前项的值
// 返回最后一次的 preValue
let he = arr.reduce((preValue, value, index, arr)=>{
	// 	   preValue, 		value 
	// 1.  初始化值0 	 	70
	// 2.  第一次返回的值 	56
	// 3.  第二次返回的值 	89
	return 1 // preValue+value  preValue*value
},0) //初始化值

// 如果没有初始化值 第一步的返回值会被当做初始值 回调函数会执行 arr.length - 1 次

// he 1

自定义实现

Array.prototype.myReduce = function(fun, initVal)(
	let len = this.length
	for(var i = 0; i < len; i++){
		initVal = fun(initVal, this[i], i, this)
	}
)

reduceRight

和reduce方法一样 reduceRight方法重最后一项开始 reduce重第一项开始

forEach 数组遍历

forEach(回调函数,this指向)
value数组当前项的值, index 索引, arr数组本身, this指向

var arr = [1,2,3]
arr.forEach(function(value, index, arr){
	// 执行 arr.length 遍 this -> obj
},obj)  // 不传this指向window

自定义实现

Array.proototype.myForEach = function(fun, obj){
	let len = this.length
	let _this = obj || window
	for(let i = 0; i < len; i++){
		fun.call(_this, this[i], i, this)
	}
}

filter 对数组进行过滤

filter(回调函数,this指向) 返回一个新的数组
value数组当前项的值, index 索引, arr数组本身
当返回true的时候 把当前项的值 添加到新的数组

var arr = [1,2,3]
var f = arr.filter(function(value, index, arr){
	return value > 2  
})
f// [3]

keys

values

entries