L'utilisation classique de la méthode de tableau js est réduite

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 ne connais pas suffisamment cette méthode 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. Cet article compile principalement de nombreux extraits de code classiques sur la méthode de tableau js réduire pour vous, afin que vous puissiez mieux comprendre l'utilisation des exemples de réduction. Étudions ensemble. J'espère que cela aide tout le monde.

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.

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 : Lettres Le jeu

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 est chargé de filtrer la première lettre de chaque exécution, et la récursivité est chargée d'organiser et combinant les lettres restantes.

Clip 2 : Accumulateur

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

Clip 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);

parcourt le tableau, en ajoutant 1 à chaque fois qu'il rencontre une valeur égale à la valeur donnée , et en même temps Le résultat après addition 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 transmis le sont). inférieur aux paramètres actuels, continuez. En dessous de la récursion, les paramètres passés la dernière fois sont stockés en même temps.

Fragment cinq : 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 six : Générer un 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");

Effectuez un traitement de fonction sur les paramètres transmis, puis utilisez les données traitées comme paramètres de la fonction suivante, et transmettez-les 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 Ce La méthode est utilisée dans la fonction classique compose Grâce à plusieurs couches de middleware, l'exécution de la fonction est déclenchée lorsque l'action est réellement lancé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 nulle 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 une valeur avec la même valeur clé dans l'objet, puis attribuez l'objet attribué via une expression virgule Donnez l'initiale suivante valeur

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 finale. la valeur 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')]);

Clip 16 : Trier

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;]);

Clip 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');

Recommandations associées :

MapReduce dans MongoDB utilise

de l'objet de tableau donné à revoir réduire() dans js

Utilisation et astuces de la fonction array Reduction() en JavaScript

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!