Самые полезные функции для работы с массивами JavaScript - Часть 2

Опубликовано: 22 Марта, 2022

В разделе «Самые полезные функции для работы с массивами JavaScript - Часть 1» мы обсудили две функции для работы с массивами, а именно Array.Prototype.Every () и Array.prototype.some (). Важно отметить, что обе эти функции массива обращались к элементам массива, но не модифицировали / изменяли сам массив. Сегодня мы рассмотрим 2 метода массива, которые изменяют массив и возвращают измененный массив.

  • Array.Prototype.filter ()
  • Array.Prototype.map ()

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

Синтаксис:

 array.filter (обратный вызов (элемент, индекс, arr), thisValue)

Параметры: эта функция принимает пять параметров, как указано выше и описано ниже:

  • обратный вызов: этот параметр содержит функцию, вызываемую для каждого элемента массива.
  • element: параметр содержит значение обрабатываемых в данный момент элементов.
  • index: этот параметр является необязательным, он содержит индекс элемента currentValue в массиве, начиная с 0.
  • array: этот параметр является необязательным, он содержит полный массив, для которого вызывается Array.every.
  • thisArg: этот параметр является необязательным, он содержит контекст, который должен быть передан как this, который будет использоваться при выполнении функции обратного вызова. Если контекст передан, он будет использоваться таким образом для каждого вызова функции обратного вызова, в противном случае по умолчанию используется значение undefined.

Examples: Filter out the students who got more than 80 percent marks.

  • Program 1: Function to filter out the students who got more than 80 percent marks. It is a naive Method using loop
<script>
    function fnFilterStudents_loop(aStudent){
        var tempArr = [];
        for(var i = 0 ; i< aStudent.length; i ++){
            if(aStudent[i].fPercentage > 80.0)
            { 
              tempArr.push(aStudent[i]);}
            }
        return tempArr;
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
          
    console.log(fnFilterStudents_loop(aStudent));
</script>

Output:

[{sStudentId : "001" , fPercentage : 91.2},
{sStudentId : "004" , fPercentage : 81.4}];
  • Program 2: Here we will be using Array.prototype.filter()
<script>
    function fnFilterStudents_filter(aStudent){
        return aStudent.filter(function(oStudent){
            return oStudent.fPercentage > 80.0 ? true : false;
              
        });
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
          
    console.log(fnFilterStudents_filter(aStudent));
</script>

Выход:

 [{sStudentId: "001", fPercentage: 91,2},
{sStudentId: "004", fPercentage: 81,4}];

Example: To remove undefined elements from an array

  • Program: Function to remove undefined elements from an array. In the callback function of the below example, we are returning elements directly. So if the element has value, it will be treated as true and if the element is undefined, it will be automatically treated as false.
<script>
    function removeUndefined(myArray){
        return myArray.filter(
function(element, index, array)
        {
            return element;
        });
    }
      
    var arr = [1,undefined,3,undefined,5];
      
    console.log(arr);
      
    console.log( removeUndefined(arr));
</script>

Выход:

 [1, undefined, 3, undefined, 5];
[1,3,5];

Array.Prototype.map (): используется для изменения каждого элемента массива в соответствии с функцией обратного вызова. Array.prototype.map () вызывает функцию обратного вызова один раз для каждого элемента в массиве по порядку. Следует отметить, что функция обратного вызова вызывается для индексов элементов, которым присвоено значение, включая неопределенное.

Синтаксис:

 array.map (обратный вызов (элемент, индекс, arr), thisValue)

Параметры: эта функция принимает пять параметров, как указано выше и описано ниже:

  • обратный вызов: этот параметр содержит функцию, вызываемую для каждого элемента массива.
  • element: параметр содержит значение обрабатываемых в данный момент элементов.
  • index: этот параметр является необязательным, он содержит индекс элемента currentValue в массиве, начиная с 0.
  • array: этот параметр является необязательным, он содержит полный массив, для которого вызывается Array.every.
  • thisArg: этот параметр является необязательным, он содержит контекст, который должен быть передан как this, который будет использоваться при выполнении функции обратного вызова. Если контекст передан, он будет использоваться таким образом для каждого вызова функции обратного вызова, в противном случае по умолчанию используется значение undefined.

Examples: A scenario where the user has to reduce each amount in an array by a specific tax value

  • Program 1: Function to add property bIsDistinction to each object in the array, using Loop.
<script>
    function fnAddDistinction_loop(aStudent){
        for(var i = 0 ; i< aStudent.length; i ++){
            aStudent[i].bIsDistinction = 
              (aStudent[i].fPercentage >= 75.0) ? true : false;
            }
        return aStudent;
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
           
    console.log(fnAddDistinction_loop(aStudent));
</script>

Output:

[{sStudentId : "001" , fPercentage : 91.2 , bIsDistiction : true},
 {sStudentId : "002" , fPercentage : 78.7 , bIsDistiction : false},
 {sStudentId : "003" , fPercentage : 62.9 , bIsDistiction : false},
 {sStudentId : "004" , fPercentage : 81.4 , bIsDistiction : true}];
  • Program 2: Here we will be using Array.prototype.map() function.
<script>
    function fnAddDistinction_map(aStudent){
        return aStudent.map(function(student, index, array){
            aStudent.bIsDistinction = 
              (aStudent.fPercentage >= 75.0) ? true : false;
            return aStudent;
        });
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
           
    console.log(fnAddDistinction_map(aStudent));
</script>
  • Output: 
     
[
{sStudentId : "001" , fPercentage : 91.2 , bIsDistiction : true},
{sStudentId : "002" , fPercentage : 78.7 , bIsDistiction : false},
{sStudentId : "003" , fPercentage : 62.9 , bIsDistiction : false},
{sStudentId : "004" , fPercentage : 81.4 , bIsDistiction : true}];

Example: A scenario where the user has to create a new property of every object in an existing array of objects.

  • Program: Array.prototype.Map() is used with standard JavaScript functions. For example, with Math.sqrt() function to calculate square root of each element in an array or to parse string values to float.
[1,4,9].map(Math.sqrt); // Output : [1,2,3]
["1.232","9.345","3.2345"].map(parseFloat) 
// Output : [1.232, 9.345, 3.2345]
  • One has to be careful while using Array.prototype.map() with standard functions because something like this can happen.
["1","2","3"].map(parseInt);
//Output : [1, NaN, NaN]

Why did the above code snippet return NaN? This happened because parseInt function accepts two arguments, First one being the element to be parsed to Integer and second as the radix which acts as base for conversion. When we use it with Array.prototype.map(), although the first argument is the element, the second argument is the index of the array element being processed currently. For first iteration, the index being 0 is passed as radix to parseInt which defaults it to 10 and thus you see first element parsed successfully. After that it gets messed up.

  • Below is the fix for above mess up.
["1","2","3"].map(function(val){return parseInt(val,10)});
// output : [1, 2, 3]

Как показано в приведенных выше примерах, как Array.prototype.filter (), так и Array.prototype.map () могут быть реализованы с использованием циклов for. Но в приведенных выше сценариях мы пытаемся работать с очень конкретными вариантами использования. Сохранение переменной счетчика, затем проверка длины массива и последующее увеличение переменной счетчика. Помнить об этих вещах не только сложно, но и сделать код подверженным ошибкам. Например, разработчик может случайно написать «array.length» как «array.lenght». Итак, как показывает практика, лучший способ избежать ошибок программирования - это уменьшить количество вещей, которые вы отслеживаете вручную. И эти функции для работы с массивами делают именно это.

Поддержка этих функций в браузере действительно хороша, но они все еще не поддерживаются в IE8 или более ранних версиях, поскольку эти функции массива были введены в ECMAScript 5. Если вам нужно использовать их и для старых браузеров, вы можете использовать es5-shim или любой другой На помощь вам могут прийти такие библиотеки, как Underscore или Lodash, которые имеют эквивалентную служебную функцию.

Необходимо использовать функции для работы с массивами JavaScript - часть 3

Кроме того, если вы хотите глубже погрузиться в вышеперечисленные функции, вы можете обратиться к следующим официальным ссылкам
1. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
2. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19

Об авторе:

«Харшит является энтузиастом технологий и проявляет большой интерес к программированию. Он держит

B.Tech. получил степень в области компьютерных наук в JIIT, Нойда, и в настоящее время работает Front-end разработчиком в SAP. Он также является игроком в настольный теннис государственного уровня. Кроме того, он любит расслабляться, просматривая фильмы и английские комедийные сериалы. Он базируется в Дели, и вы можете связаться с ним по адресу https://in.linkedin.com/pub/harshit-jain/2a/129/bb5.

Если вы также хотите продемонстрировать здесь свой блог, посетите GBlog, где вы можете писать в гостевом блоге на GeeksforGeeks.

РЕКОМЕНДУЕМЫЕ СТАТЬИ