Array 배열
: 순서매기고싶은 것, 묶음만들고 싶은것 [ ] 대괄호로 묶어줌
: 객체와 다르게 인덱스라는 순서를 가지는 특징
let array = ['java','javascript','python'];
//index == propertyName
console.log(배열이름[index]);
> 배열안에 있는 값은 element (요소)
> 대괄호안에 각 요소들이 순서매겨짐, 이 숫자값이 index (객체의 property name역할)
> 요소에 접근 = indexing(인덱싱)
[ ] 대괄호안에 순서 적어줌 (0부터 시작)
*/ 배열만드는 메소드 */
let arr = new Array();
//ex 4개의 공간을 가진 배열생성
let arr = new Array(4);
배열 활용
> 배열의 갯수
console.log( arrayname .length );
: 1부터 셈, 요소선택할때 -1해줘야됨( cuz 인덱스 0부터 시작 )
> 배열 수정
1. 배열의 인덱스에 접근하여 값을 할당.
2. push, unshift등 메소드로 수정
arrayname[index] = '추가' ;
ex)
arrayname[3] = '3번수정';
> index의 순서 뛰어넘으면서 추가하면 undefined값 들어간 요소 생성(empty생성)
Shift / unshift / Push / Pop
*/ 배열의 첫 요소 삭제 */
arrayname.shift()
//ex
function arrayShift() {
let myArray = [["John", 23], ["dog", 3]];
myArray.shift();
return myArray;
}
*/ 배열의 첫 요소 값 추가 */
arrayname.unshift('item')
//ex
let arr = [1,2,3];
arr.unshift(4);
console.log(arr); //[4,1,2,3]
*/ 배열의 끝에 요소추가 */
arrayname.push('item')
//ex
let arr = [1,2,3];
arr.push(4);
console.log(arr); //[1,2,3,4]
*/ 배열의 마지막 요소만 제거 */
arrayname.pop()
//ex
let threeArr = [1, 4, 6];
let oneDown = threeArr.pop();
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]
Splice / Slice
splice 배열수정,삭제
*/
splice ( startIndex, deleteCount, item 추가하고싶은 요소)
*/
let array = ['java','javascript','python','manon'];
array.splice(1);
console.log(array)
//출력 [ 'java' ]
array.splice(1,2);
console.log(array)
//출력 [ 'java' , 'manon']
array.splice( 1, 2, 'study');
console.log(array)
//출력 [ 'java', 'study', 'manon']
array.splice( 1, 0, 'study');
console.log(array)
//출력 ['java','study','javascript','python','manon'];
array.splice( 1, 1, 'study');
console.log(array)
//출력 ['java','study','python','manon'];
arrayname.splice ( 1 );
: 1(포함) 이후 모두 삭제 (음수도 가능 > 뒤에서부터 )
arrayname.splice ( 1, 2 );
: 1(포함) 2개만 삭제
arrayname.splice ( 1, 2 ,'item');
: 1(포함) 2개만 삭제하고 그자리에 item추가
arrayname.splice ( 1, 0 ,'item');
: 1자리에 item추가
arrayname.splice ( 1, 1 ,'item');
: 1자리 요소 item으로 교체
//ex) 반복문 활용하여 배열 요소 중 홀수 삭제
for (let i=0; i<numbers.length; i++) {
if (number[i] %2 !==0) {
number.splice(i,1)
i--
}
}
*/ for문의 동작부분이 수행될 때마다 i가 증가하기 때문에
삭제될 때 만큼은 이 i가 증가되는 현상을 방지.
요소가 삭제될 때 i를 미리 한 번 감소시켜줌
slice
> 새로운 변수를 선언하여, 특정 index범위에따라 새로운 배열 리턴
> splice와 다르게 원본배열을 변형시키지 않음
*/ slice(start, end) */
let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)
console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]
indexOf / lstindesOf / include
배열에서 특정값 찾기
*/ indexOf, lastindexOf 특정값 찾기 */
let brands = ['google', 'kakao', 'naver','naver'];
console.log(brands.indexOf('naver'));
console.log(brands.indexOf('daum'));
//출력
2
-1
> 1. 포함되있으면 index리턴
2. 여러개 포함되있으면 처음발견된 인덱스 리턴
3. 불포함이면 -1리턴
> lastindexOf는 뒤에서부터 검색
*/
indludes
배열에서 특정값 있는지 확인 true, false로 리턴
*/
let brands = ['google', 'kakao', 'naver','naver'];
console.log(brands.includes('naver'));
console.log(brands.includes('daum'));
//출력
true
false
참고 (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)
참고2 (https://javascript.info/string)
for ~ of
for (변수 of 배열) {
동작부분;
}
let brands = ['google', 'kakao', 'naver','naver'];
for (let i=0; i< brands.length; i++) {
console.log(brands[i]);
}
for( let i of brands) {
console.log(i);
}
//동일한 결과값 나오지만 좀더 간결하게 가능
filter
주어진 함수 테스트 통과하는(true값만 모아서) 요소로 새로운 배열반환
var newArray = arr.filter(callbackFunction ( element, index, array), thisArg);
callback : 각 요소를 시험할 함수, true면 요소유지하고 false면 버림.
다음 세 인수와 함께 호출
> element : 처리할 현재 요소
> index : 처리할 현재 요소의 인덱스
> array : filter를 호출한 배열
thisArg : callback을 실행할 대 this로 사용하는 값 / 선택적사용(사용x > undefined)
*/
1. filter()의 인자에서 바로 함수 써줌
*/
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
*/
2. 밖에서 함수 선언하고 filter()인자에서 callback
*/
let numbers = [10, 4, 32, 17, 5, 2];
function isBiggerThanTen (value) {
return value > 10;
}
let result = numbers.filter(isBiggerThanTen);
console.log(result); // [32, 17]
//ex
let courses = [
{level:'easy', subject: "English" },
{level:'hard', subject: "Mathmatic" },
{level:'medium', subject: "Literature" },
{level:'hard', subject: "Science" },
{level:'medium', subject: "Socialogy" }
];
// 아래 함수를 작성해주세요.
function filtered() {
return courses.filter(el => el.level === 'hard')
}
//출력
[
{ level: 'hard', subject: 'Mathmatic' },
{ level: 'hard', subject: 'Science' }
]
const filteredExpenses = expenses.filter((year) => {
return year.date.getFullYear().toString() === filteredYear;
});
참고 : https://7942yongdae.tistory.com/49
concat
인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// ["a", "b", "c", "d", "e", "f"]
//3개 이어붙이기
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
num1.concat(num2, num3);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
*/ 같은 요소가지면 중복된거 삭제없이 그대로나옴 */
let array1 = [1,2,3,4,5];
let array2 = [3,4,5,6,7];
let result = array1.concat(array2);
console.log(result);
// 결과 (3,4,5 가 중복)
[
1, 2, 3, 4, 5,
3, 4, 5, 6, 7
]
forEach / Map
forEach : 단순배열 반복작업 > 빠져나오고 싶을때 return;
map : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열반환 (기존배열과 동일크기)-callback함수
🔻 map 사용시에는 key값이 필요하다.
react에서 사용시 key값이 없으면 현재의 배열길이확인 / 렌더링한 숫자확인해서 비교, 개별아이템이 다 똑같이 보인다.
kery값을 붙이면 개별 아이템을 식별하여, 배열의 길이만 신경 쓰는게 아니라 아이템의 위치까지 염두할수 있어
좀 더 효과적으로 업데이트가 가능하다.
{expenses.map((expense) => (
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
/>
))}
//map
[배열].map(함수)
arr.map(callback(currentValue[, index[, array]])[, thisArg])
callback : 새로운 배열 요소 생성하는 함수( currentValue, index, array 세가지 인수를 가짐)
currentValue : 처리할 현재 요소
index : 처리할 현재 요소의 인덱스 (optional)
array : map()을 호출한 배열 (optional)
thisArg : callback 실행할 때 this로 사용되는 값 (optional)
> 최대 반복횟수 : 호출당시 그 당시 요소의 갯수
const members = ['가', '나', '다', '라'];
// 유사한 for ~ of문
for (let member of members) {
console.log(`${member}님 입장`);
}
// 일반함수
members.forEach(function (member) {
console.log(`${member}님 입장`);
});
// allow function
members.forEach((member)=> {
console.log(`${member}님 입장`);
});
> 활용 [ i ]
// i > 다른 배열과 매칭가능
const firstName = ['영훈', '윤수', '동욱', '태호'];
const lastName = ['김', '이', '박', '최'];
//forEach
members.forEach((member, i)=> {
console.log(`${lastName[i]} ${fistName}님 입장`);
});
//map
const fullNames = firstName.map((fistName, i) =>
return lastNames[i] + firstName;
});
console.log(fullNames);
//[김영훈, 이윤수, 박동욱, 최태호]
// map
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => {
return x * 2;
});
console.log(map1);
// [ 2 ,8, 18, 32 ]
//forEach
var 자료 = {
data : [1,2,3,4,5]
}
자료.전부더하기 = function() {
let 합 = 0;
this.data.forEach(function(a){
합=합+a
})
console.log(합)
}
자료.전부더하기();
'ARCHIVE > JavaScript' 카테고리의 다른 글
[JS] Event ( addEventListener ) (0) | 2021.08.24 |
---|---|
[JS] DOM (0) | 2021.08.15 |
[JS] 함수 ( function ) (0) | 2021.08.10 |
[JS] Object 객체 (0) | 2021.08.05 |
[JS] 조건문 / 반복문 (0) | 2021.08.04 |