Метод фильтрации ES5, вы действительно знаете, как его использовать?

внешний интерфейс JavaScript ECMAScript 6

Предисловие: 18.01.2018, 12:24 Впервые публикую статью о Наггетс. Удивительно, что так много лайков. Спасибо за высокую оценку [Спасибо]. В связи с загруженностью работой, я буду продолжать дополнять и обновлять эту статью, когда у меня будет время на этой неделе.Если вам это нравится, вы можете следить за новостями по лайку или избранному. Еще раз спасибо [лук]~!

Обновлено 19.01.18:35:

  • 1. Режим реализации дедупликации массива, указанный старыми железками в комментариях, дедупликация строк;
  • 2. Добавьте введение словосочетания фильтр + карта (на самом деле, я хочу поговорить о том, что это [закрой свое лицо]);
  • 3. Увлажните текстовое выражение и добавьте необходимые аннотации;
  • 4. Рефакторинг верстки

filter

1. Определение

filter вызывает функцию обратного вызова один раз для каждого элемента в массиве и создает новый массив со всеми элементами, для которых «обратный вызов возвращает true или значение, эквивалентное true».

var new_array = arr.filter(callback[, thisArg])

2. Основное использование

var spread = [12, 5, 8, 130, 44]
// 筛选条件符合大于10的新数组
var filtered = spread.filter(n => n >= 10)
console.log('filtered', filtered) // => [12, 130, 44]

3. Расширенное использование

Поиск по ключу/значению объекта массива

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'ared',   'age': 24, 'active': false },
  { 'user': 'ered',   'age': 80, 'active': false },
  { 'abc': 'ered',   'age': 80, 'active': false }
]
// 筛选 age等于40或者age等于24的 数组对象
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered)   // => [{user: "fred", age: 40, active: false}，{user: "ared", age: 24, active: false}]

4. Расширенное использование

4.1 Дедупликация массива

var spread = [12, 5, 8, 8, 130, 44,130]
var filtered = spread.filter((item, idx, arr) => {
  return arr.indexOf(item) === idx;
})
// 筛选符合条件找到的第一个索引值等于当前索引值的数组
console.log('数组去重结果', filtered)

Благодаря старым утюгам, таким как @yuantongxue в области комментариев, за то, что они поделились своими идеями, режим реализации массива для повторного использования метода set ES6

var spread = [12, 5, 8, 8, 130, 44,130]
var setFun = [...new Set(spread)]
console.log('数组去重结果', setFun)

Спасибо за дедупликацию строки, которой поделился @rookie_it_old iron в области комментариев, вы можете сослаться на нее

var arr=[12, 5, 8, 8, 130, 44,130,'a','b','a']
var obj={};
arr.forEach(function(item){
obj[item]=item;
})
Object.keys(obj)
console.log(Object.keys(obj))

Всеобщая дискуссия о дедупликации массивов все еще довольно интенсивна. Поэтому в 18 лет я создал группу для общения всех желающих.Для оптимизации логики реализации кода можно добавить группу WeChat внизу статьи.В будущем возможно организую офлайн-мероприятия и вечеринки программистов, ха-ха ~~Мир кода прекрасен, растем вместе.

4.2 Удалить пустые строки в массиве

var spread = ['A', '', 'B', null, undefined, 'C', '  ']
var filtered = spread.filter((item, idx, arr) => {
  return item && item.trim()
})
console.log('数组中的空字符串删掉', filtered) // => ["A", "B", "C"]

5. Резюме одним предложением

В полной мере используйте функцию обратного вызова, которая возвращает true в качестве функции «условия фильтрации» для создания нового массива.

6. Проектная практика

Общее словосочетание фильтра

Фильтр и карта взаимодействуют: используйте фильтр для фильтрации в соответствии с определенными условиями, а затем карту для создания нового массива.

В проекте иногда нам нужно отобразить исходный массив для генерации новых данных после фильтрации исходного массива по определенным условиям.

для + продолжить

var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
var forArr = []
for (var i = 0; i < arr.length; i++) {
    // 遇到性别为女的数组对象， 跳出本次循环
    if (arr[i].gender === 'woman') continue
    var temp = {
      name: arr[i].name
    }
    forArr.push(temp)
}
// 过滤掉性别为女的数组对象
console.log('男性名字集合', forArr) // => [{name: 'john'}, {name: 'jerry'}]

После использования метода for + continue мы успешно удалили объекты массива с женским полом и, наконец, отфильтровали коллекцию массивов мужских имен. Если цикл for сталкивается с несколькими уровнями вложенности, его сложнее и труднее поддерживать. Можем ли мы использовать карту вместо этого? Но карта не поддерживает и дальше выпрыгивать из цикла.

Вопрос: Затем я хочу использовать карту, чтобы уменьшить объем кода, и я хочу использовать продолжение, чтобы выйти из цикла, что мне делать?

Решение: Возможно, комбинация фильтра и карты может решить проблемы, с которыми мы столкнулись (может заменить использование for + continue)

Демонстрация кода: фильтр +написание карты

var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
// filter : 有条件的筛选，返回条件为true的数组
// 筛选出性别为男性的名字集合
var newArr = arr.filter(n => n.gender === 'man').map(item => {
  return {
    name: item.name
  }
})
console.log('男性名字集合', newArr)   // => [{name: 'john'}, {name: 'jerry'}]

После использования метода записи фильтра + карты мы просто используем две или три строки кода, чтобы реализовать функцию записи для + продолжения. Это элегантно, легко читать и поддерживать, так почему бы не сделать это?

На этом все, вышеизложенное является кратким изложением моего личного опыта. Если это полезно для вашего развития, пожалуйста, поставьте лайк. Если вы считаете, что что-то не так, пожалуйста, укажите на это. Давайте добиваться прогресса и расти вместе~. ~

общаться вместе?

У вас есть хорошие идеи, чтобы поделиться,Подпишитесь на официальную учетную запись WeChat yhzg_gz (нажмите, чтобы скопировать, добавьте официальную учетную запись в WeChat и вставьте ее), стремление к качеству кода, эффективное программирование - наша общая цель.

付出的前端路

Написание статей может получить книгу асинхронного сообщества! Технические специалисты, которые любят читать, входят в асинхронное сообщество. я хочу читатьПишите поддерживаемый JavaScript, надеюсь, вам тоже понравится.

Категории