JS淬炼: Array入门

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