자바스크립트 자료구조와 자료형3

1. 배열과 메서드

앞에서 다뤘던 push, pop, shift,unshift를 제외하고 서술함

 

1.1 splice

배열에서 요소 하나만 지울때는 delete를 사용할 수 도 있음

예시

let arr = ["I", "go", "home"];

delete arr[1]; // "go"를 삭제

alert( arr[1] ); // undefined

// delete를 써서 요소를 지우고 난 후 배열 --> arr = ["I",  , "home"];
alert( arr.length ); // 3

delete로 요소를 지웠지만 배열의 요소는 그대로 3개이다.

delete는 해당 키에 상응하는 값을 지우는 역할이지 배열 자체를 지우는 역할이 아님

배열 그 자체를 지우거나 추가,삭제,교체 등을 하려면 splice를 하면됨

문법

arr.splice(index[, deleteCount, elem1, ..., elemN])

첫번째 파라미터는 인덱스 두번째는 지울 요소의 개수 그 다음은 배열에 추가할 요소

 

삭제 예시

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거

alert( arr ); // ["I", "JavaScript"]

 

세개를 지우고 그 자리를 다른 두 요소로 교체

예시

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체함
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

 

splice 메서드의 지울 숫자를 0으로 만들면 요소를 제거하지 않으면서 새로운 요소로 추가할 수 있음

예시

let arr = ["I", "study", "JavaScript"];

// 인덱스 2부터
// 0개의 요소를 삭제함
// 그 후, "complex"와 "language"를 추가함
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

 

음수 인덱스도 사용가능함

대신 배열의 끝에서부터 세아려서 요소 위치를 나타냄

예시

let arr = [1, 2, 5];

// 인덱스 -1부터 (배열 끝에서부터 첫 번째 요소)
// 0개의 요소를 삭제하고
// 3과 4를 추가함
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

 

1.2 forEach

arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌

문법

arr.forEach(function(item, index, array) {
  // 요소에 무언가를 할 수 있음
});

// for each element call alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
//매열 내부 요소를 전부 얼럿창을 통해 출력해줌

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});
//인덱스 정보까지 더해서 출력해주는 코드

 

2. 배열 탐색

배열 내에서 무언가 찾고 싶을 때 쓰는 메서드

indexOf, includes

위 두가지는 문법이 동일 하고 하는 일도 같음

연산 대상이 문자열이 아닌 배열 요소라는 점만 다름

 

indexOf

arr.indexOf(item, from)는 인덱스 from부터 시작해 item(요소)을 찾음

요소를 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환함

 

includes

arr.includes(item, from)는 인덱스 from부터 시작해 item이 있는지를 검색하는데, 해당하는 요소를 발견하면 true를 반환함

 

예시

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

 

위 메서드들은 요소를 찾을 때 완전 항등 연산자(===)을 사용함

false를 검색하면 정확히 false만 검색하지 0을 검색하진 않음

 

 

find, findIndex

객체로 이루어진 배열이 있을 때 특정 조건에 부합하는 객체를 배열내에서 찾고 싶을 때 사용함

문법

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환함
  // 조건에 해당하는 요소가 없으면 undefined를 반환함
});

요소 전체를 대상으로 함수가 순차적으로 호출됨

item – 함수를 호출할 요소

index – 요소의 인덱스

array – 배열 자기 자신

 

함수가 참을 반환하면 탐색은 중단되고 해당 요소가 반환됨

원하는 요소를 찾기 못했으면 undefined가 반환됨

 

id와 name 프로퍼티를 가진 사용자 객체로 구성된 배열을 예로듬

배열 내에서 id == 1 조건을 충족하는 사용자 객체를 찾고싶음

예시

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

arr.findIndex는 find 와 동일한 일을 하지만

조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스롤 반환 한다는 점이다름

조건에 맞는 요소가 없으면 -1이 반환됨

 

filter

위에서 이야기했던 find는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾음

조건을 충족하는 요소가 여러 개라면 arr.filter를 사용하면됨

문법

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해짐
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됨
});

filter는 find와 문법이 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환함

예시

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환함
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

 

3. 배열 변형 메서드

map

map은 배열 요소 전체를 대상으로 함수를 호출하고 함수 호출 결과를 배열로 반환해줌

문법

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환함
});

예시

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6
문자열 길이를 반환함

 

sort

arr.sort()는 배열 요소를 정렬해줌 -> 배열 자체가 변경됨

예시

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됨
arr.sort();

alert( arr );  // 1, 15, 2

위 예시에서 기대대로 정렬이 되었으면 1, 2, 15가 나왔어야 정상인데

위 결과 처럼 나온 이유는 요소가 문자열로 취급되어 재 정렬되기 때문

문자열 비교는 사전편집 순으로 진행되기 때문에 2는 15보다 큰값으로 취급됨

기본 정렬 기준 대신 새로운 정렬 기준을 만들려면 새로운 함수를 넘겨줘야 함

넘겨주는 함수는 반드시 값 두개를 비교해야 하고 반환 값도 있어야 함

예시

function compare(a, b) {
  if (a > b) return 1; // 첫 번째 값이 두 번째 값보다 큰 경우
  if (a == b) return 0; // 두 값이 같은 경우
  if (a < b) return -1; //  첫 번째 값이 두 번째 값보다 작은 경우
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr); //1, 2, 15

 

reverse

 

arrd요소를 역순으로 정렬시켜주는 메서드

예시

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

 

split,join

 

split은 입력받은 문자열을 배열로 바꿀 때 사용

구분자 기준으로 문자열을 쪼개줌

예시

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // Bilbo에게 보내는 메시지
}

 

split은 두 번째 인수로 숫자를 받을 수 있음

숫자는 배열의 길이를 제한해줌 -> 길이를 넘어서는 요소를 무시

예시

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

 

글자단위로도 분리할 수 있음

예시

let str = "test";

alert( str.split('') ); // t,e,s,t

 

join은 split과 반대 역할을 하는 메서드임

배열 요소를 모두 합친 후 하나의 문자열을 만들어줌

예시

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(','); // 배열 요소 모두를 ,를 사용해 하나의 문자열로 합침

alert( str ); // Bilbo,Gandalf,Nazgul