ES5之数组遍历七大方法
* 方法1 : forEach 遍历数组, 等同于 for(但是性能没有for好)
* 返回值 : 没有返回值
// var arr = ['zs', 'ls', 'ww']
// item : 数组里的每一个元素 (最最多)
// index : 数组元素的下标/索引 (很少用)
// array : 数组 本身
// arr.forEach(function ( item,i,array ) {
// console.log(item+'666', i);
// console.log(array);
// })
* 方法2 : map (映射 一对一 ) 遍历数组, 根据数组里的每一项,把处理之后的数据返回给数组
注意点 : (原数组和处理之后的数组元素个数是一致的)
* 和 forEach的区别 : forEach没有返回值, map有返回值,并且返回的是 数组(数组是新数组,个数和之前的一样),
* 返回值 : 有返回值,数组, (个数和之前的一样)
// var arr = ['zs','ls','ww']
// var newArr = arr.map(function(item) {
// console.log(item);
// return item +'666'
// })
// console.log(newArr);
* 方法3 : filter (过滤)
* 说明 : 遍历数组,过滤出来符合条件的元素,放到一个新数组里面
* 返回值 : 有返回值的 数组, (个数和之前的不一定一样)
// var arr = [
// { id : 1, name : 'zs', done : true },
// { id : 2, name : 'ls', done : false },
// { id : 3, name : 'ww', done : false }
// ]
// 需求1 : 过滤出来完成任务的 (done==true)
// return 条件
// arr = arr.filter(function(item) {
// return item.done == true
// return item.done
// })
// console.log(arr);
// 需求2 : 过滤出来未完成任务的 (done ==false)
// arr = arr.filter(function (item) {
// return item.done == false
// return !item.done
// })
// 1. forEach 等同于 for
// 2. map (映射) 有返回值 数组个数和之前相同
// 3. filter(过滤) 有返回值 数组个数和之前的可能不同
* 方法4 : some (一些)
* 说明 : 遍历数组, 判断是否有一个以上(>=1)符合条件的元素都会返回true,否则返回 false(一个都没有)
* 返回值 : 有
// var arr = [
// { id : 1, name : 'zs', done : false },
// { id : 2, name : 'ls', done : false },
// { id : 3, name : 'ww', done : false }
// ]
// 判断是否有一个以上完成任务的
// var b = arr.some(function (item) {
// return item.done
// })
// console.log(b);
* 方法5 : every (每一个 都)
* 说明 : 判断是否`每一个都(全部)`符合条件, 如果全部 满足 => true/ false
* 返回值 : true/false
// var arr = [
// { id : 1, name : 'zs', done : true },
// { id : 2, name : 'ls', done : true },
// { id : 3, name : 'ww', done : true }
// ]
// 判断是否任务 都完成了 (done == true)
// var b = arr.every(function (item) {
// return item.done
// })
// console.log(b);
//4. some 判断是否 `有一个以上` 满足条件, true /false
//5. every 判断是否 `全部` 满足条件 true/ false
=========================================================================================================
* 方法6 : find (查找)
* 说明 : 遍历数组 , 查找符合条件的元素
* 返回值 : 只有一个 默认第一个 (找不到undefined)
// var arr = [
// { id : 1, name : 'zs', done : false },
// { id : 2, name : 'ls', done : true },
// { id : 3, name : 'ww', done : true }
// ]
// 需求1 : 查找 id 为 2 的元素
// var obj = arr.find(function (item) {
// return item.id == 2
// })
// 需求2 : 查找 完成任务的
// var res = arr.find(function (item) {
// return item.done
// })
// console.log(res);
* 方法7 : findIndex (查找索引下标)
* 说明 : 遍历数组, 查找符合条件元素的下标
* 返回值 : 默认返回一个
var arr = [
{ id : 3, name : 'ww', done : true },
{ id : 1, name : 'zs', done : false },
{ id : 2, name : 'ls', done : true }
]
// 需求1 : 找到 id = 3 的下标
var i = arr.findIndex(function (item) {
return item.id == 3
})
console.log(i);
// 需求2 : 找 任务完成的下标
var i = arr.findIndex(function (item) {
return item.done
})
console.log(i);
=========================================================================================================
* ES5中遍历数组的7个方法
* 1. forEach
* 2. map (映射) 有返回值(数组), 个数和之前的一样
* 3. filter (过滤) 有返回值(数组) 个数和之前的可能不一样
*
* 判断
* 4. some 判断是否有一个以上(>=1)满足条件的 true/false
* 5. every 判断是否都满足条件. true / false
* 查找
* 6. find : 查找满足条件的的一个元素 (找不到undefined)
* 7. findIdex : 查找满足条件的一个索引
* 其他 :
* 1. forEach 没有return ,没有返回值
* 2. 其他都是有return ,有返回值
========================================================================================================
ES6的箭头函数 && ES5遍历数组的七个方法,综合使用!!!
案例一.
1. 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
2. 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
3. 有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组
1.
let arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
arr.sort((a, b) => a - b)
// arr.sort(function (a,b) {
// return a - b
// })
console.log(arr)
2.
let arr = ['a', 'ccc', 'bb', 'dddd']
arr.sort( (a,b) => a.length - b.length)
// arr.sort(function (a,b) {
// return a.length - b.length
// })
console.log(arr)
3.
let arr = [57, 88, 99, 100, 33, 77]
arr = arr.filter( item => item >= 60)
// arr = arr.filter(function (item) {
// return item >= 60
// })
console.log(arr);
=========================================================================================================
案例二.
给定一个数组
let list = [
// wu: 武力 zhi:智力
{ id: 1, name: '张飞', wu: 97, zhi: 10 },
{ id: 2, name: '诸葛亮', wu: 55, zhi: 99 },
{ id: 3, name: '赵云', wu: 97, zhi: 66 },
{ id: 4, name: '周瑜', wu: 80, zhi: 98 },
{ id: 5, name: '吕布', wu: 100, zhi: 8 },
{ id: 6, name: '司马懿', wu: 30, zhi: 98 }
]
//1.求数组中所有英雄的武力平均值 (总值/个数)
let total = 0
list.forEach(function(item){
total += item.wu
})
list.forEach(item => total += item.wu)
console.log(total/list.length);
//2.得到一个新数组，只保留英雄的名字， ['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿']
list = list.map(function(item){
return item.name
})
list = list.map(item => {
return item.name
})
console.log(list)
//3.得到一个新数组，新数组中只保留武力值超过90的英雄
list = list.filter(item => item.wu >= 90)
console.log(list)
//4.删除数组中名字为周瑜的英雄
list = list.filter(item => item.name != '周瑜')
console.log(list)
//5.判断数组中所有英雄的武力是否都超过60， 最终打印结果： 全是猛将 还有弱鸡 (使用两种方式实现)
let b = list.every(item => item.wu >= 60)
b ? console.log('都是猛将') : console.log('还有弱鸡');
//6.删除数组中名字叫所有智力低于60的英雄
list = list.filter(item => item.zhi >= 60)
console.log(list)
//7.找到数组中id为2的英雄，求他的武力+智力的综合
let hero = list.find(item => item.id == 2)
console.log( hero.wu + hero.zhi)