Acumulación de método de función js de uso común

Language 2023-07-22 23:55:37 views: null

Acumulación de funciones js de uso común

Referencia : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

Directorio de artículos

método mapa()

  1. Sintaxis
    arr.map(devolución de llamada, esteValor)

  2. analizar

    • La función de devolución de llamada
      ejecuta la función de cada valor en la matriz, incluidos 3 parámetros:
      1. elemento Cada elemento del elemento de la matriz
      2. índice (el índice del elemento actual en la matriz)
      3. matriz (llamar a la matriz)

    • thisValue
      thisValue puede modificar este punto cuando se realiza un bucle, y el valor predeterminado es el objeto global.

    • Notas
      a. map genera una nueva matriz, si no tiene intención de usar la nueva matriz devuelta, use forEach o for-of en su lugar; cuando use map, debe escribir return en la función de devolución de llamada.
      b. map() no cambiará la matriz original, pero se puede cambiar en la devolución de llamada.
      C. Las matrices vacías no llaman al mapa.

  3. método común

/**
 * 1、做数据处理，返回新数组
 * */
let arr = [{
    
    name:'1',age:1},{
    
    name:'2',age:2}]
let ages = arr.map((item)=>{
    
    
	return item.age
})
console.log(ages)
// 输出 [1, 2]

/**
 * 使用 map 重新格式化数组中的对象
 * */
const kvArray = [
  {
    
     key: 1, value: 10 },
  {
    
     key: 2, value: 20 },
  {
    
     key: 3, value: 30 },
];
const reformattedArray = kvArray.map(({
     
      key, value}) => ({
    
     [key]: value }));
// reformattedArray 现在是 [{1: 10}, {2: 20}, {3: 30}],

// kvArray 依然是：
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]


/**
 * 2、
 * [1] 两数之和 (leetcode)
 * 输入：nums = [2,7,11,15], target = 9
 * 输出：[0,1]
 * 解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 * map.has (该方法主要用来检查Map中是否存在具有制定键的元素)
 * Map.set()方法 为Map对象添加一个指定键(key)和值(value)的新元素
 * Map.get(key)方法 用来获取一个Map对象指定的元素，返回的是键所对应的值，如果不存在则会返回undefined
 * */
var sum = function(nums, target) {
    
    
    let map = new Map
    for(let i=0;i<nums.length;i++){
    
    
        let x=target-nums[i];
        if(map.has(x)){
    
    
            return([map.get(x),i])
        }
        map.set(nums[i],i)
    }
};

reducir()

  1. Sintaxis:
    arr.reduce(devolución de llamada,[valor inicial])

  2. analizar


    • devolución
      de llamada anteriorValor 简写为 pre （上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue 2. currentValue 简写为 cur 3. índice的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始） 4. array （调用 reduce
      的
      数组
      ）

    • valor de inicialización de initialValue
      : como el primer parámetro de devolución de llamada por primera vez

  3. método común

/** 数组求和 */
let arr = [1,2,3,4]
let sum = arr.reduce((pre,cur,i,arr)=>{
    
    
	consloe.log(pre,cur,i)
	return pre + cur
},0)
consloe.log(sum)
// 输出 10
let arr2 = [{
    
    name:'1',age:1},{
    
    name:'2',age:2}]
let ages = arr2.reduce((pre,cur,i,arr)=>{
    
    
	consloe.log(pre,cur,i)
	return cur.age + pre
},0)
consloe.log(ages)
// 输出 3

/** 去重 */
let arr3 = [1,2,3,4,4,1]
let newArr = arr3.reduce((pre,cur)=>{
    
    
    if(!pre.includes(cur)){
    
    
      return pre.concat(cur)
    }else{
    
    
      return pre
    }
},[])
console.log(newArr);
// 输出 [1, 2, 3, 4]

/** 二维数组转一维数组 */
let arr4 = [[0, 1], [2, 3], [4, 5]]
let newArr2 = arr4.reduce((pre,cur)=>{
    
    
    return pre.concat(cur)
},[])
console.log(newArr2); 
// 输出 [0, 1, 2, 3, 4, 5]

/** 多维转一 */
let arr5 = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr3 = function(arr){
    
    
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr3(cur):cur),[])
}
console.log(newArr(arr5)); 
// 输出  [0, 1, 2, 3, 4, 5, 6, 7]

/** 计算数组中每个元素出现的次数 */
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
    
    
  if(cur in pre){
    
    
    pre[cur]++
  }else{
    
    
    pre[cur] = 1 
  }
  return pre
},{
    
    })
console.log(nameNum); 
//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

/**
 * 按属性对 object 分类
 * */
let people = [
  {
    
     name: 'Alice', age: 21 },
  {
    
     name: 'Max', age: 20 },
  {
    
     name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
    
    
  return objectArray.reduce(function (acc, obj) {
    
    
    let key = obj[property]
    if (!acc[key]) {
    
    
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {
    
    })
}
let groupedPeople = groupBy(people, 'age')
// groupedPeople is:
// {
    
    
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }


l1 = [1,0,3]
l2 = [0,2,1]
// 301+120 = 421
// [4,2,1]
function sun(l1.l2){
    
    
  var a,b;
  for (let i = l1.length-1; i < 0; i--) {
    
    
    a += String(l1[i]);
  }
  for (let i = l2.length-1; i < 0; i--) {
    
    
    b += String(l2[i]);
  }
  console.log("a: ",a)
  console.log("b: ",b)
  let sum = Number(a)+Number(b)
  console.log("sum: ",sum)
}

función de filtro ()

El filtro se utiliza para filtrar la matriz. Crea una nueva matriz cuyos elementos se comprueban comprobando todos los elementos de la matriz especificada que cumplen los criterios

  1. Sintaxis: arr. filter(devolución de llamada, este valor)
  2. analizar

    • función de devolución de llamada
      Una función que ejecuta cada valor en la matriz, incluidos 3 parámetros
      1. currentValue se abrevia como cur (el valor del elemento actual en la matriz)
      2. índice (el índice del elemento actual en la matriz)
      3. matriz (la matriz que llama al filtro)

    • thisValue
      thisValue puede modificar este punto cuando se realiza un bucle, y el valor predeterminado es el objeto global.

    • Tenga en cuenta que
      a.filter() no detectará matrices vacías y no cambiará la matriz original

  3. método común
// 过滤
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
    
    
  return num > 5;
});
console.log(res);  
// [6, 7, 8, 9, 10]

/**
 * 判断数组里面是否存在某个值：
 * */
 var newarr = [14, 17, 18, 32, 33, 16, 40];
 newarr.filter(item => item.num==14); 
 //判断数组中是否有14
 console.log(newarr.filter(item => item.num==14)) //true
 
 /**
  * 去掉数组中的空字符串(不能包含空格)、undefined、null
  * */
var array = ['1','2',undefined, '3.png',undefined, 'a','',null,' ']
var newArray = array.filter(item => item)
console.log(newArray) //返回结果:['1','2', '3.png', 'a',' ']

//去掉数组中的空字符串的另一种方式
var array = ['1','2',undefined, '3.png', '', undefined, 'a', '  '];
let newArray=array.filter(i=>i && i.trim());     
// 注意：IE9以下的版本没有这个trim()方法
console.log(newArray);   //返回结果:['1','2', '3.png', 'a']

/**
 * 把对象数组a中的某个属性值取出来存到数组b中
 * */
var arrayA = [{
    
    name:"a",type:"letter"},{
    
    name:”1”,type:"digital"},{
    
    name:”c”,type:"letter"},{
    
    name:”2”,type:"digital"},];
var arrayB = arrayA.filter(function(array){
    
       
	//对arrayA数组对象过滤如果array.type === "letter"就return出去, 再用一个变量接收
	return array.type === "letter"
});
console.log(arrayB); 
//输出结果：[{name:"a",type:"letter"},{name:”c”,type:"letter"},]

/**
 * filter()和find()结合使用，实现从数组中查找想要的元素
 * */
 projectDetail() {
    
    
	 if (this.value) {
    
    
		 return this.sourcedata.filter((item) => {
    
          
			return [item.ProjectName, item.ProjectNewNo].find(
			 //通过item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元素            
			    (si) => {
    
    
					return si.indexOf(this.value) != -1;  //根据是否输入来匹配           
				}          
		    );        
		});      
	}     
	return this.sourcedata; //最后返回想要的元素的数组   
}

función buscar()

El método find() devuelve el valor del primer elemento de la matriz que satisface la función de prueba proporcionada. De lo contrario, devuelve indefinido

  1. Sintaxis: arr. find(callback, thisValue)

  2. analizar

    • función de devolución de llamada
      Ejecuta la función de cada valor en la matriz, incluidos 3 parámetros
      1.currentValue (el valor del elemento actual en la matriz)
      2.index (el índice del elemento actual en la matriz)
      3.array (la matriz que llama a buscar)

    • thisValue
      El objeto utilizado como este al ejecutar la devolución de llamada.

    • Tenga en cuenta el punto
      a. El método de búsqueda no cambia la matriz.

  3. método común


/**
 * 用对象的属性查找数组里的对象：
 * */
const inventory = [
  {
    
    name: 'apples', quantity: 2},
  {
    
    name: 'bananas', quantity: 0},
  {
    
    name: 'cherries', quantity: 5}
];
const result = inventory.find(({
     
      name }) => name === 'cherries');
console.log(result) // { name: 'cherries', quantity: 5 }
 
/**
 * filter()和find()结合使用，实现从数组中查找想要的元素
 * */
 projectDetail() {
    
    
	 if (this.value) {
    
    
		 return this.sourcedata.filter((item) => {
    
          
			return [item.ProjectName, item.ProjectNewNo].find(
			 //通过item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元素            
			    (si) => {
    
    
					return si.indexOf(this.value) != -1;  //根据是否输入来匹配           
				}          
		    );        
		});      
	}     
	return this.sourcedata; //最后返回想要的元素的数组   
}

cada función ()

El método every() prueba si todos los elementos de una matriz pasan la prueba de una función específica. Devuelve un valor booleano.
Nota: este método devuelve verdadero en cualquier caso si se recibe una matriz vacía.

  1. Sintaxis: arr.every(callback,thisArg)
  2. analizar

    • función de devolución de llamada
      Ejecuta la función de cada valor en la matriz, incluidos 3 parámetros
      1. elemento (el valor del elemento actual en la matriz)
      2. índice (el índice del elemento actual en la matriz)
      3. matriz (la matriz actual que llama a cada)

    • thisArg
      El valor this utilizado al ejecutar la devolución de llamada. .

    • Tenga en cuenta el punto
      a.every no cambiará la matriz original.
      b. El rango de elementos atravesados ​​por cada se determina antes de que se llame a la devolución de llamada por primera vez. No se accederá a los elementos que se eliminen o nunca se les asigne un valor después de llamar a cada.
      c.every es similar a "all" en matemáticas y devuelve verdadero cuando todos los elementos cumplen las condiciones. Debido a esto, pasar una matriz vacía devolverá verdadero sin importar qué.

  3. método común
/**
 * 检测所有数组元素的大小
 * */
function isBigEnough(element, index, array) {
    
    
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
// 箭头函数
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

alguna función ()

El método some() prueba si al menos 1 elemento en la matriz pasa la prueba de función proporcionada. Devuelve un valor de tipo booleano.
Si se prueba con una matriz vacía, devuelve falso en todos los casos.

  1. Sintaxis: arr.some(callback,thisArg)

  2. analizar

    • La función de devolución de llamada
      ejecuta la función de cada valor en la matriz, incluidos 3 parámetros
      1. elemento (el valor del elemento actual en la matriz)
      2. índice (el índice del elemento actual en la matriz)
      3. matriz (la matriz actual que llama a algunos)

    • thisArg
      El valor this utilizado al ejecutar la devolución de llamada. .

    • Tenga en cuenta el punto
      a. algunos no cambiarán la matriz original.
      b. El rango de elementos atravesados ​​por algunos se determina antes de que se llame por primera vez a la devolución de llamada. No se accederá a los elementos que se eliminen o nunca se les asigne un valor después de llamar a algunos.
      c.Si se prueba con una matriz vacía, devuelve falso en todos los casos.

  3. método común

/**
 * 测试数组元素的值
 * */
function isBiggerThan10(element, index, array) {
    
    
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
// 箭头函数
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true


/**
 * 判断数组元素中是否存在某个值
 * */
var fruits = ['apple', 'banana', 'mango', 'guava'];
function checkAvailability(arr, val) {
    
    
  return arr.some(function(arrVal) {
    
    
    return val === arrVal;
  });
}
// 箭头函数
function checkAvailability1(arr, val) {
    
    
  return arr.some(arrVal => val === arrVal);
}
checkAvailability(fruits, 'kela');   // false
checkAvailability1(fruits, 'banana'); // true


/**
 * 将任意值转换为布尔类型
 * */
var TRUTHY_VALUES = [true, 'true', 1];
function getBoolean(value) {
    
    
  'use strict';
  if (typeof value === 'string') {
    
    
    value = value.toLowerCase().trim();
  }
  return TRUTHY_VALUES.some(function(t) {
    
    
    return t === value;
  });
}
getBoolean(false);   // false
getBoolean('false'); // false
getBoolean(1);       // true
getBoolean('true');  // true

función incluye()

El método include() se usa para determinar si una matriz contiene un valor específico.De acuerdo con la situación, si se incluye, devuelve verdadero, de lo contrario, devuelve falso.
La comparación de cadenas y caracteres mediante include() distingue entre mayúsculas y minúsculas.

  1. Ejemplo:
    incluye (elemento de búsqueda)
    incluye (elemento de búsqueda, desde el índice)

  2. analizar

    • searchElement: El valor del elemento a buscar.

    • fromIndex (opcional)
      Comience a buscar el elemento de búsqueda en el índice fromIndex.
      Si es un valor negativo, la búsqueda comienza desde el índice de array.length + fromIndex en orden ascendente (incluso si el valor absoluto de fromIndex salta hacia adelante desde el final y luego se busca hacia atrás).
      El valor predeterminado es 0.

    • Tenga en cuenta que
      los valores del punto a. 0 se consideran todos iguales independientemente del signo (es decir, -0 es igual a 0 y +0), pero falso no se considera igual a 0.
      b. Si fromIndex es mayor o igual que la longitud de la matriz, devolverá directamente falso y no se buscará en la matriz.
      c. Si fromIndex es negativo, el índice calculado se usará como la posición inicial para buscar searchElement. Si el índice calculado es menor que 0, se busca en toda la matriz.

  3. método común

// 如果 fromIndex 大于等于数组的长度，则将直接返回 false，且不搜索该数组
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   // false
arr.includes('c', 100); // false
//  如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
arr.includes('a', -100); // true
arr.includes('a', -2); // false

var str = "I love JavaScript.";
var word = str.includes("javaScript"); // true

/**
 * 作为通用方法的 includes()
 * includes() 方法有意设计为通用方法。它不要求this值是数组对象，所以它可以被用于其他类型的对象 (比如类数组对象)
 * */
(function() {
    
    
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

inconcluso

Supongo que te gusta

Origin blog.csdn.net/weixin_44897255/article/details/129669371
Recomendado
Clasificación
Diario
Más
2024-05-24(13)
2024-05-23(34)
2024-05-22(10)
2024-05-21(34)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)

Code World

© 2018 codetd.com