ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JavaScript : Array
    STUDY/프론트엔드 2021. 6. 2. 17:11

     

    1. 생성자

    [element0, element1, ..., elementN]

    new Array(element0, element1[, ...[, elementN]])
    new Array(arrayLength)

     

    - 매개변수

    • elementN : 배열을 초기화할 때 채워넣는 요소로, 항목이 하나고 그 항목의 자료형이 숫자일 경우 arrayLength 매개변수로 간주한다.
    • arrayLength : Array 생성자에 제공한 매개변수가 하나이고, 매개변수가 0에서 232-1 이하의 정수인 경우, length 속성이 해당 값인 새로운 JavaScript 배열이 생성된다.

     

    - 사용

    let fruits = ['가나다', 'abc']
    -> 리터럴 표기법으로 생성

    let fruits = new Array(2)
    -> 생성자와 하나의 숫자 매개변수로 생성

    let fruits = new Array('가나다', 'abc')
    -> 생성자에 두 개 이상의 매개변수를 제공해서 생성

     

    2. 정적 메서드

    1. Array.from() : 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만든다.
    Array.from(arrayLike[, mapFn[, thisArg]])

     

    - 매개변수

    • arrayLike : 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체.
    • mapFn[Optional] : 배열의 모든 요소에 대해 호출할 맵핑 함수.
    • thisArg[Optional] : mapFn실행 시에 this로 사용할 값.

     

    - 사용

    String -> Array
    Array.from('abc');
    // ["a", "b", "c"]

    Set -> Array
    const set = new Set(['abc', def]);
    Array.from(set); // ["abc", def]

    Map -> Array
    const map = new Map([[1, 2], [3, 4], [5, 6]]);
    Array.from(map);
    // [[1, 2], [3, 4], [5, 6]]

    const map = new Map([['1', 'a'], ['2', 'b']]);
    Array.from(map.keys());
    // ['1', '2'];
    Array.from(map.values());
    // ['a', 'b'];

    배열 형태 가진 객체 -> Array
    function fn() {
      return Array.from(arguments);
    }
    fn(1, 2, 3));
    // [1, 2, 3]

    // 화살표 함수 사용
    Array.from([1, 2, 3], x => x + 1);
    // [2, 3, 4]

     

      2. Array.isArray() : 인자가 Array인지 판별한다.

    Array.isArray(obj)

     

    - 매개변수

    • obj : Array인지 판별할 객체

     

    - 사용

    // 모두 true 반환
    Array.isArray([]);
    Array.isArray([1]);
    Array.isArray(new Array());
    Array.isArray(new Array('a', 'b', 'c', 'd'));
    Array.isArray(new Array(3));
    Array.isArray(Array.prototype);

    // 모두 false 반환
    Array.isArray();
    Array.isArray({});
    Array.isArray(null);
    Array.isArray(undefined);
    Array.isArray(17);
    Array.isArray('Array');
    Array.isArray(true);
    Array.isArray(false);
    Array.isArray({ __proto__: Array.prototype });

     

      3. Array.of() : 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만든다.

    Array.of(element0[, element1[, ...[, elementN]]])

     

    - 매개변수

    • elementN : 배열을 생성할 때 사용할 요소.

     

    - 사용

    Array.of(1, 2, 3);
    // [1, 2, 3]

    Array.of(3);
    // [3]
    Array(3);
    // [ , , ]

    * 주의 : 하나의 숫자 요소만 가질 경우 Array.of()는 해당 요소를 가진 배열을 만들지만, Array()는 해당 숫자 length 속성을 가진 빈 배열을 생성한다.

     

    3. 변경자 메서드

      1. Array.prototype.copyWithin()

    arr.copyWithin(target[, start[, end]])

     

    - 매개변수

    • target : 복사한 시퀀스(값)를 넣을 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산한다. target이 arr.length보다 크거나 같을 경우 아무것도 복사하지 않는다. target이 start 이후라면 복사한 시퀀스를 arr.length에 맞춰 자른다.
    • start[Optional] : 복사를 시작할 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산한다. 기본값은 0으로, start를 지정하지 않으면 배열의 처음부터 복사한다.
    • end[Optional] : 복사를 끝낼 위치를 가리키는 0 기반 인덱스. copyWithin은 end 인덱스가 가리키는 요소는 제외하고 그 이전까지만 복사한다. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산한다. 기본값은 arr.length로, end를 지정하지 않으면 배열의 끝까지 복사한다.

     

    -  사용

    const array1 = ['a', 'b', 'c', 'd', 'e'];

    // 인덱스 3을 인덱스 0에 복사한다.
    array1.copyWithin(0, 3, 4);
    // ["d", "b", "c", "d", "e"]

    // 인덱스 3부터 끝까지 인덱스 1에 복사한다.
    array1.copyWithin(1, 3);
    // ["d", "d", "e", "d", "e"]

     

      2. Array.prototype.fill()

    arr.fill(value[, start[, end]])

     

    - 매개변수

    • value : 배열을 채울 값.
    • start[Optional] : 시작 인덱스, 기본 값은 0.
    • end[Optional] : 끝 인덱스, 기본 값은 this.length.

     

    - 사용

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

    // 숫자 0을 2번 인덱스부터 4번 전까지 채운다.
    array1.fill(0, 2, 4);
    // [1, 2, 0, 0]

    // 숫자 5를 1번인덱스부터 끝까지 채운다.
    array1.fill(5, 1);
    // [1, 5, 5, 5]

    // 숫자 6으로 전체 인덱스를 채운다.
    console.log(array1.fill(6));
    // [6, 6, 6, 6]

     

      3. Array.prototype.pop()

    arr.pop()

     

    - 배열에서 마지막 요소를 제거하고 그 요소를 반환한다. 만약 배열이 빈 배열일 경우 undefined를 반환한다.

    - 사용

    const alpha= ['ABC', 'DEF', 'GHI', 'JKL', 'MNO'];

    console.log(alpha.pop());
    // "MNO"
    console.log(alpha);
    // ['ABC', 'DEF', 'GHI', 'JKL']

    console.log(alpha.pop());
    // "JKL"
    console.log(alpha);
    // ['ABC', 'DEF', 'GHI']

     

      4. Array.prototype.push()

    arr.push(element1[, ...[, elementN]])

     

    - 매개변수

    • elementN : 배열의 끝에 추가할 요소.

     

    - 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

    - 사용

    const alpha= ['ABC', 'def', 'ghi'];

    const count = animals.push('jkl');
    console.log(count);
    // 4
    console.log(alpha);
    // ['ABC', 'def', 'ghi', 'jkl']

    animals.push('MNOP', 'Qrst', 'uvwxyz');
    console.log(alpha);
    // ['ABC', 'def', 'ghi', 'jkl', 'MNOP', 'Qrst', 'uvwxyz']

     

      5. Array.prototype.reverse()

    arr.reverse()

     

    - 배열의 순서를 반전시킨다. 첫번째 요소가 마지막 요소가 되고, 마지막 요소가 첫번째 요소가 된다.

    - reverse 메서드는 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환한다.

    - 사용

    const array1 = ['one', 'two', 'three', 'four', 'five'];

    console.log('array1:', array1);
    // "array1:" Array ["one", "two", "three", "four", "five"]

    const reversed = array1.reverse();
    console.log('reversed:', reversed);
    // "reversed:" Array ["five", "four", "three", "two", "one"]

    console.log('array1:', array1);
    // "array1:" Array ["five", "four", "three", "two", "one"]

     

      6. Array.prototype.shift()

    arr.shift()

     

    - 배열에서 첫번쨰 요소를 제거하고, 제거된 요소를 반환한다. 만약 빈 배열이면 undefined를 반환한다.

    - 사용

    const array1 = [1, 2, 3];

    const removeElement = array1.shift();
    console.log(array1);
    // Array [2, 3]
    console.log(removeElement );
    // 1

     

      7. Array.prototype.sort()

    arr.sort([compareFunction])

     

    - 매개변수

    • compareFunction[Optional] : 정렬 순서를 정의하는 함수. compareFunction이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬된다. 예를 들어 "바나나"는 "체리" 앞에 온다. 숫자 정렬에서는 9가 80보다 앞에 오지만 문자열로 변환되면 "80"은 유니 코드 순서에서 "9" 앞에 오게 된다. compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. 
    1. compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 인덱스로 정렬한다. 즉, a가 먼저온다.
    2. compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬한다. 
    3. compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 정렬한다.
    4. compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야 한다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않는다.

     

    - 사용

    const months = ['March', 'Jan', 'Feb', 'Dec'];
    months.sort();
    console.log(months);
    // Array ["Dec", "Feb", "Jan", "March"]

    const array1 = [1, 30, 4, 21, 100000];
    array1.sort();
    console.log(array1);
    // Array [1, 100000, 21, 30, 4]

     

      8. Array.prototype.splice()

    array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

     

    - 매개변수

    • start : 배열의 변경을 시작할 인덱스이다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 센다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같다). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.
    • deleteCount[Optional] : 배열에서 제거할 요소의 수이다. deleteCount를 생략하거나 값이 (array.length - start)보다 크면 start부터의 모든 요소를 제거한다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 한다.
    • item1, item2, ...[Optional] : 배열에 추가할 요소이다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

     

    - 사용(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // 1번 인덱스에 'Feb'를 추가한다.
    console.log(months);
    // Array ["Jan", "Feb", "March", "April", "June"]

    months.splice(4, 1, 'May');
    // 4번 인덱스의 값을 제거하고 'May'를 추가한다. (대체)
    console.log(months);
    // Array ["Jan", "Feb", "March", "April", "May"]

     

      9. Array.prototype.unshift()

    arr.unshift([...elementN])

     

    - 매개변수

    • elementN : 배열 맨 앞에 추가할 요소.

     

    - 배열의 맨 앞쪽에 새로운 요소를 추가하고, 배열의 새로운 길이를 반환한다.

    - 사용

    var arr = [1, 2];

    arr.unshift(0);
    // [0, 1, 2]

    arr.unshift(-2, -1);
    // [-2, -1, 0, 1, 2]

    arr.unshift([-3]);
    // [[-3], -2, -1, 0, 1, 2]

     

      10. Array.prototype.concat()

    array.concat([value1[, value2[, ...[, valueN]]]])

     

    - 매개변수

    • valueN[Optional] : 배열 또는 값으로, 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환한다.

     

    - 사용

    const alpha = ['a', 'b', 'c'];
    const numeric = [1, 2, 3];
    alpha.concat(numeric);
    // ['a', 'b', 'c', 1, 2, 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]

    const alpha = ['a', 'b', 'c'];
    alpha.concat(1, [2, 3]);
    // ['a', 'b', 'c', 1, 2, 3]

     

      11. Array.prototype.filter()

    arr.filter(callback(element[, index[, array]])[, thisArg])

     

    - 매개변수

    • callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받는다.
    1. element : 처리할 현재 요소.
    2. index[Optional] : 처리할 현재 요소의 인덱스.
    3. array[Optional] : filter를 호출한 배열.
    • thisArg[Optional] : callback을 실행할 때 this로 사용하는 값.

     

    - 사용

    const words = ['123', '1234567', 'abcdefghij', '098765', 'qwe', '!Q@W#EVV'];

    const result = words.filter(word => word.length > 6);
    console.log(result);
    // ['1234567', 'abcdefghij', '!Q@W#EVV']

     

      12. Array.prototype.includes()

    arr.includes(valueToFind[, fromIndex])

     

    - 매개변수

    • valueToFind : 탐색할 요소로, 문자나 문자열을 비교할 때, includes()는 대소문자를 구분한다.
    • fromIndex[Optional] : 배열에서 searchElement 검색을 시작할 위치이다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색하고 기본값은 0이다.

     

    - 사용

    const array1 = [1, 2, 3];
    console.log(array1.includes(2));
    // true

    const pets = ['cat', 'dog', 'bat'];
    console.log(pets.includes('cat'));
    // true
    console.log(pets.includes('at'));
    // false

     

      13. Array.prototype.indexOf()

    arr.indexOf(searchElement[, fromIndex])

     

    - 매개변수

    • searchElement : 배열에서 찾을 요소.
    • fromIndex[Optional] : 검색을 시작할 인덱스. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않는다. 제공된 인덱스 값이 음수이면 배열 끝에서부터의 offset 값으로 사용된다.

     

    - 사용

    const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
    console.log(beasts.indexOf('bison'));
    // 1

    // 2번 인덱스에서 시작해서 찾는다
    console.log(beasts.indexOf('bison', 2));
    // 4

    // 5번 인덱스에서 시작해서 찾는다. 배열의 크기보다 크므로 -1 반환
    console.log(beasts.indexOf('bison', 5));
    // -1

    console.log(beasts.indexOf('giraffe'));
    // -1

    'STUDY > 프론트엔드' 카테고리의 다른 글

    Array.forEach()  (0) 2021.05.06
    Vue.js  (0) 2021.04.28
    Ajax Cache  (0) 2021.04.28
    Cookie  (0) 2021.02.08
    History.replaceState()  (0) 2021.02.04
Designed by Tistory.