Un artículo para comprender todos los métodos de matriz comunes (colección recomendada)

---

prefacio

En el trabajo, los datos en la matriz a menudo se procesan, pero hay muchos métodos de matriz y, a menudo, se olvida cómo se llama un determinado método y cómo usarlo, por lo que aquí hay un registro especial de cómo usar matrices comunes.
Cabe señalar que escribí esto basado en el marco Vue. Si usa JS nativo u otros marcos, debe prestar atención a los problemas de formato.

---

cambiará la matriz original

estallido

Elimina el último elemento de la matriz y devuelve el elemento eliminado.

• gramática

matriz.pop()

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.pop()
    console.log('修改后:'+newData);
    console.log('修改后:'+this.data);
  }
}
</script>

• Efecto
  

empujar

Agrega uno o más elementos al final de la matriz y devuelve la nueva longitud.

• gramática

array.push(elemento1, elemento2, …, elementoX)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.push('77')
    console.log('修改后:'+this.data);
    console.log('修改后返回的值:'+newData);
  }
}
</script>

• Efecto
  

cambio

Elimina y devuelve el primer elemento de la matriz.

• gramática

array.shift()

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.shift()
    console.log('修改后:'+this.data);
    console.log('修改后返回的值:'+newData);
  }
}
</script>

• Efecto
  

desarmar

Agrega uno o más elementos al comienzo de la matriz y devuelve la nueva longitud.

• gramática

array.unshift(elemento1, elemento2, …, elementoX)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.unshift('0')
    console.log('修改后:'+this.data);
    console.log('修改后返回的值:'+newData);
  }
}
</script>

• Efecto
  

contrarrestar

Invierte el orden de los elementos de una matriz.

• gramática

array.reverse()

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    this.data.reverse()
    console.log('修改后:'+this.data);
  }
}

• Efecto
  

clasificar

Ordena los elementos de una matriz.

• gramática

array.sort(función de clasificación)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[5,3,6,1,7,8,2,9,4],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    this.data.sort()
    console.log('修改后:'+this.data);
  }
}
</script>

• Efecto
  

empalme

Se utiliza para insertar, eliminar o reemplazar elementos de la matriz.

• gramática

array.splice(índice,cuántos,elemento1,…,elementoX)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    this.data.splice(1,3)   //删除下标1至3
    console.log('删除下标1至3:'+this.data);
    this.data = [1,2,3,4,5,6,7,8,9,10]

    this.data.splice(1,0,'a')   //在下标1插入a
    console.log('在下标1插入a:'+this.data);
    this.data = [1,2,3,4,5,6,7,8,9,10]

    this.data.splice(1,2,'a','b')   //在下标1至2替换为'a','b'
    console.log('在下标1至2替换为a,b:'+this.data);
  }
}
</script>

• Efecto
  

no cambia la matriz original

concat

Concatena dos o más matrices y devuelve el resultado.

• gramática

cadena.concat(cadena1, cadena2, …, cadenaX)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
      data2:['a','b','c','d','e','f','g','h','i','j'],
    }
  },
  mounted(){
    
    
    console.log('修改前(data)：',this.data);
    console.log('修改前(data2)：',this.data2);
    let newData = this.data.concat(this.data2)
    console.log('修改后:'+newData);
  }
}
</script>

• Efecto
  

cada

Comprueba si cada elemento del elemento de la matriz cumple la condición.

• gramática

array.every(function(currentValue,index,arr), thisValue)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.every((item) => {
    
    
      return item > 10
    })
    let newData2 = this.data.every((item,index,arr) => {
    
    
      console.log(index); //index可以当做第一个不符合验证的下标
      console.log(arr); //当前数组
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>

• Efecto
  

alguno

Comprueba si algún elemento del elemento de la matriz cumple la condición especificada.

• gramática

array.some(function(currentValue,index,arr),thisValue)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.some((item,index,arr) => {
    
    
      console.log(index); //index可以当做符合验证的下标
      console.log(arr); //当前数组
      return item < 100
    })
    let newData2 = this.data.some((item) => {
    
    
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>

• Efecto
  

filtrar

Detecta elementos de matriz y devuelve una matriz de todos los elementos que cumplen los criterios.

• gramática

array.filter(función(valorActual,índice,arr), esteValor)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.filter((item,index,arr) => {
    
    
      console.log(index); //当前下标
      console.log(arr); //当前数组
      return item < 100
    })
    let newData2 = this.data.filter((item) => {
    
    
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>

• Efecto
  

índice de

Busca un elemento en una matriz y devuelve su posición.

• gramática

string.indexOf(valor de búsqueda, inicio)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.indexOf(300)   //找第一个300的位置并返回下标
    let newData2 = this.data.indexOf(100)   //找第一个100的位置并返回下标，没找到则为-1
    let newData3 = this.data.indexOf(300,3) //从下标为3开始找300，没找到为-1
    console.log(newData);
    console.log(newData2);
    console.log(newData3);
  }
}
</script>

• Efecto
  

unirse

Coloque todos los elementos de la matriz en una cadena.

• gramática

array.join(separador)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[],
      data2:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('修改前:',this.data);
    this.data = this.data2.join(',')  //将data2赋值给data1并且以','隔开,注意会覆盖data中的内容
    console.log('修改后:',this.data);
  }
}
</script>

• Efecto
  

Convierta una matriz en una cadena y devuelva el resultado.

• gramática

numero.toString(radix)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('修改前:',this.data);
    this.data = this.data.toString()  
    console.log('修改后:',this.data);
  }
}
</script>

• Efecto
  

últimoÍndiceDe

Devuelve la posición de la última aparición de un valor de cadena especificado, buscando hacia adelante y hacia atrás en la posición especificada en una cadena.

• gramática

string.lastIndexOf(valor de búsqueda, inicio)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('data:',this.data);
    let num = this.data.lastIndexOf(50)  
    console.log('50最后出现的位置:',num);
    let num2 = this.data.lastIndexOf(300,1)  //下标为1的地方找，注意这里是从后往前找
    console.log('300最后出现的位置:',num2);
    let num3 = this.data.lastIndexOf(600)  
    console.log('600最后出现的位置:',num3); //没找到则返回-1
  }
}
</script>

• Efecto
  

mapa

Procesa cada elemento de la matriz con la función especificada y devuelve la matriz procesada.

• gramática

array.map(función(valorActual,índice,arr), esteValor)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.map((item,index,arr) => {
    
    
      console.log(index); //当前下标
      console.log(arr); //当前数组
      return item < 100
    })
    let newData2 = this.data.map((item) => {
    
    
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>

• Efecto
  

rebanada

Seleccione una parte de una matriz y devuelva una nueva matriz.

• gramática

rray.slice(inicio, fin)

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('data:',this.data);
    let num = this.data.slice(1,4)  
    console.log('截取第一个到第三个:',num);
    let num2 = this.data.slice(-4,-1)  
    console.log('截取倒数第四个到倒数第二个:',num2);
    let num3 = this.data.slice(-3)  
    console.log('截取倒数三个:',num3);
    let num4 = this.data.slice(2)  
    console.log('截取第二个后面的全部:',num4);
  }
}
</script>

• Efecto
  

Devuelve el valor primitivo del objeto de matriz.

• gramática

numero.valorDe()

• el código

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:1
    }
  },
  mounted(){
    
    
    console.log(this.data);
    let newData = this.data.valueOf()
    console.log(newData);
  }
}
</script>

• Efecto