es6详解数组的各种用法：forEach、map、filter、find、every和some、reduce

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

一、forEach    

var colors = ["red", "blue", "green"];

// ES5遍历数组方法，这种方法学过代码的应该都了解
for(var i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

//ES6用forEach遍历
// 当只有一个参数时，这个参数就是元素本身
colors.forEach(function(item) {
	console.log(item);
});

// 当有两个参数时，第一个参数是元素本身，第二个是元素对应的下标
colors.forEach(function(item,index) {
	console.log(item,index);
});

// 当有三个参数时，第一个参数是元素本身，第二个是元素对应的下标，第三个参数时数组本身
colors.forEach(function(item,index,arr) {
	console.log(item,index,arr);
});

//当然也可以用es6的箭头函数来写，不了解箭头函数的，可以看一下柚子写的另一篇关于箭头函数的博客，也在es6分类中，这里就不做详解了

colors.forEach((item,index,arr)=>{
	console.log(item,index,arr);
})

//forEach参数也可以直接放函数的
var numbers = [1, 2, 3, 4, 5];
var sum = 0;
function adder(number) {
	sum += number;
}
numbers.forEach(adder);
console.log(sum);

二、map

//关于map,可以根据两个简单的场景去理解一下

//1、假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组 

var numbers = [1,2,3];
var doubledNumbers = [];

//先看看es5的实现方式，非常简单了

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

//再看一下es6的map
doubledNumbers = numbers.map(function(number){
    return number * 2;
})

//箭头函数就是
doubledNumbers = numbers.map((number)=>{
    return number * 2;
})

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

var cars = [
  {model:"Buick",price:"CHEAP"},
  {model:"BMW",price:"expensive"}
];

var prices = cars.map(function(car){
    return car.price;
})

console.log(prices);

 三、filter

//继续用场景来理解es6的filter

//1、假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中 

var porducts = [
  {name:"cucumber",type:"vegetable"},
  {name:"banana",type:"fruit"},
  {name:"celery",type:"vegetable"},
  {name:"orange",type:"fruit"}
];

// 使用es5来实现

var filteredProducts = [];

for(var i = 0; i < porducts.length; i++){
    if(porducts[i].type === "fruit"){
      filteredProducts.push(porducts[i]);
    }
}
console.log(filteredProducts);

// es6 filter
var filtered2 = porducts.filter(function(product){
  return product.type === "vegetable";
})

console.log(filtered2);

//场景2、假定有一个对象数组(A),过滤掉不满足以下条件的对象
//条件: 蔬菜 数量大于0,价格小于10


var products = [
  {name:"cucumber",type:"vegetable",quantity:0,price:1},
  {name:"banana",type:"fruit",quantity:10,price:16},
  {name:"celery",type:"vegetable",quantity:30,price:8},
  {name:"orange",type:"fruit",quantity:3,price:6}
];

products = products.filter(function(product){
    return product.type === "vegetable" 
    && product.quantity > 0 
    && product.price < 10
})

console.log(products);

//场景3、假定有两个数组(A,B),根据A中id值,过滤掉B数组不符合的数据

 var post = {id:4,title:"Javascript"};

 var comments = [
    {postId:4,content:"Angular4"},
    {postId:2,content:"Vue.js"},
    {postId:3,content:"Node.js"},
    {postId:4,content:"React.js"},
 ];

 function commentsForPost(post,comments){
    return comments.filter(function(comment){
      return comment.postId === post.id;
    })
 }

 console.log(commentsForPost(post,comments));

四、find

//场景1、假定有一个对象数组(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;
  }
 }

console.log(user);

// 使用es6 find
user = users.find(function(user){
  return user.name === "Alex";
})

console.log(user);



//场景2、假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象

 var posts = [
  {id:3,title:"Node.js"},
  {id:2,title:"React.js"}
 ];

 var comment = {postId:1,content:"Hello World!"};

 function postForComment(posts,comment){
  return posts.find(function(post){
    return post.id === comment.postId;
  })
 }

 console.log(postForComment(posts,comment));

五、every和some

//场景1、计算对象数组中每个电脑操作系统是否可用
//大于16位操作系统表示可用,否则不可用

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

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);

//Every: 一真即真
//Some: 一假即假

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

 console.log("==========");
 console.log(every);

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

 console.log(some);

//场景2、假定有一个注册页面,判断所有input内容的长度是否大于0 

function Field(value){
   this.value = value;
 }

 Field.prototype.validate = function(){
   return this.value.length > 0;
 }

 var username = new Field("henrywu");
 var telephone = new Field("18888888888");
 var password = new Field("my_password");

//  console.log(username.validate());
//  console.log(telephone.validate());
//  console.log(password.validate());

 var fields = [username,telephone,password];

 var formIsValid = fields.every(function(field){
  return field.validate();
 })

 console.log(formIsValid);

 if(formIsValid){
  // 注册成功
 }else{
   // 给用户一个友善的错误提醒
 }

六、reduce​​​​​​​

//场景1、计算数组中所有值的总和 

 var numbers = [10,20,30];
 var sum = 0; 

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

console.log(sum);

// es6 reduce

var sumValue = numbers.reduce(function(sum2,number2){
  console.log(sum2);
  return sum2 + number2;
},100);

console.log(sumValue);
 

//场景2、将数组中对象的某个属性抽离到另外一个数组中

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

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

    return previous;
 },[]);

 console.log(colors);

//场景3、判断字符串中括号是否对称

function balancedParens(string){
  return !string.split("").reduce(function(previous,char){
    if(previous < 0) { return previous;}
    if(char == "("){ return ++previous;}
    if(char == ")"){ return --previous;}
    return previous;
  },0);
}

console.log(balancedParens("((())))"));

好了，就是这些，希望能帮助到一些朋友吧!!!