es6で配列を反復する方法は何ですか

反復メソッド: 1. マップ、特定のルールに従って配列をマッピングし、マッピング後に新しい配列を取得するために使用します; 2. フィルター、判定条件に基づいて要素をフィルタリングするために使用します; 3. forEach、Use a と同等配列を走査するための for ループ; 4. some、条件を満たす配列要素があるかどうかを判断するために使用されます; 5. each、配列内のすべての要素が条件を満たすかどうかを判断するために使用されます; 6. findIndex、検索に使用されます要素の添字; 7 、reduce は、配列要素を走査し、要素ごとにコールバック関数を実行できます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

配列は、es6 で最も一般的に使用される型です。他の言語の配列と同様、これも順序付けされたデータのセットですが、違いは、ECMAscript 配列内の配列の各スロットに任意の型を格納できることです。データの数は、最初のスロットに文字列、2 番目のスロットに値、3 番目のスロットにオブジェクトを格納できることを意味します。 ECMAscript配列で最もよく使われる手法が反復法ですが、以下で詳しく紹介します。

#7 ES6 配列反復メソッド

##1.map() メソッド 配列の各項目を実行中の関数に渡し、各関数呼び出しの結果で構成される配列を返します。

関数: 特定のルールに従って配列をマッピングし、マッピング後の新しい配列を取得します

アプリケーション シナリオ:

(1) のすべての要素配列 * 0.8
(2) 配列内の js オブジェクトを HTML 文字列にマッピングします
例:

 const arr = [10,20,30,40,50]
  // 完整写法
  // let res = arr.map((item,index)=>{
  //     return item * 0.8
  //   })
  // 熟练写法
   let res = arr.map(item=>item*0.8)
    console.log(res)
  // 返回处理后的新数组   [8, 16, 24, 32, 40]

2. filter() メソッド 配列の各項目を実行中の関数に渡し、関数が実行する項目を渡します。 true を返します。配列を作成した後に戻ります。

機能：判定条件に基づいてフィルタリングします。

アプリケーション シナリオ:

(1) 配列内の偶数をフィルター処理する
(2) 製品価格をフィルター処理する
例:

 //需求： 筛选数组里的偶数
    const arr = [10,20,33,44,55]
    // let res =  arr.filter(item=>{
    //   if(item % 2 == 0){
    //     return true
    //   } else{
    //     return false
    //   }
    // })
    // console.log(res)
    let res1 = arr.filter(item => item % 2==0)
    console.log(res1) // [10, 20, 44]

3. forEach() メソッド配列内の各項目を戻り値なしで実行中の関数に渡します。

関数: for ループの別の記述方法と同等

アプリケーション シナリオ: 配列の走査

例:

 // 类似for循环遍历
      const arr = [13,22,10,55,60]
      arr.forEach((item,index)=>{
        console.log(item,index)
        // item->数组里每一个元素
        // index->对应的下标
      })

4. some() メソッド 実行中の関数を配列の各項目に渡します。1 つの関数が true を返した場合、このメソッドも true を返します。

関数: 配列内に条件を満たす要素があるかどうかを判断します (論理和 ||、いずれか 1 つを満たすことができます)

アプリケーション シナリオ:

(1) 配列に奇数があるかどうかを判定します。

• #(2) 空でない判定：配列内に空の値を持つ要素があるかどうかを判定します。 form array

• #例: 奇数があるかどうかを判断します

#

 // 判断是否有奇数
    const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.some(item =>item % 2 == 1)
    console.log(res)
   //  true: 有满足条件的元素
   //  false: 没有满足条件的元素

##5、毎() method

実行中の関数を配列の各項目に渡します。各項目が true を返す場合、このメソッドは true です。 関数: 配列内のすべての要素が条件を満たしているかどうかを判断します (論理 &&、すべて満たされている)

アプリケーション シナリオ:

(1) 配列内のすべての要素が偶数であるかどうかを判断します

• (2) アイデアを切り替える: ショッピング カート内のすべてを選択するかどうか

• 例: すべて偶数かどうかを判断します

 // 判断是否全是偶数
      const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.every(item =>item % 2 == 0)
    console.log(res)
   // true: 所有满足都满足条件
   // false: 有元素不满足条件

6. FindIndex() メソッド

関数: 要素の添字の検索

アプリケーション シナリオ:

#(1) 配列の場合は値型の場合、要素の添字を検索します。 標準使用: arr.indexOf(element)

• (2) 配列が参照型の場合、要素のインデックスを検索します: arr.findIndex( )

• 例:

   /*
       arr.findIndex()查询数组下标
        如果找到目标元素，则返回改数组的下标
        如果没找到，则返回固定值-1
        */
      let arr = [
        {name:'李四',age:20},
        {name:'王五',age:20},
        {name:'张三',age:20},
      ]
   
    let index = arr.findIndex(item=>item.name == '王五')
    console.log(index)

#7.reduce() メソッド

関数: 配列要素を走査し、要素ごとにコールバック関数を 1 回実行します#アプリケーション シナリオ: 配列の合計/平均/最大値/最小値例:

 const arr = [10,20,30,40,50]
   let res =  arr.reduce((sum,item,index)=>{
      return sum + item
      // console.log(sum,item,index)
    },0)

方法的区别与细节

every()和some()

这些方法中，every()和some()是最相似的，都是从数组中搜素符合某个条件的元素。对every()来说，传入的参数必须对每一项都返回true，它才会返回true。而对于some()来说，只要有一项让传入的函数返回true，它就返回true，下面举个例子：

let numbers = [2,1,4,3,5,4,3];

let everyResult = numbers.every((item,index,array) => item >2);
console.log(everyResult);  // false

let someResult = numbers.some((item,index,array) => item >2);
console.log(someResult);  // true

filter()方法

这个方法基于给定的函数来决定每一项是否应该包含在它返回的数组中。例如：

let numbers = [2,1,4,3,5,4,3];
let filterResult = numbers.filter((item,index,array) => item >2);
console.log(filterResult);  // 4,3,5,4,3

这里filter返回的数组包含了4,3,5,4,3，因为只有对这些项传入的函数才返回 true，这个方法非常适合从数组中筛选满足给定条件的元素，也是非常常用的迭代方法。

map()

map()方法也是返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果，例如，可以将数组中的每一项都乘以2，并返回包含所有结果的数组，如下：

let numbers = [2,1,4,3];
let mapResult = numbers.map((item,index,array) => item *2);
console.log(mapResult);  // 4,2,8,6

这个方法返回的数组包含了原始数组中每给数值乘以2的结果。这个方法很适应于创建一个与原数组一一对应的新数组。

forEach()

最后看一看forEach这个方法，这个方法只会对每一项运行传入的函数，没有返回值。其实，本质上，forEach()方法相当于使用for循环遍历数组。例如：

let numbers = [2,1,4,3];
numbers.forEach((item,index,array) => {
console.log(item)
}); // 2,1,4,3

【相关推荐：javascript视频教程、编程视频】

以上がes6で配列を反復する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。