Skip to content

Instantly share code, notes, and snippets.

@rauschma
Last active April 11, 2023 21:31
Show Gist options
  • Save rauschma/f7b96b8b7274f2e2d8dab899803346c3 to your computer and use it in GitHub Desktop.
Save rauschma/f7b96b8b7274f2e2d8dab899803346c3 to your computer and use it in GitHub Desktop.

Array<T>

Legend:

  • ✏️ method changes this.
  • 🔒 method does not change this.

Array<T>.prototype.*:

  • concat(...items: Array<T[] | T>: T[] 🔒 ES3

    Returns a new array that is the concatenation of this and all items. Non-array parameters are treated as if they were arrays with single elements.

    > ['a'].concat('b', ['c', 'd'])
    [ 'a', 'b', 'c', 'd' ]
    
  • copyWithin(target: number, start: number, end=this.length): this ✏️ ES6

    Copies the elements whose indices range from start to (excl.) end to indices starting with target. Overlapping is handled correctly.

    > ['a', 'b', 'c', 'd'].copyWithin(0, 2, 4)
    [ 'c', 'd', 'c', 'd' ]
    
  • entries(): Iterable<[number, T]> 🔒 ES6

    Returns an iterable over [index, element] pairs.

    > Array.from(['a', 'b'].entries())
    [ [ 0, 'a' ], [ 1, 'b' ] ]
    
  • every(callback: (value: T, index: number, array: Array<T>) => boolean, thisArg?: any): boolean 🔒 ES5

    Returns true if callback returns true for every element. Stops as soon as it receives false. Math: ∀

    > [1, 2, 3].every(x => x > 0)
    true
    > [1, -2, 3].every(x => x > 0)
    false
    
  • fill(value: T, start=0, end=this.length): this ✏️ ES6

    Assigns value to every index.

    > [0, 1, 2].fill('a')
    [ 'a', 'a', 'a' ]
    
  • filter(callback: (value: T, index: number, array: Array<T>) => any, thisArg?: any): T[] 🔒 ES5

    Returns an array with only those elements for which callback returns true.

    > [1, -2, 3].filter(x => x > 0)
    [ 1, 3 ]
    
  • find(predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): T | undefined 🔒 ES6

    The result is the first element for which predicate returns true. If it never does, the result is undefined.

    > [1, -2, 3].find(x => x < 0)
    -2
    > [1, 2, 3].find(x => x < 0)
    undefined
    
  • findIndex(predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): number 🔒 ES6

    The result is the index of the first element for which predicate returns true. If it never does, the result is -1.

    > [1, -2, 3].findIndex(x => x < 0)
    1
    > [1, 2, 3].findIndex(x => x < 0)
    -1
    
  • forEach(callback: (value: T, index: number, array: Array<T>) => void, thisArg?: any): void 🔒 ES5

    Calls callback for each element.

    ['a', 'b'].forEach((x, i) => console.log(x, i))
    // 'a' 0
    // 'b' 1
  • includes(searchElement: T, fromIndex=0): boolean 🔒 ES2016

    Returns true if searchElement is an element and false, otherwise.

    > [0, 1, 2].includes(1)
    true
    > [0, 1, 2].includes(5)
    false
    
  • indexOf(searchElement: T, fromIndex=0): number 🔒 ES5

    Returns the index of the first element that is strictly equal to searchElement. Returns -1 if there is no such element. Starts searching at index fromIndex, visiting subsequent indices next.

    > ['a', 'b', 'a'].indexOf('a')
    0
    > ['a', 'b', 'a'].indexOf('a', 1)
    2
    > ['a', 'b', 'a'].indexOf('c')
    -1
    
  • join(separator = ','): string 🔒 ES1

    Creates a string by concatenating string representations of all elements, separating by separator.

    > ['a', 'b', 'c'].join()
    'a,b,c'
    > ['a', 'b', 'c'].join('##')
    'a##b##c'
    
  • keys(): Iterable<number> 🔒 ES6

    Returns an iterable over the keys of the array.

    > [...['a', 'b'].keys()]
    [ 0, 1 ]
    
  • lastIndexOf(searchElement: T, fromIndex=this.length-1): number 🔒 ES5

    Returns the index of the first element that is strictly equal to searchElement. Returns -1 if there is no such element. Starts searching at index fromIndex, visiting preceding indices next.

    > ['a', 'b', 'a'].lastIndexOf('a')
    2
    > ['a', 'b', 'a'].lastIndexOf('a', 1)
    0
    > ['a', 'b', 'a'].lastIndexOf('c')
    -1
    
  • map<U>(callback: (value: T, index: number, array: ReadonlyArray<T>) => U, thisArg?: any): U[] 🔒 ES5

    Returns a new array, in which every element is the result of callback being applied to the corresponding element of this.

    > [1, 2, 3].map(x => x * 2)
    [ 2, 4, 6 ]
    > ['a', 'b', 'c'].map((x, i) => i)
    [ 0, 1, 2 ]
    
  • pop(): T | undefined ✏️ ES3

    Removes and returns the last element of the array. That is, it treats the end of the array as a stack.

    > const arr = ['a', 'b', 'c'];
    > arr.pop()
    'c'
    > arr
    [ 'a', 'b' ]
    
  • push(...items: T[]): number ✏️ ES3

    Adds adds zero or more items to the end of the array. That is, it treats the end of the array as a stack. The return value is the length of this after the change.

    > const arr = ['a', 'b'];
    > arr.push('c', 'd')
    4
    > arr
    [ 'a', 'b', 'c', 'd' ]
    
  • reduce<U>(callback: (state: U, element: T, index: number, array: T[]) => U, firstState?: U): U 🔒 ES5

    The callback computes the next state, given the current state and an element of the array. .reduce() feeds it the array elements, starting at index 0, going forward. If no firstState is provided, the array element at index 0 is used, instead. The last state is the result of .reduce().

    > [1, 2, 3].reduce((state, x) => state + String(x), '')
    '123'
    > [1, 2, 3].reduce((state, x) => state + x, 0)
    6
    
  • reduceRight<U>(callback: (state: U, element: T, index: number, array: T[]) => U, firstState?: U): U 🔒 ES5

    Works like .reduce(), but visits the array elements backward, starting with the last element.

    > [1, 2, 3].reduceRight((state, x) => state + String(x), '')
    '321'
    
  • reverse(): this ✏️ ES1

    Rearranges the elements of the array so that they are in reverse order and then returns this.

    > const arr = ['a', 'b', 'c'];
    > arr.reverse()
    [ 'c', 'b', 'a' ]
    > arr
    [ 'c', 'b', 'a' ]
    
  • shift(): T | undefined ✏️ ES3

    Removes and returns the first element of the array. The opposite of .unshift().

    > const arr = ['a', 'b', 'c'];
    > arr.shift()
    'a'
    > arr
    [ 'b', 'c' ]
    
  • slice(start=0, end=this.length): T[] 🔒 ES3

    Returns a new array, with the elements of this whose indices are between (incl.) start and (excl.) end.

    > ['a', 'b', 'c', 'd'].slice(1, 3)
    [ 'b', 'c' ]
    > ['a', 'b'].slice() // shallow copy
    [ 'a', 'b' ]
    
  • some(callback: (value: T, index: number, array: Array<T>) => boolean, thisArg?: any): boolean 🔒 ES5

    Returns true if callback returns true for at least one element. Stops as soon as it receives true. Math: ∃

    > [1, 2, 3].some(x => x < 0)
    false
    > [1, -2, 3].some(x => x < 0)
    true
    
  • sort(compareFn?: (a: T, b: T) => number): this ✏️ ES1

    Sorts the array and returns this. The order in which to sort is specified via compareFn, which returns a number that is:

    • Negative if a < b (mnemonic: negative = less than zero)
    • Zero if a === b
    • Positive if a > b
    > [3, 1, 2].sort((a, b) => a - b)
    [ 1, 2, 3 ]
    > ['b', 'a', 'c'].sort((a, b) => a < b ? -1 : a > b ? +1 : 0)
    [ 'a', 'b', 'c' ]
    
  • splice(start: number, deleteCount=this.length-start, ...items: T[]): T[] ✏️ ES3

    At index start, it removes deleteCount elements and inserts the items. It returns the deleted elements.

    > const arr = ['a', 'b', 'c', 'd'];
    > arr.splice(1, 2, 'x', 'y')
    [ 'b', 'c' ]
    > arr
    [ 'a', 'x', 'y', 'd' ]
    
  • toString(): string 🔒 ES1

    Returns a string with string versions of all elements, separated by commas.

    > [1, 2, 3].toString()
    '1,2,3'
    > ['a', 'b', 'c'].toString()
    'a,b,c'
    > [].toString()
    ''
    
  • unshift(...items: T[]): number ✏️ ES3

    Inserts the items at the beginning of this array and returns the length of this after the modification.

    > const arr = ['c', 'd'];
    > arr.unshift('e', 'f')
    4
    > arr
    [ 'e', 'f', 'c', 'd' ]
    

More information

Sources

@OliverMensahDev
Copy link

Please, can I join you in this quest? I will do my research well on these API's and start contributing.

@mrmartineau
Copy link

@donsalvadori
Copy link

how is this project/gist useful over MDN?

@rauschma
Copy link
Author

rauschma commented Apr 2, 2018

@omensah: Alas, it’s a solo project, but thanks for the offer!

@rauschma
Copy link
Author

rauschma commented Apr 2, 2018

@donsalvadori: it complements MDN. For details, you have to consult it.

@jthoms1
Copy link

jthoms1 commented Apr 2, 2018

I like the type information supplied by TypeScript. More detail on params. https://github.com/Microsoft/TypeScript/blob/7b9ceb85fa4e19ade740faa2af2e00e62e16f7c9/src/lib/es2015.core.d.ts#L37

But the examples are a must. 👍

@WebReflection
Copy link

WebReflection commented Apr 2, 2018

it'd be nice to specify which method involves Symbol.species or which method doesn't

edit actually, I guess that T[] would imply species, right? If that's the case, ignore my comment.

@fearphage
Copy link

I saw this the other day: Array Explorer. A cli tool to help you determine which array method you want/need to use. I'm not sure who it's designed for, but it's interesting nonetheless.

@t-cool
Copy link

t-cool commented Apr 3, 2018

Good article!! Could I translate this into Japanese?
I'll write down the link to this article.

@marcinnajder
Copy link

Nice summary! Yet another way of documenting using only examples https://github.com/marcinnajder/powerseq (tooltips)

Copy link

ghost commented Apr 6, 2018

I think you're missing smoosh 😆

@shoebsd31
Copy link

This is awesome

@elrumordelaluz
Copy link

Could be useful this interactive Array Explorer by @sdras

@rendertom
Copy link

There's a typo in push methods description: "Adds adds <...>"

@liuliangsir
Copy link

Here is a similar stuff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment