Разница между for in и for of

JavaScript

При обходе массива или объекта мы часто используем два метода:for inа такжеfor of, так в чем разница между этими двумя методами? давайте проведем исследование

Проще говоря, оба они могут использоваться для обхода, ноfor inПеребирает индексы массива (index),а такжеfor ofПеребирает значения элементов массива (value)

// for in
var obj = {a:1, b:2, c:3}
    
for (let key in obj) {
  console.log(key)
}
// a b c

//for of
const array1 = ['a', 'b', 'c']
 
for (const val of array1) {
  console.log(val)
}
// a b c

Поговорим о в

for inОн больше подходит для обхода объектов, он, конечно, тоже может обход массивов, но тут будут некоторые проблемы,

Например:

indexИндекс представляет собой число строкового типа, которое нельзя использовать непосредственно для геометрических операций.

var arr = [1,2,3]
    
for (let index in arr) {
  let res = index + 1
  console.log(res)
}
//01 11 21

Возможно, порядок обхода не соответствует внутреннему порядку фактического массива.

использоватьfor inОн будет проходить по всем перечислимым свойствам массива, включая прототипы.Если вы не хотите проходить по методам и свойствам прототипа, вы можете судить внутри цикла и использоватьhasOwnProperty()Метод может определить, является ли свойство экземплярным свойством объекта.

var arr = [1,2,3]
Array.prototype.a = 123
    
for (let index in arr) {
  let res = arr[index]
  console.log(res)
}
//1 2 3 123

for(let index in arr) {
    if(arr.hasOwnProperty(index)){
        let res = arr[index]
  		console.log(res)
    }
}
// 1 2 3

Давайте поговорим о for of в ES6

for ofПеребирает значения элементов массива иfor ofПеребирает только элементы массива, исключая свойства и индексы прототипа.

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}
//1 2 3

for ofНомер применяет ход/объект массива/строку/map/setetc имеют объекты итератора (iterator), но вы не можете пройти по объекту, потому что нет объекта итератора, но если вы хотите пройти по свойствам объекта, вы можете использоватьfor inloop (вот что он делает) или используйте встроенныйObject.keys()метод

var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key of Object.keys(myObject)) {
  console.log(key + ": " + myObject[key]);
}
//a:1 b:2 c:3

резюме

for inОбход — это индекс массива (т. е. имя ключа), аfor ofПеребирает значения элементов массива

for inвсегда получать объектkeyили индекс массива или строки

for ofвсегда получать объектvalueили массив, строковое значение

4. Вывод

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

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

Наконец, я также создал публичный аккаунт [Front-end Harvester], я надеюсь, вы можете обратить внимание на волну, статьи в нем все работают против выпадения волос.

Категории