Js find,filter,some,every,reduce,forEach,map,for...in,for...of方法介绍

const user = [
    { age: 28, name: 'zhangsan' },
    { age: 25, name: 'lisi' },
    { age: 97, name: 'wangmazi' },
    { age: 8, name: 'zhaoliu' },
    { age: 32, name: 'wangwu' },
    { age: 28, name: 'jack' },
    { age: 47, name: 'tom' }
];

const ages = [28, 97]

1、find

//返回符合条件的第一个值，如果没有符合条件的元素返回 undefined

//参数：item 当前遍历到的元素。index可选 当前遍历到的索引。 array可选 数组本身。
const value = user.find((item,index,user) => item.age == 28);
console.log(value); 
// {age: 28, name: "zhangsan"}

2、filter

//返回符合条件的数组，如果没有，则返回空数组

//参数：item 当前遍历到的元素。index可选 当前遍历到的索引。 array可选 数组本身。thisValue(不常用) 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
const value = user.find((item,index,user) => item.age == 28);
console.log(value); 
//[{age: 28, name: "zhangsan"},{age: 28, name: "jack"}]


//thisValue 例子
const filteredData = user.filter(function (value) {
  console.log(value)
    for (var i = 0; i < this.length; i++) {
        if (this[i] === value.age) {
            return true;
        }
    }
    return false
}, ages);

console.log(filteredData)
//[{age: 28, name: "zhangsan"},{age: 97, name: "wangmazi"},{age: 28, name: "jack"}]

3、forEach

// 对数组的每一个元素执行一次方法，不能退出

//参数：item 当前遍历到的元素。index可选 当前遍历到的索引。 array可选 数组本身。thisValue(不常用) 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
user.forEach((item) => console.log(item));

//注意：forEach能修改当前元素的对象属性，但不能修改当前元素的值(不能修改基本类型的)

4、map

//返回一个新数组，数组中的元素为原始数组元素执行方法后的值。不能退出

//参数：item 当前遍历到的元素。index可选 当前遍历到的索引。 array可选 数组本身。thisValue(不常用) 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
const agesCopy = ages.map((item) => {return ++item});
console.log(agesCopy)
//[29，98]

5、some

// 返回一个boolean值，用来检测是否有符合条件的元素。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false

//参数：item 当前遍历到的元素。index可选 当前遍历到的索引。 array可选 数组本身。thisValue(不常用) 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
const age = user.some(item => item.age === 28)
console.log(age)
//true

6、eveny

// 返回一个boolean值，用来检测所有元素是否都符合指定条件。如果有一个元素不满足条件，则表达式返回false, 剩余的元素不会再执行检测。如果全部满足条件，则返回true

//参数：item 当前遍历到的元素。index可选 当前遍历到的索引。 array可选 数组本身。thisValue(不常用) 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
const age = user.every(item => item.age === 64)
console.log(age)
//false

7、reduce

//接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

//参数:acc 累计器,cur(当前值),idx (当前索引),src(源数组)
const total = user.reduce((acc,cur,idx,user) => {return acc + cur.age},0)
console.log(total)
//265

7、for of

//for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

for (const age of ages) {
    console.log(age);	
}
// 28 97

8、for in

//for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

const obj = { age: 28, name: 'zhangsan' }
for (const i in obj) {
    console.log(obj[i]);
}	// 28 zhangsan

//注意：for...in不应该用于迭代一个 Array，其中索引顺序很重要。（不推荐用于数组）
例：    
	const arr = new Array('aaa', 'bbb', 'ccc', 'ddd')
    Array.prototype.eee = 'eee'
    for (var i in arr) {
      console.log(arr[i])
    } 
	// aaa, bbb, ccc, ddd, eee
    //for ... in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。

欢迎评论，如有错误请指出