七、数组中内置对象（forEach,map,filter）

数组对象

forEach
语法： 变量名arr.forEach(实参)
留心1： forEach 注意大小写
留心2： 实参是一个函数
↓
变量名arr.forEach(function(item, index, arr) {//1个实参，这个实参是函数类型有3个形参
// item 就是数组中的值
// index 就是数组的索引/下标
// arr 就是这个数组本身（可选 忽略没有用
})

流程：arr.forEach是怎么跑的 （非常重要
举栗：var arr = [‘a’, ‘b’]
语法：
arr.forEach(function(item, index) {
// 语法会遍历数组，将数组中的每个值挨个赋值给item和index
// 第一次 将 字符串a赋值给item变量 、将 下标0赋值给 index变量
// 第二次 将 字符串b赋值给item变量、 将 下标1赋值给 index变量
// 第三次 退出
})

• 作用：遍历（挨个）输出数组中的值
• 需求：通过forEach语法遍历 var arr = [“神龙教主”, “webopenfather”, “千锋刘德华”]
• 案例：

<script>
// 初始化
var arr = ["神龙教主", "webopenfather", "千锋刘德华"]

// 遍历
// 强调 forEach是官方内置方法，有一个实参
// 这个实参是函数类型，你就记得有两个形参就行
arr.forEach(function(item, index) {
    // item就是数组中的每个值
    // index是数组的下标
    console.log(item, index)
})
</script>

map
语法：
var newArr = 变量名arr.map(function(item, index, arr) { // arr可选 所以忽略

// item 数组的值
// index 数组的下标

// 脚下留心：【新数组】里面的值 就是这边return  
// 思考：return不写会怎么样？
// 回答：则默认return undefined  也就意味着新数组中值是undefined
return 值

// return 原理： newArr.push(值/undefined)

}) // map有一个实参
作用：【修改】数组中的值，得到一个新数组（注：新数组的长度100%等于旧数组
应用：react大量使用

// 初始化
var arr = ["神龙教主", "webopenfather", "千锋刘德华"]

// 遍历
var newArr = arr.map(function(item, index){
    // console.log(item, index)
    // 发现：输出的结果和forEach一毛一样
    // 思考：有什么区别
    // 回答：应用场景不同
    // 明确：forEach是用来代替for遍历数组的
    // 这边：map不是为了【遍历数组】而是【过滤数据数据】
    // 得到：过滤后的数据
    // 因此：用forEach不要接受数据，map就必须声明变量接受最终过滤后的数组

    // 需求：过滤给每个值加li标签
    // 明确：你react技术写项目就是为了给值加标签
    return '<li>'+item+'</li>'
})

console.log(newArr)  

filter
语法：同map
var newArr = arr.filter(function(item, index) { // filter是一个函数 有一个实参 这个实参也是函数
// item 就是数组中的值
// index 就是数组的下标
})

filter用来过滤数据：如果你有10个数据，你判断过滤 可能是10个、也可能是5等。 结合生活案例（淘米

filter和map区别

1. map函数原来有5个数据最终还是5个【修改】，filter原来5个最终不能确定【过滤】
2. map是压入新数据因为修改，filter压入当前数据因为它只是为了过滤数据

举个栗子：有一个数组里面存放了学生信息，思考我需要找出大于30岁的学生 选filter
作用：【过滤】数组中的值，得到一个新数组（注：新数组的长度100%小于等于旧数组
需求：找出大于30岁学生

<script>
var stuArr = [
    {id:1, name:"神龙教主", age: 18},
    {id:2, name:"童林", age: 98},
    {id:3, name:"胃痒", age: 998}
]

var newArr = stuArr.filter(function(item, index){
    // item 是数组中的每个值  对象

    // 留心：在filter中 只有你return了才会push 否则不会
    // 留心：只会返回当前值  
    if (item.age > 30) return item
})

console.log(newArr)
</script>

小总结
forEach、map、filter如何选择？
仅仅为了遍历数组 forEach
需要操作数组数据（修改里面值、删除等：map、filter）

map和filter如何选？
修改数据 map
过滤数据 filter