написать впереди
В этой статье в основном говорится оES6изIteratorЦель состоит в том, чтобы понять его концепцию, роль и существующие приложения и, наконец, научиться.
IteratorМожно сказать, что это очень важная функция ES6, а также краеугольный камень многих других функций.
ЗачемIteratorТакой высокий статус?
начать с переменной
var arr = ['红','绿','蓝'];
Это обычный массив, если я хочу получить каждый элемент его данных, что мне делать?
Это не просто, просто сделайте цикл for.Если вы считаете, что цикл низкий, то сделайте forEach.
ок, сразу получай код
//for 循环
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//forEacth
arr.forEach(item=>{
console.log(item);
});
// 结果 略
хорошо, нет проблем.
Тогда продолжим, посмотрим на код ниже. Учитывая строку, что, если я хочу вывести каждый символ?
var str='1234567890';
Что-то в этом не так, это просто смешно.
Вы можете использовать цикл for in или цикл for для обработки в виде массива.
Код сейчас
//for in
for(var s in str){
console.log(str[s]);//s 是 属性名称【key】
}
//转为数组
for(var i =0;i<str.length;i++){
console.log(str[i]);
}
//或者转换为数组
Array.prototype.slice.call(str);
ноfor inОн не используется для получения данных, он будет проходить по всем перечисляемым свойствам объекта, включая свои собственные и цепочку прототипов, так что это не страховка.
эммм.... нет проблем, продолжим.
См. приведенный ниже код, учитываяmapобъект, а затем вывести каждый элемент его данных.
var map = new Map();
map.set('zhang','1000w');
map.set('liu','200w');
map.set('sun','100w');
использоватьforEachВот и все.
map.forEach((val,key)=>{
console.log(val,key);
})
Увидев здесь столько простых и возмутительных вопросов, наверное, я не могу усидеть на месте, и мне приходится поднимать стол и уходить. Пожалуйста, подождите немного и медленно посмотрите вниз.
проблема найдена
Ну, в нескольких простых вопросах на предыдущем шаге наша операция состоит в том, чтобы получить все их данные.
Конечно, есть много способов и способов добиться этого.for 循环,forEach,for inЛа.
Но нашли ли мы проблему, или мы смотрим на нее с более высокого измерения, на самом деле эти методы не универсальны, то есть вышеперечисленные типы данных коллекции не могут быть получены с помощью единого метода обхода.
Кто сказал, что его можно унифицировать, его можно использоватьforEachдля перебора массива иmapОн поддерживается сам по себе, и я могу напрямую преобразовать строку в массив.
хорошо, в этом нет ничего плохого.
Но каждый раз его приходится конвертировать, инкапсулировать и, возможно, врезать в прототип.
Есть ли лучший общий метод, который сделает его более удобным и крутым для разработчиков?
Ответ - да,es5когда он не появился, обновите доes6Вот оно.
NB для из, взгляните
Этот способ унифицированного обхода различных структур данныхes6изfor ofцикл.
for ofпетля и древнийfor 循环Очень похожий. Разве это не просто новый синтаксис.
Цитируя предложение из книги г-на Жуана, я думаю, вы поймете его с первого взгляда.
ES6 представил циклы for...of, заимствованные из языков C++, Java, C# и Python. Как единый способ обхода всех структур данных.
Ключ заключается в унификации, а другой - в непосредственном получении значения, упрощении операции и отсутствии необходимости объявлять и поддерживать какие-либо переменные или преобразовывать данные.
оказалосьfor ofтак корова,forВы можете делать то, с чем не может справиться цикл.
Зачемfor ofБлагодаря этой возможности можно обеспечить единый метод сбора данных для различных структур данных.
for ofДействительно ли он такой мощный, и какой механизм стоит за ним?
фактическиfor ofНе очень сильный, он простоES6Просто новый синтаксис.
Не все объекты можно использоватьfor of, только если реализоватьIteratorОбъекты интерфейса можно использовать толькоfor ofдля обхода значения.
такfor ofПросто синтаксический сахар, настоящий геройIterator.
What ? Iterator.....
Дебют главного героя - Iterator iterator
IteratorЭто интерфейс, целью которого является предоставление унифицированного механизма доступа к данным для различных структур данных. также можно понимать какIteratorИнтерфейс в основномfor ofсервировка, дляfor...ofпотреблять.
На самом деле функция Iterator существовала много лет назад во многих внутренних языках, таких как java, C++, C# и т. д.
Поскольку это интерфейс, как мы должны реализовать этот интерфейс? Как выглядят правила реализации?
потому чтоjavascriptВ языке нет понятия интерфейса, здесь мы можем понять, что это особый вид объекта — объект-итератор, а метод, возвращающий этот объект, называется методом-итератором.
Во-первых, как объект этот объект имеетnextметод, каждый вызовnextметоды возвращают значение результата.
Полученное значение представляет собойobject, содержит два свойства,valueа такжеdone.
valueУказывает конкретное возвращаемое значение,doneОн имеет логический тип, указывающий, завершен ли обход коллекции или есть ли еще доступные данные в будущем.Если доступных данных нет, они будут возвращены.true, иначе возвратfalse.
Кроме того, внутри будет поддерживаться указатель, указывающий на расположение текущей коллекции, и каждый вызов будетnextметод, указатель переместится на одну позицию назад (представьте, что это индекс массива).
Посмотрите на реализацию кода
function getIterator(list) {
var i = 0;
return {
next: function() {
var done = (i >= list.length);
var value = !done ? list[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
var it = getIterator(['a', 'b', 'c']);
console.log(it.next()); // {value: "a", done: false}
console.log(it.next()); // {value: "b", done: false}
console.log(it.next()); // {value: "c", done: false}
console.log(it.next()); // "{ value: undefined, done: true }"
console.log(it.next()); // "{ value: undefined, done: true }"
console.log(it.next()); // "{ value: undefined, done: true }"
Приведенный выше код представляет собой смоделированную реализацию, основанную на базовой концепции итераторов.
-
getIteratorМетод возвращает объект - итерируемый - объект имеет
nextметод,nextУказатель хранится внутри метода через замыканиеiценность каждого звонкаnextметодiзначение будет+1. - Тогда согласно
iЗначение извлекает данные из массива какvalue, а затем по индексу получитьdoneценность . - когда
i=3Когда максимальный индекс массива превышен, доступные данные не возвращаются.true, обход завершен.
повторяемый объект
Вот примерно разобралисьIteratorи как создать объект итератора. Но он иfor ofЧто это значит?
для рабочего механизма
когдаfor ofПри выполнении движок автоматически вызовет это во время цикла对象上的迭代器方法, который, в свою очередь, выполняет объект итератораnextметод, будетnextВозвращаемое значение присваиваетсяfor ofпеременная для получения определенного значения.
Я думаю, что приведенное выше предложение содержит важную информацию - «Методы итератора для объектов».
Реализовать итерируемые объекты
Как может быть метод итератора для объекта?
ES6Он обусловлен тем, что пока он развернут на свойствах объектаIteratorИнтерфейс, в виде добавления к объектуSymbol.iteratorсвойство, это свойство указывает на метод итератора, который возвращает специальный объект — объект итератора.
Объект, который развертывает это свойство и реализует метод итератора, называется可迭代对象.
В этот момент объект является итерируемым, то есть его можноfor ofтраверс.
Symbol.iterator — выражение, возвращающее свойство итератора объекта Symbol, которое является предопределенным специальным значением типа Symbol.
Например
Обычные предметы не могут бытьfor ofОбход, прямое потребление сообщит об ошибке.
var obj = {};
for(var k of obj){
}
obj не является итерируемым объектом.
Тогда давайте сделаем из объекта итерабельный объект и реализуем его по протоколу, то есть по регламенту.
iterableObjРазвертывание на объектеSymbol.iteratorАтрибут, затем создайте метод итератора, мы сказали это выше правил итератора.
var iterableObj = {
items:[100,200,300],
[Symbol.iterator]:function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.items.length);
var value = !done ? self.items[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
}
//遍历它
for(var item of iterableObj){
console.log(item); //100,200,300
}
Это так просто, вышеприведенный объект является итерируемым объектом, который может использоватьсяfor ofпотребляется.
Сценарии собственных приложений Iterator
Вернемся к началуfor ofдля обхода строк, массивов, карт мы не разворачивали для нихIteratorинтерфейс, который все еще можно использоватьfor ofтраверс.
Это потому, что вES6Некоторые объекты в этом интерфейсе уже развернули этот интерфейс по умолчанию, и вы можете использовать его без какой-либо обработки.for ofдля обхода значения.
Не верю? Эй, ты такой жесткий, я не хочу, чтобы ты говорил - письмо, я хочу, чтобы я говорил - письмо.
Посмотрите, сможете ли вы получить их итераторы.
数组
//数组
var arr=[100,200,300];
var iteratorObj= arr[Symbol.iterator]();//得到迭代器方法，返回迭代器对象
console.log(iteratorObj.next());
console.log(iteratorObj.next());
console.log(iteratorObj.next());
console.log(iteratorObj.next());
字符串
Поскольку значение самой строки упорядочено и имеет характеристики массива, оно поддерживает доступ по индексу, поэтому оно также развертывается по умолчанию.iteratorинтерфейс.
var str='abc';
var strIteratorObj = str[Symbol.iterator]();//得到迭代器
console.log(strIteratorObj.next());
console.log(strIteratorObj.next());
console.log(strIteratorObj.next());
console.log(strIteratorObj.next());
Или просто посмотрите, развернуто ли это свойство в прототипе.
argumentsмассивный
внутри функцииargumentsпохож на массив, он также поддерживаетfor of, потому что он также развернут внутриIteratorинтерфейс.
Мы все знаем, что объект не разворачивает этот интерфейс по умолчанию, такargumentsЭтот атрибут находится не на прототипе, а на самом объекте.
function test(){
var obj = arguments[Symbol.iterator]();
console.log( arguments.hasOwnProperty(Symbol.iterator));
console.log( arguments);
console.log(obj.next());
}
test(1,2,3);
Подводя итог, можно сказать, что объекты, для которых по умолчанию развернут интерфейс Iterator, в основном включают в себя массивы, строки, наборы, карты и объекты, подобные массивам (такие как объекты аргументов, объекты DOM NodeList).
Проверка кода незначительна, это рутина, особо нечего сказать.
Другая функция Iterator
IteratorПомимо предоставления унифицированного метода доступа к данным для различных структур данных, нашли ли вы другое применение?
Это настраиваемость данных, потому что мы можем управлять итератором по желанию.valueстоимость.
Например: сам массив является итерируемым, мы можем переопределить его итератор по умолчанию.
var arr=[100,200,300];
for(var o of arr){
console.log(o);
}
for ofВыход массива по умолчанию выглядит следующим образом
После нашей трансформации
var arr=[100,200,300];
arr[Symbol.iterator]=function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.length);
var value = !done ? self[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
for(var o of arr){
console.log(o);
}
Почему объекты не развертываются по умолчанию
Объекты могут иметь различные свойства, в отличие от массивов, значения которых упорядочены.
Поэтому при обходе мы не знаем, как определить их порядок, поэтому нам нужно реализовать его вручную по ситуации.
расширять
для прерывания
Мы все знаем обычноеforЦикл может быть прерван в любой момент, затемfor ofЯвляется ли это возможным?
Ответ - да,for ofмеханизм учитываетforа такжеforEach.
Итераторы должны бытьnextВ дополнение к методу, есть два дополнительных методаreturnа такжеthrowметод.
еслиfor ofЕсли цикл выйдет раньше, он будет вызван автоматическиreturnметод, следует отметить, чтоreturnМетод должен иметь возвращаемое значение, а возвращаемое значение должно бытьobject.
ps: выйдите, бросив исключение, оно будет выполнено первымreturnметод выдает исключение.
var iterableObj = {
items:[100,200,300],
[Symbol.iterator]:function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.items.length);
var value = !done ? self.items[i++] : undefined;
return {
done: done,
value: value
};
},
return(){
console.log('提前退出');
return {//必须返回一个对象
done:true
}
}
};
}
}
for(var item of iterableObj){
console.log(item);
if(item===200){
break;
}
}
for(var item of iterableObj){
console.log(item);
throw new Error();
}
Метод ps:throw здесь не упоминается, это не то место, где он используется, увидимся в следующей статье.
больше, чем для
Кромеfor ofПри выполнении он автоматически вызывает объектIteratorметод, тоES6Есть ли другие грамматические формы?
присваивание деструктуризации
При деструктуризации и назначении итерируемого объекта он будет вызываться по умолчаниюSymbol.iteratorметод.
//字符串
var str='12345';
var [a,b]=str;
console.log(a,b); // 1 2
//map
var map = new Map();
map.set('我','前端');
map.set('是','技术');
map.set('谁','江湖');
map.set('作者','zz_jesse');
var [d,e]=map;
console.log(d,e);
//["我", "前端"] ["是", "技术"]
....
Точно так же, если обычный объект будет уничтожен, будет сообщено об ошибке.
Потому что обычные объекты не являются итерируемыми.
var [d,e]={name:'zhang'};
Деструктурирование присваивания из пользовательского итерируемого объекта.
var iterableObj = {
items:['红','绿','蓝'],
[Symbol.iterator]:function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.items.length);
var value = !done ? self.items[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
}
var [d,e]=iterableObj;
console.log(d,e);//红 绿
Значение переменной, присвоенное деструктуризацией, является возвращаемым значением следующего метода объекта итератора и возвращается по порядку.
спред оператор
Выполнение оператора распространения (...) также вызывает его по умолчаниюSymbol.iteratorметод для преобразования текущего объекта итерации в массив.
//字符串
var str='1234';
console.log([...str]);//[1,2,3,4] 转换为数组
//map 对象
var map=new Map([[1,2],[3,4]]);
[...map] //[[1,2],[3,4]
//set 对象
var set=new Set([1,2,3]);
[...set] //[1,2,3]
Общие обычные объекты не могут быть преобразованы в массивы.
var obj={name:'zhang'};
[..obj]//报错
как источник данных
В качестве источника данных некоторых данных, например, параметр некоторых методов API должен получать массив, и он по умолчанию будет вызывать свой собственный итератор.
Например: Set, Map, Array.from и т. д.
//为了证明，先把一个数组的默认迭代器给覆盖掉
var arr=[100,200,300];
arr[Symbol.iterator]=function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.length);
var value = !done ? self[i++] : undefined;
return {
done: done,
value: value+'前端技术江湖' //注意这里
};
}
};
}
for(var o of arr){
console.log(o);
}
// 100前端技术江湖
// 200前端技术江湖
// 300前端技术江湖
перезаписанный
//生成 set 对象
var set = new Set(arr);
//调用 Array.from方法
Array.from(arr);
ключевые слова yield*
За yield* следует проходимая структура, которая также вызывает функцию итератора при выполнении.
let foo = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
Урожайность необходимо подчеркнуть, и она будет подробно описана в следующем разделе.
Определить, является ли объект итерируемым
Поскольку правила для итерируемых объектов должны быть развернуты на объектеSymbol.iteratorАтрибут, то мы можем в основном использовать этот атрибут, чтобы определить, является ли объект итерируемым объектом, а затем мы можем узнать, можно ли его использовать.for ofценится.
function isIterable(object) {
return typeof object[Symbol.iterator] === "function";
}
console.log(isIterable('abcdefg')); // true
console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true
console.log(isIterable(new Map())); // true
console.log(isIterable(new Set())); // true
console.log(isIterable(new WeakMap())); // false
console.log(isIterable(new WeakSet())); // false
Суммировать
ES6Появление множества новых структур данных, таких какMap ,Set, поэтому для удобства сбора данных добавлен единый способ получения данных.for of.
а такжеfor ofПри выполнении движок автоматически вызовет итератор объекта, чтобы получить значение.
Не все объекты поддерживают этот метод, он должен быть реализованIteratorТолько интерфейсы могут, такие объекты мы называем итерируемыми объектами.
Итератор реализован в соответствии с итерируемым протоколом, и может быть реализован протокол итератора.
В дополнение к унифицированному методу доступа к данным вы также можете настроить содержимое полученных данных, как хотите, до тех пор, пока вам это нужно.
Итератор — это метод, который возвращает объект итератора.
Итерируемый развернутIteratorОбъект интерфейса с правильными методами итератора.
Он используется во многих местах в ES6.Iterator, Обычно вы можете уделять больше внимания наблюдению, думать на один шаг больше.
и конец и начало
Здесь мы можем настроить итератор по правилам итератора, но процесс реализации немного усложняется, ведь нам нужно поддерживать внутренние указатели, там много логической обработки, которая неизбежно будет допускать ошибки.
Есть ли более элегантный способ сделать это?
Да, это -Генератор -Генератор.
let obj = {
* [Symbol.iterator]() {
yield 'hello';
yield 'world';
}
};
for (let x of obj) {
console.log(x);
}
// "hello"
// "world"
Видно, что он очень лаконичен и может генерировать итератор без лишнего кода.
Помимо того, что он является синтаксическим сахаром для генерации итераторов, он обладает еще более магическими возможностями.
Такая забавная способность обязательно будет разбита, но сегодня уже поздно, поздно ложиться спать вредит моему телу, на этот раз я сначала это исправлю.Iterator.
Сделать дальшеGenerator.
упражняться
Если вы сочтете эту статью полезной, вы можете попробовать выполнить следующие упражнения, чтобы углубить свое понимание, а затем написать свой ответ в комментариях.
- Напишите объект Iterator.
- Настройте итерируемый объект.
- скажи, что ты прав
Iteratorпонимание, под кратким выводом.
Ссылаться на
Голод 6. Ruan Yifeng.com/#docs/ITER A…
developer.Mozilla.org/this-cn/docs/…
блог woo woo woo.cn на.com/smallmatch…
Последняя вещь
Я создаю чисто техническую группу обмена для младших и средних разработчиков интерфейса с целью обучения, общения, мышления и улучшения способностей, потому что обучение само по себе не так хорошо, как обучение со всеми, и с большим количеством обменов, прогресс будет быстрее.
-
Моя идеальная модель состоит в том, чтобы позволить одному человеку подробно изучить технологию в каждом выпуске, а затем повторить ее каждому самостоятельно, подобно классу обмена, который может удвоить эффективность обучения.
-
Или вы можете следовать порядку банка вопросов, каждый человек думает над вопросом и подводит итоги каждый день, а также улучшает способность выражать свои мысли, отрабатывая технику.
-
В этой группе вам не нужно беспокоиться об отсутствии у вас способностей, не беспокоиться о том, слишком ли наивна проблема, чтобы о ней говорить, смело говорите о проблеме, позволяйте большему количеству людей вместе ее анализировать, и это не имеет значение, если вы говорите это неправильно.
Если вы хотите присоединиться, обратите внимание на общедоступную учетную запись «Front-end Technology Jianghu», ответьте «войти в группу», я втяну вас в группу.
Рекомендую всем обратить внимание на мой паблик "Front-end Technology Jianghu", чтобы получать больше оригинальных избранных статей.Кроме того, одну я сделал в свободное время.Веб-сайт банка вопросов для интервью, используемый для сбора предварительных вопросов для интервью, цель состоит в том, чтобы сэкономить время, повысить эффективность и сократить время. Рекомендую всем быть более внимательными.
Для того, чтобы легче было найти вход в банк вопросов и не потеряться, вход привязан к самостоятельному меню официального аккаунта.
Вход на сайт -Вопросы для интервью Bigerfe - http://bigerfe.com/
Наконец, я надеюсь, что эта статья поможет вам. Если в статье есть какие-либо ошибки, пожалуйста, укажите их в области комментариев.
Если эта статья может вдохновить вас, ставьте лайк и подписывайтесь.
Старые утюги, увидимся в Цзянху«Передовые технологии рек и озер»