Arrayzing - The JavaScript array cheatsheet

arrayzing.md

Arrayzing - The JavaScript array cheatsheet

This is a work-in-progress cheatsheet for JS arrays. Please feel free to leave a comment if this has helped you or you would like to suggest anything.

• Create an array
• Empty an array
• Clone an array
• Get last item
• Remove first item
• Remove last item
• Add new item(s) to beginning
• Add new item(s) to end
• Overwrite item at a specific index
• Add new item(s) at a specific index
• Remove single item at a specific index
• Remove several items
• Reverse an array
• Delimit an array
• Sort in numerical order
• Sort in alphabetical order
• Join two arrays together
• Copy specific item(s)
• Augment items within an array
• Return true if every item meets a condition
• Return true if at least one item matches a condition
• Execute a function once per array item
• Filter an array
• Detect an array
• ES5 and above
• ES4 and below
• Simple FIFO queue
• Find index of an item
• ES5 and above
• ES4 and below
• Randomise an array
• Chaining Methods

Create an array

var meals = ['breakfast', 'lunch', 'dinner'] ;

Empty an array

Keeping references intact.

var meals = ['breakfast', 'lunch', 'dinner'];
meals.splice(0, meals.length);

or

var meals = ['breakfast', 'lunch', 'dinner'];
meals.length = 0

Clone an array

var meals = ['breakfast', 'lunch', 'dinner'];

var copy = meals.slice();
// ['breakfast', 'lunch', 'dinner']

Get last item

var meals = ['breakfast', 'lunch', 'dinner'];

meals[meals.length - 1];
// 'dinner'

Or

var meals = ['breakfast', 'lunch', 'dinner'];
meals.slice(-1)[0];
// 'dinner'

Remove first item

var meals = ['breakfast', 'lunch', 'dinner'];

meals.shift();
// 'breakfast'

meals;
// ['lunch', 'dinner']

Remove last item

var meals = ['breakfast', 'lunch', 'dinner'];

meals.pop();
// 'dinner'

meals;
// ['breakfast', 'lunch'];

Add new item(s) to beginning

var meals = ['lunch', 'dinner'];

meals.unshift('breakfast');
// 3 - the array length

meals;
// ['breakfast', 'lunch', 'dinner']

Add new item(s) to end

var meals = ['breakfast', 'lunch', 'dinner'];

meals.push('supper');
// 2

meals;
// ['breakfast', 'lunch', 'dinner', 'supper'];

Overwrite item at a specific index

var meals = ['breakfast', 'lunch', 'dinner'];

meals[1] = 'brunch';
// ['breakfast', 'brunch', 'dinner'];

Or

var meals = ['breakfast', 'lunch', 'dinner'];

meals.splice(1, 1, 'brunch');

Add new item(s) at a specific index

var meals = ['breakfast', 'lunch', 'dinner'];

meals.splice(1, 0, 'brunch', 'more brunch');
// ['breakfast', 'brunch', 'more brunch', 'lunch', 'dinner']

Remove single item at a specific index

var meals = ['breakfast', 'lunch', 'dinner'];

meals.splice(1, 1);
// ['lunch']

meals;
// ['breakfast', 'dinner']

Remove several items

var meals = ['breakfast', 'lunch', 'dinner'];

meals.splice(1, 2);
// ['lunch', 'dinner']

meals;
// ['breakfast']

Reverse an array

var meals = ['breakfast', 'lunch', 'dinner'];

meals.reverse();
// ['dinner', 'lunch', 'breakfast'];

Delimit an array

var meals = ['breakfast', 'lunch', 'dinner'];

meals.join(' AND ');
// 'breakfast AND lunch AND dinner'

Sort in alphabetical order

var meals = ['dinner', 'supper', 'breakfast', 'lunch'];

meals.sort();
// ['breakfast', 'dinner', 'lunch', 'supper']

Sort in numerical order

var numbers = [1438,2605,794,3947,6241,11745,2585];

numbers.sort(function(a, b) {
    return a - b;
});
// [794,1438,2585,2605,3947,6241,11745]

Join two arrays together

var dayTimeMeals = ['breakfast', 'lunch'];
var nightTimeMeals = ['merienda', 'dinner'];

var allTheMeals = dayTimeMeals.concat(nightTimeMeals);
// ['breakfast', 'lunch', 'merienda', 'dinner']

Copy specific item(s)

var meals = ['breakfast', 'lunch', 'dinner', 'supper'];

nightTimeMeals = meals.slice(2,4);
// ['dinner', 'supper']

Augment items within an array

var meals = ['breakfast', 'lunch', 'dinner'];
var type = ['king', 'prince', 'pauper'];

meals.map(function(item, i) {
  return item + ' like a ' + type[i];
});
// ["breakfast like a king", "lunch like a prince", "dinner like a pauper"]

Return true if every item meets a condition

var meals = ['breakfast', 'lunch', 'dinner', 'supper'];

meals.every(function(item){ return item.length > 0 });
// true

meals.every(function(item){ return item.length > 6 });
// false

Return true if at least one item matches a condition

var meals = ['breakfast', 'lunch', 'dinner', 'supper'];

meals.some(function(item){ return item === 'lunch';});
// true

meals.some(function(item){ return item === 'burgers!!';});
//false

Execute a function once per array item

var meals = ['breakfast', 'lunch', 'dinner', 'supper'];

meals.forEach(function(currentValue, index, arr){
  console.log(index, currentValue, arr);
});

Filter an array

var meals = ['breakfast', 'lunch', 'dinner', 'supper'];

meals.filter(function(item) {
  return item !== 'breakfast';
});
// ['lunch', 'dinner', 'supper'];

Detect an array

ES5 and above

var meals = ['breakfast', 'lunch', 'dinner'];

Array.isArray(meals)
// true

ES4 and below

var meals = ['breakfast', 'lunch', 'dinner'];

function isArray(arr) {
  return !!(Object.prototype.toString.call(arr) === '[object Array]');
}

isArray(meals);
// true

Simple FIFO queue

var meals = ['breakfast', 'elevenses', 'brunch'];

meals.shift(); 
meals.push('lunch');

// ['elevenses', 'brunch', 'lunch']

meals.shift()
meals.push('afternoon tea');

// ['brunch', 'lunch', 'afternoon tea']
// ... and so on ...

Find index of an item

ES5 and above

var meals = ['breakfast', 'elevenses', 'brunch'];
meals.indexOf('brunch');
// 2

ES4 and below

var meals = ['breakfast', 'elevenses', 'brunch'];

function inArray(arr, item){
  var found = -1, 
      i = arr.length; 

  while(--i >= 0) {
    if(arr[i] === item){
      found = i;
      break;
    }
  }
  return found;
}

inArray(meals, 'brunch');
// 2 - the index of the item in the array

inArray(meals, 'dinner');
// -1

Randomise an array

function randomiseArray(arr) {
    var buffer = [], start;

    for(var i = arr.length; i >= arr.length && i > 0;i--) {
        start = Math.floor(Math.random() * arr.length);
        buffer.push(arr.splice(start, 1)[0])
    };

    return buffer;
}

randomiseArray([0,1,2,3,4]);
// [2,1,0,3,4]

randomiseArray([0,1,2,3,4]);
// [3,2,1,4,0]

randomiseArray([0,1,2,3,4]);
// [1,2,4,0,3]

Chaining methods

var meals = [
  {type: 'breakfast', name: 'Full English', calories: 1500},
  {type: 'breakfast', name: 'Colacao', calories: 260},
  {type: 'breakfast', name: 'Croissant and jam', calories: 520},
  {type: 'breakfast', name: 'Granola with Greek yoghurt and blueberries', calories: 680},
  {type: 'brinner', name: 'Shepherds Pie with strawberry yoghurt', calories: 915},
  {type: 'brinner', name: 'Milky Porridge with beef and green beans', calories: 875},
  {type: 'dinner', name: 'Phad Thai', calories: 750},
  {type: 'dinner', name: 'Chicken Katsu curry and rice', calories: 830},
];

function getMealsByMaxCalories(meals, maxCalories, dailyAllowance) {
  return meals
    .filter(function(meal) {
        return meal.calories <= maxCalories;
    })
    .map(function(meal) {
        return {
            name: meal.name,
            calories: meal.calories,
            percentageOfDailyAllowance: meal.calories / dailyAllowance * 100
        }
    });
}
    
getMealsByMaxCalories(meals, 850, 2000);

/*
[
  {
    "name": "Colacao",
    "calories": 260,
    "percentageOfDailyAllowance": 13
  },
  {
    "name": "Croissant and jam",
    "calories": 520,
    "percentageOfDailyAllowance": 26
  },
  {
    "name": "Granola with Greek yoghurt and blueberries",
    "calories": 680,
    "percentageOfDailyAllowance": 34
  },
  {
    "name": "Phad Thai",
    "calories": 750,
    "percentageOfDailyAllowance": 37.5
  }
]
*/

LICENSE

The MIT License (MIT)

Copyright (c) 2015 Justin Perry

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

There are multiple errors in your inArray function!

Here's how it should be:

function inArray(arr, item){
  var found = -1,      
      i = arr.length; 

  while(--i >= 0) {      
    if(arr[i] === item){
        found = i;
        break;
    }
  }

  return found;
}

First, --i will NOT find the index if the item is the first in the array when --i yields 0 it evaluates to false and thus the first item in the array is not found. Second, you declare i AND len, no need to declare len as well. Third: you do not break after the item has been found which is very inefficient in large arrays as it will continue to loop through the entire array though the item has already been found. Fourth: you used query to compare to, but it should be item.

When emptying and array doing

meals.length = 0;

is not highly efficient

See some tests done here:
http://jsperf.com/length-equal-0-or-new-array

You can also empty the array by doing:

meals.splice(0,meals.length);

You can also do:

meals = []; 

this is the fastest method (This will set the variable "meals" to a new empty array. This is perfect if you don't have references to the original array "meals" anywhere else because this actually creates a brand new (empty) array. You should be careful with this method because if you have referenced this array from another variable or property, the original array will remain unchanged. Only use this if you only reference the array by its original variable "meals")

nice one, thanks for sharing

good job..

Great job guys..

Nice! Thanks for sharing.

Good stuff. Thanks!

Great job! Thx

@AngosStudio, @mr21, @Alex-Walgreen - well spotted and fixed. thanks.

@alexbudin - My intention for this example one was to keep any references intact rather than assigning a new array. I've updated it to state this. Jim H also mentioned the arr.splice(0, arr.length); method so I'm going to add that too.

@funkytaco - yep. I'll add some notes to this fact when I get a moment.

Great stuff, thanks!

Awesome!! Thanks for sharing, this is going to be very helpful.

Not sure if this is too "duh" for this awesome list of Array tips, but since you had some slice and splice tips, maybe you'd want to include a tip for replacing an item (or items) in an array, since splice can take additional params to use as replacement?

var meals = ['breakfast', 'lunch', 'dinner'];
meals.splice(1,1,'brunch');  // go to index 1, delete 1 item, put 'brunch' in place of index
// ['breakfast', 'brunch', 'dinner']

// the extra params are all inserted, so you could replace and insert at the same time
var meals = ['breakfast', 'lunch', 'dinner'];
meals.splice(1,1,'brunch','linner'); 
// ['breakfast', 'brunch', 'linner', 'dinner']

EDIT: Maybe I had scrolled through too fast; I see these tips in there now already... Apologies

Please consider merging [email protected]:9669b87fa13c447e5d7e.git. This adds an example to change an array in-place. The easiest way to merge would probably be to simply clone the above repo, and then use a visual diff (kdiff3, meld, etc) to compare the differences. There are proposed changes in only two sections.

Great job!

Awesome Job. Can you please create another cheat sheet for Javascript Object

Just a suggestion, perhaps in the table of contents, add the method name as well as the description of what it does. When I looked at your list, i just quickly searched for a particular method and it wasn't in the TOC, so it might be easier for users to look there for the method name.

Love it

Bedankt/thanks! Comes in handy!
String methods would be nice too.

Chaining methods:

{ name: "Chicken Katsu curry and rice",
calories: 830,
percentageOfDailyAllowance: 41.5
}

In Chaining method, this object is also included in that result.
Apart from that,
Awesome!! Thanks for sharing, this is going to be very helpful.