ES6核心特性(三)----细说数组常用的方法

数组常用的方法

前言

本文主要介绍数组常见遍历方法:forEach、map、filter、find、every、some、reduce,它们有个共同点:不会改变原始数组。

一、forEach:遍历数组

var colors = ["red","blue","green"];
// ES5遍历数组方法
for(var i = 0; i < colors.length; i++){ 
 console.log(colors[i]);//red blue green
}
// ES6 forEach
colors.forEach(function(color){
 console.log(color);//red blue green
});

我们再来看个例子:遍历数组中的值,并计算总和

var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15

二、map:将数组映射成另一个数组

map通过指定函数处理数组的每个元素,并返回处理后新的数组,map 不会改变原始数组。

forEach和map的区别在于,forEach没有返回值。 map需要返回值,如果不给return,默认返回undefined

使用场景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);//[2,4,6]
// es6 map方法
var doubled = numbers.map(function(number){
   return number * 2;
})
console.log(doubled);//[2,4,6]

使用场景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);//["CHEAP", "expensive"]

三、filter:从数组中找出所有符合指定条件的元素

filter() 检测数值元素,并返回符合条件所有元素的数组。 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);//[{name: "cucumber", type: "vegetable"},
                                 {name: "celery", type: "vegetable"}]
// 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);//[{name:"celery",type:"vegetable",quantity:30,price:8}]

使用场景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));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]

四、find:返回通过测试(函数内判断)的数组的第一个元素的值

它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。 使用场景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);// {name:"Alex",id:2}
// es6 find
user = users.find(function(user){
  return user.name === "Alex";
})
console.log(user);// {name:"Alex",id:2}找到后就终止循环

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

var posts = [
 {id:3,title:"Node.js"},
 {id:1,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));//{id: 1, title: "React.js"}

五、every&some

every:数组中是否每个元素都满足指定的条件

some:数组中是否有元素满足指定的条件

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

//ES5方法
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);//false
console.log(someComputersCanRunProgram);//true
//ES6 some every 
var every = computers.every(function(computer){
  return computer.ram > 16;
})
console.log(every);//false
var some = computers.some(function(computer){
 return computer.ram > 16;
})
console.log(some);//true

一言以蔽之:Every: 一真即真;Some: 一假即假

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

function Field(value){
  this.value = value;
}
Field.prototype.validate = function(){
  return this.value.length > 0;
}
//ES5方法
var username = new Field("henrywu");
var telephone = new Field("18888888888");
var password = new Field("my_password");
console.log(username.validate());//true
console.log(telephone.validate());//true
console.log(password.validate());//true
//ES6 some every
var fields = [username,telephone,password];
var formIsValid = fields.every(function(field){
 return field.validate();
})
console.log(formIsValid);//true
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 reduce
var sumValue = numbers.reduce(function(sum2,number2){
  console.log(sum2);//0 10 30 60
  return sum2 + number2;
},0);//sum2初始值为0
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);//["red", "yellow", "blue"]

使用场景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("((())))"));

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

Google C++编程风格指南(四)之类的相关规范

类是C++中基本的代码单元,自然被广泛使用。本节列举了在写一个类时要做什么、不要做什么。

852
来自专栏数据之美

python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域

在 python 中赋值语句总是建立对象的引用值,而不是复制对象。因此,python 变量更像是指针,而不是数据存储区域, ? 这点和大多数 OO 语言类似吧,...

2137
来自专栏ImportSource

厕读:每日一题,面试无忧

4. 下列说法正确的有() A. class中的constructor不可省略 B. constructor必须与class同名,但方法不能与class同名 C...

2756
来自专栏编程

Python函数基础

函数是一种设计工具,它能让程序员将复杂的系统分解为可管理的部件 函数用于将相关功能打包并参数化 在Python中可以创建4种函数 全局函数:定义在模块中 //...

1855
来自专栏C/C++基础

C++的数据类型

C++是一种强类型语言。C++程序中的任何变量(或函数)必须遵循“先说明后使用”的原则。定义数据类型有两个方面的作用:一是决定该类型的数据在内存中如何存储,二是...

792
来自专栏企鹅号快讯

Python类与面向对象

面向对象程序 程序 = 指令 + 数据 代码可以选择以指令为核心或以数据为核心进行编程 两种范例 1.以指令为核心:围绕"正在发生什么"编写 面向过程编程:程序...

1938
来自专栏游戏开发那些事

【读书笔记】读《程序员面试宝典》

  最近有幸拜读了《程序员面试宝典》(第五版)这本书,此书真乃良心之作,尤其对于我们这种未毕业的学生来说,更是一本不可多得的宝贵资料。

1942
来自专栏工科狗和生物喵

【计算机本科补全计划】Java学习笔记(四) 修饰符

正文之前 今天总算是把那个党员谈话给弄完了,三个学弟轮番跟我来聊天,讲自己的入党动机啥的,看到他们就仿佛看到了大一的自己,原来当时面对学长,面对这类事情,会紧张...

3259
来自专栏源哥的专栏

BASE64编码

附录:BASE64编码的原理(节选自http://www.vbzx.net/ArticleView/vbzx_Article_View_1199.asp)

684
来自专栏CDA数据分析师

教你一招 | Python3新特性(一) :字符串

从python2转到python3的第一个问题就是字符串的问题,我花了些时间把我能想到的和字符串处理有关的东西都整理如下。 1、Python2的字符串编码 在p...

18510

扫码关注云+社区