Utilisation pertinente du tableau js réduit

Cet article a compilé de nombreux extraits de code classiques sur la méthode de tableau js réduire, qui peuvent vous aider à mieux comprendre l'utilisation des exemples de réduction. Étudions ensemble.

Voici quelques extraits de code pertinents sur la méthode de tableau JavaScript reduce que j'ai collectés et résumés au travail. Je les ajouterai les uns après les autres lorsque je rencontrerai d'autres scénarios où cette fonction est utilisée. un mémo. Il existe tellement de méthodes pour les tableaux

javascript. Pourquoi est-ce que je choisis la méthode reduce L'une des raisons est que je n'en connais pas suffisamment pour l'utiliser comme je l'aime. D’un autre côté, je ressens aussi le charme immense de cette méthode, qui joue un rôle magique dans de nombreuses scènes.

ComprendrereduceFonction

La méthode réduire() reçoit une fonction en tant qu'accumulateur (accumulateur), et chaque valeur du tableau (de gauche à droite) commence à diminuer, et enfin devient une valeur.

arr.reduce([callback, initialValue])

Regardez l'exemple suivant :

let arr = [1, 2, 3, 4, 5];

// 10代表初始值，p代表每一次的累加值，在第一次为10
// 如果不存在初始值，那么p第一次值为1
// 此时累加的结果为15
let sum = arr.reduce((p, c) => p + c, 10); // 25
// 转成es5的写法即为：
var sum = arr.reduce(function(p, c) {
 console.log(p);
 return p + c;
}, 10);

Fragment 1 : Jeu de l'alphabet

const anagrams = str => {
 if (str.length <= 2) {
  return str.length === 2 ? [str, str[1] + str[0]] : str;
 }
 return str.split("").reduce((acc, letter, i) => {
  return acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val));
 }, []);
}

anagrams("abc"); // 结果会是什么呢？

reduce Responsable du filtrage de la première lettre de chaque exécution, et la récursivité est responsable de l'arrangement et de la combinaison des lettres restantes.

Fragment 2 : Accumulateur

const sum = arr => arr.reduce((acc, val) => acc + val, 0);
sum([1, 2, 3]);

Fragment 3 : Compteur

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
countOccurrences([1, 2, 3, 2, 2, 5, 1], 1);

Parcourez le tableau. Chaque fois qu'une valeur est égale à la valeur donnée, 1 est ajouté et le résultat après l'ajout est utilisé comme valeur initiale pour la prochaine fois.

Fragment 4 : Currying de fonctions

Le but du currying de fonctions est de stocker des données puis de les exécuter dans la dernière étape.

const curry = (fn, arity = fn.length, ...args) => 
 arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);
curry(Math.pow)(2)(10);
curry(Math.min, 3)(10)(50)(2);

Obtenez le length de la fonction actuelle en jugeant les paramètres de la fonction (bien sûr, vous pouvez également le spécifier vous-même Si les paramètres passés sont inférieurs aux paramètres actuels, continuez à récurer). ci-dessous et stockez le dernier paramètre passé.

Fragment 5 : Aplatissement du tableau

const deepFlatten = arr => 
 arr.reduce((a, v) => a.concat(Array.isArray(v) ? deepFlatten(v) : v), []);
deepFlatten([1, [2, [3, 4, [5, 6]]]]);

Fragment 6 : Génération du tableau Fiboletsch

const fibonacci = n => Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
fibonacci(5);

Fragment 7 : Processeur de tuyaux

const pipe = (...funcs) => arg => funcs.reduce((acc, func) => func(acc), arg);
pipe(btoa, x => x.toUpperCase())("Test");

En effectuant un traitement de fonction sur les paramètres passés, après utiliser les données traitées comme le paramètre de la fonction suivante et transmettez-le couche par couche.

Fragment 8 : Middleware

const dispatch = action => {
 console.log('action', action);
 return action;
}
const middleware1 = dispatch => {
 return action => {
  console.log("middleware1");
  const result = dispatch(action);
  console.log("after middleware1");
  return result;
 }
}
const middleware2 = dispatch => {
 return action => {
  console.log("middleware2");
  const result = dispatch(action);
  console.log("after middleware2");
  return result;
 }
}
const middleware3 = dispatch => {
 return action => {
  console.log("middleware3");
  const result = dispatch(action);
  console.log("after middleware3");
  return result;
 }
}
const compose = middlewares => middlewares.reduce((a, b) => args => a(b(args)))

const middlewares = [middleware1, middleware2, middleware3];
const afterDispatch = compose(middlewares)(dispatch);

const testAction = arg => {
 return { type: "TEST_ACTION", params: arg };
};
afterDispatch(testAction("1111"));

redux Cette méthode est utilisée dans la fonction classique compose, à travers les couches de le middleware déclenche l’exécution de la fonction lorsque l’action est réellement initiée.

Fragment 9 : Traitement des actions redux de l'état

// redux-actions/src/handleAction.js
const handleAction = (type, reducer, defaultState) => {
 const types = type.toString();
 const [nextReducer, throwReducer] = [reducer, reducer];
 return (state = defaultState, action) => {
  const { type: actionType } = action;
  if (!actionType || types.indexOf(actionType.toString()) === -1) {
   return state;
  }
  return (action.error === true ? throwReducer : nextReducer)(state, action);
 }
}
// reduce-reducers/src/index.js
const reduceReducer = (...reducers) => {
 return (previous, current) => {
  reducers.reduce((p, r) => r(p, current), previous);
 }
}
// redux-actions/src/handleActions.js
const handleActions = (handlers, defaultState, { namespace } = {}) => {
 // reducers的扁平化
 const flattenedReducerMap = flattenReducerMap(handles, namespace);
 // 每一种ACTION下对应的reducer处理方式
 const reducers = Reflect.ownkeys(flattenedReducerMap).map(type => handleAction(
  type,
  flattenedReducerMap[type],
  defaultState
 ));
 // 状态的加工器，用于对reducer的执行
 const reducer = reduceReducers(...reducers);
 // reducer触发
 return (state = defaultState, action) => reducer(state, action);
}

Fragment 10 : Processeur de données

const reducers = {
 totalInEuros: (state, item) => {
  return state.euros += item.price * 0.897424392;
 },
 totalInYen: (state, item) => {
  return state.yens += item.price * 113.852;
 }
};
const manageReducers = reducers => {
 return (state, item) => {
  return Object.keys(reducers).reduce((nextState, key) => {
   reducers[key](state, item);
   return state;
  }, {})
 }
}
const bigTotalPriceReducer = manageReducers(reducers);
const initialState = { euros: 0, yens: 0 };
const items = [{ price: 10 }, { price: 120 }, { price: 1000 }];
const totals = items.reduce(bigTotalPriceReducer, initialState);

Fragment 11 : Jugement de valeur nul de l'objet

let school = {
 name: 'Hope middle school',
 created: '2001',
 classes: [
  {
   name: '三年二班',
   teachers: [
    { name: '张二蛋', age: 26, sex: '男', actor: '班主任' },
    { name: '王小妞', age: 23, sex: '女', actor: '英语老师' }
   ]
  },
  {
   name: '明星班',
   teachers: [
    { name: '欧阳娜娜', age: 29, sex: '女', actor: '班主任' },
    { name: '李易峰', age: 28, sex: '男', actor: '体育老师' },
    { name: '杨幂', age: 111, sex: '女', actor: '艺术老师' }
   ]
  }
 ]
};
// 常规做法
school.classes &&
school.classes[0] &&
school.classes[0].teachers &&
school.classes[0].teachers[0] &&
school.classes[0].teachers[0].name
// reduce方法
const get = (p, o) => p.reduce((xs, x) => (xs && xs[x] ? xs[x] : null), o);
get(['classes', 0, 'teachers', 0, 'name'], school); // 张二蛋

Fragment 12 : Regroupement

const groupBy = (arr, func) =>
arr.map(typeof func === 'function' ? func : val => val[func]).reduce((acc, val, i) => {
 acc[val] = (acc[val] || []).concat(arr[i]);
 return acc;
}, {});
groupBy([6.1, 4.2, 6.3], Math.floor); 
groupBy(['one', 'two', 'three'], 'length');

Calculez d'abord toutes les valeurs clés via map, puis classez-les selon les valeurs établies

Fragment 13 : Filtrage d'objets

const pick = (obj, arr) =>
arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {});

Parcourez en fonction de la valeur clé donnée, comparez s'il existe des valeurs avec la même valeur clé dans l'objet, puis utilisez des expressions virgules à L'objet attribué reçoit la valeur initiale suivante

Fragment 14 : Supprimer la valeur à la position spécifiée dans le tableau

const remove = (arr, func) =>
 Array.isArray(arr)
 ? arr.filter(func).reduce((acc, val) => {
   arr.splice(arr.indexOf(val), 1);
   return acc.concat(val);
 }, []) : [];
const arr = [1, 2, 3, 4];
remove(arr, n => n % 2 == 0);

Filtrez d'abord les valeurs qualifiées dans le tableau selon la fonction filter, puis utilisez reduce pour supprimer les valeurs qualifiées dans le tableau d'origine. On peut conclure que la valeur finale de arr devient [1. , 3]

Fragment 15 : Les promesses sont exécutées dans l'ordre

const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
const delay = d => new Promise(r => setTimeout(r, d));
const print = args => new Promise(r => r(args));
runPromisesInSeries([() => delay(1000), () => delay(2000), () => print('hello')]);

Fragment 16 : Tri

const orderBy = (arr, props, orders) =>
 [...arr].sort((a, b) =>
  props.reduce((acc, prop, i) => {
   if (acc === 0) {
    const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
    acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
   }
   return acc;
  }, 0)
 );
const users = [{ name: &#39;fred&#39;, age: 48 }, { name: &#39;barney&#39;, age: 36 }, { name: &#39;fly&#39;, age: 26 }];
orderBy(users, [&#39;name&#39;, &#39;age&#39;], [&#39;asc&#39;, &#39;desc&#39;]); 
orderBy(users, [&#39;name&#39;, &#39;age&#39;]);

Fragment 17 : Sélectionner

const select = (from, selector) =>
 selector.split('.').reduce((prev, cur) => prev && prev[cur], from);
const obj = { selector: { to: { val: 'val to select' } } };
select(obj, 'selector.to.val');

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. sera utile à tout le monde à l’avenir.

Articles connexes :

Explication détaillée de la façon dont Vue configure les outils d'empaquetage

Comment implémenter la surveillance dans Vue pour détecter automatiquement les modifications de données

Comment charger le module de gestion des autorisations (tutoriel détaillé)

Comment implémenter la communication dans vue2.0 ?

Quelles sont les méthodes de liaison de style dans Angular 2+

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!