ES6数组方法

本文深入解析ES6中六种关键数组方法:forEach、map、filter、find、some&every、reduce的功能与使用场景。通过实例对比ES5与ES6的不同实现方式,帮助读者掌握更高效、简洁的代码编写技巧。

1.forEach

遍历数组,无返回值

var numbers = [1,2,3];

 ES5遍历数组方法

for(var i = 0; i < numbers.length; i++){
   console.log(numbers[i]);
}

ES6遍历数组方法

numbers.forEach(function(number){
   console.log(number);
});

例1:遍历数组中的值,并计算总和

let numbers=[1,2,3,4,5]
let sum=0
function add(number){
    sum+=number
}
numbers.forEach(add)
console.log(sum)

 2.map

返回值为一个新数组

例2:假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组

let numbersA=[1,2,3,4,5]

 ES5方法

let numbersB=[]
//ES5
for(var i=0;i<numbersA.length;i++){
    numbersB.push(numbersA[i]*2)
}
console.log(numbersB)

ES6方法 

function add(number){
    return number*2
}
let numbersC=numbersA.map(add)
console.log(numbersC)

 例3:假定有一个对象数组(A),将A数中对象某个属性的值存储到B数组中

let people=[
    {
        name:'Hery',
        age:18,
        sex:'女'
    },
    {
        name:'Tom',
        age:25,
        sex:'男'
    },
    {
        name:'Jack',
        age:16,
        sex:'男'
    },
]

 ES5方法

var nameA=[]
for(var i=0;i<people.length;i++){
    nameA.push(people[i].name)
}
console.log(nameA)

 ES6方法

function name(item){
    return item.name
}
let nameB=people.map(name)
console.log(nameB)

 3.filter

过滤掉不符合条件的元素,返回值为数组

例4:假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中

var people = [
  {name:"Jack",profession:'doctor'},
  {name:"Tom",profession:'doctor'},
  {name:"Hery",profession:'teacher'},
  {name:"Pete",profession:'student'}
]

ES5方法

let doctors=[]
for(var i=0;i<people.length;i++){
    if(people[i].profession==='doctor'){
        doctors.push(people[i])
    }
}
console.log(doctors)

 ES6方法

function filterDoctor(item){
  return item.profession === "doctor";
}
var doctors = people.filter(filterDoctor)
console.log(doctors)

 4.find

寻找符合条件的元素,返回值为一个元素,如果要寻找的元素在数组中存在多个,则找到第一个符合条件的元素后,find函数停止运行

例5:假定有一个对象数组(A),找到符合条件的对象

 var users = [
  {name:"Jill"},
  {name:"Alex",id:2},
  {name:"Bill"},
  {name:"Alex"}
 ];

ES5

 var user;
 for(var i = 0; i < users.length; i++){
  if(users[i].name === "Alex"){
    user = users[i];
    break;
  }
 }

ES6

user = users.find(function(user){
  return user.name === "Alex";
})
//find方法找到目标后函数就不在继续执行

5.some&every

some和every方法的返回值为布尔值可以用来检测数组是否符合条件

例6: 计算对象数组中每个电脑操作系统是否可用  大于16位操作系统表示可用,否则不可用

var computers = [
  {name:"Apple",ram:16},
  {name:"IBM",ram:4},
  {name:"Acer",ram:32}
]

 ES5

var everyComputersCanRunProgram = true;
var someComputersCanRunProgram = false;

for(var i = 0; i < computers.length; i++){
  var computer = computers[i];
  if(computer.ram < 16){
    everyComputersCanRunProgram = false;
  }else{
    someComputersCanRunProgram = true;
  }
}

console.log(everyComputersCanRunProgram);
console.log(someComputersCanRunProgram);

 ES6

 var every = computers.every(function(computer){
   return computer.ram > 16;
 })
 console.log(every);
 var some = computers.some(function(computer){
  return computer.ram > 16;
 })
 console.log(some);

 6.reduce

例7:计算数组中所有值的总和

 var numbers = [10,20,30];

ES5

var sum = 0;
for(var i = 0; i < numbers.length; i++){
  sum += numbers[i];
}

 ES6

var sumValue = numbers.reduce(function(sum2,number2){//number2是numbers里的元素
  console.log(sum2);
  return sum2 + number2;
},100);//100是设置的sum2初始值

console.log(sumValue);

 例8:将数组中对象的某个属性抽离到另外一个数组中

 var primaryColors = [
   {color:"red"},
   {color:"yellow"},
   {color:"blue"}
 ];

 var colors = primaryColors.reduce(function(previous,primaryColor){
    previous.push(primaryColor.color);

    return previous;
 },[]);

 console.log(colors);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值