Javascript arrays are used to store multiple values in a single variable.
Disclaimer: This is my note for Javascript study where part of the content is copied from other sources. Please go to the Reference part to see the original posts.
Array is an Object
Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.
But, JavaScript arrays are best described as arrays. Arrays use numbers to access its "elements", rather than a self-defined named key.
Creating an Array
// method1
var cars = ["Saab", "Volvo", "BMW"];
// method2, exactly the same but complicated, should avoid
var cars = new Array("Saab", "Volvo", "BMW");
Never put a comma after the last element (like "BMW",).
The effect is inconsistent across browsers.
Array Properties and Methods
var x = cars.length; // The length property returns the number of elements
var y = cars.sort(); // The sort() method sorts arrays
var z = cars.reverse(); // The reverse() method reverts arrays
Popping and Pushing
The pop() method removes the last element from an array and returns the value that was popped.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // the value of x is "Mango"
The push() method adds a new element to an array (at the end), and returns the new array length.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5
Shifting and Unshifting
Shifting is equivalent to popping, working on the first element instead of the last.
The shift() method removes the first array element and "shifts" all other elements to a lower index, and return the item that is shifted out.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Removes the first element "Banana" from fruits
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements, and return the new length.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
Splicing an Array
splice() can be used to add new elements to Array.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// [ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]
The first parameter (2) defines the position where new elements should be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
Joining Arrays
The concat() method
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls and myBoys
Using the ES6 spread syntax
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]
Deleting Elements
Using the JavaScript operator delete
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits to undefined
Using delete may leave undefined holes in the array. Use pop() or shift() instead.
Using splice to delete an element without holes.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // Removes the first element of fruits
The first parameter (0) defines the position where new elements should be added (spliced in).
The second parameter (1) defines how many elements should be removed.
The rest of the parameters are omitted. No new elements will be added.
Using filter to delete an element without holes.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var toDelete = "Apple";
fruits = fruits.filter(function(value) {
return value != toDelete;
});
// [ 'Banana', 'Orange', 'Mango' ]
Finding an Element
The find() method returns the value of the first element in an array that pass a test (provided as a function).
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
Slicing an Array
The slice() method slices out a piece of an array into a new array. This example slices out a part of an array starting from array element 1 ("Orange"):
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
// Orange,Lemon,Apple,Mango
The slice() method can take two arguments like slice(1,3).
The method then selects elements from the start argument, and up to (but not including) the end argument.
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array.
How to Recognize an Array
Solution 1 (ES5)
Array.isArray(fruits); // returns true
Solution 2 create your own isArray function.
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
Solution 3 use instanceof operator
fruits instanceof Array // returns true
Reference
http://www.w3schools.com/js/js_arrays.asp
http://www.w3schools.com/js/js_array_methods.asp
http://www.w3schools.com/jsref/jsref_filter.asp
http://www.w3schools.com/jsref/jsref_find.asp
