ES6最新数组方法

数组方法(forEach)

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

// ES5遍历数组方法
for(var i = 0; i < colors.length; i++){
  // console.log(colors[i]);
}

// ES6 forEach
colors.forEach(function(color){
  // console.log(color);
});

// 练习: 遍历数组中的值,并计算总和
var numbers = [1,2,3,4,5];

var sum = 0;

function adder(number){
  sum += number;
}

numbers.forEach(adder);

console.log(sum);

数组方法(map)

 var numbers = [1,2,3];

 var doubledNumbers = [];

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

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

// es6 map
var doubled = numbers.map(function(number){
    return number * 2;
})

// console.log(doubled);

// es6 forEach
doubled.forEach(function(number){
    console.log(number);
})


/** 场景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)


/** 场景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 
 *
 */
/** 场景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 
 * 
 */
 console.log("================");

 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)

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

/** 场景1
 *  判断字符串中括号是否对称
 *
 */

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

王如棋博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论