ES5 新增数组方法 ES6 新增数组方法
ES5 新增数组方法
| 对象调用的方法 | 作用 | 返回值 |
| --------------------------------------------------------- | --------------------------- | --------|
| array.forEach(function(item, index, array){}) | 遍历 | 无 |
| array.map(function(item, index, array){}) | 遍历&收集返回的项 | 新数组 |
| array.filter(function(item, index, array){ return 条件 }) | 过滤&保留return true的项 | 新数组 |
| array.reduce(function(sum, item, index, array) {}, 0) | 遍历&累计求和 | 累计结果 |
| array.every(function(item, index, array){ return 条件}) | 遍历&判断是否都满足条件 | 布尔值 |
| array.some(function(item, index, array){return 条件}) | 遍历&判断是否有某个满足条件 | 布尔值 |
| Array.from(伪数组) | 伪数组转真数组 | 真数组 |
ES6 新增数组方法
| 对象调用的方法 | 作用 | 返回值 |
| ------------------------------------------------------ | -------- | --------------------|
| array.find(function(item, index) { return 条件 }) | 遍历查找 | 找到的项 / undefined |
| array.findIndex(function(item, index) { return 条件 }) | 遍历查找 | 下标 / -1 |
let arr = [1, 5, 7, 3, 10, 2, 4]
// 1. forEach可以用于遍历一个数组, 每个元素都会执行一次函数
arr.forEach(function(item, index) {
console.log(item, index)
})
// 2. map() 映射, 遍历数组, 收集每次函数return的结果 - 返回全新数组
let resultArr = arr.map(function(item, index) {
return item * item
})
console.log(resultArr)
// 3. filter() - 过滤 - 遍历数组, 收集return true的结果, 返回一个新数组
let result2Arr = arr.filter(function(item, index) {
return item > 5
})
console.log(result2Arr)
// 4. reduce 累加运算 - 遍历数组,需要返回累加的值, 可以进行累加操作
// arr.reduce(function(sum, item, index) { .. }, 起始累加值)
let result3 = arr.reduce(function(sum, item, index) {
return sum + item
}, 0)
console.log(result3)
// 5. every 每个
// 作用: 遍历一个数组, 每个元素都会执行一次函数, 必须每次执行都返回true, 最终才会返回true
let flag = arr.every(function(item, index) {
return item > 0
})
console.log(flag)
// 6. some 某个
// 作用: 遍历一个数组, 每个元素都会执行一次函数, 只要有一次执行返回true, 结果就是true
let flag2 = arr.some(function(item, index) {
return item > 8
})
console.log(flag2)
// 7. Array.from(伪数组) 作用: 将伪数组转换成真数组
let divs = document.querySelectorAll('div')
Array.from(divs).some(function (item, index) {
if (item.className === 'active') {
return true
} else {
return false
}
})
// -----------------------------------------------------------
// 8. find 找第一个符合条件的项, 没找到会返回 undefined
let arr2 = [
{ name: 'zs', score: 100 },
{ name: 'ls', score: 99 },
{ name: 'zs', score: 100 }
]
let obj = arr2.find(function(item, index) {
return item.score === 100
})
console.log(obj)
// 9. findIndex 找第一个符合条件项的下标, 没找到会返回 -1
let index = arr2.findIndex(function(item, index) {
return item.score === 101
})
console.log(index)
arr.reduce(function(累计值, 当前元素){}, 起始值) 用于累计求和
<body>
<script>
// arr.reduce(function(累计值, 当前元素){}, 起始值) 用于累计求和
let arr = [20, 30, 50, 100, 80];
//从100开始累加
// const res = arr.reduce(function (prev, item) {
// // console.log(item); //每一项
// console.log(prev); //从哪一项开始加 默认值为0
// return prev + item;
// }, 100);
// 优化 简写
const res = arr.reduce((prev, item) => prev + item, 100);
console.log(res);
</script>
</body>
Array常用的方法
<body>
<script>
let arr = [
{
brand: "小米",
price: 1999,
},
{
brand: "华为",
price: 5999,
},
];
// find（）用于查找对象如果有返回要查找的那一项 否则返回undefined
const res = arr.find(function (item, index) {
console.log(item.brand);
return item.brand === "小米";
});
console.log(res);
// findIndex() 用于查找对象通过索引号查找 找到返回索引号 找不到返回-1
const res1 = arr.findIndex(function (item, index) {
return item.brand === "华为"; //找到下标为1
});
console.log(res1);
// every 返回的是布尔值 所有条件都满足返回true 否则返回false
let arr1 = [1, 3, 5, 6, 10, 20];
const flag = arr1.every(function (item, index) {
return item >= 1; //true
// return item <= 19; //false
});
console.log(flag);
</script>
</body>
forEach 就是遍历 加强版的for循环 适合于遍历数组对象
forEach没有返回值 没有return map可以return
<body>
<script>
/*
forEach 就是遍历 加强版的for循环 适合于遍历数组对象
forEach没有返回值 没有return map可以return
*/
// 被遍历的数组.foreach(function (当前数组元素每一项, 下标索引) {});
let arr = ["关羽", "姜维", "刘备", "吕布", "司马懿"];
// arr.forEach(function (item, index) {
// console.log(item);
// });
arr.forEach((item, index) => {
console.log(item);
});
</script>
</body>
filter：
语法： 被筛选的数组.filter(function(item数组中的每一项,index下标){})
作用： 过滤符合条件的数据 放在新数组中 有返回值
<body>
<script>
/*
语法： 被筛选的数组.filter(function(item数组中的每一项,index下标){})
作用： 过滤符合条件的数据 放在新数组中 有返回值
*/
let arr = [10, 30, 80, , 20, 100];
// const newArr = arr.filter(function (item, index) {
// // 把满足条件的return 出来
// // console.log(item);
// return item >= 30;
// });
// console.log(newArr);
// 方法2 优化简写
const newArr = arr.filter((item) => item >= 30);
console.log(newArr);
</script>
</body>
