Un programador que no usa bien una matriz no es bueno, dije ~
Me hice cargo de un proyecto hace algún tiempo. La lógica era oscura y el código era enorme y redundante, por lo que era extremadamente difícil comenzar. La gran razón es que el método de matriz no es competente, lo que conduce a una gran cantidad de código basura. De hecho, muchos lugares pueden volverse simples, eficientes y elegantes con una pequeña modificación. Por lo tanto, resumiré aquí los métodos comunes de matrices y las habilidades pervertidas de KitKat (las habilidades pervertidas de KitKat se reducen principalmente ~).
Primero se deben tener en cuenta las operaciones de matriz y recordar splice、sort、reverseque estos tres métodos comunes son operaciones en la matriz en sí, que cambiarán la matriz en sí. Otros métodos que cambiarán por sí mismos son las adiciones push/pop/unshift/shift, eliminaciones , llenado filly duplicación y llenado copyWithin.
Hablemos primero de los métodos comunes de las matrices y luego hablemos del malentendido de usarlos.
Arreglar métodos comunes
¡Primero presente una figura perezosa del método de matriz para sacrificarla al cielo! (Excepto por lo Array.keys()/Array.values()/Array.entries()básico):
Enciclopedia de métodos de matriz
Genere una matriz como [1-100]:
Al probar una gran cantidad de datos de matriz, puede:
let arr = new Array(100).fill(0).map((item, index) => index + 1)Aplicación de asignación de desestructuración de matrices
// 交换变量[a, b] = [b, a][o.a, o.b] = [o.b, o.a]// 生成剩余数组const [a, ...rest] = [...'asdf'] // a：'a'，rest: ["s", "d", "f"]
Copia superficial de la matriz
const arr = [1, 2, 3]const arrClone = [...arr]// 对象也可以这样浅拷贝const obj = { a: 1 }const objClone = { ...obj }
Hay muchos métodos de copia superficial arr.slice(0, arr.length)/Arror.from(arr), pero ...después de usar el operador, no querrá usar otros ~
Fusión de matriz
const arr1 = [1, 2, 3]const arr2 = [4, 5, 6]const arr3 = [7, 8, 9]const arr = [...arr1, ...arr2, ...arr3]
arr1.concat(arr2, arr3)También se puede fusionar, pero ...después de usar el operador, no querrá usar otros ~
Deduplicación de matrices
const arr = [1, 1, 2, 2, 3, 4, 5, 5]const newArr = [...new Set(arr)]
new Set(arr)Acepta un parámetro de matriz y genera un tipo de datos de estructura establecida. Los elementos del tipo de datos establecidos no se repetirán y se repetirán Array Iterator, por lo que puede utilizar esta función para eliminar la duplicación .
Intersección de matriz
const a = [0, 1, 2, 3, 4, 5]const b = [3, 4, 5, 6, 7, 8]const duplicatedValues = [...new Set(a)].filter(item => b.includes(item))duplicatedValues // [3, 4, 5]
Resta de matriz
const a = [0, 1, 2, 3, 4, 5]const b = [3, 4, 5, 6, 7, 8]const diffValues = [...new Set([...a, ...b])].filter(item => !b.includes(item) || !a.includes(item)) // [0, 1, 2, 6, 7, 8]
Matriz a objeto
const arr = [1, 2, 3, 4]const newObj = {...arr} // {0: 1, 1: 2, 2: 3, 3: 4}const obj = {0: 0, 1: 1, 2: 2, length 3}// 对象转数组不能用展开操作符，因为展开操作符必须用在可迭代对象上let newArr = [...obj] // Uncaught TypeError: object is not iterable...// 可以使用Array.form()将类数组对象转为数组let newArr = Array.from(obj) // [0, 1, 2]
Recorrido común de matriz
Las matrices se atraviesan comúnmente y existen forEach、every、some、filter、map、reduce、reduceRight、find、findIndex otros métodos, y muchos métodos pueden lograr el mismo efecto. El método de matriz no solo debe usarse, sino que también debe usarse bien. Para usarlo bien, necesita saber cuándo y qué método usar.
Uso mixto de recorrido
filterEl mapvalor de retorno del método sigue siendo una matriz, por lo que se puede mezclar con otros métodos de recorrido de matriz. Tenga en cuenta que cuanto más recorrido, menor es la eficiencia ~
const arr = [1, 2, 3, 4, 5]const value = arr.map(item => item * 3).filter(item => item % 2 === 0).map(item => item + 1).reduce((prev, curr) => prev + curr, 0)
Verifique si todos los elementos de la matriz cumplen las condiciones de juicio
const arr = [1, 2, 3, 4, 5]const isAllNum = arr.every(item => typeof item === 'number')
Verifique si algún elemento de la matriz cumple la condición de juicio
const arr = [1, 2, 3, 4, 5]const hasNum = arr.some(item => typeof item === 'number')
Encuentre el primer elemento / subíndice que cumpla con los criterios
const arr = [1, 2, 3, 4, 5]const findItem = arr.find(item => item === 3) // 返回子项const findIndex = arr.findIndex(item => item === 3) // 返回子项的下标
Malentendido del uso de matrices
Hay muchos métodos para matrices y muchos métodos pueden lograr el mismo efecto, así que use el método apropiado según sus necesidades.
Una de las principales causas del código basura es el uso inadecuado de métodos comunes de matrices. A continuación, se indican algunos puntos a tener en cuenta:
array.includes () 和 array.indexOf ()
array.includes() Devuelve un valor booleano, array.indexOf() devuelve el índice de un elemento de la matriz. indexOf Asegúrese de usarlo cuando se requiera un valor de índice.
const arr = [1, 2, 3, 4, 5]// 使用indexOf，需要用到索引值const index = arr.indexOf(1) // 0if (~index) { // 若index === -1，~index得到0，判断不成立；若index不为-1，则~index得到非0，判断成立。arr.spilce(index, 1)}// 使用includes，不需要用到索引值// 此时若用indexOf会造成上下文上的阅读负担：到底其他地方有没有用到这个index?const isExist = arr.includes(6) // trueif (!isExist) {arr.push(6)}
matriz.find () 、 matriz.findIndex () 和 matriz.algunos ()
array.find()El valor de retorno es el primer elemento de matriz elegible, se array.findIndex() devuelve el índice del primer elemento de matriz elegible y se devuelve el elemento con array.some() o sin condiciones compuestas true, si hay alguna devolución , si no hay devolución false. Tenga en cuenta que estos tres son operaciones de cortocircuito, es decir, el recorrido no continuará después de encontrar el calificado.
Se utiliza cuando se array.find() necesitan los subelementos de la matriz ; cuando se necesita el valor de índice del subelemento array.findIndex() ; y si solo es necesario conocer los subelementos que cumplen las condiciones, utilícelo array.some().
const arr = [{label: '男', value: 0}, {label: '女', value: 1}, {label: '不男不女', value: 2}]// 使用someconst isExist = arr.some(item => item.value === 2)if (isExist) {console.log('哈哈哈找到了')}// 使用findconst item = arr.find(item => item.value === 2)if (item) {console.log(item.label)}// 使用findIndexconst index = arr.findIndex(item => item.value === 2)if (~index) {const delItem = arr[index]arr.splice(index, 1)console.log(`你删除了${delItem.label}`)}
Se recomienda usarlo cuando solo se necesitan valores booleanos y cuando los elementos de la matriz son cadenas o números array.some():
// 当子包含数字0的时候可能出错const arr = [0, 1, 2, 3, 4]// 正确const isExist = arr.some(item => item === 0)if (isExist) {console.log('存在要找的子项，很舒服~')}// 错误const isExist = arr.find(item => item === 0)if (isExist) { // isExist此时是0，隐式转换为布尔值后是falseconsole.log('执行不到这里~')}// 当子项包含空字符串的时候也可能出错const arr = ['', 'asdf', 'qwer', '...']// 正确const isExist = arr.some(item => item === '')if (isExist) {console.log('存在要找的子项，很舒服~')}// 错误const isExist = arr.find(item => item === '')if (isExist) { // isExist此时是''，隐式转换为布尔值后是falseconsole.log('执行不到这里~')}
array.find () 和 array.filter ()
Solo sepa que lo que se array.filter() devuelve es una matriz de todos los subelementos elegibles, y todas las matrices se atravesarán; y array.find() solo se devuelve el primer subelemento elegible, que es una operación de cortocircuito. No más ejemplos ~
Uso razonable de la estructura de datos del conjunto
Debido a que es6 proporciona de forma nativa una Set estructura de datos, Set puede garantizar que los subelementos no se repitan, y es muy conveniente convertir con la matriz, por lo que en algunos escenarios que pueden implicar adiciones repetidas, se puede usar directamente en su Set lugar Array, evitando múltiples lugares para determinar repetidamente si el Niño existente.
const set = new Set()set.add(1)set.add(1)set.add(1)set.size // 1const arr = [...set] // arr: [1]
Potente reducir
array.reduce Recorra y use el valor de retorno de la función de devolución de llamada actual como el primer parámetro de la siguiente ejecución de la función de devolución de llamada.
Usar para array.reduce reemplazar algunas escenas que necesitan ser recorridas varias veces puede mejorar la eficiencia de la operación del código.
Suponga que hay una matriz compuesta por la letra 'más un número para cada elemento de la siguiente manera arr, y ahora encuentre el número más grande en ella: ( arrno vacío)
const arr = ['s0', 's4', 's1', 's2', 's8', 's3']// 方法1 进行了多次遍历，低效const newArr = arr.map(item => item.substring(1)).map(item => Number(item))const maxS = Math.max(...newArr)// 方法2 一次遍历const maxS = arr.reduce((prev, cur) => {const curIndex = Number(cur.replace('s', ''))return curIndex > prev ? curIndex : prev}, 0)
const arr = [1, 2, 3, 4, 5]// 方法1 遍历了两次，效率低const value = arr.filter(item => item % 2 === 0).map(item => ({ value: item }))// 方法1 一次遍历，效率高const value = arr.reduce((prev, curr) => {return curr % 2 === 0 ? [...prev, curr] : prev}, [])
También puede usar reduce para realizar el siguiente procesamiento para generar la estructura html deseada:
// 后端返回数据const data = {'if _ then s9': ['作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生','作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生','作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生'],'if C then s4': ['当有条件时时,结构构件满足要求,要求属于安全性、适用性和耐久性','当有条件时时,住宅结构满足要求,要求属于安全性、适用性和耐久性']}const ifthens = Object.entries(data).reduce((prev, cur) => {const values = cur[1].reduce((prev, cur) => `${prev}<p>${cur}</p>`, '')return `${prev}<li><p>${cur[0]}</p>${values}</li>`}, '')const html = `<ul class="nlp-notify-body">${ifthens}</ul>`
La estructura html generada es la siguiente:
<ul class="nlp-notify-body"><li><p>if _ then s9</p><p>作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生</p><p>作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生</p><p>作用属于各种,结构属于住宅,结构能承受作用,作用属于在正常建造和正常使用过程中可能发生</p></li><li><p>if C then s4</p><p>当有条件时时,结构构件满足要求,要求属于安全性、适用性和耐久性</p><p>当有条件时时,住宅结构满足要求,要求属于安全性、适用性和耐久性</p></li></ul>