1. map 方法
- 数组map方法作用: 映射数组
说人话：按照某种映射关系, 把数组的每一个元素给修改了 - map方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
- return 新数组的元素
- 如果没有return, 则map的返回值都是undefined
2.3 map方法的返回值
- 返回映射之后的新数组
<script>
// 需求：全场8折: 数组的每一个元素 * 0.8
let arr = [ 88,90,100,20,50 ]
// 完整写法
let res = arr.map( (item,index) => {
return item*0.8
} )
console.log(res); // [70.4, 72, 80, 16, 40]
// 箭头函数如果形参只有一个可以省略小括号， 如果函数体只有一行可以省略大括号(必须省略return)
let res1 = arr.map( item=>item*0.8 )
console.log( res1 ) // [70.4, 72, 80, 16, 40]
</script>
复制代码2. filter 方法
- 数组 filter 方法
作用: 筛选数组
- filter 方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
- return true : 符合筛选条件,放入新数组中
- return false : 不符合筛选条件,不放入新数组中
2.3 filter 方法的返回值
- 返回筛选之后的新数组
<script>
// 需求: 求数组中所有大于 10 的元素
let arr = [88, 99, 1, 5, 100];
// 1. 完整写法
let res = arr.filter((item, index) => {
// console.log(item); // 88,99,1,5,100
if (item >= 10) {
return true;
} else {
return false;
}
});
console.log(res); // [88, 99, 100]
// 2. 精简写法
let res1 = arr.filter((item) => item >= 10);
console.log(res1); // [88, 99, 100]
</script>
复制代码3. forEach 方法
- 数组forEach方法作用: 遍历数组
- 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致
- for Each方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
- 没有返回值
2.3 forEach方法的返回值
- 没有返回值
<script>
let arr = [60,88,99]
arr.forEach((item,index)=>{
console.log(item,index) // 60 0 88 1 99 2
})
</script>
复制代码4. some 方法
- 数组some方法作用: 判断数组中 是否 有符合条件 的元素
- 应用场景: 非空判断（判断多个表单元素，有没有空文本）
- some方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
- return true : 循环结束。 找到了满足条件的元素
- return false : 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是false
2.3 some方法的返回值
- true : 有符合条件的元素
- false : 没有符合条件的元素
<script>
* 举例 ： 判断数组中有没有负数
let arr = [10,20,50,60,70,80]
// 标准写法
// let res = arr.some((item,index)=>{
// if( item < 0 ){
// return true
// }else{
// return false
// }
// })
//简写
let res = arr.some(item=>item < 0)
console.log( res ) // false
</script>
复制代码5. every 方法
- 数组every方法作用: 判断数组中 是否 所有的元素 都 满足条件
- 应用场景: 开关思想 (购物车全选框)
- every方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
- return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
- return false : 循环结束。 只要要到不满足条件的元素，循环结束。最终的结果false
2.3 every方法的返回值
- true : 所有的元素 都符合条件
- false : 有元素 不符合条件
<script>
* 举例 ： 判断数组中是不是都是正数
let arr = [10,20,50,60,70,80]
//标准写法
let res = arr.every((item,index)=>{
if( item >= 0 ){
return true
}else{
return false
}
})
console.log(res) // true
// 简写
let res1 = arr.every(item=>item >= 0)
console.log( res1 ) // true
</script>
复制代码6. findIndex 方法
- 数组 findIndex方法作用: 查找 元素的下标
- 数组的 findIndex 与 indexOf 异同点
相同点：功能一致，都是查找元素下标。 有则返回下标，无则返回固定值-1
不同点：应用场景不同
indexOf : 查找数组中的元素都是 值类型
findIndex : 查找数组中的元素都是 引用类型
- findIndex方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
- return true : 循环结束。 找到了,此时返回值就是 下标
- return false : 循环继续。没找到，循环继续。如果所有元素全部遍历还是没找到, 最终结果就是 -1
2.3 findIndex 方法的返回值
- 元素下标 或者 -1
<script>
let arr = [
{name:'张三',age:20},
{name:'李四',age:18},
{name:'王五',age:16},
]
//需求：找名字为王五的人在哪里
let res = arr.findIndex(item=>{
if( item.name == '老五' ){
return true
}else{
return false
}
})
console.log(res); // -1
//简写
let res1 = arr.findIndex(item=>item.name == '王五')
console.log(res1) // 2
</script>
复制代码7. reduce 方法
- 数组reduce方法 : 数组 累加器 方法
- 对数组每一个元素执行一次回调函数 , 累加最后一次回调的结果
- 参数
第一个参数：回调 ( 上一次值 , 当前值 , 当前下标 )=>{ }
- 默认下标不是从0开始，而是从1开始。 开发中一般需要设置默认值
- return 值 就是下一次 sum的值
第二个参数: 初始值
- 一般需要设置 初始值为 0, 如果不设置遇到空数组则会报错
reduce方法返回值是 ： 最后一次 sum 的结果
<script>
// 需求: reduce场景: 数组元素求和、求数组元素最大值
let arr = [20,55,60]
let res = arr.reduce( ( sum,item,index )=>{
console.log( sum,item,index) // 0 20 0 20 55 1 75 60 2
return sum + item
} , 0 )
console.log(res); // 135
//简写
let res1 = arr.reduce( ( sum,item )=>sum + item , 0 )
console.log( res1 ) // 135
</script>
复制代码8. from 方 法
伪数组 转 真数组
<script>
// 伪数组 本质是 :对象
let obj = {
0: 88,
1: 66,
2: 33,
3: 11,
length: 4,
};
console.log(obj); // {0: 88, 1: 66, 2: 33, 3: 11, length: 4}
// 伪数组转真数组 Array.from(伪数组)
console.log(Array.from(obj)); // [88, 66, 33, 11]
</script>
复制代码9. join 方法
join() 方法将一个数组（或一个类数组对象）的 所有元素 连接成 一个字符串 并返回这个字符串。如果数组只有一个项目，那么将返回 该项目 而不使用分隔符。
arr.join ( '分隔符' ) : 把数组 每一个元素 拼接 成 字符串
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join(''); // myVar4的值变为"WindRainFire"
复制代码10. find 方法
find() 方法返回数组中满足提供的测试函数的 第一个元素 的 值。否则返回 undefined。
const arr = [5, 12, 8, 130, 44];
const res = arr.find(item => item > 10);
console.log(res); // 12
复制代码11. includes 方法
includes() 方法用来判断一个数组 是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
const array1 = [1, 2, 3];
console.log(array1.includes(2)); // true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true
console.log(pets.includes('at')); // false本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
