[JAVASCRIPT] - 배열 1 (배열과 배열의 메서드)

let arr = ['사자','호랑이','토끼','코끼리']

배열은 여러개의 값을 순차적으로 나열한 구조!

👉🏻 배열이 가지고 있는 값 : 요소 (element)

👉🏻 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다 , 대부분의 프로그래밍 언어에서 인덱스는 0부터 시작

arr[0]        // -> 사자
arr[1]        // -> 호랑이

요소에 접근 할때는 대괄호 표기법을 사용, 대괄호 내에 접근하고 싶은 요소의 인덱스를 지정!

📌 자바스크립트 배열은 객체 타입 -> object

for (let i =0; i<arr.length; i++){
    console.log(arr[i])}

순차적으로 요소에 접근하는 것도 가능

역순으로 요소에 접근하는 것도 가능

📌 .length를 통해서 길이를 측정할수 있기때문에 가능한 일

---

<배열의 메서드>

📓 Array.of

Arry.of(1)

Arry.of('원숭이')

👉🏻 전달된 인수를 요소를 갖는 배열을 생성한다.

---

📓 Array.from

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

👉🏻 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

---

📓 Array.isArray

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

👉🏻 전달된 인수가 배열이면 true , 배열이 아니면 false

---

📓 Array.prototype.indexOf

let beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

arr.indexOf(searchElement[, fromIndex])

📌searchElement
배열에서 찾을 요소입니다.

📌 fromIndex Optional
검색을 시작할 색인입니다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않습니다. 제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용됩니다. 참고 : 제공된 색인이 음수이면 배열은 여전히 앞에서 뒤로 검색됩니다. 계산 된 인덱스가 0보다 작 으면 전체 배열이 검색됩니다. 기본값 : 0 (전체 배열 검색).

📌 반환 값
배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.

• 원본 베열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다
• 원본배열에 인수로 전달한 요소와 중복되는 요소가 있다면 첫번째 검색된 요소의 인덱스 반환
• 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환
• 배열에 특정요소가 존재하는지 확인할때 유용

---

📓 Array.prototype.push

let animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

arr.push(element1[, ...[, elementN]])  //elementN (배열의 끝에 추가할 요소.)

👉🏻 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가

👉🏻 원본배열을 직접 변경한다

🖍 es6스프레드 문법 대체 🖍

let arr = [1,2];

let newarr = [...arr,3];
console.log(newarr) //[1,2,3]

---

📓 Array.prototype.pop

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

👉🏻 원본배열에서 마지막 요소를 제거한 요소를 반환한다.

👉🏻 원본배열이 빈 배열이면 undifined

👉🏻 원본 배열을 직접 변경한다.

---

📓 Array.prototype.unshift

let array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5 :array1.length

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

👉🏻 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고, 변경된 길이 값을 반환한다.

👉🏻 원본 배열을 직접 변경한다.

🖍 es6스프레드 문법 대체 🖍

let arr = [1,2];

let newarr = [3, ...arr];
console.log(newarr) //[3,1,2]

---

📓 Array.prototype.shift

let array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

👉🏻 원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다

👉🏻 원본 배열을 직접 변경한다.

👉🏻 빈 배열인 경우 undifined

📌 shift 와 push 를 사용하면 큐를 쉽게 구현 할수 있다.

• 큐 : 데이터를 마지막에 밀어 넣고 처음 데이터를 꺼내는 선입출 방식의 자료 구조

---

📓 Array.prototype.concat

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

console.log(array1);
//expected output: Array ["a", "b", "c"] 원본배열은 변경되지 않는다 

👉🏻 인수로 전달된 값들을 원본 배열에 마지막에 추가한 새로운 배열을 반환한다. (원본배열은 변경되지 않음)

👉🏻 push , unshift 메서드는 원본 배열을 직접 변경하지만 concat 메서드는 새로운 배열로 반환한다. 따라서 push , unshift 메서드는 원본배열을 변수에 저장해둬야 하며 concat 메서드는 반환값을 변수에 할당 받아야 한다.

🖍 es6스프레드 문법 대체 🖍

let result = [...[1,2],...[3,4]];

console.log(result) //[1,2,3,4]

---

📓 Array.prototype.splice

let arr =[1,2,3,4]

let result = arr.splice(1,2,20) //원본 배열의 인덱스 1부터 2개의 요소를 제거하고 새로운 요소 20을 삽입한다

console.log(arr); //[1,20,4]
console.log(result); // [2]

let result2 = arr.splice(1,0,100) //원본 배열의 인덱스 1부터 0개의 요소를 제거하고 새로운 요소 100을 삽입한다 // 그냥 삭제하는 것도 가능

console.log(arr); //[1,100,20,4]
console.log(result); // []

let index = arr.indexOf(100) // 원본 배열에 100의 인덱스 번호를 변수에 지정
let result3 = arr.splice(index,1) // 

console.log(arr); //[1,20,4]

👉🏻 원본 배열의 중간에 요소를 추가 하거나 중간에 있는 요소를 제거하는 경우에 사용

👉🏻 3개의 매개변수가 있으며 원본 배열을 직접 변경 한다.

👉🏻 아무값도 제거하지 않았으면 빈 배열을 반환

👉🏻 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

📌 start : 원본 배열의 요소를 제거하기 시작할 인덱스로 시작만 지정하면 시작부터 모든 요소를 제거 한다.

• 음수인 경우 배열의 끝에서 인덱스를 나타낸다 (원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음)

📌 deleteCount Optional : 배열에서 제거할 요소의 개수이다.

• deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다
• deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

📌 item1, item2, ... Optional : 배열에 추가할 요소입니다.

👉🏻 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

---

📓 Array.prototype.slice

let arr = [1,2,3]

//엔드값은 미포함
arr.slice(0,2)     // [1,2]
arr.slice()     //[1,2,3] 원본을 그대로 복사~

👉🏻 인수로 전달된 범위의 요소들을 복사해서 배열로 반환한다

👉🏻 원본배열은 변경되지 않는다

👉🏻 splice는 원본을 변경 / slice는 원본 변경 안함

arr.slice([start[, end]])

📌 start : 복사를 시작할 인덱스, 음수인 경우 배열의 끝에서 인덱스를 나타냄

📌 end : 복사를 종료할 인덱스, 생략 가능함, 기본적으로 배열의 길이로 설정 되어있음!

---

📓 Array.prototype.join

let arr =[1,2,3,4]
arr.join();     //'1,2,3,4'
arr.join('')    //'1234'
arr.ji=oin(':')     //'1:2:3:4'

👉🏻 원본 배열의 모든 요소를 문자열로 변환하여, 인수로 전달받은 문자열 (구분자)로 연결한 문자열을 받는다 ( 구분자는 생략이 가능하며 기본구분자는 ,)

---

📓 Array.prototype.reverse

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

console.log(arr) // [4,3,2,1]
console.log(result) // [4,3,2,1]

👉🏻 원본배열의 순서를 반대로 뒤집는다

👉🏻 원본배열은 변경되고, 반환값은 변경된 배열이다.

---

📓 Array.prototype.fill

let arr =[1,2,3,4,5]

console.log(arr.fill(0)); // [0,0,0,0,0]
console.log(arr.fill(0,1,3) //[1,0,0,4,5]

👉🏻 인수로 전달 받은 값을 배열의 첫번째 부터 끝까지 채운다

👉🏻 원본 배열이 변경 된다.

arr.fill(value[, start[, end]])

📌 value : 배열을 채울 값

📌 start : 시작 인덱스 (기본은 0)

📌 end : 끝 인덱스 (기본은 .length)

👉🏻 모든요소를 하나의 값으로만 채울 수 밖에 없다.

📌 단점을 보완할 수 있는 코드

let arr = (length = 0) => Array.from({length} ,(_,i) =>i); //인수로 전달받은 정수만큼 요소를 생성하고 0부터 1씩 증가하면서 요소를 채운다 

console.log(arr(3)) //[0,1,2]

---

📓 Array.prototype.includes

let arr =[1,2,3,4,5]

arr.includes(4) // true
arr.includes(1,1) //false

arr.includes(valueToFind[, fromIndex])

👉🏻 배열 내에 특정요소가 포함 되어있는지 확인하여 true 또는 false 로 반환

👉🏻 fromIndex가 배열의 길이보다 큰경우 false

📌 문자나 문자열을 비교할때 대소문자를 구분 한다

---

📓 Array.prototype.flat

//중첩 배열의 평탄화 
let arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

👉🏻 인수로 전달한 깊이 만큼 재귀적으로 배열을 평탄화 한다.
👉🏻 인수를 생략할 경우 기본값은 1이다
👉🏻 인수를 Infinity로 전달하면 중첩 배열 모두 평탄화한다.