Introduction to Array.prototype of JavaScript

March 25, 2021
Programming
Web JavaScript

Learn about Array.prototype of JavaScript.

Overview

I forgot how to use JavaScript's Array.prototype methods, so i'll re-learn it. Fortunately, MDN is kind enough to explain Array.prototype.

Array.prototype.concat()

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

let zeon = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'Zeon', code: 'MS-07B', name: 'GOUF' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];
let eff = [
  { nation: 'E.F.F.', code: 'RX-75-4', name: 'GUNTANK' },
  { nation: 'E.F.F.', code: 'RX-77-2', name: 'GUNCANNON' },
  { nation: 'E.F.F.', code: 'MS-78-2', name: 'GUNDAM' }
];

let mobilesuits = zeon.concat(eff);
console.log(mobilesuits);

Result:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

[
    {
        "nation": "Zeon",
        "code": "MS-06F",
        "name": "ZAKU II"
    },
    {
        "nation": "Zeon",
        "code": "MS-07B",
        "name": "GOUF"
    },
    {
        "nation": "Zeon",
        "code": "MS-09",
        "name": "DOM"
    },
    {
        "nation": "E.F.F.",
        "code": "RX-75-4",
        "name": "GUNTANK"
    },
    {
        "nation": "E.F.F.",
        "code": "RX-77-2",
        "name": "GUNCANNON"
    },
    {
        "nation": "E.F.F.",
        "code": "MS-78-2",
        "name": "GUNDAM"
    }
]

Array.prototype.every()

The every() returns true if all elements in the array passed the condition, and false otherwise.

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let mobilesuits = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'Zeon', code: 'MS-07B', name: 'GOUF' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];

let result = mobilesuits.every(function isZeon(element, index, array) {
  return element.nation == 'Zeon';
});
console.log(result);

Result:

1

true

Array.prototype.filter()

The filter() returns new array which contain elements that passed the condition in the array. If it passed none, return an empty array otherwise.

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let mobilesuits = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'E.F.F.', code: 'RX-77-2', name: 'GUNCANNON' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];

let result = mobilesuits.filter(function isZeon(element, index, array) {
  return element.nation == 'Zeon';
});
console.log(result.length);

Result:

1

2

Array.prototype.find()

The find() returns the first element that matches the condition. If matched element is nothing, it returns undefined.

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let mobilesuits = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'E.F.F.', code: 'RX-77-2', name: 'GUNCANNON' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];

let result = mobilesuits.filter(function isZeon(element, index, array) {
  return element.nation == 'Zeon';
});
console.log(result.name);

Result:

1

ZAKU II

Array.prototype.flat()

Example:

Code:

1
2

let mobilesuits = [[ 'ZAKU II', 'GOUF', 'DOM' ], [ 'GUNTANK', 'GUNCANNON', 'GUNDAM' ]];
console.log(mobilesuits.flat());

Result:

1

["ZAKU II", "GOUF", "DOM", "GUNTANK", "GUNCANNON", "GUNDAM"]

Array.prototype.flatMap()

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

let zeon = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'Zeon', code: 'MS-07B', name: 'GOUF' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];
let eff = [
  { nation: 'E.F.F.', code: 'RX-75-4', name: 'GUNTANK' },
  { nation: 'E.F.F.', code: 'RX-77-2', name: 'GUNCANNON' },
  { nation: 'E.F.F.', code: 'MS-78-2', name: 'GUNDAM' }
];
let mobilesuits = zeon.concat(eff);
let names = mobilesuits.flatMap(function (mobilesuit) {
  return mobilesuit.name;
})
console.log(names);

Result:

1

["ZAKU II", "GOUF", "DOM", "GUNTANK", "GUNCANNON", "GUNDAM"]

Array.prototype.forEach()

Example 1:

Code:

1
2
3
4
5
6
7

let elements = ['a', 'b', 'c',];
elements.forEach(function (element) {
  if (element == 'b') {
    break;
  }
  console.log(element);
})

Result:

1
2
3

a
b
c

Example 2:

Array.prototype.forEach() provide index.

Code:

1
2
3
4

let elements = ['a', 'b', 'c',];
elements.forEach(function (element, index) {
  console.log('elements[' + index + '] = ' + element)
})

Result:

1
2
3

"elements[0] = a"
"elements[1] = b"
"elements[2] = c"

Example 3:

Array.prototype.forEach() skip uninitialized value in array.

Code:

1
2
3
4

let elements = ['a', 'b',, 'd',];
elements.forEach(function (element) {
  console.log(element);
})

Result:

1
2
3

a
b
d

So, skip index of uninitialized value.

Code:

1
2
3
4

let elements = ['a', 'b',, 'd',];
elements.forEach(function (element, index) {
  console.log('elements[' + index + '] = ' + element)
})

Result:

1
2
3

"elements[0] = a"
"elements[1] = b"
"elements[3] = d"

Example 4:

Array.prototype.forEach() doesn't support break and continue.

Code:

1
2
3
4
5
6
7

let elements = ['a', 'b',, 'd',];
elements.forEach(function (element) {
  if (element == 'b') {
    break;
  }
  console.log(element);
})

Result:

1

Uncaught SyntaxError: Illegal break statement

Array.prototype.includes()

Example:

Code:

1
2

const mobilesuits = ['ZAKU', 'GUFU', 'DOM'];
console.log(mobilesuits.includes('GUFU'));

Result:

1

true

Array.prototype.indexOf()

Example:

Code:

1
2
3

let mobilesuits = ["ZAKU II", "GUNCANNON", "DOM"];
let result = mobilesuits.indexOf('GUNCANNON');
console.log(result);

Result:

1

1

Array.prototype.join()

Example:

Code:

1
2
3
4
5
6

let elements = ['Katsu', 'Retsu', 'Kikka'];

console.log(elements.join());
console.log(elements.join(''));
console.log(elements.join(', '));
console.log(elements.join('-'));

Result:

1
2
3
4

"Katsu,Retsu,Kikka"
"KatsuRetsuKikka"
"Katsu, Retsu, Kikka"
"Katsu/Retsu/Kikka"

Array.prototype.map()

Example:

Code:

1
2
3
4
5
6
7

const mobilesuits = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'E.F.F.', code: 'RX-77-2', name: 'GUNCANNON' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];
const code = mobilesuits.map(x => x.name);
console.log(code);

Result:

1

["MS-06F", "RX-77-2", "MS-09"]

Array.prototype.pop()

The pop() removes the last element of the array. Then, it returns the deleted element. Also, the array is changed by the method.

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let mobilesuits = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'E.F.F.', code: 'RX-77-2', name: 'GUNCANNON' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];

let element = mobilesuits.pop();

console.log(element.name);
console.log(mobilesuits.length);

Result:

1

2

Array.prototype.push()

Example:

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let mobilesuits = [
  { nation: 'Zeon', code: 'MS-06F', name: 'ZAKU II' },
  { nation: 'Zeon', code: 'MS-09', name: 'DOM' }
];

let gofu = { nation: 'Zeon', code: 'MS-07B', name: 'GOUF' };
let newLength = mobilesuits.push(gofu);

console.log(newLength);
console.log(mobilesuits.length);

Result:

1
2

3
3

Array.prototype.some()

Example:

Code:

1
2

const array = [3, 4, 5];
console.log(array.some(element => element % 2 === 0));

Result:

1

true

Conclusion

mumumu……
I have no confidence to keep up skill of JavaScript…

当サイトでは利便性向上のために外部サービスにクッキー(Cookie)を送信します。
詳しくはプライバシーポリシーをご参照ください。