27配列方法

配列方法

ソースアレイを直接変更する方法(mutatorメソッド)

は外部状態を直接変更する補助機能がありますのでご注意ください
->元のアレイを直接変更しない方法

を使用します.
メソッド

は、ソース・アレイ(accessorメソッド)

を直接変更することなく、新しいアレイを作成して返します.

const arr = [1];
// push 메서드는 원본 배열(arr) 직접 변경
arr.push(2);
console.log(arr); // [1, 2]
// concat 메서드는 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환
const result = arr.concat(3);
console.log(arr); // [1, 2]
console.log(result); // [1, 2, 3]

Array.isArray

伝達パラメータが配列

である場合、trueまたはfalseは

を返す.

// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());

// false
Array.isArray();
Array.isArray({});
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(1);
Array.isArray(undefined);
Array.isArray(null);
Array.isArray({0: 1, length: 1});

Array.prrototype.indexof

ソース配列で引数として渡す要素を検索し、インデックス

を返す.

アレイに特定の要素が存在するかどうかを確認するときに便利です.

係数に渡された要素に複数の重複する要素がある場合、最初に見つかった要素のインデックス

が返される.

ソースアレイに引数として伝達する要素が存在しない場合、-1の

を返す.

const arr = [1, 2, 3, 4];
arr.indexOf(2); // 1
arr.indexOf(4); // -1
// 두 번째 인수는 검색을 시작할 인덱스 -> 두 번째 인수를 생략하면 처음부터 검색
arr.indexOf(2, 2); //2

// ex2)

const foods = ['apple', 'banana', 'orange'];
if (foods.indexOf('orange') === -1){
  // ES6 if(!foods.includes('orange'))
  // 요소가 없으면 추가
  foods.push('orange');
}
console.log(foods); // ['apple', 'banana', 'orange'];

Array.prototype.push

パラメータで渡されたすべての値を元のアレイの最後の要素として追加し、変更後の長さパーセント

を返します.

ソースアレイ

に直接戻る.

const arr = [1, 2];
// push 메서드는 원본 배열(arr) 직접 변경
// 변경된 length 값을 반환
let result = arr.push(3, 4);
console.log(result); // 4
console.log(arr); // [1, 2, 3, 4]

// 원본 배열을 직접 변경하는 부수효과 방지 -> 스프레드 문법사용
const arr = [1, 2];
const newArr = [...arr, 3];
console.log(newArr); // [1, 2, 3]

Array.prototype.pop

ソースアレイから最後の要素を削除する削除された要素

を返します.

空の配列は、定義されていない

を返します.
直接変更

ソースアレイ

const arr = [1, 2];
// pop 메서드는 원본 배열(arr) 직접 변경
// 변경된 length 값을 반환
let result = arr.pop();
console.log(result); // 2
console.log(arr); // [1]

// 원본 배열을 직접 변경하는 부수효과 방지 -> 스프레드 문법사용
const arr = [1, 2];
const newArr = [...arr, 3];
console.log(newArr); // [1, 2, 3]

pop法とpush法はスタックを容易に実装する

スタック-後入先出(LIFO-Last In First Out)データ構造

プッシュ:スタック内の

にデータをプッシュ

ポップアップ(pop):スタックからデータをポップアップ

const Stack = (function () {
  function Stack(array = []) {
    if(!Array.isArray(array)) {
      throw new TypeError(`${array} is not an array.`);
    }
    this.array = array;
  }
  
  Stack.prototype = {
    constructor: Stack,
    // 스택의 가장 마지막 데이터를 밀어 넣음
    push(value) {
      return this.array.push(value);
    },
    // 스택의 가장 마지막 데이터, 가장 최신에 넣은 데이터를 꺼냄
    pop() {
      return this.array.pop();
    },
    // 스택의 복사본 배열을 반환
    entries() {
      return [...this.array];
    }
  };
  return Stack;
}());

const stack = new Stack([1, 2]);
console.log(stack.entries()); // [1,2]

stack.push(3);
console.log(stack.entries()); // [1,2,3]

stack.pop();
console.log(stack.entries()); // [1,2]
  

Array.portotype.unshift

パラメータが渡すすべての値を元の配列の先頭に追加し、変更後の長さパーセント

を返します.
ソースアレイ

->副手効果

を直接変更

const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열의 선도에 요소로 추가
let result = arr.unshift(3, 4);
console.log(result); // 4
console.log(arr); // [3, 4, 1, 2] -> 원본 배열 직접 변경

// 부수효과가 없는 스프레드 문법사용
cosnt arr = [1, 2];
const newArr = [3,  ...arr];
console.log(arr); // [3, 1, 2]

Array.portotype.shift

ソースアレイから削除された最初の要素を返します.

空の配列は、定義されていない

を返します.
ソースアレイ

->副手効果

を直接変更

const arr = [1, 2];

// 첫 번째 요소를 제거하고 제거한 요소 반환
let result = arr.shift();
console.log(result); // 1
console.log(arr); // [2] -> 원본 배열 직접 변경

shiftメソッドとpushメソッドによりキューを容易に実装

キュー:先入先出のデータ構造

が最初にポップアップするデータ

const Queue = (function () {
  function Queue(array = []) {
    if (!Array.isArray(array)){
      throw new TypeError(`${array} is not an array`);
    }
    this.array = array;
  }
  
  Queue.prototpye = {
    constructor: Queue,
    // 큐의 가장 마지막에 데이터를 밀어 넣음
    enqueue(value) {
      return this.array.push(value);
    },
    // 큐의 가장 처음 데이터, 가장 먼저 밀어 넣은 데이터를 꺼냄
    dequeue() {
      return this.array.shift();
    },
    // 큐의 복사본 배열을 반환
    entries(){
      return [...this.array];
    }
  };
  return Queue;
}());

const queue = new Queue([1, 2]);
console.log(queue.entries()); // [1, 2]

queue.enqeue(3);
console.log(queue.entries()); // [1, 2, 3]

queue.dequeue();
console.log(queue.entries()); // [2, 3]

Array.prototype.concat

パラメータの値を元の配列の最後の要素として追加する新しい配列

を返します.

元の配列は変更されません->戻り値は変数

に割り当てる必要があります.

const arr1 = [1, 2];
const arr2 = [3, 4];

let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

//  원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

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

// 원본 배열은 변경되지 않음
console.log(arr1); // [1, 2]

pushメソッドとunshiftメソッドは、元のタイルの最後の/最初の要素

としてタイルを追加します.

cocnatメソッドは、受信した配列を分解し、新しい配列の最後の要素

に追加する.

const arr = [3, 4]

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

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

// ES6 스프레드 문법
let result = [1, 2].concat([3, 4]);
console.log(result); // [1, 2, 3, 4]

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

Array.prototype.splice

アレイの間に要素を追加または削除した場合:

直接変更

ソースアレイ

パラメータ内容startソース配列の要素の削除を開始するためにインデックスstartを指定すると、ソース配列のstartからすべての要素の削除が開始されます(startが-1の場合は最後の要素を指し、-nの場合は最後の要素を指します).削除を開始するインデックスから、削除削除削除削除削除削除削除削除元配列の要素の数の位置に挿入する要素のリスト(省略すると、ソース配列から要素を削除します).

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

const result = arr.splice(1, 2, 20, 30);
// 제거한 요소가 배열로 반환
console.log(result); // [2, 3]
// splice 메서드는 원본 배열을 직접 변경
console.log(arr); // [1, 20, 30, 4]

配列から要素を削除するには、indexOfメソッドを使用して特定の要素を取得し、接合メソッド

を使用します.

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

const remove = (array, item) => {
  const index = array.indexOf(item);
  if(index !== -1) array.splice(index, 1);
  return array;
}

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

// filter 

const removeAll(array, item) => {
  return array.filter(v => v!= item);
}
console.log(removeAll(arr, 2)); // [1, 3, 1]

Array.prototype.slice

因数からコピーして範囲内の要素を配列

として返す.

ソースアレイは、

のままである.
パラメータコンテンツstartがコピーしたインデックスが負の値の場合、配列の末尾のインデックスを表します.slice(-2)は最後の2つの要素をコピーし、戻り先をアレイにコピーするインデックスを省略する場合、デフォルト値はlength property値です.

const arr = [1, 2, 3];

// arr[0]부터 arr[1] 이전까지 복사하여 반환
arr.slice(0, 1); // [1]
arr.slice(1, 2); // [2]

// 원본은 변경되지 않음
console.log(arr); // [1, 2, 3]

// 두번 째 인수를 생략하면 첫 번째 인수로 전달받은 인덱스로 부터 모든 요소를 복사
arr.slice(1) // [2, 3]

// 음수인 경우 배열의 끝에서 부터 요소를 복사
arr.slice(-1); // [3]
// 배열의 끝에서 두 개를 복사하여 반환
arr.slice(-2); // [2, 3]

// 인수를 모두 생략하면 원본 배열의 복사본을 생성 (얕은 복사)
const copy = arr.slice();
console.log(copy); // [1, 2, 3]
console.log(copy === arr); // false

// ex

const todos = [{id: 1, content: 'HTML'}, {id: 2, content:'CSS'}];
// 얕은 복사
const _todos = todos.slice();
// es6 const _todos = [...todos];

// todos와 _todos는 참조값이 다른 별개의 객체
console.log(todos === _todos); // false
// 배열의 참조값이 같다 => 앝은 복사
console.log(todos[0] === _todos[0]); // true

todos[0].id = 5;
console.log(_todos); // [{id: 5, content: 'HTML'}, {id: 2, content: 'CSS'}]

sliceメソッドを使用してレプリカを作成し、パラメータ、HTML Collection、NodeListなどの類似アレイのオブジェクトをアレイ

に変換する.

function sum() {
  var arr = Array.prototype.slice.call(arguments);
  console.log(arr); // [1, 2, 3]
  return arr.reduce((pre, cur) => pre + cur), 0);
}
console.log(sum(1, 2, 3)); // 6

function sum() {
  // 유사 배열 객체를 배열로 변환
  // ES6 const arr = [...arguments];
  const arr = Array.from(arguments); 
  console.log(arr); // [1, 2, 3]
   return arr.reduce((pre, cur) => pre + cur), 0);
}
console.log(sum(1, 2, 3)); // 6

Array.prototype.join

ソース配列のすべての要素を文字列に変換し、セパレータに接続された文字列

を返します.

文字列は、デフォルトの区切り文字カンマ(,)

を省略できます.

const arr = [1, 2, 3, 4];
arr.join(); // 1, 2, 3, 4
arr.join(''); // 1234
arr.join(':'); // 1:2:3:4

Array.prototype.reverse

逆順序

配列

ソースアレイ

を変更

const arr = [1, 2, 3];
const result = arr.reverse();
// 원본 배열을 직접 변경
console.log(arr); // [3, 2, 1]
console.log(result); // [3, 2, 1]

Array.prototype.fill

引数は、渡された値を配列の始終要素

に埋め込む.
ソースアレイ

を変更

const arr = [1, 2, 3];
arr.fill(0);
console.log(arr); // [0, 0, 0]

const arr2 = [1, 2, 3];
arr.fill(0, 1); // 두 번째 요소는 시작할 인덱스
console.log(arr2); // [1, 0, 0]

const arr3 = [1, 2, 3, 4, 5]
arr.fill(0, 1, 3); // 세 번째 요소는 멈출 인덱스 (인덱스 3 미포함)
console.log(arr3); // [1, 0, 0, 4, 5]

の充填方法で元素を充填する場合、欠点は1つの値

しか充填できないことである.

Array.fromメソッドを使用して2番目のパラメータを渡すコールバック関数は配列

を埋め込む.

const sequences = (length = 0) => Array.from({ length }, (_, i) => i);
console.log(sequences(3)); // [0, 1, 2]

Array.prototype.includes

ES 7を導入し、アレイに特定の要素が含まれていることを確認し、trueまたはfalse

を返す.

const arr = [1, 2, 3];
arr.includes(2); // true
arr.includes(10); // false

// 두 번째 인수는 검색을 시작할 index값
arr.includes(1, 1); // false
// 음수 인경우 (arr.length -1)부터 확인
arr.includes(3, -1); // true

[NaN].indexOf(NaN) !== -1; // false
[NaN].includes(NaN); // true

Array.prototype.flat

ES 10は、アレイ

を自己変数の深さで再平衡化するために導入される.

[1, [2, 3, 4, 5]].flat(); // [1, 2, 3, 4, 5]

// 중첩 배열을 평탄화할 깊이를 인수로 전달 기본값(1)
[1, [2, [3, [4]]]].flat(); // [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(1); // [1, 2, [3, [4]]]

[1, [2, [3, [4]]]].flat(2); // [1, 2, 3, [4]]
[1, [2, [3, [4]]]].flat().flat(); // [1, 2, [3, [4]]]

// Infinity를 통해 중첩 배열 모두 평탄화
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4, 5]

📖 参考図書:モダンJavaScript Deep Dive JavaScriptの基本概念と動作原理