console.log(`[Arrays]`)

Here is a list of array operations that you can review, such as blitz. From now on, we'll be working with these arrays.

const numbers: number[] = [0, 1, 2];
const alphabet: string[] = ['a', 'b', 'c'];

Indexing

numbers.indexOf(2) // 2
numbers.indexOf(10) // -1
numbers[5] // undefined
numbers[-1] // undefined
numbers[Infinity] // undefined
numbers['1'] // 1

Bonus tips (negative index)

numbers.at(-1); // 2, (builtin at method)

const coolNumbers = new Proxy(numbers, {
  get(target, props) {
    const index: number = +(<string>props)
    if (index < 0) 
      return Reflect.get(target, index + target.length)
    return Reflect.get(target, props)
  },
})
coolNumbers[-1] // 2

Adding (appending) items

/* IMMUTABILITY */
numbers.concat([3, 4]) // [ 0, 1, 2, 3, 4 ]
numbers // [ 0, 1, 2]

/* INPLACE CHANGES */
numbers.push(3) // numbers -> [0, 1, 2, 3]
numbers.unshift(-2) //  numbers -> [-2, 0, 1, 2, 3]
numbers.splice(1, 0, -1) // numbers -> [-2, -1, 0, 1, 2, 3]
numbers.splice(0,0, ...[-6, -4, -3]) 
numbers // [-6, -4, -3, -2, -1,  0,  1,  2,  3]

Replacing item

numbers.splice(0, 1, -5) // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3]
numbers.splice(500, 100, 4) // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3, 5]
numbers[9] = 4 // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3, 4]
numbers [-5, -4, -3, -2, -1,  0,  1,  2,  3, 4]

Creating array

new Array(5) // [ <5 empty items> ]
Array.from({ length: 5 }) // [ undefined, undefined, undefined, undefined, undefined ]
Array.from('12345', _ => undefined) // [ undefined, undefined, undefined, undefined, undefined ]
Array.from(document.querySelectorAll('img'), img => img.src)
Array.of(1, 2, 3, 4, 5) // [ 1, 2, 3, 4, 5 ]
Array(5) // [ <5 empty items> ]
Array.from({ length: 5 }, (_, i) => i) // [ 0, 1, 2, 3, 4 ]

Bonus tips (manipulating array length)

alphabet.length = 5
alphabet // [ 'a', 'b', 'c', <2 empty items> ] length is 5
alphabet[7] = 'e'
alphabet // [ 'a', 'b', 'c', <4 empty items>, 'e' ] length is 8
alphabet.length = 3
alphabet // [ 'a', 'b', 'c' ] length is 3

Iteration

alphabet.entries() // Iterator over [[0,'a'], [1, 'b'], [2, 'c']]
for (const [index, element] of alphabet.entries()) {}
alphabet.keys() // Iterator over [0, 1, 2]
for (const index in alphabet) {}
alphabet.values() // Iterator over [ 'a', 'b', 'c' ]
for (const value of alphabet) {}

Inclusion

alphabet.includes('c') // true
alphabet.includes('c', 1) // true, from index 1
alphabet.includes('c', -2) // true, from index (length - 2)
alphabet.find(item => item.charCodeAt(0) > 'b'.charCodeAt(0)) // c
alphabet.findIndex(item => item.charCodeAt(0) > 'b'.charCodeAt(0)) // 2
alphabet.lastIndexOf('c') // 2
alphabet.indexOf('c') // 2
alphabet.indexOf('d') // -1

Operators

alphabet.every(item => item.charCodeAt(0) < 'c'.charCodeAt(0)) // false
alphabet.some(item => item.charCodeAt(0) < 'c'.charCodeAt(0)) // true

// **flat** ES2019
const nested = [0, [1], [[2]], [[[3]]], [[[[4], 3], 2], 1]]
nested.flat() // [ 0, 1, [ 2 ], [ [ 3 ] ], [ [ [4], 3 ], 2 ], 1 ], default level  1
nested.flat(3) // [0, 1, 2, 3, [ 4 ], 3, 2, 1]
nested.flat(Infinity) // [0, 1, 2, 3, 4 , 3, 2, 1]

// **joining**
alphabet.join(',') // a,b,c
// @ts-ignore
alphabet.join`,` // a,b,c
alphabet.toString() // a,b,c

// **reducing** 
alphabet.reduce((acc, chr) => acc + ', ' + chr, '') // , a, b, c
alphabet.reduceRight((acc, chr) => acc + ', ' + chr, '') // , c, b, a
alphabet.reverse() // alphabet -> [ 'c', 'b', 'a' ]
alphabet // [ 'c', 'b', 'a' ]

// **sorting**
alphabet.sort() // shuffle alphabet, e.g. alphabet -> [ 'b', 'a', 'c' ] 
alphabet.sort(() => Math.random() - 0.5) // alphabet -> [ 'a', 'b', 'c' ] 
alphabet // [ 'a', 'b', 'c' ]

// **subset**
alphabet.slice(1) // ['b', 'c']
alphabet.slice(0, 2) // [ 'a', 'b' ]

Bonus tips

For mapping over an array it must have value, it can be undefined or null or any thing, but it can not be empty .

/*  cool python range */
const range = (start: number, stop?: number, step?: number) => {
  if (step === undefined) step = 1
  if (stop === undefined) {
    stop = start
    start = 0
  }

  return Array.from(
    { length: (stop - start) / step + 1 },
    (_, i) => start + i * step!,
  )
}

for (let i in range(10)) console.log(i)

Blog

console.log(`[Arrays]`)

Amir.H Ebrahimi

Indexing

Adding (appending) items

Creating array

Iteration

Inclusion

Operators

Join Our Newsletter. No Spam, Only the good stuff.

Related