Arrays in javascript examples. Two-dimensional array in JavaScript. One-dimensional array numbers1
In the previous article, we talked about what it is and how to work with it. In this article we will talk about multidimensional array.
It is an array that has one or more elements, which are also arrays. Depending on the depth of the ad, in particular, it may be called two-dimensional array(2 levels) either three-dimensional array(3 levels) either four-dimensional(4 levels) and so on.
The most popular, after the one-dimensional array, the most commonly used is the two-dimensional array. We will study it in more detail.
As you can see, the elements of a two-dimensional array are one-dimensional arrays. If these one-dimensional arrays contained more arrays, then the arr array would already be three-dimensional.
As an example, let's create three simple arrays and fill them with data. We will fill the first with even numbers, the second with odd numbers, and the third with some arbitrary data.
// Declare three empty arrays var evenNumbers \u003d new Array (); // Variable k - for evenNumbers array indices var k \u003d 0; var oddNumbers \u003d new Array (); // Variable n - for array indices oddNumbers var n \u003d 0; var data \u003d new Array ("car", "plane", true, 89, "m"); // Fill the array evenNumbers, with even numbers for (var i \u003d 1; i
In order to see what is inside the array, you can use such a tool as console.
For example, we want to see the contents of an array with odd numbers oddNumbers. To do this, write the following line in the code below:
Console.log (oddNumbers);
To see the result, you need to open console in browser... In Google Chrome, this is done like this: right-click on the page, and from the context menu, select the last option “View Code”, that is, the inspector. In the English version, this option is called Inspect.
And below the developer toolbar will appear. In it, you need to go to the Console tab.
Now in order to create a two dimensional array, you need to declare it, and add the one-dimensional arrays that you created above to it.
// Declare a two-dimensional array twoDimens, and fill it var twoDimens \u003d new Array (evenNumbers, oddNumbers, data); console.log (twoDimens);
Let's see the contents of this array in the console.
iterating over a two-dimensional array
First, let's learn how to access elements of a two-dimensional array.
As with single arrays, elements are accessed by their indices.
For example, let's display the element at index 3 from an array with odd numbers (oddNumbers). The index of the one-dimensional array oddNumbers in the two-dimensional array twoDimens is one (1).
Document.write ("The element with index 3 from the oddNumbers array is:" + twoDimens); // Element: 7
In the twoDimens array, we refer to the element at index 1. The element at this index is the oddNumbers array. And in this array, we are already accessing the element with index 3, which is the number 7.
Now let's get down to the question itself how to loop over a two dimensional array.
Loop over a two-dimensional array is done using a double loop. For example, let's iterate over our twoDimens array.
For (var i \u003d 0; i< twoDimens.length; i++){ for(var j = 0; j < twoDimens[i].length; j++){ document.write("
Element with index "+ i +" "+ j +" is equal to: "+ twoDimens [i] [j] +"
"); } }In the first loop, we iterate over the twoDimens array itself. In the second loop, we are already iterating over the element itself (array). First, the variable i is equal to 0. Therefore, in the second loop, we first iterate over the first array evenNumbers, which has index 0. And already inside the second loop, we access the elements of this array. Thus: twoDimens [j]. Where j ranges from 0 to the length of the evenNumbers array.
After iterating over the elements from the first array, we return to the first loop, increment the variable i, and proceed to iterate over the second array oddNumbers, which has index 1. And so, we iterate over each element of the two-dimensional array twoDimens.
Now let's look at the result of this search:
That's all I wanted to talk about in this article. Now you know how to create a two-dimensional array, how to access the elements of a two-dimensional array, and how to iterate over a two-dimensional array. I hope everything was clear. I wish you great success!
- I. Looping through real arrays
- ForEach and related methods
- For loop
- Correct use of for ... in loop
- For ... of loop (implicit use of an iterator)
- Explicit use of an iterator
- Using methods to iterate over real arrays
- Converting to a real array
- A note on runtime objects
I. Looping through real arrays
At the moment, there are three ways to iterate over the elements of a real array:- array.prototype.forEach method;
- classic for loop;
- A well-formed for ... in loop.
- for ... of loop (implicit use of an iterator);
- explicit use of an iterator.
1. forEach method and related methods
If your project is designed to support the capabilities of the ECMAScript 5 (ES5) standard, you can use one of its innovations - the forEach method.Usage example:
var a \u003d ["a", "b", "c"]; a.forEach (function (entry) (console.log (entry);));
In general, using forEach requires the es5-shim emulation library for browsers that do not have native support for this method. These include IE 8 and earlier, which are still in use today.
The advantage of forEach is that there is no need to declare local variables to store the index and value of the current array element, since they are automatically passed to the callback function as arguments.
If you're worried about the potential cost of calling a callback for each item, don't worry and read this.
ForEach is designed to iterate over all the elements of an array, but apart from it ES5 offers several more useful methods for iterating over all or some of the elements, plus performing some actions with them:
- every - returns true if for each element of the array the callback returns a value that is cast to true.
- some - returns true if for at least one element of the array the callback returns a value that is cast to true.
- filter - creates a new array containing those elements of the original array for which the callback returns true.
- map - creates a new array containing the values \u200b\u200breturned by the callback.
- reduce - reduces an array to a single value, applying a callback in turn to each element of the array, starting with the first (can be useful for calculating the sum of array elements and other final functions).
- reduceRight - works similar to reduce, but iterates over the elements in reverse order.
2. The for loop
Good old for rules:Var a \u003d ["a", "b", "c"]; var index; for (index \u003d 0; index< a.length; ++index) {
console.log(a);
}
If the length of the array does not change throughout the entire loop, and the loop itself belongs to a performance-critical piece of code (which is unlikely), then you can use the "more optimal" version of for with storing the length of the array:
Var a \u003d ["a", "b", "c"]; var index, len; for (index \u003d 0, len \u003d a.length; index< len; ++index) {
console.log(a);
}
In theory, this code should run slightly faster than the previous one.
If the order of iterating over the elements is not important, then you can go even further in terms of optimization and get rid of the variable for storing the length of the array by changing the iteration order to the opposite:
Var a \u003d ["a", "b", "c"]; var index; for (index \u003d a.length - 1; index\u003e \u003d 0; --index) (console.log (a);)
However, in modern JavaScript engines, these optimized games usually mean nothing.
3. Correct use of the for ... in loop
If you are advised to use a for ... in loop, remember that iterating over arrays is not what it is intended for. Contrary to the common misconception, the for ... in loop does not iterate over the array indices, but the enumerated properties of the object.However, in some cases, such as iterating over sparse arrays, for ... in can be useful, as long as you take some precautions, as shown in the example below:
// a is a sparse array var a \u003d; a \u003d "a"; a \u003d "b"; a \u003d "c"; for (var key in a) (if (a.hasOwnProperty (key) && /^0$|^\\d*$/.test(key) && key<= 4294967294) {
console.log(a);
}
}
In this example, at each iteration of the loop, two checks are performed:
- that the array has its own property named key (not inherited from its prototype).
- that key is a string containing the decimal notation of an integer whose value is less than 4294967294. Where does the last number come from? From the definition of an array index in ES5, from which it follows that the largest index an element in an array can have is (2 ^ 32 - 2) \u003d 4294967294.
In order not to write such a cumbersome code of checks every time you need to iterate over an array, you can design it as a separate function:
Function arrayHasOwnIndex (array, key) (return array.hasOwnProperty (key) && /^0$|^\\d*$/.test(key) && key<= 4294967294;
}
Then the body of the loop from the example will be significantly reduced:
For (key in a) (if (arrayHasOwnIndex (a, key)) (console.log (a);))
The above code of checks is universal, suitable for all cases. But instead, you can use a shorter version, although formally not entirely correct, but nevertheless suitable for most cases:
For (key in a) (if (a.hasOwnProperty (key) && String (parseInt (key, 10)) \u003d\u003d\u003d key) (console.log (a);))
4. The for ... of loop (implicit use of an iterator)
ES6, while still in draft status, should introduce iterators into JavaScript.Iterator
is an object-implemented protocol that defines a standard way to obtain a sequence of values \u200b\u200b(finite or infinite).
An iterator is an object in which the next () method is defined - a function without arguments that returns an object with two properties:
- done (boolean) - true if the iterator has reached the end of the sequence being iterated. Otherwise, false.
- value - defines the value returned by the iterator. May be undefined (absent) if done property is true.
An example of using for ... of:
Var val; var a \u003d ["a", "b", "c"]; for (val of a) (console.log (val);)
In the above example, the for ... of loop implicitly calls the iterator of the Array object to get each value in the array.
5. Explicit use of an iterator
Iterators can also be used explicitly, however, in this case the code becomes much more complex, compared to the for ... of loop. It looks like this:Var a \u003d ["a", "b", "c"]; var it \u003d a.entries (); var entry; while (! (entry \u003d it.next ()). done) (console.log (entry.value);)
In this example, the Array.prototype.entries method returns an iterator that is used to display the values \u200b\u200bof the array. At each iteration, entry.value contains an array like [key, value].
II. Iterating over array-like objects
In addition to real arrays, JavaScript also contains array-like objects ... What they have in common with real arrays is that they have a length property and properties with names in the form of numbers corresponding to the elements of the array. Examples include the DOM of the NodeList collection and the arguments pseudo-array available inside any function / method.1. Using methods of iterating over real arrays
At least most, if not all, methods of iterating over real arrays can be used to iterate over array-like objects.The for and for ... in constructs can be applied to array-like objects in exactly the same way as they are to real arrays.
ForEach and other Array.prototype methods also apply to array-like objects. To do this, use a call to Function.call or Function.apply.
For example, if you want to apply forEach to the childNodes property of a Node object, you can do it like this:
Array.prototype.forEach.call (node.childNodes, function (child) (// do something with the child object));
For ease of reuse of this technique, you can declare a reference to the Array.prototype.forEach method in a separate variable and use it as a shorthand:
// (This assumes all the code below is in the same scope) var forEach \u003d Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// do something with the child object));
If an array-like object has an iterator, then it can be used explicitly or implicitly to iterate over the object in the same way as for real arrays.
2. Convert to a real array
There is also another, very simple, way to iterate over an array-like object: convert it to a real array and use any of the above methods to iterate over real arrays. For conversion, you can use the generic Array.prototype.slice method, which can be applied to any array-like object. This is done very simply, as shown in the example below:Var trueArray \u003d Array.prototype.slice.call (arrayLikeObject, 0);
For example, if you want to convert a NodeList collection to a real array, you need code like this:
Var divs \u003d Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
Update: As noted in the comments by rock and torbasow, in ES6 you can use the more descriptive Array.from method instead of Array.prototype.slice.
3. A note on runtime objects
If you apply Array.prototype methods to runtime objects (such as DOM collections), then you should keep in mind that these methods are not guaranteed to work correctly in all runtime environments (including browsers). It depends on the behavior of a particular object in a particular runtime, more precisely, on how the HasProperty abstract operation is implemented in this object. The problem is that the ES5 standard itself allows for the possibility of object misbehaving with respect to this operation (see §8.6.2).Therefore, it is important to test the Array.prototype methods in every runtime (browser) in which you plan to use your application.
Greetings to everyone interested in JavaScript multidimensional arrays and sorting. In the current publication, I will try to cover this topic in all details.
Therefore, after reading this article, you will learn why multidimensional arrays are used in web applications, how they are created, and how they can be manipulated and sorted. Let's get down to learning!
How are multidimensional arrays created and what are they for?
First, it's worth remembering how a regular one-dimensional array is created.
var array \u003d
Now, remember that a multidimensional array is an array of arrays.I agree, it sounds like a tautology. However, read the definition again. Indeed, a multidimensional array consists of a certain number of nested ones.
Consider the following situation. At the beginning of a game, the user enters his name, and after the end, a rating table with the names of the players and their records is displayed on the screen.
It is clear that such information is stored in a database. But when we pull it out of the database, we get a multidimensional array. After all, each subarray contains the player's login and the number of points scored.
It will all look like this:
var results \u003d [["Markus", 333], ["Natasha", 211], ["Alexey", 124]];
As you can see, the information can be stored heterogeneous. It can be strings, numbers, and even. This is possible because the arrays in are untyped.
In this case, access to elements occurs through a double operator.
To consolidate the material, analyze a small program.
Results \u003d
Arrays are a fairly convenient way to store ordered complex data while processing them. In addition, it is very convenient to work with them and at the same time the speed of their processing is quite high.
Data sorting methods
For arrays in JavaScript, there is a built-in method called sort ()... This tool is very flexible. And now I'll explain why.
If you use a method with no parameters, then it automatically orders the subarrays by the first element in alphabetical order. So, when calling results.sort () the parsed object will look like this:
Alexey, 124
Markus, 333
Natasha, 211
And if you swap the elements in each nested array, you get:
124, Alexey
211, Natasha
333, Markus
In this case, for comparison, all elements are temporarily converted to strings.
If, to solve a specific task, you need a function that sorts elements in a non-standard way, then you can write it yourself and pass it as a parameter to sort ()... It should be borne in mind that a user-defined function must return:
- a positive number (generally choosing 1) if the first specified item follows the second in the comparison;
- a negative number (usually -1) if the second selected item should follow the first;
- zero if the two tested values \u200b\u200bare equal.
Let's take the initial array as an example. results sort by points. Moreover, the results will be ordered from highest to lowest. This can be done in two ways.
In the first option, I changed the sorting logic, i.e. in a situation where you need to return a positive number, I return a negative one and vice versa.
Record table:
But in the second method, I left the sorting logic intact, but additionally used another method - reverse ()... As the name suggests, reverse reverses the order of the elements.
Therefore, the sort () function will look like this:
| 1 2 3 4 5 | function RecordSort (a, b) (if (a\u003e b) return 1; else if (a< b) return -1; else return 0; } |
function RecordSort (a, b) (if (a\u003e b) return 1; else if (a< b) return -1; else return 0; }
But after it, add the above method.
The conclusion is made in a similar way.
I want to draw your attention to one important point. When using these functions, all changes occur to the array to which you apply them. Thus, if you need to keep the original view of the data, then create a copy, and then edit it.
Well, so I talked about multidimensional arrays and their sorting. If you liked the article, then subscribe to the blog and read other equally interesting publications. I would be grateful for the reposts. Until next time!
Bye Bye!
Best regards, Roman Chueshov
Arrays
Array is an ordered collection of values. The values \u200b\u200bin an array are called elements, and each element is characterized by a numeric position in the array, called an index. Arrays in JavaScript are untyped: the elements of an array can be of any type, and different elements of the same array can be of different types. Array elements can even be objects or other arrays, which allows you to create complex data structures such as arrays of objects and arrays of arrays.
Array indices in JavaScript are zero-based and use 32-bit integers — the first element of an array has index 0. JavaScript arrays are dynamic: they can grow and shrink as needed; there is no need to declare fixed sizes of arrays when they are created or to re-allocate memory when they are resized.
Arrays in JavaScript are a specialized form of objects, and array indices mean little more than just property names, which coincidentally are integers.
Creating arrays
The easiest way to create an array is with a literal, which is a simple comma-separated list of array elements in square brackets. The values \u200b\u200bin an array literal do not have to be constants - they can be any expressions, including object literals:
Var empty \u003d; // Empty array var numbers \u003d; // Array with five numeric elements var misc \u003d [1.1, true, "a",]; // 3 elements of different types + trailing comma var base \u003d 1024; var table \u003d; // Array with variables var arrObj \u003d [,]; // 2 arrays inside containing objects
The array literal syntax allows you to insert an optional trailing comma, i.e. literal [,] matches an array with two elements, not three.
Another way to create an array is to call the constructor Array ()... The constructor can be called in three different ways:
Call the constructor with no arguments:
Var arr \u003d new Array ();
In this case, an empty array equivalent to the literal will be created.
Call the constructor with a single numeric argument specifying the length of the array:
Var arr \u003d new Array (10);
In this case, an empty array of the specified length will be created. This form of calling the Array () constructor can be used to pre-allocate memory for an array if the number of its elements is known in advance. Note that this does not store any values \u200b\u200bin the array.
Explicitly specify the values \u200b\u200bof the first two or more array elements or one non-numeric element in a constructor call:
Var arr \u003d new Array (5, 4, 3, 2, 1, "test");
In this case, the arguments to the constructor become the values \u200b\u200bof the elements of the new array. Using array literals is almost always easier than using the Array () constructor in this way.
Reading and writing array elements
Array elements are accessed using the operator. There must be an array reference to the left of the parentheses. An arbitrary expression that returns a non-negative integer value must be inside the parentheses. This syntax is suitable for both reading and writing the value of an array element. Therefore, all of the following JavaScript statements are valid:
// Create an array with one element var arr \u003d ["world"]; // Read item 0 var value \u003d arr; // Write the value to element 1 arr \u003d 3.14; // Write a value to element 2 i \u003d 2; arr [i] \u003d 3; // Write a value to element 3 arr \u003d "hello"; // Read items 0 and 2, write the value to item 3 arr] \u003d arr;
Let me remind you that arrays are a specialized kind of object. The square brackets used to access array elements act exactly the same as the square brackets used to access object properties. The JavaScript interpreter converts the parenthesized numeric indexes to strings - index 1 becomes the string "1" - and then uses the strings as property names.
There is nothing special about converting numeric indices to strings: the same can be done with regular objects:
Var obj \u003d (); // Create a simple object obj \u003d "one"; // Index it with integers
The peculiarity of arrays is that when using property names that are non-negative integers, the arrays automatically determine the value of the property length... For example, the arr array was created above with a single element. Then, values \u200b\u200bwere assigned to its elements with indices 1, 2, and 3. As a result of these operations, the value of the length property of the array changed and became equal to 4.
You should clearly distinguish between indexes in an array and object property names. All indexes are property names, but only properties with integer names are indexes. All arrays are objects, and you can add properties to them with any name. However, if you touch properties that are array indices, arrays respond by updating the value of the length property as needed.
Note that negative and non-integers are allowed as array indices. In this case, numbers are converted to strings that are used as property names.
Adding and Removing Array Elements
We have already seen that the easiest way to add elements to an array is to assign values \u200b\u200bto new indices. You can also use the method to add one or more elements to the end of an array push ():
Var arr \u003d; // Create an empty array arr.push ("zero"); // Add a value to the end arr.push ("one", 2); // Add two more values
You can also add an element to the end of an array by assigning a value to the arr element. To insert an element at the beginning of an array, you can use the method unshift ()and the existing elements in the array are shifted to higher indices.
You can delete elements of an array using the delete operator, like ordinary properties of objects:
Var arr \u003d; delete arr; 2 in arr; // false, index 2 in the array is undefined arr.length; // 3: the delete operator does not change the length property of the array
Removing an element is similar (but slightly different) to assigning an undefined value to that element. Note that applying the delete operator to an element in an array does not change the value of the length property, nor does it move down the elements with higher indices to fill the void left after the element is deleted.
It is also possible to remove elements at the end of an array by simply assigning a new value to the length property. Arrays have a method pop () (opposite to push ()), which decreases the length of the array by 1 and returns the value of the removed element. There is also a method shift () (opposite to unshift ()), which removes the element at the beginning of the array. Unlike the delete operator, the shift () method shifts all elements down one position below their current indices.
Finally there is a multipurpose method splice ()that allows you to insert, delete, and replace array elements. It changes the value of the length property and shifts the elements of the array with lower or higher indices as needed. We will discuss all these methods a little later.
Multidimensional arrays
JavaScript does not support "real" multidimensional arrays, but it does a good job of simulating them using arrays from arrays. To access a data item in an array of arrays, it is sufficient to use the operator twice.
For example, suppose the variable matrix is \u200b\u200ban array of arrays of numbers. Each element of matrix [x] is an array of numbers. You can use the expression matrix [x] [y] to access a specific number in an array. Below is a specific example where a two-dimensional array is used as a multiplication table:
// Create a multidimensional array var table \u003d new Array (10); // There are 10 rows in the table for (var i \u003d 0; i
Array class methods
The ECMAScript 3 standard defines many convenient functions for working with arrays as part of Array.prototype, which are available as methods of any array. These methods will be presented in the following subsections.
Join () method
The Array.join () method converts all the elements in the array to strings, concatenates them, and returns the resulting string. An optional argument can be passed to the method with a string that will be used to separate items in the result string. If no delimiter string is specified, a comma is used. For example, the following snippet results in the string "1,2,3":
Var arr \u003d; arr.join (); // "1,2,3" arr.join ("-"); // "1-2-3"
The reverse () method
The Array.reverse () method reverses the order of the elements in an array and returns a reordered array. The permutation is done directly on the original array, i.e. this method does not create a new array with reordered elements, but reorders them in an already existing array. For example, the following snippet, which uses the reverse () and join () methods, results in the string "3,2,1":
Var arr \u003d; arr.reverse (). join (); // "3,2,1"
Sort () method
The Array.sort () method sorts the elements in the original array and returns the sorted array. If sort () is called with no arguments, sorting is done alphabetically (for comparison, items are temporarily converted to strings if necessary). Undefined elements are wrapped to the end of the array.
You can pass a comparison function as an argument to sort () to sort in any other non-alphabetical order. This function sets which of its two arguments should come first in the sorted list. If the first argument must precede the second, the comparison function must return a negative number. If the first argument is to follow the second in the sorted array, then the function must return a number greater than zero. And if the two values \u200b\u200bare equivalent (i.e., the order is not important), the comparison function should return 0:
Var arr \u003d; arr.sort (); // Alphabetical order: 1111, 222, 33, 4 arr.sort (function (a, b) (// Numeric order: 4, 33, 222, 1111 return ab; // Returns the value 0 // depending on the sort order a and b)); // Sort backwards, from highest to lowest arr.sort (function (a, b) (return b-a));
Notice how convenient it is to use an unnamed function in this snippet. The comparison function is only used here, so there is no need to give it a name.
The concat () method
The Array.concat () method creates and returns a new array containing the elements of the original array on which the concat () method was called and the values \u200b\u200bof all arguments passed to the concat () method. If any of these arguments are themselves an array, its elements are added to the returned array. It should be noted, however, that there is no recursive conversion of an array from arrays to a one-dimensional array. The concat () method does not modify the original array. Below are some examples:
Var arr \u003d; arr.concat (4, 5); // Returns arr.concat (); // Returns arr.concat (,) // Returns arr.concat (4,]) // Returns]
Slice () method
The Array.slice () method returns a slice, or subarray, of the specified array. The two arguments to the method define the start and end of the returned chunk. The returned array contains the element numbered in the first argument plus all subsequent elements up to (but not including) the element numbered in the second argument.
If only one argument is specified, the returned array contains all elements from the starting position to the end of the array. If any of the arguments are negative, it specifies the element number relative to the end of the array. Thus, argument -1 corresponds to the last element of the array, and argument -3 corresponds to the third element of the array from the end. Here are some examples:
Var arr \u003d; arr.slice (0.3); // Returns arr.slice (3); // Returns arr.slice (1, -1); // Returns arr.slice (-3, -2); // Will return
Splice () method
The Array.splice () method is a generic method that inserts or removes elements from an array. Unlike the slice () and concat () methods, the splice () method modifies the original array on which it was called. Note that the splice () and slice () methods have very similar names but perform completely different operations.
The splice () method can remove elements from an array, insert new elements, or do both at the same time. The elements of the array are shifted as necessary so that after insertion or deletion, a contiguous sequence is formed.
The first argument to the splice () method specifies the position in the array from which to insert and / or delete. The second argument specifies the number of elements to be removed (cut) from the array. If the second argument is omitted, all array elements from the specified array to the end of the array are removed. The splice () method returns an array of the removed elements, or (if none of the elements have been removed) an empty array.
The first two arguments to the splice () method specify the array elements to be removed. These arguments can be followed by any number of additional arguments that specify the elements to be inserted into the array, starting at the position specified in the first argument.
Var arr \u003d; arr.splice (4); // Returns arr \u003d arr.splice (1,2); // Returns arr \u003d arr.splice (1,1); // Will return; arr \u003d arr \u003d; arr.splice (2,0, "a", "b"); // Will return; arr \u003d
The push () and pop () methods
The push () and pop () methods let you work with arrays like stacks. The push () method adds one or more new elements to the end of the array and returns its new length. The pop () method performs the opposite operation - it removes the last element of the array, decreases the length of the array, and returns the value it removed. Note that both of these methods modify the original array rather than creating a modified copy of it.
The unshift () and shift () Methods
The unshift () and shift () methods behave in much the same way as push () and pop (), except that they insert and remove elements at the beginning of the array rather than at the end. The unshift () method shifts existing elements towards larger indices to make room, adds the element or elements to the beginning of the array, and returns the new length of the array. The shift () method removes and returns the first element of the array, shifting all subsequent elements down one position to occupy the space vacated at the beginning of the array.
Last update: 09.04.2018
Arrays are intended for working with datasets. The expression new Array () is used to create an array:
Var myArray \u003d new Array ();
There is also a shorter way to initialize an array:
Var myArray \u003d;
In this case, we are creating an empty array. But you can also add initial data to it:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (people);
In this case, the myArray will have three elements. Graphically, it can be represented as follows:
Indexes are used to refer to individual elements of an array. The counting starts from zero, that is, the first element will have index 0, and the last one will have 2:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (people); // Tom var person3 \u003d people; // Sam console.log (person3); // Sam
If we try to access an element at an index greater than the size of the array, we get undefined:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (people); // undefined
Also, by the index, the values \u200b\u200bfor the array elements are set:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (people); // Tom people \u003d "Bob"; console.log (people); // Bob
Moreover, unlike other languages \u200b\u200blike C # or Java, you can install an element that was not initially installed:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (people); // undefined - there are only three elements in the array people \u003d "Bob"; console.log (people); // Bob
It is also worth noting that, unlike a number of programming languages \u200b\u200bin JavaScript, arrays are not strongly typed, one array can store data of different types:
Var objects \u003d ["Tom", 12, true, 3.14, false]; console.log (objects);
spread operator
the spread operator ... allows you to take values \u200b\u200bfrom an array separately:
Let numbers \u003d; console.log (... numbers); // 1 2 3 4 console.log (numbers); //
the spread operator is specified before the array. As a result, the expression ... numbers will return a set of numbers, but it will not be an array, but individual values.
Multidimensional arrays
Arrays can be one-dimensional and multi-dimensional. Each element in a multidimensional array can be a separate array. Above we considered a one-dimensional array, now let's create a multi-dimensional array:
Var numbers1 \u003d; // one-dimensional array var numbers2 \u003d [,]; // two-dimensional array
Visually, both arrays can be represented as follows:
One-dimensional array numbers1
To get a single element of an array, an index is also used:
Var tomInfo \u003d people;
Only now the tomInfo variable will represent an array. To get an element inside a nested array, we need to use its second dimension:
Console.log ("Name:" + people); // Tom console.log ("Age:" + people); // 25
That is, if we can visually represent a two-dimensional array in the form of a table, then the people element will refer to the table cell, which is located at the intersection of the first row and the second column (the first dimension is 0 - a row, the second dimension - 1 - a column).
We can also do the assignment:
Var people \u003d [["Tom", 25, false], ["Bill", 38, true], ["Alice", 21, false]]; people \u003d 56; // assign a separate value console.log (people); // 56 people \u003d ["Bob", 29, false]; // assign an array console.log (people); // Bob
When creating multidimensional arrays, we are not limited to only two-dimensional ones, but we can also use arrays of large dimensions:
Var numbers \u003d; numbers \u003d; // now numbers is a two-dimensional array numbers \u003d; // now numbers is a three-dimensional array numbers \u003d 5; // the first element of the 3D array is 5 console.log (numbers);