Core Array Methods

7.1 The splice() Method

Arrays in JavaScript have built-in methods for manipulating data. In this lecture, we'll check out four core array methods: splice(), slice(), concat(), and indexOf(). Each of these methods does specific operations on arrays and can seriously simplify data handling.

The splice() method changes the contents of an array by removing existing elements and/or adding new elements in their place.

Syntax:

    
   
     splice 
   (start, deleteCount, item1, item2, ...);
    
  

Where:

• start: the index at which to start changing the array
• deleteCount: the number of elements to remove. If not provided, all elements from the start index will be removed
• item1, item2, ...: the elements to add to the array. If not provided, no elements are added

Example 1: Removing elements

In this example, two elements are removed from the fruits array starting from index 2. The return value is an array of removed elements.

    
      let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
      let removed = fruits.splice(2, 2);

      console.log(fruits);   // Outputs: ['apple', 'banana', 'fig']
      console.log(removed);  // Outputs: ['cherry', 'date']
    
  

Example 2: Adding elements

In this example, two new elements (date and fig) are added to the fruits array starting at index 2. No elements are removed.

    
      let fruits = ['apple', 'banana', 'cherry'];
      fruits.splice(2, 0, 'date', 'fig');

      console.log(fruits);   // Outputs: ['apple', 'banana', 'date', 'fig', 'cherry']
    
  

Example 3: Replacing elements

In this example, the element at index 1 (banana) is replaced with two new elements (date and fig).

    
      let fruits = ['apple', 'banana', 'cherry'];
      fruits.splice(1, 1, 'date', 'fig');

      console.log(fruits);   // Outputs: ['apple', 'date', 'fig', 'cherry']
    
  

7.2 The slice() Method

The slice() method returns a new array with a copy of a portion of the original array. The original array is not changed.

Syntax:

    
      array.slice(begin, end);
    
  

Where:

• begin: The index at which to start the copying
• end: The index at which to end the copying (not including the element at this index). If not provided, all elements to the end of the array are copied

Example 1: Copying part of an array

In this example, a new array is created with elements from index 1 to 2 from the fruits array.

    
      let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
      let sliced = fruits.slice(1, 3);

      console.log(sliced);   // Outputs: ['banana', 'cherry']
    
  

Example 2: Copying from the beginning of an array

In this example, a new array is created with elements from index 0 and 1 from the fruits array.

    
      let fruits = ['apple', 'banana', 'cherry'];
      let sliced = fruits.slice(0, 2);

      console.log(sliced);   // Outputs: ['apple', 'banana']
    
  

Example 3: Copying to the end of an array

In this example, a new array is created with elements from index 1 to the end of the fruits array.

    
      let fruits = ['apple', 'banana', 'cherry'];
      let sliced = fruits.slice(1);

      console.log(sliced);   // Outputs: ['banana', 'cherry']
    
  

7.3 The concat() Method

The concat() method is used to merge two or more arrays. It returns a new array that contains elements of all the arrays it merged.

Syntax:

    
      array1.concat(array2, array3, ...);
    
  

Where:

• array1, array2, array3, ...: the arrays to merge

Example 1: Merging two arrays

In this example, the arrays fruits1 and fruits2 are merged into a new array combined.

    
      let fruits1 = ['apple', 'banana'];
      let fruits2 = ['cherry', 'date'];
      let combined = fruits1.concat(fruits2);

      console.log(combined); // Outputs: ['apple', 'banana', 'cherry', 'date']
    
  

Example 2: Merging multiple arrays

In this example, three arrays are merged into a new array combined.

    
      let fruits1 = ['apple', 'banana'];
      let fruits2 = ['cherry', 'date'];
      let fruits3 = ['fig', 'grape'];
      let combined = fruits1.concat(fruits2, fruits3);

      console.log(combined); // Outputs: ['apple', 'banana', 'cherry', 'date', 'fig', 'grape']
    
  

Example 3: Merging an array with elements

In this example, elements cherry and date are added to the fruits array, creating a new array moreFruits.

    
      let fruits = ['apple', 'banana'];
      let moreFruits = fruits.concat('cherry', 'date');

      console.log(moreFruits); // Outputs: ['apple', 'banana', 'cherry', 'date']
    
  

7.4 The indexOf() Method

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Syntax:

    
      array.indexOf(searchElement, fromIndex);
    
  

Where:

• searchElement: The element to locate in the array
• fromIndex: The index to start the search from. If not specified, the search starts from the beginning of the array

Example 1: Finding an element in an array

In this example, the indexOf() method returns the index of the element banana in the fruits array.

    
      let fruits = ['apple', 'banana', 'cherry'];
      let index = fruits.indexOf('banana');

      console.log(index); // Outputs: 1
    
  

Example 2: Element not found

In this example, the indexOf() method returns -1 because the element date is not found in the fruits array.

    
      let fruits = ['apple', 'banana', 'cherry'];
      let index = fruits.indexOf('date');

      console.log(index); // Outputs: -1
    
  

Example 3: Finding an element from a specific index

In this example, the indexOf() method starts searching for the element banana from index 2 and finds it at index 3.

    
      let fruits = ['apple', 'banana', 'cherry', 'banana'];
      let index = fruits.indexOf('banana', 2);

      console.log(index); // Outputs: 3
    
  

1

Task

Frontend SELF EN, level 38, lesson 0

Locked

Copying part of an array

Copying part of an array

Open

1

Task

Frontend SELF EN, level 38, lesson 0

Locked

Index Search

Index Search

Open