24 метода зацикливания в JavaScript, знаете ли вы их все?

Сегодня мы рассмотрим основы и рассмотрим методы циклов в JavaScript:

Во-первых, метод обхода массива

1. forEach()

forEachМетод используется для вызова каждого элемента массива и передачи элемента в функцию обратного вызова. Функция обратного вызова вызывается для каждого значения в массиве. Его синтаксис следующий:

array.forEach(function(currentValue, index, arr), thisValue)

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

• текущее значение: обязательно. текущий элемент
• индекс: необязательный. Значение индекса текущего элемента.
• обр.: необязательно. Объект массива, которому принадлежит текущий элемент

let arr = [1,2,3,4,5]
arr.forEach((item, index, arr) => {
  console.log(index+":"+item)
})

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

let arr = [1,2,3,4,5]
let arr1 = [9,8,7,6,5]
arr.forEach(function(item, index, arr){
  console.log(this[index])  //  9 8 7 6 5
}, arr1)

Уведомление:

• Метод forEach не изменяет исходный массив и не имеет возвращаемого значения;
• ForEach не может использовать break, continue для выхода из цикла, при использовании return эффект такой же, как при использовании continue in for цикла;
• Метод forEach не может проходить по объектам, он подходит только для обхода массивов.

2. map()

map()Метод вернет новый массив, элементами массива являются значения, обработанные вызывающей функцией исходных элементов массива. Этот метод обрабатывает элементы последовательно в исходном порядке элементов массива. Его синтаксис следующий:

array.map(function(currentValue,index,arr), thisValue)

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

• текущее значение: обязательно. значение текущего элемента;
• индекс: необязательный. значение индекса текущего элемента;
• обр.: необязательно. Объект массива, которому принадлежит текущий элемент.

let arr = [1, 2, 3];
 
arr.map(item => {
    return item + 1;
})

// 输出结果： [2, 3, 4]

Второй параметр этого метода используется для привязки переменной this внутри функции параметра, что является необязательным:

let arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)

// 输出结果： ['b', 'c']

Этот метод также может быть цепочкой:

let arr = [1, 2, 3];
 
arr.map(item => item + 1).map(item => item + 1)

// 输出结果： [3, 4, 5]

Уведомление:

• Метод карты не обнаруживает пустые массивы;
• Метод карты возвращает новый массив при переборе массива,не изменяет исходный массив;
• Метод карты имеет возвращаемое значение, которое может быть возвращено Функция обратного вызова карты поддерживает возвращаемое значение;
• Метод карты не может проходить по объектам, он подходит только для обхода массивов.

3. for of

for...ofоператор создает цикл для итерации по итерируемому объекту. Представлено в ES6for...ofпетля вместоfor...inа такжеforEach()и поддерживает новый протокол итераций. Его синтаксис следующий:

for (variable of iterable) {
    statement
}

Метод имеет два параметра:

• переменная: этой переменной присваивается значение свойства для каждой итерации.
• iterable: объект с перечисляемыми свойствами и iterable.

Этот метод может получить каждый элемент массива:

let arr = [
    {id:1, value:'hello'},
    {id:2, value:'world'},
    {id:3, value:'JavaScript'}
]
for (let item of arr) {
  console.log(item); 
}
// 输出结果：{id:1, value:'hello'}  {id:2, value:'world'} {id:3, value:'JavaScript'}

Уведомление:

• Метод for of будет проходить только по свойствам текущего объекта, а не по свойствам в его цепочке прототипов;
• Метод for of подходит для обходамассив/подобный массиву/строка/карта/набори т. д. иметь коллекцию объектов итераторов;
• Метод for of не поддерживает обход простых объектов, поскольку у него нет объектов-итераторов. Если вы хотите просмотреть свойства объекта, вы можете использовать метод for in;
• Вы можете использовать break, continue и return, чтобы прервать обход цикла;

4. filter()

filter()Метод используется для фильтрации массива, и будут возвращены элементы, удовлетворяющие условию. Его параметр является callback-функцией, которая выполняется для всех элементов массива по очереди, и будет возвращен тот элемент, результат возврата которого истинен, если нет подходящего элемента, будет возвращен пустой массив. Его синтаксис следующий:

array.filter(function(currentValue,index,arr), thisValue)

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

• текущее значение: обязательно. значение текущего элемента;
• индекс: необязательный. значение индекса текущего элемента;
• обр.: необязательно. Объект массива, которому принадлежит текущий элемент.

const arr = [1, 2, 3, 4, 5]
arr.filter(item => item > 2) 

// 输出结果：[3, 4, 5]

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

можно использоватьfilter()метод для удаления неопределенных, нулевых, NAN и т. д. значений из массива:

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
arr.filter(Boolean)

// 输出结果：[1, 2, 3, 4]

Уведомление:

• Метод filter вернет новый массив без изменения исходного массива;
• Метод filter не обнаруживает пустые массивы;
• Метод filter доступен только для тестовых массивов.

5. некоторые(), каждый()

Метод some() обходит каждый элемент массива, пока один элемент удовлетворяет условию, он возвращает true, а остальные элементы не проверяются, иначе возвращает false. ​

Метод Every() просматривает каждый элемент в массиве и возвращает true только тогда, когда все элементы удовлетворяют условиям.Если обнаружено, что один элемент в массиве не соответствует условиям, все выражение возвращает false, а остальные элементы не Проверю снова. Его синтаксис следующий: ​

Синтаксис для обоих следующий:

array.some(function(currentValue,index,arr),thisValue)
array.every(function(currentValue,index,arr), thisValue)

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

• текущее значение: обязательно. значение текущего элемента;
• индекс: необязательный. значение индекса текущего элемента;
• обр.: необязательно. Объект массива, которому принадлежит текущий элемент.

let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 4) 

// 输出结果： true

let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0) 

// 输出结果： true

Уведомление:

• Оба метода не изменят исходный массив и вернут логическое значение;
• Ни один из методов не обнаружит пустые массивы;
• Оба метода работают только для обнаружения массивов.

6. уменьшить(), уменьшитьПраво()

Метод reduce() принимает функцию как аккумулятор, и каждое значение в массиве (слева направо) сводится к значению. reduce() можно использовать как функцию более высокого порядка для составления функций. Его синтаксис следующий:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Метод сокращения будет выполнять функцию обратного вызова для каждого элемента в массиве по очереди, исключая элементы в массиве, которые были удалены или которым никогда не присваивалось значение.Функция обратного вызова принимает четыре параметра:

• total: значение, возвращенное последним обратным вызовом, или предоставленное начальное значение;
• currentValue: текущий обрабатываемый элемент;
• currentIndex: индекс текущего элемента;
• arr: объект массива, которому принадлежит текущий элемент.

Второй параметр этого методаinitialValue, представляющее начальное значение, переданное функции (в качестве первого аргумента первого вызова обратного вызова):

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

Выходной результат:

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

Затем попробуйте добавить начальное значение:

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

Выходной результат:

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

Отсюда можно сделать вывод, что:Если начальное значение не указано, сокращение выполнит метод обратного вызова, начиная с индекса 1, пропуская первый индекс. Если указано initialValue, выполнить с индекса 0 ​

метод reduceRight() и методreduce()Использование почти такое же, за исключением того, что этот метод проходит массив в обратном порядке, иreduce()Методы проходятся в положительном порядке.

let arr = [1, 2, 3, 4]
let sum = arr.reduceRight((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

Выходной результат:

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

Уведомление:

• Ни один из методов не изменит исходный массив;
• Если два метода добавляют начальное значение, исходный массив будет изменен, а начальное значение будет помещено в последнюю цифру массива;
• Оба метода не будут выполнять функцию обратного вызова для пустого массива.

7. найти(), найтииндекс()

find()Метод возвращает значение первого элемента массива, определенного функцией. Когда элемент массива возвращает true при проверке условия,find()Возвращает элемент, удовлетворяющий условию, и последующее значение больше не вызовет функцию выполнения. Возвращает undefined, если ни один элемент не соответствует условию. ​

findIndex()Метод возвращает переданный в тестовую функцию массив, удовлетворяющий условиямпозиция первого элемента(показатель). Когда элемент в массиве возвращает true, когда функция условна,findIndex()Возвращает позицию индекса элемента, который соответствует условию, и функция выполнения не будет вызываться для последующих значений. Возвращает -1, если нет подходящих элементов. ​

Синтаксис двух методов следующий:

array.find(function(currentValue, index, arr),thisValue)
array.findIndex(function(currentValue, index, arr), thisValue)

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

• текущее значение: обязательно. текущий элемент;
• индекс: необязательный. индекс текущего элемента;
• обр.: необязательно. Объект массива, которому принадлежит текущий элемент.

let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 2) 

// 输出结果： 3

let arr = [1, 2, 3, 4, 5]
arr.findIndex(item => item > 2) 

// 输出结果： 2

find()а такжеfindIndex()Эти два метода почти одинаковы, но возвращают разные результаты:

• find(): возвращает первое значение, соответствующее условию;
• findIndex: возвращает значение индекса значения первого возвращаемого условия.

Уведомление:

• Два метода для пустого массива, функция выполняться не будет;
• Не изменят ли эти два метода исходный массив.

8. ключи(), значения(), записи()

Все три метода возвращают итерируемый объект массива, содержимое которого не совсем совпадает:

• keys() возвращает значение индекса массива;
• values() возвращает элементы массива;
• entry() возвращает массив пар ключ-значение.

Синтаксис трех методов следующий:

array.keys()
array.values()
array.entries()

Все три метода не имеют параметров:

let arr = ["Banana", "Orange", "Apple", "Mango"];
const iterator1 = arr.keys();
const iterator2 = arr.values() 
const iterator3 = arr.entries() 

for (let item of iterator1) {
  console.log(item);
}
// 输出结果： 0 1 2 3

for (let item of iterator2) {
  console.log(item);
}
// 输出结果： Banana Orange Apple Mango

for (let item of iterator3) {
  console.log(item);
}
// 输出结果：[0, 'Banana'] [1, 'Orange'] [2, 'Apple'] [3, 'Mango']

Суммировать:

метод	следует ли изменить исходный массив	Функции
forEach()	нет	нет возвращаемого значения
map()	нет
for of
filter()

1. for in

for…in

for (var in object) {
 执行的代码块
}

var obj = {a: 1, b: 2, c: 3}; 
 
for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
}

键名： a
键值： 1
键名： b
键值： 2
键名： c
键值： 3

let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj));   // 输出结果: ['id', 'name', 'age']
console.log(Object.values(obj)); // 输出结果: [1, 'hello', 18]
console.log(Object.entries(obj));   // 输出结果: [['id', 1], ['name', 'hello'], ['age', 18]

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()Object.keys()

let a = ['Hello', 'World'];
 
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj) // ["0", "1", "2"]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3

4. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols()

let obj = {a: 1}

// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
 
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})

// 输出结果：Symbol baz Symbol foo

5. Reflect.ownKeys()

var obj = {
	a: 1,
	b: 2
}
Object.defineProperty(obj, 'method', {
	value: function () {
	    alert("Non enumerable property")
	},
	enumerable: false
})

console.log(Object.keys(obj))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "method"]

• Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)

for in
Object.keys()
Object.getOwnPropertyNames()			да	нет
Object.getOwnPropertySymbols()	нет	нет	да	да
Reflect.ownKeys()	да	нет	да	да

3. Другие методы обхода

1. for

Наиболее распространенным способом работы с циклом должен быть цикл for, состоящий из трех выражений: объявления переменных цикла, оценки условий цикла и обновления переменных цикла. Три выражения разделены точкой с запятой. Временные переменные можно использовать для кэширования длины массива, чтобы избежать повторного получения длины массива.Когда массив большой, эффект оптимизации будет более очевидным.

const arr = [1,2,3,4,5]
for(let i = 0, len = arr.length; i < len; i++ ){
  console.log(arr[i])
}

При выполнении сначала оцениваются условия выполнения, а затем выполняются. Циклы for можно использовать для перебора массивов, строк, массивов, узлов DOM и т. д. Исходный массив можно изменить.

2. while

whileКонечное условие в цикле может быть разных типов, но в конечном итоге оно будет преобразовано в логическое значение.Правила преобразования следующие.

• Логическое значение: true — это правда, false — это ложь;
• Строка: пустые строки ложны, все непустые строки истинны;
• Число: 0 — ложь, числа, отличные от 0, — истина;
• null/Undefined/NaN: все ложно;
• Объект: Все верно.

let num = 1;
            
while (num < 10){
    console.log(num);
    num ++;
}

whileа такжеforВот так сначала судите, а потом казните. Цикл может выполнять код до тех пор, пока заданное условие истинно.

3. do / while

Этот метод сначала выполнится, а затем вынесет решение, даже если начальные условия не выполняются.do/whileЦикл также выполняется хотя бы один раз.

let num = 10;
            
do
	{
    console.log(num);
    num--;
  }
while(num >= 0);
            
console.log(num); //-1

Не рекомендуется использовать do/while для перебора массивов.

4. for await of

for await...ofметод называетсяасинхронный итератор, этот метод в основном используется для обхода асинхронных объектов. Это метод, представленный в ES2018.

for await...ofОператор создает итерационный цикл по асинхронным или синхронным итерируемым объектам, включая String, Array, массивоподобные, Map, Set и настраиваемые асинхронные или синхронные итерируемые объекты. Это утверждение может быть использовано только вasync functionИспользовать внутрь:

function Gen (time) {
  return new Promise((resolve,reject) => {
    setTimeout(function () {
       resolve(time)
    },time)
  })
}

async function test () {
   let arr = [Gen(2000),Gen(100),Gen(3000)]
   for await (let item of arr) {
      console.log(Date.now(),item)
   }
}
test()

Выходной результат: