JavaScript - Arrays

Looping Array Elements

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

• Banana
• Orange
• Apple
• Mango

Array.forEach()

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

 

 

 

 

Adding Array Elements

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Banana,Orange,Apple,Lemon

 

 

 

Associative Arrays

JavaScript는 명명된 인덱스가 있는 배열을 지원 하지 않습니다 .

JavaScript에서 배열 은 항상 번호가 매겨진 인덱스 를 사용합니다.

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

undefined 0

 

 

 

배열과 객체의 차이점

JavaScript에서 배열 은 번호가 매겨진 인덱스 를 사용 합니다 . 

JavaScript에서 개체 는 명명된 인덱스 를 사용합니다 .

 

 

 

 

JavaScript new Array()

JavaScript has a built-in array constructor new Array().

But you can safely use [] instead.

 

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

40

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

 

A Common Error

const points = [40];

is not the same as:

const points = new Array(40);

<p id="demo"></p>

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

40

 

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

undefined

 

 

JavaScript Array Methods

toStrings()

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

Banana,Orange,Apple,Mango

 

join()

It behaves just like toString(), but in addition you can specify the separator:

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

 Banana * Orange * Apple * Mango

 

 

pop()

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

Banana,Orange,Apple,Mango
Banana,Orange,Apple

 

 

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

Mango
Banana,Orange,Apple

 

 

 

push()

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

Banana,Orange,Apple,Mango,Kiwi

 

 

delete()

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

The first fruit is: Banana
The first fruit is: undefined

 

concat()

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

Cecilie,Lone,Emil,Tobias,Linus

 

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Cecilie,Lone,Emil,Tobias,Linus,Robin,Morgan

 

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

Emil,Tobias,Linus,Peter

 

 

 

splice()

이 splice()메서드는 배열에 새 항목을 추가하는 데 사용할 수 있습니다.

첫 번째 매개변수(2)는 새 요소를 추가 (연결) 해야 하는 위치 를 정의합니다.

두 번째 매개변수(0)는 제거 해야 하는 요소 수를 정의합니다 .

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

Banana,Orange,Apple,Mango
Banana,Orange,Lemon,Kiwi,Apple,Mango

 

 

 

slice()

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

Banana,Orange,Lemon,Apple,Mango

Orange,Lemon,Apple,Mango

 

 

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

Banana,Orange,Lemon,Apple,Mango

Orange,Lemon