8 JS уменьшает количество примеров использования и сокращает операции

внешний интерфейс JavaScript
8 JS уменьшает количество примеров использования и сокращает операции

reduceЭто относительно мощный метод в JavaScript. Некоторые люди могут никогда не использовать его в обычной разработке. Из следующих 8 примеров узнайте,reduceиспользование и его общие сценарии.

reduceметод является методом итератора массива, иmap,filterразные,reduceМетод кэширует переменную, которой мы можем манипулировать во время итерации, а затем возвращает ее.

Это мое народное объяснение, его может быть нелегко понять, давайте посмотрим на пример ниже.

1. Накопление массива

Совокупный массив часто встречается в проекте, такое как общие и другие вычисления, вы можете уменьшить использование строки кода для получения и не определения внешних переменных, уменьшение побочных эффектов абсолютно нет.

// 累加
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);
// 输出：36

// 累加，默认一个初始值
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);
// 输出：41

// 累乘
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);
// 输出：40320

2. Найдите максимальное значение массива

На каждой итерации массива мы используемMath.maxПолучить максимальное значение и вернуться, в конце мы получим максимальное значение всех элементов массива.

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));

Конечно, если каждый элемент в массиве является числом, мы можем использовать...оператор спреда иMath.maxСотрудничать.

Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

3. Обращение с нерегулярными массивами

пройти черезmapа такжеreduceПри совместном использовании он возвращает конкатенированный результат каждого подмассива.

let data = [
  ["红色","128g", "苹果手机"],
  ["南北","两室一厅","128㎡","洋房住宅"],
  ["小米","白色","智能运动手表","心率血压血氧","来电信息提醒"], 
  ["官方发售","2020年秋季","篮球","球鞋","品牌直邮"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))

// 输出结果：
["红色 128g 苹果手机"
"南北 两室一厅 128㎡ 洋房住宅"
"小米 白色 智能运动手表 心率血压血氧 来电信息提醒"
"官方发售 2020年秋季 篮球 球鞋 品牌直邮"]

4. Удалите дубликаты данных

Проверьте, существует ли текущий элемент итерации, если нет, добавьте его в массив.

let array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];
array.reduce((noDupes, curVal) => {
  if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
  return noDupes
}, [])

// 输出：[1, 2, 3, 'a', 'b', 'c']

5. Убедитесь, что круглые скобки допустимы

Это аккуратное использование, которое я видел на dev.to. Если результат равен 0, количество скобок допустимо.

[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// 输出：0

// 使用循环方式
let status=0
for (let i of [..."(())()(()())"]) {
  if(i === "(")
    status = status + 1
  else if(i === ")")
    status = status - 1
  if (status < 0) {
    break;
  }
}

6. Группировка по атрибутам

Группировать данные по заданному ключу, здесь я использую поле страны для группировки, проверяю существует ли текущая страна на каждой итерации, если нет, то создаю массив и вставляю данные в массив. и вернуть массив.

let obj = [
  {name: '张三', job: '数据分析师', country: '中国'},
  {name: '艾斯', job: '科学家', country: '中国'},
  {name: '雷尔', job: '科学家', country: '美国'},
  {name: '鲍勃', job: '软件工程师', country: '印度'},
]

obj.reduce((group, curP) => {
  let newkey = curP['country']
  if(!group[newkey]){
    group[newkey]=[]
  }
  group[newkey].push(curP)
  return group
}, [])
// 输出：
[ 中国: [{…}, {…}]
  印度: [{…}]
  美国: [{…}] ]

7. Сглаживание массива

Массив, показанный здесь, имеет глубину всего один уровень. Если массив многоуровневый, для его обработки можно использовать рекурсию.

[[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), [])
// 输出：[3, 4, 5, 2, 5, 3, 4, 5, 6]

Конечно, вы также можете использовать ES6..flatальтернативный метод

[ [3, 4, 5], 
	[2, 5, 3], 
	[4, 5, 6]
].flat();

8. Обратная струна

Это также прекрасный способ достичь

[..."hello world"].reduce((a,v) => v+a)

или

[..."hello world"].reverse().join('')

наконец

Благодаря приведенному выше пониманию вы можете увидеть мощное использование сокращения. Лучше упростите код, используя сокращение, абстрагирование кода.

Если у вас есть лучшие примеры использования, добавьте их в область комментариев.

Категории