JavaScript: Tutorial - A Guide to JavaScript - Page 11

Manipulation Methods

The concat() method allows one to create a new array based on all of the items in the current array. This method creates a copy of the array and then appends the method arguments to the end and returns the newly constructed array.

var animals = ["cat", "dog", "bird"];
var animals2 = animals.concat("snake", ["monkey", "zebra"]);

alert(animals);	// shows "cat,dog,bird"
alert(animals2); // shows "cat,dog,bird,snake,monkey,zebra"

The slice() method creates an array that contains one or more items already contained in an array. It may accept one or two arguments: the starting and stopping positions of the items to return. The method returns all items between that position and the end of the array if only one argument is present. The method returns all items between the start position and the end position if there are two arguments. It does not include the item in the end position. This method does not affect the original array.

var animals = ["cat", "dog", "bird", "snake", "monkey", "zebra"];
var animals2 = animals.slice(2);
var animals3 = animals.slice(1,4);

alert(animals.slice()); // shows "cat,dog,bird,snake,monkey,zebra" (makes a total copy of the whole array "animals")
alert(animals2); // shows "bird,snake,monkey,zebra"
alert(animals3); // shows "dog,bird,snake"

The splice() method is used to delete, insert and replace items in an array. Any number of items can be deleted from the array by specifying just two arguments: the position of the first item to delete and the number of items to delete. Items can be inserted into a specified position by providing three or more arguments: the beginning position, zero, and the items to insert. Items can be inserted into a specified position while simultaneously deleting items, if you specify three arguments: the starting position, the number of items to delete, and any number of items to insert.

var animals = ["cat", "dog", "bird"];
var removed = animals.splice(0,1);					// remove the first item
alert(animals);									 // shows "dog,bird"
alert(removed);									 // shows "cat"

removed = animals.splice(1, 0, "snake", "monkey");	// insert two items at position 1
alert(animals);									 // shows "dog,snake,monkey,bird"
alert(removed);									 // is an empty array

removed = colors.splice(1, 1, "zebra", "elephant"); // remove one value, insert two
alert(colors);										// shows "dog,zebra,elephant,monkey,bird"
alert(removed);									 // shows "snake"

Location Methods

The methods indexOf() and lastIndexOf() accepts two arguments: the value to look for and an optional index from which to start looking. The indexOf() method starts searching from the beginning of the array and continues to the end. The lastIndexOf() method starts from the end item in the array and continues to the beginning.

These methods return the position of the item in the array or –1 if the item is not found.

var values = [10, 20, 30, 40, 50, 40, 30, 20, 10];
alert(values.indexOf(89));		// shows "-1"
alert(values.indexOf(40));		// shows "3"
alert(values.lastIndexOf(40));	// shows "5"
alert(values.indexOf(40, 4));	 // shows "5"
alert(values.lastIndexOf(40, 4)); // shows "3"
	

The Date Type

To create a date object, use the new operator along with the Date constructor. The object is assigned the current date and time when the Date constructor is used without arguments.

var now = new Date();
alert(now);

To create a date object for May 5, 2014 use Date.parse(). If the string passed into Date.parse() does not represent a date, it returns NaN. Date.parse() returns the number of milliseconds since January 1, 1970.

var cincoDeMayo = new Date(Date.parse("May 5, 2014"));
alert(cincoDeMayo);

Or without Date.parse():

var cincoDeMayo = new Date("May 5, 2014");
alert(cincoDeMayo);

The Date.UTC() method also returns the millisecond since 1/1/70 but constructs that value using different information than Date.parse(). The arguments for Date.UTC() are the year, the zero-based month (Jan. is 0, Feb. is 1, etc.), the day of the month (1 through 31), and the hours (0 through 23), minutes, seconds, and milliseconds of the time.

var datetime = new Date(Date.UTC(2014, 1, 1, 0, 15, 30)); // Feb. 1, 2014 12:15:30 AM GMT
alert(datetime);

The Date constructor mimicks this behavior except that the time is not GMT, it is local.

var datetime = new Date(2014, 1, 1, 0, 15, 30); // Feb. 1, 2014 12:15:30 AM local time
alert(datetime);

To time an operation or procedure:

var startTime = Number(new Date());
// perform an operation
var stopTime = Number(new Date());
var lengthOfOperation = stopTime – startTime;

Date-Formatting Methods

There are several methods of the Date object used to format the date as a string. toDateString() displays the date's day of the week, month, day of the month, and year in an implementation-specific format. toTimeString() displays the date's hours, minutes, seconds, and time zone in an implementation-specific format. toLocaleDateString() displays the date's day of the week, month, day of the month, and year in an implementation- and locale-specific format. toLocaleTimeString() displays the date's hours, minutes, and seconds in an implementation-specific format. toUTCString() displays the complete UTC date in an implementation-specific format.

The output of these methods varies from browser to browser and they therefore can not be employed in a user interface.

Comment