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)
  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沪漂小强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值