Cara menggunakan javascript multiple array values

Question

Summary: in this tutorial, you will learn how to work with a JavaScript multidimensional array and manipulate its elements effectively.

Table of Contents Show

Introduction to JavaScript multidimensional array
Adding elements to the JavaScript multidimensional array
Removing elements from the JavaScript multidimensional array
Iterating over elements of the JavaScript multidimensional array

Introduction to JavaScript multidimensional array

JavaScript does not provide the multidimensional array natively. However, you can create a multidimensional array by defining an array of elements, where each element is also another array.

For this reason, we can say that a JavaScript multidimensional array is an array of arrays. The easiest way to define a multidimensional array is to use the array literal notation.

To declare an empty multidimensional array, you use the same syntax as declaring one-dimensional array:

let activities = [];
Code language: JavaScript (javascript)

The following example defines a two-dimensional array named

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

9:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

In the

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

9 array, the first dimension represents the activity and the second one shows the number of hours spent per day for each.

To show the

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

9 array in the console, you use the

console.table(activities);



Code language: JavaScript (javascript)

2 method as follows:

console.table(activities);
Code language: JavaScript (javascript)

The following illustrates the output:

┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ └─────────┴─────────────┴───┘

Code language: plaintext (plaintext)

Note that the

console.table(activities);
Code language: JavaScript (javascript)

3 column is for the illustration that indicates the indices of the inner array.

To access an element of the multidimensional array, you first use square brackets to access an element of the outer array that returns an inner array; and then use another square bracket to access the element of the inner array.

The following example returns the second element of the first inner array in the

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

9 array above:

console.log(activities[0][1]); // 9
Code language: JavaScript (javascript)

Adding elements to the JavaScript multidimensional array

You can use the Array methods such as

console.table(activities);
Code language: JavaScript (javascript)

5 and

console.table(activities);



Code language: JavaScript (javascript)

6 to manipulate elements of a multidimensional array.

For example, to add a new element at the end of the multidimensional array, you use the

console.table(activities);
Code language: JavaScript (javascript)

5 method as follows:

activities.push(['Study',2]);

console.table(activities);
Code language: CSS (css)

┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ │ 5 │ 'Study' │ 2 │ └─────────┴─────────────┴───┘

Code language: plaintext (plaintext)

To insert an element in the middle of the array, you use the

console.table(activities);
Code language: JavaScript (javascript)

8 method. The following inserts an element in the second position of the activities array:

activities.splice(1, 0, ['Programming', 2]);

console.table(activities);
Code language: CSS (css)

Here is the output:

┌─────────┬───────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼───────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Programming' │ 2 │ │ 2 │ 'Eat' │ 1 │ │ 3 │ 'Commute' │ 2 │ │ 4 │ 'Play Game' │ 1 │ │ 5 │ 'Sleep' │ 7 │ │ 6 │ 'Study' │ 2 │ └─────────┴───────────────┴───┘

Code language: plaintext (plaintext)

This example calculates the percentage of the hours spent on each activity and appends the percentage to the inner array.

activities.forEach(activity => {
    let percentage = ((activity[1] / 24) * 100).toFixed();
    activity[2] = percentage + '%';
});

console.table(activities);



Code language: JavaScript (javascript)

The following shows the output in the console:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

0

Removing elements from the JavaScript multidimensional array

To remove an element from an array, you use the

console.table(activities);
Code language: JavaScript (javascript)

9 or

console.table(activities);
Code language: JavaScript (javascript)

8 method.

For example, the following statement removes the last element of the

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

9 array.

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

1

Output:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

2

Similarly, you can remove the elements from the inner array of the multidimensional array by using the

console.table(activities);
Code language: JavaScript (javascript)

9 method. The following example removes the percentage element from the inner arrays of the

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];



Code language: JavaScript (javascript)

9 array.

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

3

Output:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

4

Iterating over elements of the JavaScript multidimensional array

To iterate a multidimensional array, you use a nested for loop as in the following example.

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

5

The first loop iterates over the elements of the outer array and the nested loop iterates over elements of the inner array.

The following shows the output of the script in the console:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

6

Or you can use the

┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ └─────────┴─────────────┴───┘

Code language: plaintext (plaintext)

4 method twice:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)

7

Output:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];
Code language: JavaScript (javascript)