Con respecto a la deduplicación de arreglos, ya es una pregunta cliché. Ya hay N artículos sobre la deduplicación de arreglos en Internet. Por lo tanto, cualquiera que pueda leer este blog, todos estamos destinados. Espero que en 2023 pueda viajar en el viento. y las olas, golpean el mar. En las entrevistas generales, la deduplicación de datos también es una pregunta obligada. Por lo general, hago las siguientes tres preguntas pequeñas.
Tabla de contenido
1. Hable sobre los escenarios de uso de los proyectos de deduplicación de matriz
2. Ejemplo de visualización de territorio de banco frontal
En segundo lugar, hablemos de varios métodos de implementación de la deduplicación de arreglos.
Primero me gusto este sencillo
Ahora como esta forma de objeto
Esta es una de mis historias de éxito:
1. Hable sobre los escenarios de uso de los proyectos de deduplicación de matriz
Antes de hacer la pregunta sobre la deduplicación de arreglos, le preguntaré cortésmente, ¿utiliza a menudo la deduplicación de arreglos? En general, las respuestas que obtengo son, por supuesto, de uso común (tal vez él también quiera decir, debo usarlo con frecuencia, lo uso todos los días y lo he estado usando todo el tiempo. Justo ahora cuando me estaba preparando para el entrevista, también observé varios métodos de implementación para la deduplicación de arreglos). Luego pregunté: Por favor, cuénteme sobre el escenario del proyecto de deduplicación de arreglos.
Reflexionó durante un rato, no habló y luego dijo avergonzado: Una vez que una matriz devuelta por el servidor contenía datos duplicados, usé la matriz para deduplicar. Pregunté: ¿Puedes hablar sobre la escena general, no hace falta decir que es demasiado detallada? Luego me ignoró.
Permítanme hablar sobre dos escenarios en los que se usará la deduplicación de matriz.
1. Eje del tiempo
Permíteme darte un ejemplo aquí. De hecho, si encuentras un ejemplo real cuando lo conviertes en un sitio web real, debes embellecer el estilo. En este ejemplo de línea de tiempo, el año, el mes y el día se utilizan como punto de resumen de la línea de tiempo, y los subelementos del punto de resumen son el contenido de la lista que se registrará en este momento. En este caso, el retorno del servidor debe tener la forma de una matriz, y el formato de datos es más o menos así:
data = [
{
time: '2022-12-21 08:03:34',
title: '使用css3实现一个超浪漫的新年倒计时'
},
{
time: '2023-01-02 23:50:55',
title: '我辛辛苦苦做了一个月的项目，组长年底用来写了晋升PPT'
},
{
time: '2023-01-03 22:36:01',
title: '内卷对于2022是一种无奈，也是一种修行'
},
{
time: '2023-01-03 23:42:38',
title: '前端bug每次都比后端多，我总结了5点原因'
},
]Tenga en cuenta que debido a que el blog de todos o un proceso de escritura debe ser un proceso a largo plazo, los datos deben ser indeterminados y puede haber paginación, por lo que es imposible que el servidor organice previamente los datos en lo que necesita el front-end. , por lo tanto, en este momento, la parte del año, mes y día de los datos se convierte en una parte repetida que necesita ser desduplicada. Después de la desduplicación, se usa para mostrar los puntos de resumen de este caso.
2. Ejemplo de visualización de territorio de banco frontal
Hay muchos sitios web que tienen una página de este tipo y se muestra el territorio del banco, porque hay muchos bancos grandes y pequeños en todo el país, debemos mostrarlo así:
La mayoría de las veces, el servidor no extrae primero Beijing, Tianjin, Shanghái y otros territorios en la forma de valor clave del mapa. Por algunas razones, también se devuelve al front-end en forma de matriz, y la mayoría de el momento en que esta matriz se extrae directamente de la base de datos. Los datos obtenidos, lo que lleva a la necesidad de que nuestro front-end realice una deduplicación de la matriz. Los datos del lado del servidor se ven así:
data = [
{
city: '北京',
name: '北京银行1'
},
{
city: '北京',
name: '北京银行2'
},
{
city: '北京',
name: 'XX商业银行'
},
{
city: '天津',
name: '天津银行1'
},
{
city: '天津',
name: '天津商业银行'
},
{
city: '天津',
name: '港口商业银行'
},
]Con tal descripción, ¿piensa en muchos escenarios similares? En este caso, el campo de la ciudad en la matriz es el objeto que necesita ser deduplicado.
En segundo lugar, hablemos de varios métodos de implementación de la deduplicación de arreglos.
Porque en proyectos reales, la deduplicación no solo puede deduplicar algunos números, sino que también puede contener cadenas y números mixtos, por lo que aquí pensamos aleatoriamente en una matriz mixta, por ejemplo:
var arr = ['2022-03-21', 3, 8, 5, 3, 4, 3, '2022-03-21', '2022-03-22', 8];
1. Tipo 1
El primero es definir una nueva matriz vacía y luego ejecutar bucles dobles anidados para monitorear si no hay elementos en la matriz vacía y empujarlos a la matriz vacía. Este método examina el uso principal de continuar, que también es un tipo de pensamiento. La primera matriz vacía no debe tener contenido. Introducimos un elemento, omitimos el primer ciclo y luego comparamos el ciclo por segunda vez. El código es el siguiente: sigue:
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (newArr.length === 0) {
newArr.push(arr[i]);
continue;
}
for (var j=0;j<newArr.length;j++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
}2. Tipo 2
El segundo tipo es una mejora del primer tipo. También define una matriz vacía y usa indexOf para monitorear si un elemento está contenido en la nueva matriz. El código es el siguiente:
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}3. Tipo 3
El tercer tipo es el conjunto lanzado después de es 6. La configuración del conjunto en sí es una matriz de clase no repetitiva, por lo que hay puntos de conocimiento para convertir matrices y conjuntos, y la conversión de conjunto a matriz puede ser [... conjunto] Una forma de deconstrucción, también puede ser el método de Array.from(set), el código es el siguiente:
var mySet = new Set(arr); // 非重复的类数组
// var newArr = Array.from(mySet); // set转数组
var newArr = [...mySet]; // 或者是这种解构方法4. Tipo 4
Con el método integrado de filtro, el filtro recibe una función integrada y la función en sí recibe 3 parámetros. item es equivalente a arr[i], index es equivalente a i index y arr es la matriz en sí. cases, arr debe pasarse, pero este caso no se pasa porque es relativamente simple. Use indexOf para encontrar el índice por primera vez y devuelva todos los elementos que aparecen por primera vez en la matriz original para lograr el efecto de deduplicación. El código es el siguiente:
var newArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
})5. Tipo 5
El quinto es usar el método incluido incluido de la matriz para monitorear si un elemento está contenido en la matriz. Si dice esto en la entrevista, prueba que al menos ha resuelto las nuevas propiedades de la matriz o algunas métodos incorporados, lo cual es una buena idea Respuesta, el código es el siguiente:
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i]);
}
}6. Tipo 6
El sexto es crear un nuevo objeto de mapa (u objeto) y usar su valor clave único para crear continuamente atributos en el mapa. Una vez que se crea un atributo, significa que el valor del atributo se puede modificar. Algunas operaciones y el atributo ya es el único elemento que está deduplicado, el código es el siguiente:
var obj = {}; // 对象的key值是唯一的
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = arr[i];
}
}3. ¿Cuál te gusta usar más?
Hay más que estos métodos de implementación para la deduplicación de arreglos, ¿verdad? Entonces ha mencionado tantos tipos. De hecho, cada vez que hace un proyecto, solo usa un método en un escenario determinado. Es imposible para este requisito. Yo uso todos ellos Muy bien, entonces, ¿cuál te gusta usar más?
Primero me gusto este sencillo
De hecho, en los primeros días, me gustaba el primer tipo, porque la tecnología estaba demasiado caliente en ese momento, pero pensándolo bien, ahora también está muy caliente, por lo que muchas veces no me atrevo a exportar productos secos, y no "Tengo muchos productos secos. En segundo lugar, llegó la salida. También es mucho para repetir con todos. Hay tantos puntos de conocimiento escritos, ¿por qué a la gente le gusta leer el mío? Y en ese momento, todavía consideraba el primer método de implementación como un tesoro, mostrándolo a otros en todas partes, y lo intenté repetidamente, jaja, pero luego vi que usé el segundo método.
Ahora como esta forma de objeto
Ahora, prefiero el sexto tipo, porque combinado con muchos escenarios de proyecto, de hecho, durante el proceso de desarrollo, es raro traer una matriz pura para la deduplicación. La mayoría de las veces, como en el caso mencionado anteriormente, la deduplicación es para entender Acoplamiento, use la parte deduplicada como un valor clave grande, y la parte de valor, a veces son algunos sub-arreglos, a veces son más arreglos, así que prefiero el sexto método, directamente el arreglo agregado original, Desátelo y luego procese en un formulario de objeto de mapa, y luego realice alguna representación en la página.
4. Comparte un caso mío
¿Cómo surgió esta pregunta de la entrevista? Es porque todos trabajan lentamente y constantemente encuentran puntos débiles. El resultado resumido por innumerables personas se ha convertido gradualmente en una pregunta de entrevista. Por lo tanto, la solución a la pregunta de la entrevista generalmente se verifica en línea y se puede resolver memorizándola.
Pero algunos entrevistadores, si no respondes bien, piensan: vienes a la entrevista, hay tantas respuestas en Internet, ¿por qué no te las memorizas todas? Tu respuesta fue tan suave que pensó de nuevo: Este tipo debe haber sido respondido, es exactamente lo mismo que se dijo en Internet.
Por lo tanto, se recomienda que combine las respuestas a las preguntas de la entrevista con su propia experiencia del proyecto durante la entrevista, y traiga los resultados de la entrevista a la experiencia del proyecto para responder. Cuénteme su propia experiencia, entonces creo que el entrevistador puede quedar impresionado por tu sinceridad
Esta es una de mis historias de éxito:
Entrevisté a una empresa antes, entrevistando al desarrollo de front-end, y no hicieron preguntas de entrevista de front-end, y dijeron esas preguntas. Por ejemplo, por un trozo de carne, Zhang San dio dinero falso, el jefe fue a cambiarlo por dinero real, y luego perdió el dinero y perdió la carne, etc. Por supuesto, hay otros problemas similares intrigantes. ¿Cómo puede mi coeficiente intelectual roto resolver tantos problemas rotos tan rápido y, para algunas preguntas, cuanto más piensas en ello, más fácil es caer en el pensamiento, y cuanto más piensas en ello, más equivocado parece ser tu pensamiento? .
Escribí esto directamente en el papel:
var num = 100; // estos son los 100 yuanes iniciales,
num += 200; // El num en este momento es de 300 yuanes, que es el paso en el que el jefe obtiene dinero para carne
Escribí directamente este tipo de preguntas en forma de código, escribí notas cuidadosamente y las entregué.
Por supuesto, también puede escribir: ¡Rechace hacer este tipo de resolución de problemas, me iré!