JavaScript 配列で一般的に使用されるトラバーサル メソッド (コード例)

この記事では、JavaScript 配列の一般的に使用されるトラバース メソッド (コード例) について説明します。必要な方は参考にしていただければ幸いです。

#序文

この記事では、主に一般的な配列走査メソッドを紹介します。 、map、filter、find、every、some、reduce、これらはすべて、元の配列を変更しないという共通点があります。

1. forEach: 配列を走査します

var colors = ["red","blue","green"];
// ES5遍历数组方法
for(var i = 0; i <pre class="brush:php;toolbar:false">// 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

2. Map: 配列を別の配列にマップします。

map は、指定された関数を通じて配列の各要素を処理し、処理後に新しい配列を返します。Map は元の配列を変更しません。 。

forEach と map の違いは、forEach には戻り値がないことです。

map は値を返す必要があります。戻り値が指定されていない場合は、デフォルトで未定義が返されます。

使用シナリオ 1

数値配列 (A) とその値があるとします。 A 配列の は、B 配列の形式で 2 倍になります

var numbers = [1,2,3];
var doubledNumbers = [];
// es5写法
for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 map方法
var doubled = numbers.map(function(number){
   return number * 2;
})
console.log(doubled);//[2,4,6]

使用シナリオ 2 オブジェクト配列 (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"]

3. フィルター: 指定された条件を満たすすべての要素を配列から検索します

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 <pre class="brush:php;toolbar:false">// 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 <p>使用シナリオ 3<strong>: 2 つの配列 (A、B) があると仮定し、A の ID 値に基づいて、B 配列に一致しないデータをフィルターで除外します</strong></p><pre class="brush:php;toolbar:false">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"}]

4. find: テストに合格した配列の最初の要素を返します (関数内で判断) 値

そのパラメータはコールバック関数であり、すべての配列メンバーがコールバック関数を順番に実行します。戻り値が true である最初のメンバーが検索され、そのメンバーが返されます。一致するメンバーが存在しない場合は、未定義が返されます。

使用シナリオ 1
オブジェクト配列 (A) があると仮定し、条件を満たすオブジェクトを検索します。

 var users = [
  {name:"Jill"},
  {name:"Alex",id:2},
  {name:"Bill"},
  {name:"Alex"}
 ];
// es5方法
 var user;
 for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 find
user = users.find(function(user){
  return user.name === "Alex";
})
console.log(user);// {name:"Alex",id:2}找到后就终止循环

使用シナリオ 2: オブジェクト配列 ( A) 「オブジェクトの条件を指定して、配列内で条件を満たすオブジェクトを検索します」に従って、every&some

every: 各要素が次のとおりであるかどうかを確認します。配列は指定された条件を満たしますsome: 指定された条件を満たす要素が配列内にあるかどうか

使用シナリオ 1: オブジェクト配列内の各コンピューターのオペレーティング システムが利用可能かどうかを計算します。オペレーティング システムが 16 ビットより大きい場合は、使用可能であることを意味します。それ以外の場合は、使用できません。

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"}

//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  <p></p>簡単に言うと、すべて: 1 つの true は true、一部の 1 つの false は false です。 <p></p>##使用シナリオ 2<p>: 登録ページがあると仮定し、すべての入力コンテンツの長さが 0<strong><pre class="brush:php;toolbar:false">//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

6 より大きいかどうかを判断します。配列を値に変換します

reduce() メソッドはメソッドをアキュムレータとして受け取り、配列内で (左から右へ) の各値が 1 つの値にマージされ始めます。

使用シナリオ 1: 配列内のすべての値の合計を計算します

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{
  // 给用户一个友善的错误提醒
}

 var numbers = [10,20,30];
 var sum = 0;
//es5 方法
for(var i = 0; i 

使用シナリオ 2

:

配列内のオブジェクトの属性を抽出します配列内で

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

使用シナリオ 3: 文字列内の括弧が対称かどうかを判断します

 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"]

以上がJavaScript 配列で一般的に使用されるトラバーサル メソッド (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。