Relevante Verwendung des JS-Arrays reduzieren

In diesem Artikel wurden viele klassische Codeausschnitte zur js-Array-Methode Reduce zusammengestellt, die Ihnen helfen können, die Verwendung von Reduce-Beispielen besser zu verstehen.

Im Folgenden finden Sie einige relevante Codeausschnitte zur JavaScript-Array-Methode reduce, die ich bei der Arbeit gesammelt und zusammengefasst habe. Ich werde sie nacheinander hinzufügen, wenn ich auf andere Szenarien stoße, in denen diese Funktion verwendet wird ein Memo. Es gibt so viele Methoden für

Javascript-Arrays. Ein Grund dafür ist, dass ich nicht genug über diese Methode weiß, um sie nach Belieben zu verwenden. Andererseits spüre ich auch den großen Charme dieser Methode, die in vielen Szenen eine magische Rolle spielt. reduce

Verstehen

Funktionreduce

Die Methode Reduce () empfängt eine Funktion als Akkumulator (Akkumulator), und jeder Wert im Array (von links nach rechts) beginnt mit der Reduzierung und schließlich wird zu einem 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: Alphabetspiel

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"); // 结果会是什么呢？

ist verantwortlich für Jedes Mal herausfiltern Nach der Ausführung des ersten Buchstabens ist die Rekursion für die Permutation und Kombination der verbleibenden Buchstaben verantwortlich. reduce

Fragment 2: Akkumulator

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

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

Durchlaufen Sie das Array. Jedes Mal, wenn ein Wert dem angegebenen Wert entspricht, wird 1 hinzugefügt und 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);

Ermittelt das

der aktuellen Funktion durch Beurteilung der Parameter der Funktion (natürlich können Sie es auch selbst angeben). Wenn die übergebenen Parameter kleiner als die aktuellen Parameter sind, wird die Rekursion fortgesetzt Die zuletzt übergebenen Parameter werden gespeichert. length

Fragment 5: 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 6: Erzeugen eines Fiboletsch-Arrays

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: Pipe-Prozessor

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

führt eine Funktionsverarbeitung für die übergebenen Parameter durch und verwendet die verarbeiteten Daten dann als Parameter der nächsten Funktion werden auf diese Weise Schicht für Schicht weitergegeben.

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

Diese Methode wird in der klassischen redux-Funktion verwendet, indem die Middleware auf mehreren Ebenen verwendet wird Anzahl der Komponenten löst die Funktionsausführung aus, wenn die Aktion tatsächlich initiiert wird. compose

Fragment neun: 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 11: 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

und klassifizieren Sie sie dann entsprechend den erstellten Wertenmap

Fragment 13: Objektfilterung

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

Durchlaufen Sie gemäß dem angegebenen Schlüsselwert, vergleichen Sie, ob im Objekt ein Wert mit demselben Schlüsselwert vorhanden ist, und weisen Sie dann das zugewiesene Objekt über einen Komma-Ausdruck dem nächsten Initialisierer zu 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 zunächst die qualifizierten Elemente im Array basierend auf der Funktion

heraus value, und verwenden Sie dann filter, um den qualifizierten Wert im ursprünglichen Array zu löschen. Daraus kann geschlossen werden, dass der Endwert von arr zu [1, 3] wirdreduce

Fragment 15: Versprechen in der Reihenfolge Ausführen

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

Fragment Siebzehn: Auswählen

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ausführliche Erklärung, wie Vue Verpackungstools konfiguriert

So implementieren Sie Watch in Vue, um Datenänderungen automatisch zu erkennen

Wie lade ich das Berechtigungsverwaltungsmodul (ausführliches Tutorial)

Wie implementiert man Kommunikation in vue2.0?

Welche Methoden der Stilbindung gibt es in Angular 2+?

Das obige ist der detaillierte Inhalt vonRelevante Verwendung des JS-Arrays reduzieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!