[Javascript] 과제: 배열

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays

Test your skills: Arrays - Learn web development | MDN

 

 

배열 정리

배열 그림으로

배열은 리스트와 거의 같다고 생각하시면 돼요.

배열을 활용하는 경우 많은 함수(메서드)를 사용할 수 있는데 그중에서도 중요한 함수 네 가지 정리하려고 합니다.

기본적인 배열이 있는 경우 위의 그림처럼 네 가지의 함수를 통해서 배열 안의 원소를 넣을 수도 그리고 뺄 수도 있어요.

앞에서 넣는 함수 unshift, 앞에서 빼는 함수를 shift, 뒤에서 넣는 함수 push, 뒤에서 빼는 함수 pop이 있습니다.

unshift와 push는 괄호 안에 꼭 한 개 이상의 원소가 들어가야 합니다.

var myArr = ['one', 'two'];
  myArr.push('three');
  myArr; // ['one', 'two', 'three']
  myArr.unshift('zero');
  myArr; // ['zero', 'one', 'two', 'three']

 

목차

• Array1
• Array2
• Array3
• Array4

Array 1

myArrary라고 하는  배열을 생성한 뒤에 세 개의 원소를 넣습니다. (아무 원소나 넣어도 됩니다.) 그런 뒤에 첫 두 원소를 []를 사용해서 수정해보세요. 그러고 나서 배열의 앞부분에 새로운 원소를 넣어보세요.

 

코드

// Add your code here
const myArray = ['one', 'two', 'three'];
myArray[0] = '일';
myArray[1] = '이';
myArray.unshift('영');

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
para1.textContent = `Array: ${ myArray }`;

section.appendChild(para1);

 

결과

Array: 영,일,이,three

 

Array 2

이 문제에서는 작업하기 위한 문자열이 주어집니다.

1. 다음의 문자열을 + 문자를 제거한 배열로 바꿔 보세요. 이를 myArrary에 저장하세요.
2. 배열의 길이를 arrayLength 변수에 저장하세요.
3. 배열의 마지막 원소를 lastIteml 변수에 저장하세요.

코드

// Add your code here

let myString = 'Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri';
myArray = myString.split('+');
arrayLength = myArray.length;
lastItem = myArray[arrayLength -1];

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
para1.textContent = `Array: ${ myArray }`;

let para2 = document.createElement('p');
para2.textContent = `The length of the array is ${ arrayLength }.`;

let para3 = document.createElement('p');
para3.textContent = `The last item in the array is "${ lastItem }".`;

section.appendChild(para1);
section.appendChild(para2);
section.appendChild(para3);

 

결과

Array: Ryu,Ken,Chun-Li,Cammy,Guile,Sakura,Sagat,Juri

The length of the array is 8.

The last item in the array is "Juri".

Array 3

이번 문제에서는 배열이 주어집니다. 그러고 나서 반대 방향으로 작업해야 합니다. 이는 다음과 같습니다.

1. 배열의 마지막 원소를 제거합니다.
2. 배열의 끝부분에 새로운 이름을 가진 두 원소를 넣습니다.
3. Ryu (0) 와 같이 모든 원소에 인덱스 숫자를 같이 넣습니다. (배열 단원에서 가르쳐주지 않은 부분이 있어 추가적으로 검색해서 해야합니다.)
4. 마지막으로 "-"를 구분자로 넣은 뒤 myString이라는 문자열에 하나로 합쳐 저장합니다.

코드

let myArray = [ "Ryu", "Ken", "Chun-Li", "Cammy", "Guile", "Sakura", "Sagat", "Juri" ];

// Add your code here
    myArray.pop();
    myArray.push("Kim", "Park");
    let arrLength = myArray.length;
    for (i = 0; i <= arrLength-1; i++) {
      myArray[i] = `${myArray[i]} (${i})`;
    }
    const myString = myArray.join("-");

// Don't edit the code below here!

section.innerHTML = ' ';

let para1 = document.createElement('p');
para1.textContent = myString;

section.appendChild(para1);

결과

Ryu (0)-Ken (1)-Chun-Li (2)-Cammy (3)-Guile (4)-Sakura (5)-Sagat (6)-Kim (7)-Park (8)

Array 4

이 문제에서는 몇몇의 새들의 이름이 담긴 배열이 주어집니다.

• "Eagles"의 인덱스를 찾아서 배열에 없애세요.
• eBirds라는 새로운 이름을 갖는 배열을 생성하고 원래의 배열에 "E"로 시작되는 원소만 넣어주세요. startWith()는 첫 문자로 들어가는 원소를 찾을 때 유용합니다.

여기에 splice라는 메서드는 splice(제거할 인덱스, 순서대로 제거할 원소 개수) 입니다. splice(제거할 인덱스)만 적으면 제거할 인덱스보다 높은 원소가 모두 제거됩니다.

filter 안에는 함수가 들어가야 하기에 불가피하게 배우지 않은 부분을 넣었습니다. for문이랑 조건문을 합친 경우라고 생각하시면 돼요. birds라는 배열 안에 있는 임의의 원소 bird가 "E"로 시작한다면 eBirds라는 배열에 저장됩니다.

코드

const birds = [ "Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets" ];

// Add your code here
birds.splice(birds.indexOf("Eagles"), 1);
eBirds = birds.filter((bird) => bird.startsWith("E"));

// Don't edit the code below here!

section.innerHTML = ' ';

const para1 = document.createElement('p');
para1.textContent = eBirds;

section.appendChild(para1);

 

결과

Emus,Egrets

 

 

오류 있으면 댓글 남겨 주세요! 감사합니다!