Apakah kaedah untuk mengulang tatasusunan dalam es6

Kaedah berulang: 1. peta, digunakan untuk memetakan tatasusunan mengikut peraturan tertentu untuk mendapatkan tatasusunan baharu selepas pemetaan 2. penapis, digunakan untuk menapis elemen berdasarkan syarat penghakiman; untuk gelung untuk melintasi tatasusunan; subskrip elemen; 7 , reduce, boleh merentasi elemen tatasusunan dan melaksanakan fungsi panggil balik untuk setiap elemen.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Array hendaklah jenis yang paling biasa digunakan dalam es6 Seperti tatasusunan dalam bahasa lain, ia juga merupakan satu set data tersusun, tetapi perbezaannya ialah setiap slot tatasusunan dalam tatasusunan ECMAscript boleh menyimpan sebarang Jenis. data bermakna kita boleh menyimpan rentetan dalam slot pertama, nilai dalam kedua, dan objek dalam slot ketiga. Kaedah yang paling biasa digunakan dalam tatasusunan ECMAscript ialah kaedah lelaran Biar saya memperkenalkannya secara terperinci di bawah.

7 kaedah lelaran untuk tatasusunan ES6

kaedah map()

Lepaskan setiap item tatasusunan ke dalam fungsi yang sedang berjalan dan kembalikan tatasusunan yang terdiri daripada hasil setiap panggilan fungsi.

Fungsi: Peta tatasusunan mengikut peraturan tertentu dan dapatkan tatasusunan baharu selepas pemetaan

Senario aplikasi:

• (1) Semua elemen dalam tatasusunan * 0.8

• (2) Petakan objek js dalam tatasusunan ke dalam rentetan html

Contoh:

 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 Kaedah penapis()

menghantar fungsi berjalan kepada setiap item tatasusunan dan fungsi. returns true Item dikembalikan sebagai tatasusunan.

Fungsi: Tapis berdasarkan syarat yang dinilai.

Senario aplikasi:

• (1) Tapis nombor genap dalam tatasusunan

• (2) Tapis harga produk

Contoh:

 //需求： 筛选数组里的偶数
    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]

kaedah untukEach()

Lepaskan setiap item tatasusunan ke dalam fungsi berjalan dan tiada nilai pulangan.

Fungsi: bersamaan dengan cara lain untuk menulis gelung for

Senario aplikasi: merentasi tatasusunan

Contoh:

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

4. benar. Fungsi: Tentukan sama ada terdapat elemen dalam tatasusunan yang memenuhi syarat (logik ATAU ||, mana-mana satu daripadanya boleh berpuas hati)

Senario aplikasi:

(1) Tentukan sama ada terdapat nombor ganjil dalam tatasusunan

• (2) Pertimbangan tidak kosong: Tentukan sama ada terdapat unsur dengan nilai kosong dalam tatasusunan bentuk

• Contoh: Tentukan sama ada terdapat nombor ganjil

 // 判断是否有奇数
    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. kaedah every()

Lepaskan fungsi berjalan ke dalam setiap item tatasusunan Jika setiap item mengembalikan benar, maka kaedah ini adalah benar. Fungsi: Tentukan sama ada semua elemen dalam tatasusunan memenuhi syarat (logik &&, semua berpuas hati)

Senario aplikasi:

(1) Tentukan sama ada semua elemen dalam tatasusunan ialah nombor genap

• (2) Tukar idea: Sama ada hendak memilih semua dalam troli beli-belah

• Contoh: Tentukan sama ada semua nombor genap

 // 判断是否全是偶数
      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. kaedah findIndex()

Fungsi: Cari subskrip elemen

Senario aplikasi:

(1) Jika tatasusunan ialah jenis nilai, cari Subskrip elemen menggunakan: arr.indexOf(elemen)

• (2) Jika tatasusunan ialah jenis rujukan, cari subskrip elemen: arr.findIndex( )

• Contoh:

 /*
     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 Fungsi kaedah reduce()

: Lintas elemen tatasusunan dan laksanakan fungsi panggil balik untuk setiap elemen Senario aplikasi: Jumlah tatasusunan/purata/nilai maksimum/minimum

Contoh:

 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视频教程、编程视频】

Atas ialah kandungan terperinci Apakah kaedah untuk mengulang tatasusunan dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!