Die klassische Verwendung der JS-Array-Methode wird reduziert

Es gibt so viele Methoden für

Javascript-Arrays. Warum ich die reduce-Methode hervorhebe, ist, dass ich nicht genug über diese Methode weiß, um sie so zu verwenden, wie ich es möchte. Andererseits spüre ich auch den großen Charme dieser Methode, die in vielen Szenen eine magische Rolle spielt. In diesem Artikel werden hauptsächlich viele klassische Codefragmente zur Reduzierung des JS-Arrays für Sie zusammengestellt, damit Sie die Verwendung von Reduzierungsbeispielen besser verstehen können. Ich hoffe, es hilft allen.

Im Folgenden finden Sie einige relevante Codeausschnitte zur Javascript-Array-Methode reduce, die ich bei der Arbeit gesammelt und zusammengefasst habe, wenn ich auf andere Szenarien stoße, in denen diese Funktion verwendet wird ein Memo.

VerstehenreduceFunktion

Die Methode Reduce() empfängt eine Funktion als Akkumulator (Akkumulator). Jeder Wert im Array (von links nach rechts) beginnt sich zu reduzieren und wird schließlich ein Wert.

arr.reduce([callback, initialValue])

Sehen Sie sich das folgende Beispiel an:

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 : Buchstaben Das Spiel

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 ist dafür verantwortlich, den ersten Buchstaben jeder Ausführung herauszufiltern, und die Rekursion ist für die Anordnung und verantwortlich die restlichen Buchstaben kombinieren.

Clip 2: Akkumulator

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

Clip 3: Zähler

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

durchläuft das Array und fügt jedes Mal 1 hinzu, wenn ein Wert gefunden wird, der dem angegebenen Wert entspricht , und gleichzeitig Das Ergebnis nach der Addition wird als Anfangswert für das nächste Mal verwendet.

Fragment 4: Function Currying

Der Zweck des Function Currying besteht darin, Daten zu speichern und sie dann im letzten Schritt auszuführen.

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

Erhalten Sie die length der aktuellen Funktion, indem Sie die Parameter der Funktion beurteilen (natürlich können Sie sie auch selbst angeben, wenn die übergebenen Parameter vorhanden sind). kleiner als die aktuellen Parameter, fahren Sie fort Unterhalb der Rekursion werden die zuletzt übergebenen Parameter gleichzeitig gespeichert.

Fragment Fünf: Array-Abflachung

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

Fragment Sechs: Erzeugen Sie ein Fiboletsch-Array

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: Rohrprozessor

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

Führen Sie eine Funktionsverarbeitung für die übergebenen Parameter durch, verwenden Sie dann die verarbeiteten Daten als Parameter der nächsten Funktion und übergeben Sie sie Schicht für Schicht.

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 Dies Die Methode wird in der klassischen compose-Funktion verwendet. Über mehrere Middleware-Ebenen wird die Funktionsausführung ausgelöst, wenn die Aktion tatsächlich initiiert wird.

Fragment 9: Redux-Aktionen-Verarbeitung des Zustands

// 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 zehn: Datenprozessor

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 elf: Objektnullwertbeurteilung

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: Gruppierung

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

Berechnen Sie zunächst alle Schlüsselwerte über map und klassifizieren Sie sie dann gemäß den festgelegten Werten

Fragment 13: Objektfilterung

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

Durchlaufen Sie entsprechend dem angegebenen Schlüsselwert, vergleichen Sie, ob das Objekt einen Wert mit demselben Schlüsselwert enthält, und weisen Sie dann das zugewiesene Objekt über einen Komma-Ausdruck zu. Geben Sie den nächsten Anfangsbuchstaben an Wert

Fragment 14: Löschen Sie den Wert an der angegebenen Position im Array

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

Filtern Sie zuerst die qualifizierten Werte im Array gemäß der Funktion filter heraus und löschen Sie dann mit reduce die qualifizierten Werte im ursprünglichen Array Der Wert von arr wird zu [1 , 3]

Fragment 15: Versprechen werden der Reihe nach ausgeführt

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: Sortieren

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: Wählen Sie

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

Verwandte Empfehlungen:

MapReduce in MongoDB verwendet

von das angegebene Array-Objekt zur Überprüfung von Reduce() in js

Verwendung und Tipps der Array-Reduce()-Funktion in JavaScript

Das obige ist der detaillierte Inhalt vonDie klassische Verwendung der JS-Array-Methode wird reduziert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!