JavaScript(6)

배열

다양한 타입의 데이터를 보관하는 하나의 묶음. 자료형 지정이 없어 모든 자료형 데이터로 저장가능

모든 자료형 (숫자, 문자열, 함수, Boolean, undefined, 객체)

let 변수 명 = [값1(숫자), 값2(문자), 값3(객체), 함수....]

* 변수라는 화물들을 배열라는 기차에 차례차례 순서대로 칸에 넣는 다고 생각하면 된다 *

변수

배열
1	2	3	4	5
arr [0]	arr [1]	arr [2]	arr [3]	arr [4]

배열의 장점

연관된 데이터 관리 가능
가독성이 좋아짐
코드량 감소
유지보수 용이

function plus(a,b) { return a+b;}

function minus(a,b) { return a-b;}

function multiple(a,b) { return a*b;}

// 위에 코드들을 아래처럼 표현할 수 있다.

function calculator(a,b) {reutn [a+b, a-b, a*b];}

</script>

배열 선언

값(리터럴)로 선언하는 방법과 생성자 (new Array)를 사용하여 선언하는 방법이 있음.

<h1>자바스크립트의 배열</h1>

<p>

배열에 다수의 자료형을 보관할 수 있음.<br>

인덱스 번호(등번호)로 각 변수를 관리, 0부터 시작<br>

길이 제한이 없고, 자동으로 증가함.

</p>

// 1. 리터럴(값)로 선언하기

let arr = [];

let arr2 = ['해','달','별','구름'];

// 2. 생성자로 선언하기

let arr3 = new Array();

let arr4 = new Array(4);

let arr5 = new Array('나비','벌','무당벌레');

console.log(arr);

console.log(typeof arr);

console.log(Array.isArray(arr2));

console.log(Array.isArray({}));

</script>

배열에 값 대입

값 입력시 index번호 활용 *번호 범위 0 ~ (지정크기 -1)

배열에 값 대입 : 배열 [첨자] = 값;

변수에 배열 값 대입 : 변수 = 배열 [첨자];

<p>

선언된 배열에 인덱스로 대입하면 됩니다.

자료형에 상관없이 저장할 수 있음.

</p>

arr[0] = 100;

arr[1] = '김가남';

arr[2] = true;

arr[3] = function(){};

arr[4] = {};

arr[5] = [];

console.log(arr);

</script>

배열의 사용

값 출력시 index번호와 반복문 활용 *번호 범위 : 0 ~ (지정 크기 -1)

배열명.length

배열의 길이, 반복문의 조건식에 주로 활용

//배열의 길이

console.log(arr.length);

//반복문을 이용해서 출력하기

for(let i = 0 ; i < arr.length ; i++){

if(typeof arr[i] === 'object'){

if(Array.isArray(arr[i])){

console.log(arr[i],'array');

} else{

console.log(arr[i], typeof arr[i]);

}

} else{

console.log(arr[i], typeof arr[i]);

}

</script>

배열의 함수

Array 도 하나의 객체이기 때문에 배열에서 활용할 수 있는 함수가 있음

이름	설명
배열명.indexOf("값")	배열에서 요소가 위치한 인덱스 리턴
배열명.concat(배열명)	두 개 또는 세 개의 배열 끼리 결합
배열명.join()	배열을 결합하고 문자열로 반환
배열명.push('값')	배열의 맨 뒤에 요소 추가
배열명.unshift('값')	배열의 앞에 새로운 요소 추가
배열명.splice([index],제거 수, 추가값)	배열의 index 위치의 요소 제거, 추가
배열명.shift()	배열에서 첫번째 요소 제거
배열명.pop()	배열의 맨 뒤에 요소 제거
배열명.reverse()	배열의 순서를 뒤집음
배열명.sort()	배열을 내림차순/오름차순 정렬
배열명.slice()	배열의 요소 선택 잘라내기
배열명.toString()	배열을 문자열로 반환

indexOf

<h3>indexOf('찾을값')</h3>

<p>매개변수로 전달된 값과 일치하는 요소를 찾아 인덱스 번호를 반환</p>

let name = ['철수','영희','길동'];

console.log(name.indexOf('철수'));

console.log(name.indexOf('개똥'));

</script>

concat

<h3>concat() : 두개 이상의 배열을 합쳐주는 함수</h3>

let student = ['tom','json','maria','my'];

let newStudent = ['amy','jacob'];

let result = student.concat(newStudent);

console.log(result);

</script>

join

<h3>join() : 배열을 특정구문자 기준으로 문자열로 변환해주는 함수</h3>

result = student.join('/');

console.log(result,typeof result);

</script>

reverse

<h3>reverse() : 배열의 순서를 반대로 변경해주는 것</h3>

console.log(student);

student.reverse();

console.log(student);

</script>

push

console.log(student);

student.push('ruby');

console.log(student);

</script>

pop

console.log(student);

student.pop();

console.log(student);

</script>

shift

<h4>shift() : 0번 인덱스의 값을 삭제하는 함수</h4>

console.log(student);

student.shift();

console.log(student);

</script>

unshift

<h4>unshift() : 0번 인덱스에 값을 추가하는 함수</h4>

console.log(student);

student.unshift('java');

console.log(student);

</script>

includes

<h4>includes() : 배열에 매개변수로 전달된 값이 있는지 확인</h4>

student = ['tom','json','maria','my'];

console.log(student.includes('maria'));

if(student.includes('maria')){

let i = student.indexOf('maria');

console.log(i);

} else{

console.log('없다!!');

}

</script>

find

<p>배열명.find(function(element,index,array){});</p>

let nums = [333,2376,896,55];

//2000이상인 값을 찾고 싶다!!

result = nums.find(function(a,b,c){

console.log(a);

console.log(b);

console.log(c);

return atob > 300;

});

console.log(result);

</script>

forEach

<h3>forEach() : 배열 데이터 전체를 순회</h3>

student.forEach((element,index)=>{

console.log(element,index);

});

student.forEach((element)=>{

console.log(element);

});

</script>

sort

<h3>sort() : 배열을 정렬해주는 함수</h3>

<p>

오름차순 =><br>

배열명.sort(function(left,right){return left-right;});

내림차순 => <br>

배열명.sort(function(a,b){return b-a;});

</p>

let numArr = [1,6,3,2,5,8,7];

result = numArr.sort(function(a,b){

return a-b;

});

console.log(result);

//내림차순

//큰수가 앞에 와야돼요.

//양수면 앞뒤자리 바꾸고, 음수면 그대로 두는 성질이 있음.

result = numArr.sort(function(a,b){

return b-a;

});

console.log(result);

</script>

filter

<h4>filter() : 배열에 저장된 요소를 찾아서 배열로 반환</h4>

nums = [333,2376,896,55];

result = nums.filter(function(ele,index,array){

return ele>800;

});

console.log(result);

</script>

map

result = nums.map(function(e,i,o){

return i %2 === 0 ? e : e*2;

});

console.log(result);

</script>

배열 연습문제

<style>

.div{

display: inline-block;

width: 100px; height: 25px;

text-align: center;

}

#div1{ border:1px solid crimson; }

#div2{ border:1px solid coral; }

#div3{ border:1px solid gold; }

</style>

let showArr = () =>{

let arr = [0,1,2];

//arr[0], arr[1], arr[2];

document.getElementById('div1').innerHTML = arr[0];

document.getElementById('div2').innerHTML = arr[1];

document.getElementById('div3').innerHTML = arr[2];

}

</script>

</fieldset>

이 부분에 정답이 출력!

</div><br>

let concatStr = function(){

// 어떤 데이터를 처리할꺼냐 -> 처리할 데이터

let str1 = document.querySelector('#stringla1').innerHTML;

let str2 = document.querySelector('#stringla2').innerHTML;

// 작업을 하려면 데이터의 자료형이 (array 배열)

// 현재 데이터의 자료형이 string(문자)

// 문자를 배열로 바꿔주는 함수는 무엇인가?

let arr1 = str1.split(' ');

let arr2 = str2.split(' ');

// 하나의 글자로 watermelon을 출력하고 싶다.

// 현재 2개의 데이터로 나누어져 있다.

// 합쳐야겠다 -> concat

// 합치니깐 거꾸로 되어 있다 -> reverse

// div에 출력하고 싶은 형태는 string

// 그런데 현재 자료형은 array이다.

// 다시 array -> string으로 바꿔야 겠다.

let result;

result = arr1.concat(arr2);

result = result.reverse();

result = result.join('');

document.querySelector('#result1').innerHTML = result;

}

</script>

</fieldset>

이 부분에 정답이 출력 될 수 있도록 하세요

</div>

<br>

// 우리가 뭘 하고싶은가?

// 입력창에 글자를 입력하면 배열에 추가가 되야하고

// 최종적으로 출력버튼을 클릭하면 우리가 만든 배열이 출력 되어야 한다.

// 1. addStr 안에 배열($arr을 적어줬어요.

// 2. $arr을 addStr에서도 쓰고 싶고, printResult에도 쓰고 싶어졌음

// 3. $arr을 밖으로 빼줘야 겠다!!

// (let 키워드를 활용해서 변수를 선언하면 블록 안에서만 쓸 수 있기 때문에)

let $arr = [];

let addStr = () => {

// 데이터 가져오기

const text = document.querySelector('#str');

// 데이터

$arr.push(text.value);

text.value ='';

}

let printResult = function(){

// 데이터 출력하기

document.getElementById('result2').innerHTML = $arr;

}

</script>

</fieldset>

<br>

이 부분에 정답이 출력!

</div>

const processArr = function(){

// 받아올 데이터가 뭐냐?

// 기존에 text를 받아온다

// 기존 text , 삭제할 음식이름, 추가할 음식이름

const ori = document.querySelector('#origin_text').innerText;

const addText = document.querySelector('#add_food').value;

const deleteText = document.querySelector('#delete_food').value;

//string 형태인 ori 변수를 array로 바꿔주자

const arr = ori.split(' ');

console.log(arr);

// 사용자가 삭제하고 싶은 음식이 위치가 어딘지 파악

// 그부분의 데이터를 추가할 음식으로 변경

// 1. 사용자가 삭제하고 싶은 음식의 위치 -> indexOf

// 2. 사용자가 삭제하고 싶은 음식의 위치에 추가하고 싶은 음식을 입력

const deleteIdx = arr.indexOf(deleteText);

arr[deleteIdx] = addText;

// 1. 화면에 arr출력

// 2. 배열을 출력하는데 배열 원래 모양대로가 아니라 ,를 띄어쓰기로 바꿔서 출력

// => join함수를 써야겠구나!!

document.querySelector('#result_div').innerHTML = arr.join(' ');

}

</script>

'JavaScript & JQuery' 카테고리의 다른 글

JQuery serialize()를 사용하는 이유 (0)	2024.03.07
JavaScript(7) (2)	2023.08.27
JavaScript(5) (0)	2023.08.27
JavaScript(4) (2)	2023.08.27
JavaScript(3) (2)	2023.08.27

smile-coding

JavaScript(6)

배열

'JavaScript & JQuery' 카테고리의 다른 글

티스토리툴바

JavaScript(6)

배열

'JavaScript & JQuery' 카테고리의 다른 글

'JavaScript & JQuery' Related Articles

티스토리툴바