DEV Community

Amir.H Ebrahimi
Amir.H Ebrahimi

Posted on • Edited on

3 2

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'];
Enter fullscreen mode Exit fullscreen mode

Indexing

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

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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 ]

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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) {}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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' ]

Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay