数组对象
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区别
- map函数原来有5个数据最终还是5个【修改】,filter原来5个最终不能确定【过滤】
- 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