shift() will remove the first element from an array. splice() can be used if you specify the index of the first element, and indicate that you want to delete 1 element. slice() method allows you to create a copy of the array between two indices. join() combine the elements in an array to form a string.
Array Loops
Once the data is in the array, you want to be able to efficiently access and manipulate each element in the array without writing repetitive code for each element.
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
and we decided to make all the same donut types, but only sell them as donut holes instead, we could write the following code:
donuts[0] += " hole";
donuts[1] += " hole";
donuts[2] += " hole";
Prints:
donuts array: ["jelly donut hole", "chocolate donut hole", "glazed donut hole"]
The above code is repetitive and not scalable for large number of donuts.
For Loop
To loop through an array, you can use a variable to represent the index in the array, and then loop over that index For loops are very versatile and give you complete control over the looping process. Explicitly define where to start and stop in the array
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
// the variable `i` is used to step through each element in the array
for (var i = 0; i < donuts.length; i++) {
donuts[i] += " hole";
donuts[i] = donuts[i].toUpperCase();
}
Prints:
donuts array: ["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]
The forEach() loop
- forEach can be used to loop over the elements and the array. If you know you're going to be looping over every element from start to finish. Less versatility than you do with a regular for loop but access each element directly.
- The forEach() method gives you an alternative way to iterate over an array, and manipulate each element in the array with an inline function expression.
- forEach() method iterates over the array without the need of an explicitly defined index
- forEach() will not be useful if you want to permanently modify the original array.forEach() always returns undefined.
Ex-
function myFunc(element, index, array){
console.log("Element" + element);//actual value of the element in the array
console.log("Index" + index); //array index which refers to element index
console.log("Array" + array); // will get a reference to the whole array
}
myArray.forEach(myFunc);
Ex-
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
donuts.forEach(function (donut){
donut += " hole";
donut = donut.toUpperCase();
console.log(donut);
});
Prints:
JELLY DONUT HOLE
CHOCOLATE DONUT HOLE
GLAZED DONUT HOLE
Parameters
The function that you pass to the forEach() method can take up to three parameters.
words = ["cat", "in", "hat"];
words.forEach(function(word, num, all) {
console.log("Word " + num + " in " + all.toString() + " is " + word);
});
Prints:
Word 0 in cat,in,hat is cat
Word 1 in cat,in,hat is in
Word 2 in cat,in,hat is hat
Map
- Creating a new array from an existing array is simple.
- Returns a new array with the new values your function calculated.
- Accepts one argument, a function that will be used to manipulate each element in the array.
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
var improvedDonuts = donuts.map(function(donut) {
donut += " hole";
donut = donut.toUpperCase();
return donut;
});
Prints:
donuts array: ["jelly donut", "chocolate donut", "glazed donut"]
improvedDonuts array: ["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]
Arrays in Arrays
var donutBox = [
["glazed", "chocolate glazed", "cinnamon"],
["powdered", "sprinkled", "glazed cruller"],
["chocolate cruller", "Boston creme", "creme de leche"]
];
for (var row = 0; row < donutBox.length; row++) {
// here, donutBox[row].length refers to the length of the donut array currently being looped over
for (var column = 0; column < donutBox[row].length; column++) {
console.log(donutBox[row][column]);
}
}
Prints:
"glazed"
"chocolate glazed"
"cinnamon"
"powdered"
"sprinkled"
"glazed cruller"
"chocolate cruller"
"Boston creme"
"creme de leche"