Front/JavaScript

표준 내장 객체 - 배열(array) - javascript 기본

oodada 2023. 10. 22. 20:38

표준 내장 객체 - 배열(array)

.length

배열의 길이(숫자)를 나타내는 속성

const arr = [1, 2, 3];

console.log(arr.length); // 3

.at()

배열에서 특정 위치의 요소를 가져오는 메서드
인덱스는 0부터 시작

const arr = [1, 2, 3];

console.log(arr[0]); // 1
console.log(arr.at(0)); // 1

console.log(arr[arr.length - 1]); // 3
console.log(arr.at(-1)); // 3

.concat()

배열에 다른 배열이나 값을 추가하여 새 배열을 반환하는 메서드

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6]
console.log(arr3); // [1, 2, 3, 4, 5, 6]

.every()

배열의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하는 메서드

const arr = [1, 2, 3];

console.log(arr.every(item => item > 0)); // true
// arr.every((item) => {
//     return item > 0;
// })
console.log(arr.every(item => item > 1)); // false

.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드
콜백 함수의 반환 값이 true인 요소만 모아서 새로운 배열을 만듦
모든 요소가 통과하지 못하면 빈 배열을 반환

const arr = [1, 2, 3];

console.log(arr.filter(item => item > 1)); // [2, 3]
console.log(arr.filter(item => item < 0)); // []

이린이(7세 이하) 찾기

const users = [
    { name: '홍길동', age: 36 },
    { name: '고길동', age: 12 },
    { name: '둘리', age: 6 },
];

const children = users.filter(user => user.age <= 7);
console.log(children); // [{ name: '둘리', age: 6 }]

.find()

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하는 메서드
요소가 없으면 undefined를 반환

const arr = [1, 2, 3];

console.log(arr.find(item => item > 1)); // 2
console.log(arr.find(item => item < 0)); // undefined

고길동 찾기

const users = [
    { name: '홍길동', age: 36 },
    { name: '고길동', age: 12 },
    { name: '둘리', age: 6 },
];

const user = users.find(user => user.name === '고길동');
console.log(user); // { name: '고길동', age: 12 }

.findIndex()

주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환하는 메서드
요소가 없으면 -1을 반환

const arr = [1, 2, 3];

console.log(arr.findIndex(item => item > 1)); // 1
console.log(arr.findIndex(item => item < 0)); // -1

.flat()

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성하는 메서드
깊이를 지정하지 않으면 기본값 1

const arr = [1, [2, [3, [4]]]];

console.log(arr.flat()); // [1, 2, [3, [4]]]
console.log(arr.flat(1)); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]] (2단계의 하위 배열 요소를 이어붙임)
console.log(arr.flat(Infinity)); // [1, 2, 3, 4] (모든 하위 배열 요소를 이어붙임)

.forEach()

주어진 함수를 배열 요소 각각에 대해 실행하는 메서드

const arr = [1, 2, 3];

arr.forEach(item => console.log(item)); // 1 2 3

.includes()

배열이 특정 요소를 포함하고 있는지 판별하는 메서드

const arr = [1, 2, 3];

console.log(arr.includes(1)); // true
console.log(arr.includes(0)); // false

.join()

배열의 모든 요소를 연결해 하나의 문자열로 만드는 메서드

const arr = [1, 2, 3];

console.log(arr.join(',')); // 1,2,3
console.log(arr.join(', ')); // 1, 2, 3
console.log(arr.join(' | ')); // 1 | 2 | 3

.map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드

const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);

console.log(newArr); // [2, 4, 6]
console.log(arr); // [1, 2, 3]

const users = [
    { name: '홍길동', age: 36 },
    { name: '고길동', age: 12 },
    { name: '둘리', age: 6 },
];

// user => {return { key: value }};
// user => ({ key: value });
const newUsers = users.map(user => ({
    ...user, // 전개 연산자 ...user : name: '홍길동', age: 36
    email: null,
}));

console.log(newUsers);
// [{ name: '홍길동', age: 36, email: null }, { name: '고길동', age: 12, email: null }, { name: '둘리', age: 6, email: null }]

뉴스 리스트 만들기

<ul class="list-news">
    <li>
        <img src="url" />
        <h2>뉴스1</h2>
        <p>내용1</p>
    </li>
</ul>

const news = [
    {
        userId: 1,
        id: 1,
        title: '"그리기 귀찮다, 금연해라" 초등생 금연 포스터 화제',
        body: '벽에 전시돼 있는 듯한 포스터에는 "포스터 그리기도 귀찮다, 이젠 좀 금연해라"라는 문구가 적혀 있습니다.',
        img: 'https://image.newsis.com/2024/07/12/NISI20240712_0001600094_web.jpg?rnd=20240712091623',
    },
    {
        userId: 1,
        id: 2,
        title: '4억 올릴테니 살테면 사라던 배짱 결국…개포아파트 다 팔렸다',
        body: '서울 아파트값 회복세와 맞물려 가격이 25억5000만원까지 올랐던 ‘디에이치퍼스티어아이파크’ 전용면적 59㎡ 보류지가 매각된 것으로 나타났다. 실거래가보다 높은 가격에 나왔던 보류지 매물이 주인을 찾으며 신고가를 기록하게 됐다. 이렇듯 주거선호도가 높은 강남 일대에선 보류지 신고가 소식이 전해지는 등 아파트값 상승세가 지속되는 양상이다.',
        img: 'https://res.heraldm.com/content/image/2024/07/15/20240715050653_0.jpg',
    },
    {
        userId: 1,
        id: 3,
        title: 'god 박준형 “친환경? X소리” 전기차 저격…‘당선 확률 70%’ 트럼프에 찢어지는 주주 가슴?',
        body: '15일 국내 2차전지주(株)가 일제히 약세를 보였다. 피격 이후 11월 대선 승리 가능성이 높아진 것으로 평가되는 도널드 트럼프 전 미국 대통령의 반(反) 친환경 정책에 따른 전기차 산업 모멘텀 후퇴에 대한 우려가 커진 탓으로 읽힌다.',
        img: 'https://cdn.namdonews.com/news/photo/202407/779824_449560_454.jpg',
    },
    {
        userId: 1,
        id: 4,
        title: '“제2의 ‘불닭’ 찾아라”…K-푸드 앞세워 해외 노리는 식품사들',
        body: '삼양식품의 ‘불닭볶음면’이 전 세계 100여개국에 수출되며 K-라면 대표주자로 자리매김하는 등 폭풍 성장을 이어가고 있다. ‘불닭 파워’를 등에 업은 삼양식품의 해외 실적은 매해 고성장 중이다. 1분기 해외 매출은 83% 상승한 2889억원이다. 삼양식품 전체 매출에서 해외 매출 비중은 75%에 이른다. ',
        img: 'https://economist.co.kr/data/ecn/image/2024/07/04/ecn20240704000022.477x.0.jpg',
    },
];

const listNews = document.querySelector('.list-news');

news.map(newsItem => {
    const li = document.createElement('li');
    const img = document.createElement('img');
    const h2 = document.createElement('h2');
    const p = document.createElement('p');

    img.src = newsItem.img;
    h2.textContent = newsItem.title;
    p.textContent = newsItem.body;

    li.appendChild(img);
    li.appendChild(h2);
    li.appendChild(p);

    listNews.appendChild(li);
});

.list-news {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    list-style: none;
}
.list-news li {
    flex: 1;
}
.list-news img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.list-news h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.list-news p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.pop()

배열에서 마지막 요소를 제거하고 그 요소를 반환하는 메서드

const arr = [1, 2, 3];

console.log(arr.pop()); // 3
console.log(arr); // [1, 2]

.push()

배열의 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환하는 메서드

const arr = [1, 2, 3];

console.log(arr.push(4)); // 4
console.log(arr); // [1, 2, 3, 4]

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

.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 메서드
각 콜백의 반환 값을 다음 콜백의 인수 accumulator(누산기)에 전달
리듀서 함수는 네 개의 인수를 가짐
- 누산기(accumulator)
- 현재 값(currentValue)
- 현재 인덱스(currentIndex)
- 원본 배열(array)

const arr = [1, 2, 3];

console.log(arr.reduce((acc, cur) => acc + cur, 0)); // 6
// 1. acc = 0, cur = 1 => 1
// 2. acc = 1, cur = 2 => 3
// 3. acc = 3, cur = 3 => 6

console.log(arr.reduce((acc, cur) => acc + cur, 10)); // 16
// 1. acc = 10, cur = 1 => 11
// 2. acc = 11, cur = 2 => 13
// 3. acc = 13, cur = 3 => 16

평균 나이 구하기

const users = [
    { name: '홍길동', age: 36 },
    { name: '고길동', age: 12 },
    { name: '둘리', age: 6 },
];

const totalAge = users.reduce((acc, cur) => acc + cur.age, 0);
// 1. acc = 0, cur = { name: '홍길동', age: 36 } => 36
// 2. acc = 36, cur = { name: '고길동', age: 12 } => 48
// 3. acc = 48, cur = { name: '둘리', age: 6 } => 54
console.log(totalAge); // 54

const avgAge = (totalAge / users.length).toFixed();
// 54 / 3 = 18
console.log(avgAge); // 18

모든 이름 출력하기

const users = [
    { name: '홍길동', age: 36 },
    { name: '고길동', age: 12 },
    { name: '둘리', age: 6 },
];

const namesArr = users.reduce((acc, cur) => {
    acc.push(cur.name);
    return acc;
}, []);
console.log(namesArr); // ['홍길동', '고길동', '둘리']

const names = namesArr.join(', ');
console.log(names); // 홍길동, 고길동, 둘리

// 체이닝
const names2 = users
    .reduce((acc, cur) => {
        acc.push(cur.name);
        return acc;
    }, [])
    .join(', ');
console.log(names2); // 홍길동, 고길동, 둘리

.reverse()

배열의 순서를 반전하는 메서드

const arr = [1, 2, 3];

console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]

.shift()

배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환하는 메서드

const arr = [1, 2, 3];

console.log(arr.shift()); // 1
console.log(arr); // [2, 3]

.slice()

대상 배열의 일부를 추출해 새로운 배열을 반환하는 메서드
첫 번째 인수는 추출을 시작할 인덱스
두 번째 인수는 추출을 종료할 인덱스(포함하지 않음)

const arr = [1, 2, 3, 4, 5];

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

.some()

배열의 요소 중에서 주어진 판별 함수를 만족하는 요소가 하나라도 있는지를 테스트하는 메서드

const arr = [1, 2, 3];

console.log(arr.some(item => item > 1)); // true
console.log(arr.some(item => item > 2)); // true
console.log(arr.some(item => item < 0)); // false

.sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 메서드
기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따름
정렬 순서를 정의하는 함수를 인수로 전달할 수 있음

const arr = [4, 7, 0, 10, 1, 2, 3];

console.log(arr.sort()); // [0, 1, 10, 2, 3, 4, 7]
console.log(arr); // [0, 1, 10, 2, 3, 4, 7]

console.log(arr.sort((a, b) => a - b)); // [1, 2, 3]
// 1. a = 4, b = 7 => -3
// 2. a = 7, b = 0 => 7
// 3. a = 0, b = 10 => -10
// 4. a = 10, b = 1 => 9
// 반환 값이 0보다 작은 경우 a를 우선하여 정렬
// 반환 값이 0보다 큰 경우 b를 우선하여 정렬

console.log(arr.sort((a, b) => b - a)); // [3, 2, 1]
// 1. a = 4, b = 7 => 3
// 2. a = 7, b = 0 => -7
// 3. a = 0, b = 10 => 10
// 4. a = 10, b = 1 => -9
// 반환 값이 0보다 작은 경우 b를 우선하여 정렬
// 반환 값이 0보다 큰 경우 a를 우선하여 정렬

.splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 메서드
첫 번째 인수는 변경을 시작할 인덱스
두 번째 인수는 제거할 요소 수
세 번째 인수부터는 배열에 추가될 요소

const arr = [1, 2, 3];

console.log(arr.splice(1, 2)); // [2, 3]
console.log(arr); // [1]

const arr2 = [1, 2, 3];

console.log(arr2.splice(1, 1)); // [2]
console.log(arr2); // [1, 3]

const arr3 = [1, 2, 3];

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

.unshift()

배열의 맨 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하는 메서드

const arr = [1, 2, 3];

console.log(arr.unshift(4)); // 4 (길이 반환)
console.log(arr); // [4, 1, 2, 3]

저작자표시 비영리 동일조건

'Front > JavaScript' 카테고리의 다른 글

모듈(Module) - javascript 기본 (0)	2023.10.22
표준 내장 객체 - 객체(object) - javascript 기본 (0)	2023.10.22
표준 내장 객체 - 날짜(Date) - javascript 기본 (0)	2023.10.22
표준 내장 객체 - 숫자(Number), 수학(Math) (0)	2023.10.22
표준 내장 객체 - 문자열(string) - javascript 기본 (0)	2023.10.22

현재글표준 내장 객체 - 배열(array) - javascript 기본

#프론트앤드 #Interactive Web #WebDesign #웹표준 # 웹접근성

웹디자인기능사, 리액트, JavaScript, 웹표준, JS, css, jekyll, 컴포넌트, gsap, useEffect, Layout, ChatGPT, 웹접근성, html, 자기소개서, github, React, props, NextJS, 표준내장객체,

Today :
Yesterday :

odada

표준 내장 객체 - 배열(array) - javascript 기본

표준 내장 객체 - 배열(array)

.length

.at()

.concat()

.every()

.filter()

.find()

.findIndex()

.flat()

.forEach()

.includes()

.join()

.map()

.pop()

.push()

.reduce()

.reverse()

.shift()

.slice()

.some()

.sort()

.splice()

.unshift()

'Front > JavaScript' 카테고리의 다른 글

'Front/JavaScript'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

표준 내장 객체 - 배열(array) - javascript 기본

표준 내장 객체 - 배열(array)

.length

.at()

.concat()

.every()

.filter()

.find()

.findIndex()

.flat()

.forEach()

.includes()

.join()

.map()

.pop()

.push()

.reduce()

.reverse()

.shift()

.slice()

.some()

.sort()

.splice()

.unshift()

'Front > JavaScript' 카테고리의 다른 글

'Front/JavaScript'의 다른글

관련글

티스토리툴바