Métodos de iteración comúnmente utilizados en JavaScript para cada uno, filtro (), mapa (), reducir ()

Mobile 2023-09-09 04:38:18 views: null

Métodos de iteración comúnmente utilizados en JavaScript para cada uno, filtrar, asignar y reducir

1. para, para cada uno

1.1 3 formas de escribir para recorrido

  • El código se muestra a continuación:
    var array = [66,77,88];

for(var i =0;i<array.length;i++){
      
      
	console.log(array[i]);
}

console.log("\n============")

for(var i in array){
      
      
	console.log(array[i]);
}

console.log("\n============")

for(var item of array){
      
      
	console.log(item);
}
    Insertar descripción de la imagen aquí
    Insertar descripción de la imagen aquí

1.2 forEach + recorrido de función de devolución de llamada

  • como sigue:

    	  var array = [66,77,88];

      console.log("\n=====1.1=======\n\n")

      array.forEach(function(value){
      
      
          console.log(value);
      });

      console.log("\n====1.2========\n\n")

      array.forEach(function(value,index){
      
      
          console.log(`${
        
        index}--->${
        
        value}`);
      });


	  function Dog(name,age){
      
      
		  this.name = name;
	  	  this.age = age;
	  }
	  var d1 = new Dog("麦兜",3);
	  var d2 = new Dog("贝塔",2);
	
	  var dogArray = [d1,d2];

      console.log("\n\n\n=====2.1=======\n\n\n")

      dogArray.forEach(function(dog){
      
      
          console.log(dog);
      })

      console.log("\n=====2.2=======\n\n")

      dogArray.forEach(function(dog,index){
      
      
          console.log(index + '---->' + JSON.stringify(dog));
      })

    Insertar descripción de la imagen aquí

1.3 recorrido de la función de flecha forEach +

  • El código es mucho más simple, como sigue:

    var array = [66,77,88];

console.log("\n=====1.1=======\n\n")

array.forEach(value=>console.log(value));

console.log("\n====1.2========\n\n")

array.forEach((value,index)=>{
      
      
    console.log(`${
        
        index}------${
        
        value}`);
})


function Dog(name,age){
      
      
	this.name = name;
	this.age = age;
}
var d1 = new Dog("麦兜",3);
var d2 = new Dog("贝塔",2);

var dogArray = [d1,d2];

 console.log("\n\n\n=====2.1=======\n\n\n")

 dogArray.forEach(dog=>console.log(dog))

 console.log("\n=====2.2=======\n\n")

 dogArray.forEach((dog,index)=>console.log(index + '---' + JSON.stringify(dog)))

    Insertar descripción de la imagen aquí

2. filtro()

2.1 Introducción

  • Introducción:
    El método filter() crea una copia superficial de una parte de la matriz dada que contiene todos los elementos de la prueba implementada por la función proporcionada.
  • gramática:
    filter(callbackFn)
filter(callbackFn, thisArg)
  • Parámetros, valor de retorno
    Insertar descripción de la imagen aquí
  • describir
    Insertar descripción de la imagen aquí
  • Consulte el sitio web oficial:
    Sitio web oficial: Array.prototype.filter() .

2.2 Ejemplo 1: filtrado simple

  • El código se muestra a continuación:
    const array = [66,77,88];

//1. 箭头函数回调
const newArray_1 = array.filter(arr => arr > 70);

//2. 匿名函数回调
const newArray_2 = array.filter(function(arr){
      
      
    return arr > 70;
});

//3. 普通函数回调
function myFilter(val){
      
      
    if(val > 70){
      
      
        return true;
    }else{
      
      
        return false;
    }
}
const newArray_3 = array.filter(myFilter);
    Insertar descripción de la imagen aquí

2.3 Ejemplo 2 - Comportamiento del método filter() al modificar un array

  • El código se muestra a continuación:

    console.log("\n\n====1. 排除第一个元素=====\n\n");

 const numArray_1 = [6,7,8];

 const new_numArray_1 = numArray_1.filter((item,index,array)=>{
      
      
     array[index+1] += 10; //修改的是下一个元素,影响了初始数组，但是数组中第一个数据不动，其余+10
     return item > 10; //除了第一个元素，其余判断时都已经 +10 了
 });
 console.log(numArray_1);//[6, 17, 18, NaN]
 console.log(new_numArray_1);// [17, 18]

 console.log("\n\n====2. 所有元素+10 后都判断=====\n\n");

 const numArray_2 = [6,7,8];

 const new_numArray_2 = numArray_2.filter((item,index,array)=>{
      
      
     array[index] += 10;  //从当前元素就改变，即：该变了数组中所有元素
     return array[index] > 10; 
     /**需要注意的是：
      * 这个只是过滤条件，装入新数组的是item,
      * 当前循环时item的值并没有改变(当前下标在数组中的元素值没有改变)，
      * 所以装入新数组的是老数据
      */
 });
 console.log(numArray_2);//[16, 17, 18]
 console.log(new_numArray_2);//[6, 7, 8]

    Insertar descripción de la imagen aquí

2.4 Ejemplo 3: búsqueda en una matriz

  • El siguiente ejemplo utiliza filter() para filtrar el contenido de una matriz según los criterios de búsqueda.
  • El código se muestra a continuación:
     <script>
     const pets = ['dog-麦兜','dog-泡泡','cat-阿苔','dog-lucky','cat-点点'];

     const strs = ['I love you','love?','no','he is hate','love me?'];

     function filterIterms(array,query){
      
      
         return array.filter(arr => arr.includes(query.toLowerCase()));
     }

     let dogs = filterIterms(pets,'dog');
     let cats = filterIterms(pets,'cat');
     let loveStr = filterIterms(strs,'LOve');

     console.log(dogs);
     console.log(cats);
     console.log(loveStr);
 </script>
    Insertar descripción de la imagen aquí

3. mapa()

3.1 Introducción

  • Introducción:
    método map()Crear una nueva matriz, esta nueva matriz consta de cada elemento de la matriz originalEl valor de retorno después de llamar una vez a la función proporcionadacomposición.
  • gramática
    map(callbackFn)
map(callbackFn, thisArg)
  • Parámetros, valor de retorno
    Insertar descripción de la imagen aquí
  • describir
    Insertar descripción de la imagen aquí

3.2 Ejemplo 1: Encuentra 2 veces cada elemento en la matriz

  • El código se muestra a continuación:

     const numArray = [1,3,5,7];

 const new_numArray = numArray.map(num => num*2 );

 console.log(numArray);
 console.log(new_numArray);

    Insertar descripción de la imagen aquí

3.3 Ejemplo 2: utilizar el mapa para reformatear objetos en una matriz

  • El código se muestra a continuación:

     const kvArray = [
     {
      
       key: 1, value: 10 },
     {
      
       key: 2, value: 20 },
     {
      
       key: 3, value: 30 },
 ];

 const reformattedArray = kvArray.map(( {
       
       key, value} )=>{
      
      
     return ({
      
      [key]: value});
 });

 console.log(kvArray);

 console.log("\n\n======重新格式化数据之后=====\n\n");
 console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]

    Insertar descripción de la imagen aquí

  • Para obtener más uso, consulte el sitio web oficial:
    Sitio web oficial: Array.prototype.map() .

4. reducir()

4.1 Introducción

  • Instrucciones de uso
    • El método reduce() ejecuta secuencialmente una función reductora proporcionada en cada elemento de la matriz. Cada vez que se ejecuta el reductor,Pasar el resultado del cálculo del elemento anterior como parámetro., y finalmente el resultadoResumenPara un único valor de retorno.
    • Cuando la función de devolución de llamada se ejecuta por primera vez, no hay un "último resultado del cálculo".
    • Iniciar el ciclo desde el primer elemento o el segundo elemento depende de si se pasa un valor de prueba inicial:
      • Si se pasa un valor de prueba inicial:
        la función de devolución de llamada comienza a ejecutarse desde el elemento con índice de matriz 0 y el resultado resumido es: 初试值 + 数组中的每个元素.
      • Si no se pasa ningún valor inicial:
        el elemento con índice de matriz 0 se utilizará como valor inicial y el iterador comenzará a ejecutarse desde el segundo elemento.
  • gramática
    reduce(callbackFn)
reduce(callbackFn, initialValue)
  • Parámetros + valor de retorno
    Insertar descripción de la imagen aquí
    Insertar descripción de la imagen aquí
  • describir
    Insertar descripción de la imagen aquí

4.2 Ejemplo 1: Suma de elementos de matriz

  • El código se muestra a continuación:

    <script>
    
    const numArray = [1,2,3,4];

    /**
     * 没有初试值时：
     * 1. accumulator的值：在第一次调用时，如果没有指定 初始值 则为 数组中的第一个值；
     * 2. 并且 callbackFn 从数组中的第二个值作为 currentValue 开始执行。
     */
    const result_1 = numArray.reduce((accumulator, currentValue)=>{
      
      
        console.log(currentValue);
        return accumulator + currentValue;
    });

    console.log("结果：" + result_1);//没有初试值：1+2+3+4 = 10


    console.log("\n\n\n========给初试值的情况======\n\n\n");

    /**
     * 有初试值：
     * 1. accumulator的值：在第一次调用时，如果指定了 初始值 则为指定的初始值
     * 2. callbackFn 从数组中的第一个值作为 currentValue 开始执行
     */
    const result_2 = numArray.reduce((accumulator, currentValue)=>{
      
      
        console.log(currentValue);
        return accumulator + currentValue;
    },200); //指定初试值：200

    console.log("结果：" + result_2);//有初试值：200+1+2+3+4 = 210

</script>

    Insertar descripción de la imagen aquí

4.3 Ejemplo 2: encontrar la suma de un valor de atributo en una matriz de objetos

  • El código se muestra a continuación:
        <script>

        function Dog(dogName,dogAge){
      
      
            this.dogName = dogName,
            this.dogAge = dogAge
        }

        let dog_1 = new Dog('麦兜',3);
        let dog_2 = new Dog('泡泡',5);
        let dog_3 = new Dog('大牙',2);

        const dogs = [dog_1,dog_2,dog_3];

        // console.log(dogs);
        
        const sumAge = dogs.reduce((pre,cur)=>{
      
      
            return pre + cur.dogAge;
        },0);

        console.log(sumAge);
        
    </script>
    Insertar descripción de la imagen aquí

4.4 Ejemplo 3: aplanamiento de matrices anidadas

  • como sigue:

      //展平嵌套数组
  const array = [[1,2],[3,4],[5,6]];

  const new_array = array.reduce((accumulator, currentValue)=>{
      
      
      return [...accumulator,...currentValue];
  });

  console.log(new_array);

    Insertar descripción de la imagen aquí

4.5 Ejemplo 4: contar el número de apariciones de valores en un objeto

  • como sigue:

      //统计对象中值的出现次数

  const strs = ['you','love','I','love','beautiful','go'];

  const count_result = strs.reduce((countSum,currentStr)=>{
      
      
      if(currentStr === 'love'){
      
      
          return countSum + 1;
      }
      return countSum;
  },0);

  console.log("love 单词出现的次数：" + count_result);

    Insertar descripción de la imagen aquí

4.6 Ejemplo 5: deduplicación de matrices

  • como sigue:
     //去重
 const strs = ['you','love','go','love','beautiful','go'];

 let result = strs.reduce((countSum,currentStr)=>{
      
      
     if(countSum.includes(currentStr)){
      
      
         return countSum;
     }else{
      
      
         return [...countSum,currentStr];
     }
 },[]);

 console.log(strs);
 console.log(result);
    Insertar descripción de la imagen aquí
    Para obtener más información sobre su uso, consulte el sitio web oficial:
    Sitio web oficial: Array.prototype.reduce() .

Supongo que te gusta

Origin blog.csdn.net/suixinfeixiangfei/article/details/132746531
Recomendado
Clasificación
Diario
Más
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)

Code World

© 2018 codetd.com