#7. Array

smiletmf·2022년 7월 5일
0

javascript grammar

목록 보기
7/20
post-thumbnail

push() : 뒤에 삽입 / pop() : 뒤에 삭제

unshift() : 앞에 삽입 / shift() : 앞에 삭제

// arr.splice(n ,m)
// 특정 요소 지움, n:시작, m:개수

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

// arr.splice(n ,m, x)
// 특정 요소 지우고 추가, n:시작, m:개수, x:추가요소

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200); 
console.log(arr); // [1 ,100, 200, 5]

let arr2 = ["나는", "철수", "입니다"];
arr2.splice(1, 0, "대한민국", "소방관"); // 지우지 않고 요소 추가
console.log(arr2); // ["나는", "대한민국", "소방관", "철수", "입니다"]

// arr.splice()
// 삭제된 요소 반환

let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 2);
console.log(arr); // [1, 4, 5]
console.log(result); // [2, 3]

// arr.slice(n, m)
// n부터 m까지 반환(m은 포함하지 않음, 없으면 배열 끝까지 반환)

let arr = [1, 2, 3, 4, 5];
let result = arr.slice(1, 4); 
console.log(result); // [2, 3, 4]

let arr2 = arr.slice(); // ()이면 배열 복사
console.log(arr2); // [1, 2, 3, 4, 5]

// arr.concat(arr2, arr3 ...)
// 합쳐서 새 배열 반환

let arr = [1, 2];
console.log(arr.concat([3, 4])); // [1, 2, 3, 4]
console.log(arr.concat([3, 4], [5, 6])); // [1, 2, 3, 4, 5, 6]
console.log(arr.concat([3, 4], 5, 6)); // [1, 2, 3, 4, 5, 6]

// arr.forEach(fn)
// 배열 반복

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(name); // "Mike" "Tom" "Jane"
  console.log(`${index+1}. ${name}`); // "1. Mike" "2. Tom" "3. Jane"
});

// arr.indexOf / arr.lastIndexOf

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
console.log(arr.indexOf(3)); // 2, 해당 요소의 인덱스 번호 반환
console.log(arr.indexOf(6)); // -1, 해당 요소가 없는 경우
console.log(arr.indexOf(3, 3)); // 해당 요소가 두 개 이상인 경우 마지막 요소의 인덱스 번호 반환
console.log(arr.lastIndexOf(3)); // 7, 끝에서 부터 반환

// arr.includes()
// 포함하는지 확인

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(8)); // false

// arr.find(fn) / arr.findIndex(fn)
// 첫번째 true 값만 반환하고 끝, 만약 없으면 undefined를 반환

let arr = [1, 2, 3, 4, 5];
const result = arr.find((item)=>{
  return item % 2 === 0;
});

console.log(result); // 2

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 }
];

const result2 = userList.find((user) => {
  if(user.age<19){
    return true;
  }
    return false;
});

console.log(result2);  // { name: "Tom", age: 10 }

const result3 = userList.findIndex((user) => {
  if(user.age<19){
    return true;
  }
    return false;
});

console.log(result3);  // 2

// arr.filter(fn)
// 만족하는 모든 요소를 배열로 반환

let arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter((item)=>{
  return item % 2 === 0;
});

console.log(result); // [2, 4, 6]

// arr.reverse()
// 역순으로 재정렬
// 최근 게시물부터 보이기 등에 사용

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

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

// arr.map(fn)
// 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 }
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index +1,
    isAdult: user.age > 19
  });
});

console.log(newUserList);
// { name: "Mike", age: 30, id: 1, isAdult: true },
// { name: "Jane", age: 27, id: 2, isAdult: true },
// { name: "Tom", age: 10, id: 3, isAdult: false }
console.log(userList); // 기존 배열에 변경 없음
// { name: "Mike", age: 30 },
// { name: "Jane", age: 27 },
// { name: "Tom", age: 10 }

// join

let arr = ["안녕", "나는", "철수야"];

let result = arr.join(); 
console.log(result); // "안녕,나는,철수야"

let result2 = arr.join(' '); 
console.log(result2); // "안녕 나는 철수야"

// split

const users = "Mike,Jane,Tom,Tony";
const result = users.split(','); // 쉼표기준으로 나누어 배열로 반환
console.log(result); // ["Mike", "Jane", "Tom", "Tony"]

let str = 'Hello, My name is Mike';
const result = str.split(''); 
console.log(result);
// ['H', 'e', 'l', 'l', 'o', ',' '', 'M', 'y', '', 'n', 'a', 'm', 'e', '', 'i', 's', '', 'M', 'i', 'k', 'e']

// Array.isArray()
// 배열인지 아닌지 확인

let user = {
  name: 'Mike',
  age: 30
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user); // Object
console.log(typeof userList); // Object

console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // True
profile
성장하는 개발자 유슬이 입니다!

0개의 댓글