предисловие
Итеративный массив методов, с которым наверняка все знакомы, может быть, просто для того, чтобы люди не подвергались этому. Но для будущего развития они, безусловно, понадобятся. Мой собственный опыт использования, если правильно использовать итерационный метод, может не только уменьшить объем кода, но и сделать код более читабельным, оптимизация производительности точно. Другое дело, что я самостоятельно просматриваю массив и в основном работаю с циклом for, после того как начал использовать итеративный подход, я редко использую цикл для использования. Если позже я более опытный итерационный метод, то для использования меньше, но также надеюсь, что это поможет им изучить итерационный метод.
1.Map
map(): запускает данную функцию для каждого элемента массива. Возвращает массив результатов каждого вызова функции.
карта - это то, что я использую больше всего. Домашняя страница представляет следующий сценарий: для заданного массива требуется указать каждому элементу массива *2.
для метода
let arr=[1,2,3,4,5,6];
for(let i=0,len=arr.length;i<len;i++){
arr[i]=arr[i]*2
}
метод карты
/*item为当前遍历到的项,和arr[i]一样*/
arr=arr.map(function(item){return item*2});es6 письмо
arr=arr.map(item=>{return item*2});
//或者
arr=arr.map(item=>item*2);Это требование относительно простое и может быть не очень практичным. Давайте посмотрим на него еще раз. Дайте массив объектов, например: массив содержит некоторую информацию о спортсмене, запись имени спортсмена и информацию о том, следует ли зарегистрироваться, если информация о регистрации какого игрокаisHellЕсли он пуст, установите для isHell значение '--'
//name:姓名，isHell：是否签到
var sporter=[{
name:'aa',
isHell:null
},{
name:'bb',
isHell:null
},{
name:'bb',
isHell:true
}];для метода
for(var i=0,len=sporter.length;i<len;i++){
if(!sporter[i].isHell){sporter[i].isHell='--';}
}метод карты
/*item为当前遍历到的项,和arr[i]一样*/
sporter.map(function (item) {
if(!item.isHell){item.isHell='--';}
});es6 письмо
sporter.map(item=> {
if(!item.isHell){item.isHell='--';}
});Запускай, цель достигнута
Существует также более распространенный сценарий для карты, который также использует указанный выше массив, но теперь требует имя каждого игрока, независимо от того, вошел он в систему или нет.
для метода
var arr=[];
for(var i=0,len=sporter.length;i<len;i++){
arr.push(sporter[i].name);
}метод карты
/*item为当前遍历到的项,和arr[i]一样*/
var arr=sporter.map(function (item){return item.name})es6 письмо
sporter.map(item=> {return item.name;});
//或者
sporter.map(item=>item.name);результат операции
2.Filter
filter(): запустить данную функцию для каждого элемента в массиве. Возвращает массив элементов, для которых эта функция вернет значение true.
Есть также много применений фильтра, и приведенный выше массив все еще используется, но теперь я хочу получить игроков, которые вошли в систему, а не игроков, которые не вошли в систему.
для метода
var arr=[];
for(var i=0,len=sporter.length;i<len;i++){
if(sporter[i].isHell){
arr.push(sporter[i]);
}
}метод фильтрации
/*item为当前遍历到的项,和arr[i]一样*/
var arr=sporter.filter(function (item){return item.isHell})es6 письмо
var arr=sporter.filter(item=>{return item.isHell})
//或者
var arr=sporter.filter(item=>item.isHell)запустить его
Дедупликация массива
для метода
var r=[],arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
for(var i=0,len=arr.length;i<len;i++){
if(r.indexOf(arr[i])===-1){
r.push(arr[i]);
}
}метод фильтрации
/*item为当前遍历到的项,和arr[i]一样，index为当前遍历到的项的索引，和i一样，self就是当前数组，和arr一样*/
r=arr.filter(function(item,index,self){
return self.indexOf(item) == index;
});
es6 письмо
var arr=sporter.filter((item,index,self)=>{return self.indexOf(item) == index;})запустить его
3.Все и некоторые
Почему Every и Some должны быть написаны вместе, потому что эти два метода очень похожи.every()Запустите данную функцию для каждого элемента в массиве, возвращая значение true, если функция возвращает значение true для каждого элемента;some()Запустите данную функцию для каждого элемента в массиве и верните значение true, если функция возвращает значение true для любого элемента;
или тот, что вышеsporterмножество. Такой сценарий можно себе представить.Если игроки входят на стадион, если каждый игрок должен зарегистрироваться, команда может войти на стадион.Реализация этого требования
для метода
var isIn;
for(var i=0,len=sporter.length;i<len;i++){
if(!sporter[i].isHell){
isIn=false;
break;
}
}во всех отношениях
/*item为当前遍历到的项,和sporter[i]一样*/
var arr=sporter.every(function (item){return item.isHell})es6 письмо
var arr=sporter.every(item=>{return item.isHell})
//或者
var arr=sporter.every(item=>item.isHell)Запустите его, потому что в приведенном выше массиве все еще есть два спортсмена, которые не зарегистрировались, поэтому вернитеfalseВременно нельзя принять
В другом сценарии игроки нужно только подписаться любым спортсменом в команде, и команда может войти в поле. Реализация этого требования
для метода
var isIn;
for(var i=0,len=sporter.length;i<len;i++){
if(!sporter[i].isHell){
isIn=true;
break;
}
}каким-то образом
/*item为当前遍历到的项,和sporter[i]一样*/
var arr=sporter.some(function (item){return item.isHell})es6 письмо
var arr=sporter.some(item=>{return item.isHell})
Запустите его, потому что в приведенном выше массиве есть спортсмен, поэтому вернитеtrue, можно войти
4.Foreach
forEach()Запускаем данную функцию на каждом элементе массива, этот метод не имеет возвращаемого значения, проще говоря, он по сути такой же, как и for, но написан по-другому.
или тот, что вышеsporterмножество. Просто добавьте атрибут пола к каждому числу, и значение будет «мужской».
для метода
for(var i=0,len=sporter.length;i<len;i++){
sporter[i].sex='男'
}forEach метод
/*item为当前遍历到的项,和arr[i]一样*/
var arr=sporter.forEach(function (item){item.sex='男'})es6 письмо
var arr=sporter.forEach(item=>{item.sex='男'})
запустить его
5.Reduce
reduce()Одновременно он может принимать только два параметра.Я понимаю, что эти два параметра — это текущий результат и следующий элемент в текущей последовательности. Эффект и принцип[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4).
Этот метод в основном используется при кумулятивном накоплении, и практические навыки пока не найдены. Например, массивы чисел суммируются, а массивы строк объединяются.
суммирующий массив чисел
для метода
var sum=0,arr=[1,2,3,4,5,6];
for(var i=0,len=arr.length;i<len;i++){
sum+=arr[i]
}forEach метод
/*item为当前遍历到的项,和arr[i]一样*/
sum=arr.reduce(function (a,b) {return a+b});es6 письмо
sum=arr.reduce((a,b)=>{return a+b});
запустить его
Подключение строкового массива, тот же способ записи, но массив и результат разные
var arr=['字','符','串','数','组','连','接'];
var sum=arr.reduce((a,b)=>{return a+b});
6. найти и найтиИндекс
найти: метод возвращает первый элемент массива, который проходит в тестовом условии (функция), которая соответствует условию.
findIndex: метод возвращает позицию первого элемента массива, который проходит тестовое условие (функцию), которая удовлетворяет условию.
Когда элемент в массиве возвращает true при проверке условия, find и findIndex возвращают элемент, который соответствует условию, или позицию индекса элемента, и функция выполнения не будет вызываться для последующих значений. Возвращает -1, если нет подходящих элементов.
Например, требуется найти первый элемент больше 30 из массива [11,22,33,44,55,66].
для метода
var getItem,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]>30){
getItem=arr[i];
break;
}
}find
arr.find(function(val){return val>30})es6 письмо
arr.find(val=>val>30)запустить его
Например, требуется найти позицию первого элемента больше 30 из массива [11, 22, 33, 44, 55, 66].
для метода
var getItemIndex,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]>30){
getItemIndex=i;
break;
}
}findIndex
arr.findIndex(function(val){return val>30})es6 письмо
arr.findIndex(val=>val>30)запустить его
следовать за
Вот и все, что мы сегодня расскажем.Что касается навыков использования метода итерации массива, вышеизложенное — это только вершина айсберга, и вы должны раскопать его самостоятельно. Если я найду что-нибудь интересное или полезное в будущем, я поделюсь этим с вами как можно скорее. Кроме того, если вы считаете, что эта статья неверна или ошибочна, пожалуйста, укажите на это.
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина