El objeto Array (matriz) en JavaScript es un contenedor que se utiliza para almacenar una serie de valores, que pueden contener cualquier tipo de datos, incluidos números, cadenas, objetos, etc. Mediante el uso de objetos de matriz, podemos organizar y procesar datos fácilmente y realizar varias operaciones, como buscar, clasificar, filtrar, iterar y más.
Tabla de contenido
-
-
- 1. En JavaScript, podemos crear un objeto de matriz de muchas formas.
- En segundo lugar, el método de matriz
- 3. Uso del método
-
-
- 1, empujar ()
- 2, cambio ()
- 3, cancelar el cambio ()
- 4, pop ()
- 5, ordenar ()
- 6, empalme ()
- 7, reversa()
- 8, unirse ()
- 9, concatenación()
- 10, rebanada ()
- 11, a la cadena ()
- 12, valor de ()
- 13, índice de ()
- 14, último índice de ()
- 15, para cada uno ()
- 16, mapa ()
- 17, filtro ()
- 18, cada ()
- 19, algunos ()
- 20、reducir()
- 21, buscar índice ()
-
-
1. En JavaScript, podemos crear un objeto de matriz de muchas formas.
1. Definición directa
sea arr = [1, 2, 3, 4, 5];
2. Constructor
let arr = new Array(1, 2, 3, 4, 5);
además de pasar un conjunto de valores iniciales, también podemos usar un parámetro numérico para especificar la longitud de la matriz, por ejemplo:
let arr = new matriz(5);
3、Array.of 和 Array.from
En ES6, JavaScript proporciona dos nuevos métodos de matriz Array.of y Array.from para crear matrices.
El método Array.of se puede usar para crear una matriz que contenga cualquier número de elementos, por ejemplo:
let arr = Array.of(1, 2, 3, 4, 5);
El método Array.from se puede usar para pasar un objeto tipo matriz o Convertir el objeto iterativo en una matriz, por ejemplo:
let arr = Array.from("hola");
4. Elementos de acceso
Podemos usar el operador de corchetes [] para acceder a los elementos de la matriz, por ejemplo:
let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 1
consola. log(arr[2]); // 3
4. Modificar elementos
También podemos usar operadores de corchetes para modificar los elementos de la matriz, por ejemplo:
let arr = [1, 2, 3, 4, 5];
arr[0] = 6;
arr[2] = 7;
console.log (arriba); // [6, 2, 7, 4, 5]
En segundo lugar, el método de matriz
El objeto Array de JavaScript proporciona muchos métodos útiles para manipular y manipular los elementos de la matriz. A continuación, presentaremos algunos métodos comúnmente utilizados.
Cómo cambiar la matriz original
| nombre del método | Descripcion funcional |
|---|---|
| empujar() | Agregue uno o más datos al final y devuelva la longitud |
| cambio() | Eliminar el primer bit y devolver los datos eliminados |
| anular desplazamiento() | Agregue uno o más datos en primer lugar y devuelva la longitud |
| estallido() | Eliminar el último bit y devolver los datos eliminados |
| clasificar() | Ordenar (reglas de caracteres), devolver el resultado |
| empalme() | Elimine la ubicación especificada, reemplácela y devuelva los datos eliminados |
| contrarrestar() | Invertir la matriz, devolver el resultado |
Un método que no cambia la matriz original.
| nombre del método | Descripcion funcional |
|---|---|
| unirse() | Usando un delimitador, convierta la matriz en una cadena y devuelva |
| concat() | Combinar matrices y devolver los datos combinados |
| rebanada() | Interceptar la matriz en la posición especificada y regresar |
| Encadenar() | Convierte directamente a una cadena y regresa |
| valor de() | Devuelve el valor primitivo del objeto de matriz. |
| índice de() | Consultar y devolver el índice de los datos. |
| últimoÍndiceDe() | Invierta la consulta y devuelva el índice de los datos. |
| para cada() | El parámetro es una función de devolución de llamada, que recorrerá todos los elementos de la matriz. La función de devolución de llamada acepta tres parámetros, a saber, valor, índice y uno mismo; forEach no tiene valor de retorno |
| mapa() | Igual que forEach, mientras que la función de devolución de llamada devuelve datos para formar una nueva matriz devuelta por el mapa |
| filtrar() | Igual que forEach, mientras que la función de devolución de llamada devuelve un valor booleano, y los datos verdaderos forman una nueva matriz y son devueltos por el filtro. |
| cada() | Igual que forEach, mientras que la función de devolución de llamada devuelve valores booleanos, todos son verdaderos y todos devuelven verdadero |
| alguno() | Igual que forEach, mientras que la función de devolución de llamada devuelve un valor booleano, siempre que uno sea verdadero, algunos devuelven verdadero |
| reducir() | Fusionar, igual que forEach, iterar sobre todos los elementos de la matriz y construir un valor final, devuelto por reduce |
| buscarÍndice() | Encuentre el subíndice del primer elemento elegible en la matriz y deje de atravesar |
3. Uso del método
1, empujar ()
El método push consiste en agregar uno o más elementos al final de la matriz y devolver la nueva longitud de la matriz.
var arr = ['a','b','c'];
var ele = arr.push('d');
// ele结果为: 4;
// arr数组被修改: ['a','b','c','d'];
2, cambio ()
El método shift elimina el primer elemento de la matriz y devuelve el valor de ese elemento
var arr = ['a','b','c','d'];
var ele = arr.shift();
// ele结果为: a;
// arr数组被修改: ['b''c','d'];
3, cancelar el cambio ()
El método unshift es agregar uno o más elementos al comienzo de la matriz y devolver la nueva longitud de la matriz
var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];
4, pop ()
El método pop elimina el último elemento de la matriz y devuelve el valor de ese elemento. Devuelve indefinido si la matriz está vacía
var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];
5, ordenar ()
El método de ordenación consiste en ordenar los elementos de la matriz y el valor predeterminado es el orden ascendente.
var arr = [1,5,2,4,3]
arr.sort()
// arr数组被修改: [1,2,3,4,5]
6, empalme ()
El método splice(start,deleteCount,item1,...,itemx) puede realizar la eliminación, inserción y reemplazo de la matriz.
inicio: Especifica la posición inicial de la modificación (contando desde 0). Si se excede la longitud del arreglo, el contenido se agrega desde el final del arreglo; si es un valor negativo, indica el número desde el final del arreglo (contando desde -1, lo que significa que -n es el último n-ésimo elemento y etc. igual a matriz.longitud-n); si el valor absoluto del número negativo es mayor que la longitud de la matriz, significa que la posición inicial es la posición 0.
eliminarCuenta: opcional. Un número entero que representa el número de elementos de la matriz que se van a eliminar.
Si deleteCount es mayor que el número total de elementos después del inicio, se eliminarán todos los elementos después del inicio (incluido el bit de inicio).
Si se omite deleteCount, o su valor es mayor o igual que array.length - start (es decir, si es mayor o igual que el número de todos los elementos después del inicio), todos los elementos de la matriz después del inicio serán eliminado
Si deleteCount es 0 o negativo, no se elimina ningún elemento. En este caso, se debe agregar al menos un elemento nuevo.
elemento1, ..., elementoX: Opcional. Elementos para agregar a la matriz, comenzando en la posición de inicio. Si no se especifica, splice() solo eliminará los elementos de la matriz.
var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素，插入"e"
var insertOnce = arr.splice(2,0,'e');
insertOnce = []
arr = ['a', 'b', 'e', 'c', 'd']
// 从索引3的位置开始删除一个元素
var delOnce = arr.splice(3,1);
// delOnce数组为: ['c']
// arr数组被修改: ['a', 'b', 'e', 'd']
7, reversa()
El método inverso invierte los elementos de la matriz.
var arr = [1,2,3,4,5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]
8, unirse ()
El método join() coloca todos los elementos de la matriz en una cadena de acuerdo con el delimitador especificado y devuelve la cadena.
Parámetros: join(str); Los parámetros son opcionales, el predeterminado es "," y el carácter entrante se usa como separador.
var arr = [1,2,3];
console.log(arr.join()); //1,2,3
console.log(arr.join("-")); //1-2-3
9, concatenación()
El método concat() se usa para combinar dos o más arreglos. Este método no altera la matriz existente, pero devuelve una nueva matriz.
var arr1 = ['a', 'b', 'c', 'd'];
var arr2 = ['e','f']
var arr3 = arr1.concat(arr2);
// arr3数组为: ['a', 'b', 'c', 'd','e','f']
10, rebanada ()
El método slice(start, end) devuelve una nueva matriz que consta de elementos desde el subíndice inicial especificado hasta el subíndice final en la matriz original.
El método slice() puede aceptar uno o dos parámetros, a saber, la posición inicial (inicio) y final (final) del elemento que se va a devolver.
start es opcional para extraer el índice de inicio (a partir de 0), desde el cual se extraen los elementos del arreglo original
. Si este parámetro es negativo, significa extraer del penúltimo elemento del arreglo original. slice(-2) significa Extrae el penúltimo elemento hasta el último elemento (inclusive) en la matriz original.
Si se omite start, el segmento comienza en el índice 0.
Si inicio está fuera del rango de índice de la matriz original, se devolverá una matriz vacía.
end Opcional El índice (a partir de 0) en el que finaliza la extracción, en el que finaliza la extracción de los elementos originales de la matriz. slice extraerá todos los elementos de la matriz original con índices de principio a fin (se incluye el principio, pero no el final).
slice(1,4) extraerá todos los elementos del segundo elemento al cuarto elemento de la matriz original (elementos con índices 1, 2, 3).
Si este parámetro es un número negativo, significa que los últimos elementos de la matriz original finalizarán la extracción. slice(-2,-1) indica que se extrae del penúltimo elemento al último elemento de la matriz original (excluyendo el último elemento, es decir, solo el penúltimo elemento).
Si se omite end, el segmento se extraerá hasta el final de la matriz original.
Si end es mayor que la longitud de la matriz, el segmento también se extraerá hasta el final de la matriz original.
var arr = ['a','b','c','d'];
var res = arr.slice(0,2);
// arr数组未被修改: ['a', 'b', 'c', 'd'];
// res数组为: ['a', 'b'];
11, a la cadena ()
toString() se convierte en una cadena
var arr = [1,2,3];
console.log(arr.toString()); //1,2,3
console.log(arr); //[1,2,3]---原数组未改变
12, valor de ()
El método valueOf() se utiliza para devolver el valor original del objeto especificado. Si el objeto no tiene valor original, se devolverá el objeto en sí. Por lo general, JavaScript lo llama internamente, en lugar de explícitamente en el código. El uso de valueOf puede prevenir eficazmente las excepciones de puntero nulo.
El valor de retorno del método valueOf() de diferentes tipos de objetos:
Array: devuelve el propio objeto de matriz.
Booleano: devuelve un valor booleano.
Fecha: la hora almacenada es el número de milisegundos desde la medianoche del 1 de enero de 1970 UTC.
Función: Devuelve la función en sí.
Número: Devuelve un valor numérico.
Objeto: Devuelve el objeto en sí. Este es el valor predeterminado.
Cadena: devuelve un valor de cadena.
Los objetos Math y Error no tienen un método valueOf.
// Array：返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array); // true
// Date：当前时间距1970年1月1日午夜的毫秒数
// Sun Aug 18 2013 23:11:59 GMT+0800 (中国标准时间)
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
console.log(date.valueOf()); // 1376838719230
// Number：返回数字值
var num = 15.26540; // 15.2654
num.valueOf() // 15.2654
console.log(num.valueOf() === num); // true
// 布尔：返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool); // true
// new一个Boolean对象
var newBool = new Boolean(true); // Boolean {true}
newBool.valueOf() // true
// valueOf()返回的是true，两者的值相等
console.log(newBool.valueOf() == newBool); // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
console.log(newBool.valueOf() === newBool); // false
// Function：返回函数本身
function foo(){
}
console.log( foo.valueOf() === foo ); // true
var foo2 = new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() === foo2); // true
// Object：返回对象本身
var obj = {
name: "张三", age: 18};
console.log( obj.valueOf() === obj ); // true
// String：返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str ); // true
// new一个字符串对象
// String {"http://www.xyz.com"}
var str2 = new String("http://www.xyz.com");
str2.valueOf() // "http://www.xyz.com"
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
console.log( str2.valueOf() === str2 ); // false
13, índice de ()
El método indexOf(value, index) consulta la posición en la matriz de izquierda a derecha según los datos especificados y devuelve -1 si los datos especificados no existen. Este método es un método de consulta y no cambia la matriz.
valor: obligatorio, especifica el valor de cadena que se va a recuperar. Parámetro entero opcional.
índice: especifica la posición en la cadena para comenzar a buscar. Sus valores válidos son 0 a stringObject.length - 1. Si se omite este parámetro, la búsqueda comenzará desde el primer carácter de la cadena.
let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(1)); // 没有填fromIndex所以默认从索引为0的位置开始往后查找
// 0
console.log(arr.indexOf(1,1)); // 表示从索引为1的位置开始往后查找
// 8
14, último índice de ()
El método lastIndexOf(value, start) consulta la posición en la matriz de derecha a izquierda según los datos especificados y devuelve -1 si los datos especificados no existen.
valor: los datos a consultar;
inicio: opcional, que indica la posición de inicio de la consulta, cuando inicio es un número negativo, contando desde el final de la matriz; si no se encuentra el valor, el método devuelve -1
var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //3
console.log(arr.lastIndexOf("l",3)); //3
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //2
console.log(arr.lastIndexOf("l",-4)); //-1
15, para cada uno ()
El método forEach() recorre la matriz y ejecuta la función dada en cada elemento de la matriz. Este método no tiene valor de retorno.
Parámetros: Todos son tipos de funciones, y hay parámetros pasados por defecto.Los parámetros son: el contenido de la matriz a recorrer, el índice de la matriz correspondiente y la matriz en sí.
var arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, a)=>{
console.log(item + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
16, mapa ()
El método map() ejecuta la función dada en cada elemento de la matriz y devuelve una matriz de los resultados de cada llamada de función.
let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.map(item => {
return item * 2
})
console.log(newArr); //[20, 60, 100, 120, 240, 460, 680, 900]
console.log(arr); //[10, 30, 50, 60, 120, 230, 340, 450]
17, filtro ()
El método filter() es para filtrar. Cada elemento de la matriz ejecuta una función determinada y devuelve una matriz que cumple las condiciones del filtro.
//过滤出索引为3的倍数 或者 值大于8的元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter((item, index) => {
return index % 3 === 0 || item >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
18, cada ()
El método every() es para juzgar si cada elemento de la matriz cumple la condición, y solo cuando todos los elementos cumplan la condición, devolverá verdadero.
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every((x)=> {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every((x) => {
return x < 3;
});
console.log(arr3); // false
19, algunos ()
El método some() es para determinar si hay un elemento en la matriz que cumple la condición, y siempre que haya un elemento que cumpla la condición, devolverá verdadero.
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some((x)=> {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some((x)=> {
return x < 1;
});
console.log(arr3); // false
20、reducir()
El método reduce () comienza desde el primer elemento de la matriz, atraviesa hasta el final uno por uno, itera todos los elementos de la matriz y luego construye un valor devuelto final.
Nota: El método reduce() no se ejecuta para elementos de matriz que no tienen valor.
Sintaxis: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Valor del parámetro:
// 作用:对数组中所有的内容进行汇总 要传至少两个值
let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.reduce((pre, n) => {
return pre + n
}, 0)
console.log(newArr);
// 计算
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
// 去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
// 将二维数组转成一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
21, buscar índice ()
El método findIndex() devuelve el índice del primer elemento de la matriz que satisface la función de prueba proporcionada. Si no, devuelve -1.
let arr = [10, 2, 9, 17, 22];
let index = arr.findIndex((item) => item > 13)
console.log(index); // 3