[js data skills] recopilación de consejos de js

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]: cuando
pruebe 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]

Matriz transversal común

Las matrices se atraviesan comúnmente y existen forEach、every、some、filter、map、reduce、reduceRight、find、findIndexotros 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)
检测数组所有元素是否都符合判断条件
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. indexOfAsegúrese de usarlo cuando se requiera un valor de índice.

const arr = [1, 2, 3, 4, 5]

// 使用indexOf，需要用到索引值
const index = arr.indexOf(1) // 0
if (~index) {
    
     // 若index === -1，~index得到0，判断不成立；若index不为-1，则~index得到非0，判断成立。
    arr.spilce(index, 1)
}

// 使用includes，不需要用到索引值
// 此时若用indexOf会造成上下文上的阅读负担：到底其他地方有没有用到这个index?
const isExist = arr.includes(6) // true
if (!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 necesitan los subelementos de la matriz array.find(); cuando se
necesita el valor de índice del subelemento array.findIndex();
y si solo es necesario conocer los subelementos que cumplen las condiciones, se utiliza array.some().

const arr = [{
    
    label: '男', value: 0}, {
    
    label: '女', value: 1}, {
    
    label: '不男不女', value: 2}]

// 使用some
const isExist = arr.some(item => item.value === 2)
if (isExist) {
    
    
    console.log('哈哈哈找到了')
}

// 使用find
const item = arr.find(item => item.value === 2)
if (item) {
    
    
    console.log(item.label)
}

// 使用findIndex
const 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，隐式转换为布尔值后是false
    console.log('执行不到这里~')
}


// 当子项包含空字符串的时候也可能出错
const arr = ['', 'asdf', 'qwer', '...']

// 正确
const isExist = arr.some(item => item === '')
if (isExist) {
    
    
    console.log('存在要找的子项，很舒服~')
}

// 错误
const isExist = arr.find(item => item === '')
if (isExist) {
    
     // isExist此时是''，隐式转换为布尔值后是false
    console.log('执行不到这里~')
}

array.find () 和 array.filter ()

Solo necesita saber array.filter()para devolver una matriz de todos los niños elegibles compuestos, todos atravesarán la matriz;
pero array.find()solo devuelve el primer niño en línea con las condiciones para 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 la estructura de datos Set, y Set puede garantizar que los subelementos no se repitan, y es muy conveniente convertir con matrices, por lo que en algunos escenarios que pueden implicar adiciones repetidas, puede usar directamente Set en lugar de Array , evitando juicios repetidos en múltiples lugares. Si el subelemento ya existe.

const set = new Set()
set.add(1)
set.add(1)
set.add(1)
set.size // 1
const 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.reducereemplazar algunas escenas que necesitan ser recorridas varias veces puede mejorar la eficiencia de la operación del código.

Supongamos que hay una matriz arr en la que cada elemento consta de la letra 'más un número, y ahora encuentra el número más grande en ella: (arr no está 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 se puede utilizar reducepara realizar dicho procesamiento para generar la siguiente 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>