본문 바로가기

개발/javascript

[javascript]기본정리5

배열 

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