Подробная информация о forEach, карте, фильтре в JavaScript

JavaScript
Подробная информация о forEach, карте, фильтре в JavaScript

Нет времени? Сразу к делу!

1,forEachиmapАналогичные функции могут быть реализованы
2,forEach,map,filterможет изменить исходный массив
3.forEachнет возвращаемого значения,mapимеет возвращаемое значение,filterимеет возвращаемое значение

forEach

forEach()Метод выполняет предоставленную функцию один раз для каждого элемента массива.

грамматика:

array.forEach(callback(currentVal, index, array) {
  // do something
}, thisArg)

forEach Инструкция по применению

1,forEachМетод выполняется один раз для каждого элемента в массиве, который имеет допустимое значение в порядке возрастания.callbackфункции, удаленные (используяdeleteметоды и т. д.) или неинициализированные элементы будут пропущены (но не те, значение которыхundefinedэлементы) (например, в разреженных массивах).

2. Если даноforEachпрошедшийthisArgпараметры, при вызове они будут переданы вcallbackфункцию, поскольку ееthisценность. В противном случае он будет передан вwindowкак егоthisценность.callbackФункция, наконец, наблюдаемаthisзначение, в зависимости от наблюдаемой функцииthisобщие правила.

о JavaScriptthis, я думаю, что это слишком важно, чтобы внимательно прочитать:никогда с .GitHub.IO/2018/06/01/…

3.forEachПересечение диапазона при первом вызовеcallbackбудет определено раньше. перечислитьforEachПредметы, добавленные позже на массив, не будутcallbackдоступ к. Если существующее значение было изменено, передаетсяcallbackЗначениеforEachПерейдите к их значению в данный момент. Удаленные элементы не просматриваются. Если посещенный элемент удаляется во время итерации (например, с помощьюshift()), элементы после этого будут пропущены.

4.forEach()выполнить для каждого элемента массиваcallbackфункция; в отличие отmap()илиreduce(), он всегда возвращаетсяundefinedзначения и не могут быть объединены в цепочку. Типичный вариант использования — выполнение побочных эффектов в конце цепочки.

forEach суть

1. Нет возвращаемого значения

var arr1 = [1, 2, 3, 4, 5]

var solt = arr1.forEach((v,i,t) => {
  console.log(v)
})

console.log(solt)	// undefined

2. Невозможно прервать или выйти из цикла forEach

var arr1 = [1, 2, 3, 4, 5]

// 使用break会报错
arr1.forEach((v,i,arr) => {
  console.log(v)
  if(v === 3) {
    break
  }
})

// return false 也无效
arr1.forEach((v,i,arr) => {
  console.log(v)
  if(v === 3) {
    console.log('-----')
    return false
  }
})
// 1
// 2
// 3
// -----
// 4
// 5

3. Используйте функции стрелок,thisArgпараметры игнорируются

var arr1 = [1, 2, 3]
var arr2 = [7, 8, 9]

arr1.forEach((v, i, arr) => {
  console.log(this)
})
// window
// window
// window

arr1.forEach((v, i, arr) => {
  console.log(this)
}, arr2)
// window
// window
// window

4.forEach()не создает копию массива перед итерациейЕсли массив изменяется во время итерации, другие элементы пропускаются.

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

При достижении содержащего значения"two", удаляется первый элемент всего массива, в результате чего все оставшиеся элементы перемещаются на одну позицию вверх. потому что элемент"four"Теперь в более ранней позиции в массиве"three"будет пропущен.forEach()Копия массива не создается до итерации.

5. Измените исходный массив

var arr1 = [1, 2, 3]
var arr2 = [7, 8, 9]

arr1.forEach(function(v, i, arr) {
  console.log(this)
  arr[i] = v * 2
}, arr2)

console.log(arr1)
// (3) [7, 8, 9]
// (3) [7, 8, 9]
// (3) [7, 8, 9]
// (3) [2, 4, 6]

arr1 изменен с [1, 2, 3] на [2, 4, 6]внутри функцииthisзначениеarr2

map

map()метод создает массив, результат которого является результатом вызова предоставленной функции для каждого элемента в массиве

грамматика:

let new_array = arr.map(function(v, i, arr) {
  // Return element for new_array 
}[, thisArg])

возвращаемое значение:

一个新数组，每个元素都是回调函数的结果

инструкции карты

1,mapНе изменяет исходный массив, для которого он был вызван (конечно, исходный массив может быть изменен при выполнении обратного вызова).

2. ЕслиthisArgПараметр имеет значение каждый разcallbackКогда функция вызывается,thisукажет наthisArgЭтот объект по параметру. если опущеноthisArgпараметр или назначается какnullилиundefined,ноthisУказывает на глобальный объект.

3.mapМетод будет вызываться один раз для каждого элемента в исходном массиве по порядку.callbackфункция.callbackВозвращаемое значение после каждого выполнения (включаяundefined) объединяются в новый массив.callbackФункции вызываются только для индексов, которые имеют значения; они никогда не присваиваются и не используются.deleteУдаленные индексы не вызываются.

4. ИспользуйтеmapКогда метод обрабатывает массив, диапазон элементов массива находится вcallbackМетод определяется перед первым вызовом. существуетmapВо время выполнения метода: вновь добавленные элементы в исходном массиве не будутcallbackДоступ к; если существующие элементы были изменены или удалены, они передаются вcallbackЗначениеmapМетод переходит к их значению в данный момент, удаленный элемент не будет доступен. 【иforEachТакой же】

суть карты

1,querySelectorAllприменение

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value
});

Приведенный выше код показывает, как пройти черезquerySelectorAlРезультирующая коллекция динамических объектов. Здесь мы получаем все проверенные параметры в документе и распечатываем его.

советы по использованию карты

как правило,mapв методеcallbackФункция должна принимать только один параметр, который является проходимым элементом массива. но это не значитmapтолько датьcallbackПараметр передается. Такое мышление может привести нас к простой ошибке.

// 下面的语句返回什么呢：
["1", "2", "3"].map(parseInt);
// 你可能觉得会是 [1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

обычно используетсяparseInt, необходимо передать только один параметр. Но на самом деле,parseIntАргументов может быть два, второй аргумент — это базовое число. через заявлениеalert(parseInt.length) === 2проверять.mapметод вызываетcallbackПри вызове функции ей будут переданы три параметра: просматриваемый в данный момент элемент, индекс элемента и сам исходный массив. третий параметрparseIntбудет проигнорирован, а второй параметр - нет, то есть:parseIntИспользуйте переданное значение индекса в качестве базового числа. Это возвращает NaN.

Или вы можете использовать функции стрелок:

['1', '2', '3'].map( str => {
  parseInt(str)
})

Более простой способ:

['1', '2', '3'].map(Number);  // [1, 2, 3]
// 与 parseInt 不同，下面的结果会返回浮点数或指数：
['1.1', '2.2e2', '3e300'].map(Number);  // [1.1, 220, 3e+300]

filter

filter()метод создает новый массив, содержащий все элементы теста, реализованного предоставленной функцией

грамматика:

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

фильтр Инструкции

1,filterВызывается один раз для каждого элемента массиваcallbackфункции и использует всеcallbackвозвращениеtrueилизначение эквивалентно истинномусоздает новый массив элементов.callbackОн будет вызываться только для индексов, которые были назначены, и не будет вызываться для индексов, которые были удалены или никогда не назначались. те, кто не прошелcallbackПроверяемые элементы пропускаются и не включаются в новый массив.

2,filterОн не изменяет исходный массив, он возвращает новый отфильтрованный массив.

3.filterИтерация по диапазону элементов в первом вызовеcallbackЭто было определено ранее. вызовfilterЭлементы, добавленные в массив позже, не будутfilterпройти к. Если существующие элементы были изменены, они переходят вcallbackЗначениеfilterПерейдите к их значению на данный момент. Элементы, которые удалены или которым никогда не присваивалось значение, не просматриваются.

пример фильтра

var filtered = [12, 5, 8, 130, 44].filter(function(v) {
  return v >= 10
})
// [12, 130, 44]

напиши в конце

моя домашняя страница:neveryu.github.io/index.html

Группа QQ:685486827

Категории