JS Concepts: Data types : Arrays - revisted

• 
  
• Array methods

Declaring arrays

• let arr = [item1, item2]
• let arr1 = new Array();

looping over array

• for (let i=0; i – works fastest, old-browser-compatible.
• for (let item of arr) – the modern syntax for items only,
• for (let i in arr) – never use.

Arrays provide a lot of methods. To make things easier, in this chapter they are split into groups.

Add/remove items

We already know methods that add and remove items from the beginning or the end:

•     arr.push(...items) – adds items to the end, 

•    arr.pop() – extracts an item from the end,

•     arr.shift() – extracts an item from the beginning,

•    arr.unshift(...items) – adds items to the beginning

splice

• arr.splice(index[, deleteCount, elem1, ..., elemN])

• arr.splice(0, 3, "Let's", "dance");

• arr.splice(0, 2);

• arr.splice(2, 0, "complex", "language"); 

• arr.splice(-1, 0, 3, 4);    

slice

• arr.slice(start, end) //slice from starting position to end position

• arr.slice(1, 3)

• str.slice(-2)//add 2 spaces

• arr.slice(-2)

concat

• arr.concat(arg1, arg2...)

• arr.concat([3, 4])

• arr.concat([3, 4], [5, 6])

• Symbol.isConcatSpreadable 

Searching in array

indexOf/lastIndexOf and includes

The methods arr.indexOf, arr.lastIndexOf and arr.includes have the same syntax and do essentially the same as their string counterparts, but operate on items instead of characters:

• ·       arr.indexOf(item, from) looks for item starting from index from, and returns the index where it was found, otherwise -1.

• ·       arr.lastIndexOf(item, from) – same, but looks from right to left.

• ·       arr.includes(item, from) – looks for item starting from index from, returns true if found

arr.indexOf(0)

arr.indexOf(null)

arr.indexOf(false)

arr.includes(1)

arr.indexOf(NaN)

arr.includes(NaN)

find and findIndex

Imagine we have an array of objects. How do we find an object with the specific condition?

Here the arr.find method comes in handy.

The syntax is:

let result = arr.find(function(item, index, array) {  

// should return true if the item is what we are looking for });

The function is called repetitively for each element of the array:

·       item is the element.

·       index is its index.

·       array is the array itself.

If it returns true, the search is stopped, the item is returned. If nothing found, undefined is returned.

filter

let results = arr.filter(function(item, index, array) {   // should return true if the item passes the filter });

For instance:

let users = [  

{id: 1, name: "John"},  

{id: 2, name: "Pete"},  

{id: 3, name: "Mary"}

];  // returns array of the first two users

let someUsers = users.filter(item => item.id < 3);  alert(someUsers.length); // 2

Transform an array

map

let lengths = ["Bilbo", "Gandalf", "Nazgul"].

map(item => item.length) alert(lengths); // 5,7,6

sort(fn)

let arr = [ 1, 2, 15 ]; 

// the method reorders the content of arr (and returns it) arr.sort();

alert( arr );  // 1, 15, 2

-

-