成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

細說數(shù)組常用遍歷的方法

阿羅 / 1148人閱讀

摘要:需要返回值,如果不給,默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。

前言

本文主要介紹數(shù)組常見遍歷方法:forEach、map、filter、find、every、some、reduce,它們有個共同點:不會改變原始數(shù)組。

一、forEach:遍歷數(shù)組
var colors = ["red","blue","green"];
// ES5遍歷數(shù)組方法
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
});

我們再來看個例子:遍歷數(shù)組中的值,并計算總和

var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15
二、map:將數(shù)組映射成另一個數(shù)組

map通過指定函數(shù)處理數(shù)組的每個元素,并返回處理后新的數(shù)組,map 不會改變原始數(shù)組。

forEach和map的區(qū)別在于,forEach沒有返回值。
map需要返回值,如果不給return,默認返回undefined

使用場景1
假定有一個數(shù)值數(shù)組(A),將A數(shù)組中的值以雙倍的形式放到B數(shù)組

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 假定有一個對象數(shù)組(A),將A數(shù)中對象某個屬性的值存儲到B數(shù)組中

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:從數(shù)組中找出所有符合指定條件的元素

filter() 檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 filter() 不會改變原始數(shù)組。

使用場景1:假定有一個對象數(shù)組(A),獲取數(shù)組中指定類型的對象放到B數(shù)組中

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 === "vegetable"){
      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:假定有一個對象數(shù)組(A),過濾掉不滿足以下條件的對象
條件: 蔬菜 數(shù)量大于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:假定有兩個數(shù)組(A,B),根據(jù)A中id值,過濾掉B數(shù)組不符合的數(shù)據(jù)

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:返回通過測試(函數(shù)內判斷)的數(shù)組的第一個元素的值

它的參數(shù)是一個回調函數(shù),所有數(shù)組成員依次執(zhí)行該回調函數(shù),直到找出第一個返回值為true的成員,然后返回該成員。如果沒有符合條件的成員,則返回undefined。
使用場景1
假定有一個對象數(shù)組(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;//找到后就終止循環(huán)
  }
 }
 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}找到后就終止循環(huán)

使用場景2:假定有一個對象數(shù)組(A),根據(jù)指定對象的條件找到數(shù)組中符合條件的對象

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:數(shù)組中是否每個元素都滿足指定的條件

some:數(shù)組中是否有元素滿足指定的條件

使用場景1:計算對象數(shù)組中每個電腦操作系統(tǒng)是否可用,大于16位操作系統(tǒng)表示可用,否則不可用

//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

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

使用場景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:將數(shù)組合成一個值

reduce() 方法接收一個方法作為累加器,數(shù)組中的每個值(從左至右) 開始合并,最終為一個值。

使用場景1: 計算數(shù)組中所有值的總和

 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
將數(shù)組中對象的某個屬性抽離到另外一個數(shù)組中

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

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/114093.html

相關文章

  • 細說數(shù)組常用遍歷方法

    摘要:需要返回值,如果不給,默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    AlphaWatch 評論0 收藏0
  • 細說數(shù)組常用遍歷方法

    摘要:需要返回值,如果不給,默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    ?xiaoxiao, 評論0 收藏0
  • 細說 Javascript 數(shù)組篇(一) : 數(shù)組遍歷和 length 屬性

    摘要:遍歷為了達到最佳性能來遍歷一個數(shù)組,最好的方式就是使用經(jīng)典的循環(huán)。盡管屬性是定義在數(shù)組本身的,但是在循環(huán)的每一次遍歷時仍然會有開銷。給屬性賦值一個更小的數(shù)將會截斷數(shù)組,如果賦值一個更大的數(shù)則不會截斷數(shù)組。 盡管數(shù)組在 Javascript 中是對象,但是不建議使用 for in 循環(huán)來遍歷數(shù)組,實際上,有很多理由來阻止我們對數(shù)組使用 for in 循環(huán)。 因為 for in 循環(huán)將會枚...

    TigerChain 評論0 收藏0
  • 「干貨」細說 Array 常用操作(ES5 和 ES6)

    摘要:今天,會更具體地將數(shù)組的常用操作進行歸納和匯總,以便備不時之需。在公用庫中,一般會這么做的判斷新增的操作和傳入一個回調函數(shù),找到數(shù)組中符合當前搜索規(guī)則的第一個元素,返回這個元素,并且終止搜索。 showImg(https://segmentfault.com/img/bVbpzuS?w=750&h=422); 前言 上一篇文章「前端面試題系列8」數(shù)組去重(10 種濃縮版) 中提到了不少...

    VincentFF 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<