"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Array

Array

Published on 2024-11-06
Browse:840

Array

Methods are fns which can be called on objects
Arrays are objects, hence they also have methods in JS.

slice(begin): extract part of array in a new array, without mutating the original array.

let arr = ['a','b','c','d','e'];

// Usecase: Extract till index passed as argument
arr.slice(2); // [ 'c', 'd', 'e' ]

// Usecase: Extract from [first index] to [second index-1] value.
arr.slice(2,4); // [ 'c', 'd' ] i.e Length of array will be end-begin or 4-2 = 2 

// Usecase: Extract last 2 elements
arr.slice(-2); // [ 'd', 'e' ]

// Usecase: Extract the last element.
arr.slice(-1);  // [ 'e' ]  

// Usecase: Extract from index passed to leaving the last two elements.
arr.slice(1,-2);  // [ 'e' ]  

// Usecase: Create a shallow copy of an array
arr.slice(); // 1st way
[...arr]; // 2nd way

splice: mutates the original array

// splice: remove the elements begining from the index passed. Mutates the orig. array.
// returns: part of the removed array
let arr = ['a','b','c','d','e'];
// arr.splice(2); // [ 'c', 'd', 'e' ]
// arr; // [ 'a', 'b' ]

// Usecase: Remove last element of the array
// arr.splice(-1); // [ 'e' ]
// arr; // [ 'a', 'b', 'c', 'd' ]

// Usecase: Delete no of elements. splice(index, deleteCount)
arr.splice(1, 3); // [ 'b', 'c', 'd' ]
arr; // [ 'a', 'e' ]

reverse: mutates the original array.

returns: reversed array

let arr = ['a','b','c','d','e'];
let arr2 = arr.reverse();
arr;
arr2;

concat: joins two arrays.

returns: joined array

let arr1 = ['a','b','c','d','e'];
let arr2 = ['f','g','h','i','j'];

[...arr1, ...arr2];       // 1st way
arr2 = arr1.concat(arr2); // 2nd way

join: joins two arrays.

returns: joined array

let arr1 = ['a','b','c','d','e'];
let arr2 = ['f','g','h','i','j'];
const x = arr1.concat(arr2);
x.join('-'); // 'a-b-c-d-e-f-g-h-i-j'

"As time progresses, you'll remember them based on their usage."

at: starts counting from the end, begining with index as -1

Suports method chaining. Works on arrays, strings

let arr = ['a','b','c','d','e'];

arr[0];    // 1st way
arr.at(0); // 2nd way

// Get the last element of the array
arr[arr.length - 1];  // 1st way
arr.slice(-1)[0];     // 2nd way
arr.at(-1);           // 3rd way

arr.at(0); // 'a'
arr.at(-1); // 'e'

forEach:

// Looping over array using forEach method.
let account = [2000,-300,+400, -200, -500, +1000, -300];

// Loop over an array using for-of
for(let money of account){
  if(money > 0){
    console.log(`Deposited ${money}`);
  } else {
    console.log(`Withdrawn ${Math.abs(money)}`);
  }
}

// .entries(): returns an array of arrays.
// return the output as index-value pair.
// first element must be index, second element must be element-value
for(let [i,money] of account.entries()){
  if(money > 0){
    console.log(`Transaction ${i+1}, Deposited ${money}`);
  } else {
    console.log(`Transaction ${i+1}, Withdrawn ${Math.abs(money)}`);
  }
}

// Loop over an array using forEach which requires a callback fn.
// forEach will call the callback fn, and not we.
// forEach will pass each element as argument in every iteration.
account.forEach(function(money){
  if(money > 0){
    console.log(`Deposited ${money}`);
  } else {
    console.log(`Withdrawn ${Math.abs(money)}`);
  }
});
// Iteration 1: pass arg1 to CB-fn(arg1)
// Iteration 2: pass arg2 to CB-fn(arg2)
// Iteration 3: pass arg3 to CB-fn(arg3)
// .....
// .....


// forEach will pass each element, index, array as argument in every iteration. Order of arguments matter, not the no of these arguments i.e first element should be the current-Element, second element should be index, third element should be entire array which is being looped-over.
// first element must be element-value, second element should be index, third element must be entire array. This is how its different from array.entries()
account.forEach(function(money, i, arr){
  if(money > 0){
    console.log(`Transaction ${i+1}, Deposited ${money} into ${arr}`);
  } else {
    console.log(`Transaction ${i+1}, Withdrawn ${Math.abs(money)} from ${arr}`);
  }
});

When to use for-of & forEach:

forEach: Cannot break-out of it. continue-break don't work inside it. Will always loop over the entire array, and nothing can be done to stop it.
for-of: Used when we need to loop out of the array.

"As you practice more & more, you'll get better in your skills."

Release Statement This article is reproduced at: https://dev.to/mahf001/array-2jmn?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3