JS итерируемый объект

ES6 представляет концепцию итераторов и итерируемых объектов, а также обеспечивает соответствующую поддержку итерируемых объектов, таких как цикл for...of, конструктор Map (итерируемый), синтаксис расширения... и т. д. Также сильно упростим операцию обхода сбора данных вне массива

Итерируемый объект

Массив — это особый объект, и его отличие от обычных объектов не только в последовательном доступе и хранении элементов. Еще одно важное отличие: массивы являются итерируемыми, то есть for ... ofко всем элементам можно обращаться (итерировать) с помощью операторов.

Обычный оператор использования объекта for ... ofсообщит об ошибке

let arr = [1,2,3,4,5]
for(let val of arr) {
    console.log(val)  // 1 2 3 4 5
}

let obj = {
    name:'Kite',
    age:23,
}
for(let key of obj) { // obj is not iterable
    console.log(key)
}

спред оператор

// es5 apply
function consoleLog() {
  console.log(...arguments)
}
console.log(consoleLog.apply(null, array))

// es6 扩展预算符
const array = [1, 2, 3, 4]
console.log(...array); // 1,2,3,4


const obj = {
  name: 'kite',
  age: 23,
}
console.log(...obj); // TypeError: Found non-callable @@iterator

Символ.iterator

Если мы хотим, чтобы объект был итерируемым, мы должны добавить к объекту метод с Symbol.iteratorименемSymbol

При использовании for ... ofцикла для перебора объекта Symbol.iteratorвызывается метод, который должен возвращать итератор ( next()объект с методами).
После получения итератора for ... ofон будет постоянно вызывать метод итератора next()для получения следующего элемента.
next()Содержимое, возвращаемое методом, должно соответствовать формату: в это время{done:Boolean,value:any} цикл завершается, в противном случае это следующее значение.done:truevalue

итераторы:

Итератор — это C++концепция, заимствованная из других языков. Принцип работы итератора подобен указателю. Он указывает на элемент в наборе данных. Вы можете получить элемент, на который он указывает, и вы также можете переместить его, чтобы получить другие элементы. Итераторы аналогичны расширению индексов в массивах, и различные структуры данных, такие как связанные списки ( List), коллекции ( Set) и карты ( Map), имеют соответствующие итераторы.

JSИтераторы в специально разработаны для прохождения этой операции. Полученный каждый раз итератор всегда изначально указывает на первый элемент, и итератор имеет только next()одно поведение, пока не будет получен последний элемент набора данных. Мы не можем гибко перемещать позицию итератора, поэтому задача итератора — обход элементов в наборе данных в определенном порядке.

Реализуйте итерируемый объект:

let obj = {
    name: 'Kite',
    age:23,
    [Symbol('id')]: 20000219
}
obj[Symbol.iterator] = function(){
    //返回一个迭代器
    return {
        index: 0,
        next: function () {
            const keys = Reflect.ownKeys(obj);
            if(this.index < keys.length - 1 ) {
                const key = keys[this.index];
                this.index++;
                return { done:false,value:obj[key] }
            } else {
                return { done:true, value: undefined }//迭代结束
            }
        }
    }
}
for(let value of obj){
    console.log(value)  // Kite 23 20000219
}
for(let key in obj){
  console.log(key)  // name age
}

Концепция итерируемых объектов:

Так называемый итерируемый объект — это Symbol.iteratorобычный объект с методом с именем method, который возвращает итератор. В качестве альтернативы объект с Symbol.iteratorобоими nextметодами также является итерируемым объектом.