배열
let arr = new Array(); //생성자
let arr = []; //배열 리터럴
배열리터럴 방식에서는 대괄호[ ]를 사용한다
let arr = [1,"2",true,null,{}];
배열에서는 모든 자료형을 넣을 수 있다.
console.log(arr[0]);
console.log(arr[1]);
//read
index를 사용하면 배열의 각 위치에 해당하는 값을 확인 할 수 있다.
arr.push(6)
arr.push({key:"value"})
console.log(arr);
push는 배열에 값을 추가해 주는 함수이다. push를 사용하면 값을 배열의 맨 끝에 추가해준다.
console.log(arr.length);
배열의 길이 확인
반복문
for (초기식; 조건식; 연산){ 반복 수행 명령 }
for(let i=1;i<=100;i++){
//반복 수행할 명령
console.log("장도진")
}
반복문은 배열에서 더 유용하게 사용될 수 있다.
const arr=['a','b','c']
for(let i=0;i<=100;i++){
//반복 수행할 명령
console.log(arr[i])
}
객체에서 반복문
//key 값 순회
let person={
name:"장도진",
age:25,
tall:186
};
const personKeys =Object.keys(person);
for(let i=0;i<personKeys.length; i++){
console.log(personKeys[i]);
}
// key: value
let person={
name:"장도진",
age:25,
tall:186
};
const personKeys =Object.keys(person);
for(let i=0;i<personKeys.length; i++){
const curKey =personKeys[i];
const curValue=person[curKey];
console.log('${curKey}:${curValue}');
}
//value 순회
let person={
name:"장도진",
age:25,
tall:186
};
const personValues =Object.values(person);
for(let i=0;i<personValues.length; i++){
console.log(personValues[i]);
}
배열 내장 함수
forEach
const arr=[1,2,3,4];
for (let i =0; i<arr.length;i++){
console.log(arr[i]);
}
const arr=[1,2,3,4];
arr.forEach((elm)=>console.log(elm));
1.
const arr = [1,2,3,4];
const newArr=[];
arr.forEach(function(elm){
newArr.push(elm*2);
});
console.log(newArr);
2.map
const arr = [1,2,3,4];
const newArr=arr.map((elm=>{
return elm*2;
}))
console.log(newArr);
3.includes
const arr = [1,2,3,4];
let number=3;
arr.forEach((elm)=>{
if(elm === number){
console.log(true);
}
});
const arr = [1,2,3,4];
let number=3;
console.log(arr.includes(number));
4.index
const arr = [1,2,3,4];
let number="3";
console.log(arr.indexOf(number));
//일치하지 않으면 -1을 출력
//일치하면 해당하는 인덱스값을 출력
5.findIndex
const arr = [
{color:"red"},
{color:"black"},
{color:"blue"},
{color:"green"}
];
let number="3";
console.log(arr.findIndex((elm)=>elm.color==="red"));
6.find
const arr = [
{color:"red"},
{color:"black"},
{color:"blue"},
{color:"green"}
];
let number="3";
const element =arr.find((elm)=>{
return elm.color ==="blue";
});
console.log(element);
7.filter
const arr = [
{num:1,color:"red"},
{num:2,color:"black"},
{num:3,color:"blue"},
{num:4,color:"green"}
];
console.log(arr.filter((elm)=>elm.color==="blue"))
8.slice
const arr = [
{num:1,color:"red"},
{num:2,color:"black"},
{num:3,color:"blue"},
{num:4,color:"green"}
];
console.log(arr.slice(0,2));
9.concat
const arr1 = [
{num:1,color:"red"},
{num:2,color:"black"},
{num:3,color:"blue"},
];
const arr2= [
{num:4,color:"green"},
{num:5,color:"blue"},
];
console.log(arr1.concat(arr2));
10.sort
let chars=['나','다','가'];
chars.sort();
console.log(chars);
let numbers=[1,3,5,6,8,7,4];
const compare=(a,b)=>{
if(a>b){
return 1;
}
if(a<b){
return -1;
}
return 0;
}
numbers.sort();
console.log(numbers);
11. join
const arr=["장도진","님","안녕하세요","반갑습니다."];
console.log(arr.join(" "));
'개발 > javascript' 카테고리의 다른 글
[javascript]응용 (0) | 2023.07.23 |
---|---|
[javascript] 응용1 (0) | 2023.07.04 |
[javascript]기본정리4 (0) | 2023.07.02 |
[javascript]기본정리3 (0) | 2023.07.02 |
[javascript] 기본정리2 (0) | 2023.07.01 |