Array

Array

Simple Array Methods

1. slice()

   It does not change the original array.

2. splice()

   It changes the original array.

   1 2 3

   let arr = ['a', 'b', 'c', 'd', 'e']; console.log(arr.splice(2)); //(3) ['c', 'd', 'e'] console.log(arr); //(2) ['a', 'b']

3. reverse()

   Change！

4. concat()

   1	let arr = arr1.concat(arr2);

5. join()

at()

Similar to []

1
2
3

let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr[0]); //a
console.log(arr.at(0)); //a

But at() can use negative index. So if we want the last element of an array.

1
2
3
4

let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr[arr.length - 1]); //e
console.log(arr.slice(-1)[0]); //e
console.log(arr.at(-1)); //e

And when you use method chaining.

forEach()

You can not break or continue it.

We can also use it in Maps and Sets

map()

Map returns a new array containing the results of applying an operation on all original array elements

filter()

filter returns a new array containing the array elements that passed a specified test condition

reduce()

reduce boils (‘reduces’) all array elements down to one single value(e.g. adding all elements together

1
2
3
4

const maxMov = movements.reduce(
  (acc, mov) => (acc < mov ? mov : acc),
  movements[0]
);

find()

findIndex()

includes()

some()

1
2
3

console.log(movements.some(mov => mov > 0));//true
const deposit = mov => mov > 0;
console.log(movements.some(deposit)); //true

every()

Similar to some(), but need all elements satisfy the condition

flat()

1
2

let arr = [[1, 2, 3], 4, 5, [6, [7, 8]]];
console.log(arr.flat().flat());//(8) [1, 2, 3, 4, 5, 6, 7, 8]

flatMap()

Similar to map(), but flat its result.

sort()

Change the original array.

1
2
3
4
5

let movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
//return < 0 , A, B
//return > 0 , B, A
movements.sort((a, b) => a - b);
console.log(movements);//(8) [-650, -400, -130, 70, 200, 450, 1300, 3000]

new Array()

fill()

1
2
3
4

const x = new Array(7);
console.log(x);//(7) [空 ã7]
x.fill(1, 3);
console.log(x);//[空 ã3, 1, 1, 1, 1]

Array.from()

1
2

const x = Array.from({ length: 7 }, () => 1);
console.log(x);//(7) [1, 1, 1, 1, 1, 1, 1]

1
2

const x = Array.from({ length: 7 }, (cur, i) => i + 1);
console.log(x); //(7) [1, 2, 3, 4, 5, 6, 7]

Turn NodeList into an Array.

1
2

const movementsUI = Array.from(document.querySelectorAll('.movements__value'));
console.log(movementsUI);//(8) [div.movements__value, div.movements__value, div.movements__value, div.movements__value, div.movements__value, div.movements__value, div.movements__value, div.movements__value]

Which Array Method to Use?

To Mutate Original Array

• Add to original
  • push() (end)
  • unshift() (start)
• Remove from original
  • pop() (end)
  • shift() (start)
  • splice() (any)
• Others
  • reverse()
  • sort()
  • fill()

A New Array

• Computed from original
  • map()
• Filtered using condition
  • filter()
• Portion of original
  • slice()
• Adding original to other
  • concat()
• Flattening the original
  • flat()
  • flatMap()

An Array index

• Based on value
  • includes()
• Based on test condition
  • findIndex()

An Array Element

• Based on test condition
  • find()

Konw if array includes

• Based on value
  • includes()
• Based on test condition
  • some()
  • every()

A New String

• Based on separator string
  • join()

To Transform to Value

• Based on accumulater
• reduce()

To Just Loop Array

• Based on callback:
  • foreach()