[javascript] 배열method 정리

Array.prototype.at(인덱스번호) = 배열 인덱스 번호 위치 값 반환

at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환

양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다.

array[array.length - 1] 값은  array.at(-1)와 동일하다.

주어진 인덱스가 배열에 없으면 undefined를 반환

 

const colors = ['빨강', '초록', '파랑'];
colors.at(-2); //'초록' 반환
colors.at(0); //'빨강' 반환

 

 

Array.prototype.concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2); // array3 = ["a", "b", "c", "d", "e", "f"]


const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const num4 = num1.concat(num2, num3); //num4 =[1, 2, 3, 4, 5, 6, 7, 8, 9]


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

 
 
 

Array.prototype.copyWithin()

copyWithin() 메서드는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환

(배열의 길이를 수정하지 않고 반환)

 

const array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0,2)) // ['c', 'd', 'e', 'd', 'e'];

const array2 = ['a', 'b', 'c', 'd', 'e'];
console.log(array2.copyWithin(0,2,3)) // ['c', 'b', 'c', 'd', 'e']

const arr = ["사과", "바나나", "키위", "복숭아"];
console.log(arr.copyWithin(0,2)) // ['키위', '복숭아', '키위', '복숭아'] 끝나는 인덱스가 없으면 끝까지 복사

const fruits = ["사과", "바나나", "키위", "복숭아"]
console.log(fruits.copyWithin(0,2,3))// ['키위', '바나나', '키위', '복숭아']

 
 
 
 

Array.prototype.every()

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하고 Boolean 값을 반환

const arr = [1,2,3,4,5,6,7,8,9]; 
console.log(arr.every((e)=> e < 10 ) //true
console.log(arr.every((e)=> e < 8 ) //false

 
파라미터에 3개의 요소 가질수있음

every((element, index, array) => { ... } )

 
 
 

Array.prototype.fill()

fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채움

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

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

 

 
 

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result); // ["exuberant", "destruction", "present"]

let filtered = [12, 5, 8, 130, 44].filter((el) => el > 100);
console.log(filtered) //[130];

 
JSON 데이터에서 무효데이터 거르기 
바로 내가 이걸 몰라서 한참 헤맸는데 암튼 이건 내가 썼던 조건식...
** isNaN() : 주어진 값이 NaN이면 true, 아니면 false 반환

let arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

console.log(arr.filter((item)=> item.id !== undefined && item.id !== null && isNaN(item.id) == false && item.id > 0 ))
// arr = [ {id: 15}, {id: 3}, {id: 12.2} ]

 
 
 

Array.prototype.find()

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

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found); // found = 12

 
 
 

Array.prototype.findIndex()

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

const array1 = [5, 12, 8, 130, 44];

console.log(array1.findIndex((element) => element > 13));// Expected output: 3

 
 
 

Array.prototype.findLast()

findLast() 메서드는 배열을 역순으로 반복하고 제공된 테스트 함수를 만족하는 첫 번째 요소의 값을 반환 

(만족하는 요소 없으면 undefined반환)

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "fish", quantity: 1 },
  { name: "cherries", quantity: 5 },
];

console.log(inventory.findLast((item)=> item.quantity >2)) 
// {name: 'cherries', quantity: 5}

const result = inventory.findLast(({ quantity }) => quantity < 2); //구조분해할당
console.log(result); // { name: "fish", quantity: 1 }

 
 
 
 

Array.prototype.findLastIndex()

findLastIndex()메서드는 배열을 역순으로 반복하고 제공된 테스트 기능을 만족하는 첫 번째 요소의 인덱스를 반환

(만족하는 요소가 없으면 -1이 반환)

const array1 = [5, 12, 50, 130, 44];

console.log(array1.findLastIndex((element) => element > 45));
// Expected output: 3

 

 

 

Array.prototype.flat()

이 flat()메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열

 

 

Array.prototype.flatMap()

이 flatMap()메서드는 배열의 각 요소에 지정된 콜백 함수를 적용한 다음 결과를 한 수준씩 평면화하여 형성된 새 배열을 반환합니다. map()a 뒤에 flat()깊이 1( )이 오는 것과 동일 arr.map(...args).flat()하지만 이 두 메서드를 별도로 호출하는 것보다 약간 더 효율적입니다.

 

 

Array.prototype.forEach()

forEach()메서드는 각 배열 요소에 대해 제공된 함수를 한 번 실행

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

array1.forEach(element => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

 

 

 

 

Array.prototype.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별해서 boolean 으로 반환(포함하면 true)

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

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

console.log(pets.includes('cat', 2));//searchElement 검색을 시작할 위치 인덱스 번호 = 2 (기본값은 0)
// Expected output: false

 

 

Array.prototype.indexOf()

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환

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

console.log(beasts.indexOf('bison', 2));// Start from index 2 (없으면 기본값 0)
// Expected output: 4

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

아래와 같은 조건식으로 활용

function updateVegetablesCollection (veggies, veggie) {
    if (veggies.indexOf(veggie) === -1) { //veggies에 veggie가 없으면 
        veggies.push(veggie);  //추가해라
        }
        else if (veggies.indexOf(veggie) > -1) { // veggies에 veggie가 있으면
        console.log(veggie + ' 은 이미 veggies 컬렉션에 존재합니다.'); //그냥 콘솔에 알려줭
    }
}

 
 

Array.isArray()

Array.isArray() 메서드는 인자가 Array인지 판별해서 Boolean 반환(배열이면 true반환)

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

 
 

Array.prototype.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

arr.join([separator])

//separator : 배열의 각 요소를 구분할 문자열을 지정 (옵션)
//만약 arr.length 가 0이라면, 빈 문자열을 반환
//요소가 undefined 또는 null이면 빈 문자열로 변환

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join()); // Expected output: "Fire,Air,Water"
console.log(elements.join(', ')); // Expected output: "Fire, Air, Water"

console.log(elements.join('')); // Expected output: "FireAirWater"

console.log(elements.join('-')); // Expected output: "Fire-Air-Water"
console.log(elements.join(' + ')); // Expected output: "Fire + Air + Water"

 
 

Array.prototype.keys()

keys() 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

console.log(iterator) // Array Iterator {} 

for (const key of iterator) {
  console.log(key);
}

// Expected output: 0
// Expected output: 1
// Expected output: 2

 
 
 

Array.prototype.lastIndexOf()

lastIndexOf() 메서드는 배열에서 주어진 값을 발견할 수 있는 마지막 인덱스를 반환하고, 요소가 존재하지 않으면 -1을 반환합니다.

배열 탐색은 fromIndex에서 시작하여 뒤로 진행

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo')); // Expected output: 3
console.log(animals.lastIndexOf('Dodo', 3));  // 3  : 인덱스3부터 역행으로 요소 탐색
console.log(animals.lastIndexOf('Dodo', 2));  // 0  : 인덱스2부터 역행으로 요소 탐색
console.log(animals.lastIndexOf('Dodo', -2)); // 0  
console.log(animals.lastIndexOf('Dodo', -1)); // 3  : 가장 마지막 인덱스부터 역행으로 요소 탐색

console.log(animals.lastIndexOf('Tiger')); // Expected output: 1

 
 

Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 callback 함수를  한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열만듦

arr.map(callback(처리할 현재 요소, 처리할 현재 요소의 인덱스, map()을 호출한 배열)[, thisArg])

//callback : 새로운 배열 요소를 생성하는 함수
// 콜백함수의 parameter로 3가지를 넣을 수 있음 (요소값, 요소의 인덱스, map을 호출한 배열)

//thisArg : callback을 실행할 때 this로 사용되는 값(옵션)

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1); // Expected output: Array [2, 8, 18, 32]

 
map을 활용해 배열속 객체 재구성 하기 

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map((item)=>{
   var rObj = {};
   rObj[item.key] = item.value; // 객체의 key와 value로 할당
   return rObj;
});

// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 
문자열 요소를 숫자열 요소로 바꿔 반환하기 

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]
['1', '2', '3'].map(str => parseInt(str)); //[1, 2, 3]
['1', '2', '3'].map(Number); // [1, 2, 3]
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

 
 
 

Array.of()

Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다.

Array.of()와 Array 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. 

Array.of(7)은 하나의 요소 7을 가진 배열을 생성하지만 

Array(7)은 length 속성이 7인 빈 배열을 생성합니다.

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

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.of(undefined); // [undefined]

 
 
 

Array.prototype.pop()

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

빈 배열의 경우 undefined 를 반환

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop()); // Expected output: "tomato" 마지막요소 반환과 동시에 삭제

console.log(plants);// ["broccoli", "cauliflower", "cabbage", "kale"] 토마토없어짐

 
 
 

Array.prototype.push()

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

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');

console.log(count);// output: 4 인덱스 번호 아닌 length반환 
console.log(animals);// output: Array ["pigs", "goats", "sheep", "cows"]

 

 

Array.prototype.reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환

	arr.reduce((accumulator, currentValue, currentIndex, array)=>{ }, initialValue)
    
    //1. accumulator : 콜백의 반환값을 누적. 콜백의 이전 반환값 
    
    //2. currentValue : 처리할 현재 요소
    
    //3. currentIndex(Optional) : 처리할 현재 요소의 인덱스 
    //(initialValue를 제공한 경우 0, 아니면 1부터 시작)
    
    //4. array(Optional) : reduce()를 호출한 배열
    
    //5. initialValue(Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값.
    //초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용.
    //빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생함.
    
    //reduce의 반환 값 = 누적 계산의 결과 값.

 
초기 값이 없을때 (처음호출시 accumulator에 arr[0]이 할당되고, currentValue는 arr[1]이 할당된다)

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array)=>{
  return accumulator + currentValue;
});

//총 4번 호출됨 

//1번째 호출 시 
[0, 1, 2, 3, 4].reduce((0, 1, 1, [0, 1, 2, 3, 4])=>{
  return 0 + 1;
});

//2번째 호출 시 
[0, 1, 2, 3, 4].reduce((1, 2, 2, [0, 1, 2, 3, 4])=>{
  return 1 + 2;
});

//3번째 호출 시 
[0, 1, 2, 3, 4].reduce((3, 3, 3, [0, 1, 2, 3, 4])=>{
  return 3 + 3;
});

//4번째 호출 시 
[0, 1, 2, 3, 4].reduce((6, 4, 4, [0, 1, 2, 3, 4])=>{
  return 6 + 4;
});

//결과적으로 10 이 반환됨

 
초기값 10이 있을때 (처음 호출시 accumulator에는 초기값 10 이 할당되고, currentValue에는 arr[0]이 할당된다)

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue;
}, 10);

//총 5번 호출됨 

//1번째 호출 시 
[0, 1, 2, 3, 4].reduce((10, 0, 0, [0, 1, 2, 3, 4])=>{
  return 10 + 0;
});

//2번째 호출 시 
[0, 1, 2, 3, 4].reduce((10, 1, 1, [0, 1, 2, 3, 4])=>{
  return 10 + 1;
});

//3번째 호출 시 
[0, 1, 2, 3, 4].reduce((11, 2, 2, [0, 1, 2, 3, 4])=>{
  return 11 + 2;
});

//4번째 호출 시 
[0, 1, 2, 3, 4].reduce((13, 3, 3, [0, 1, 2, 3, 4])=>{
  return 13 + 3;
});

//5번째 호출 시 
[0, 1, 2, 3, 4].reduce((16, 4, 4, [0, 1, 2, 3, 4])=>{
  return 16 + 4;
});


//결과적으로 20 이 반환됨

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

let initialValue = 10;
const sum1 = arr.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sum1); // Expected output: 20 (초기값 10 + 배열요소의 총합 10)

const sum2 = arr.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue = 0
);

console.log(sum2); // Expected output: 10 (초기값 0 + 배열요소의 총합 10)

 
객체 배열의 합산

var initial = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce((acc, curr)=> {
    return acc + curr.x;
},initial)

console.log(sum) // 6

 
중복배열 펼치기 

var flattened = [[0, 1], [2, 3], [4, 5]].reduce((acc, curr) => {
    return acc.concat(curr);
  },
  [] //초기 값 빈배열
);

console.log(flattened) //[0, 1, 2, 3, 4, 5];
//[] + [0,1]=[0,1]
//[0,1] + [2,3] = [0,1,2,3]
//[0,1,2,3] + [4,5] = [0,1,2,3,4,5]

 
배열안의 요소를 객체의 key로 만들고, 요소의 갯수를 value로 반환하기 

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce((allNames, name)=> {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});

console.log(countedNames)// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

 
속성으로 객체 분류하기 (*)

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');

console.log(groupedPeople);
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

 
 
특정 key에 할당된 요소만 모아서 배열로 반환

var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

var allbooks = friends.reduce(function(accumulator, currentValue) {
  return [...accumulator, ...currentValue.books];
}, ['Alphabet']);

console.log(allbooks);
// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

 
 
배열의 중복요소 제거 

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);   //초기값 빈배열임! 
console.log(result); //[1,2,3,4,5]

 
 
프로미스 함수를 순차적으로 실행시키기(*)

function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  );
}

function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5);
  });
}

function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}

function f3(a) {return a * 3;}

function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}

const promiseArr = [p1, p2, f3, p4];

runPromiseInSequence(promiseArr, 10)
  .then(console.log);   // 1200

 
 
함수구성을 위한 파이프 함수 (*)

// Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;

// Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
    (acc, fn) => fn(acc),
    input
);

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240

 
 
reduce로 map 작성(*)

if (!Array.prototype.mapUsingReduce) {
  Array.prototype.mapUsingReduce = function(callback, thisArg) {
    return this.reduce(function(mappedArray, currentValue, index, array) {
      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
      return mappedArray;
    }, []);
  };
}

[1, 2, , 3].mapUsingReduce(
  (currentValue, index, array) => currentValue + index + array.length
); // [5, 7, , 10]

 
 

Array.prototype.reduceRight()

reduceRight() 메서드는 reduce()가 적용되는 것과 비슷하나, 배열의 마지막부터 호출하여 처리함

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

const result = array1.reduceRight((acc, cur) => acc.concat(cur));

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

arr.reduceRight((accumulator, currentValue, currentIndex, array)=>{ }, initialValue)

var a = ["1", "2", "3", "4", "5"];
var left  = a.reduce((prev, cur) => { return prev + cur; });
var right = a.reduceRight((prev, cur) => { return prev + cur; });

console.log(left);  // "12345"
console.log(right); // "54321"

 
 
 
 

Array.prototype.reverse()

reverse() 메서드는 배열의 순서를 반전하여 배열로 반환

const array1 = ['one', 'two', 'three'];
console.log(array1);// ["one", "two", "three"]

const reversed = array1.reverse();
console.log(reversed);// ["three", "two", "one"]

console.log(array1);// ["three", "two", "one"]

 
 
 

Array.prototype.shift()

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 연이은 나머지 값들의 위치를 한 칸씩 앞으로 당김.

제거된 요소를 반환 (배열의 길이를 변하게 함 , 빈 배열의 경우 undefined 를 반환)

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(firstElement); //1

console.log(array1);// [2, 3]

 
while 반복문에서 shift()사용하기
아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 빈 배열이 될 때까지 이를 반복됩니다.

let names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

    while( (i = names.shift()) !== undefined ) {
        console.log(i);
    }
    // Andrew, Edward, Paul, Chris, John

 
 

Array.prototype.slice()

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end요소는 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환.

원본 배열은 바뀌지 않음.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));// ["camel", "duck", "elephant"] 인덱스 2부터 끝까지 

console.log(animals.slice(2, 4));// ["camel", "duck"]인덱스 2부터 인덱스 4앞까지

console.log(animals.slice(1, 5));// ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));// ["duck", "elephant"]

console.log(animals.slice(2, -1));// ["camel", "duck"]

console.log(animals.slice());// ["ant", "bison", "camel", "duck", "elephant"]

 

 

Array.prototype.some()

some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트함.

배열에서 주어진 함수가 true을 반환하면 true를 반환. 그렇지 않으면 false를 반환.  (이 메서드는 원 배열을 변경하지 않음.)

ㄴ 하나라도 콜백조건에 통과가 되면 true, 하나도 콜백 조건에 맞지 않으면 false 

 

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

const even = (element) => element % 2 === 0;

console.log(array.some(even)); //  true
//요소중 2,4가 2의 나머지값 0에 부합하기 때문에 true

 

 

Array.prototype.sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

(기본 정렬 순서는 문자열의 유니코드 코드 포인트)

arr.sort([compareFunction])

//compareFunction (optional) : 정렬 순서를 정의하는 함수. 
//생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬.


//compareFunction의 방식

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}


//문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺄 수 있습니다. 
//다음 함수는 배열을 오름차순으로 정렬합니다 (Infinity 및 NaN이 포함되어 있지 않은 경우).

function compareNumbers(a, b) {
  return a - b;
}

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

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

 

숫자를 오름차순으로 정렬하는 방법(*)

var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b)=>{ a - b });
console.log(numbers); // [1, 2, 3, 4, 5]

속성 중 하나의 값을 기준으로 정렬 (*)

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

 
 

Array.prototype.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

 array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
 // start : 배열의 변경을 시작할 인덱스. 
 //배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정. 
 //음수인 경우 배열의 끝에서부터 요소를 셈.
 
 // deleteCount (optional) : 배열에서 제거할 요소의 수. 
 //deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거. 
 //deleteCount가 0 이하라면 어떤 요소도 제거하지 않음.
 
 //item1, item2, <em>...</em> (optional): 배열에 추가할 요소. 
 //아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 함.
 
 //반환값 : 제거한 요소를 담은 배열. 
 //하나의 요소만 제거한 경우 길이가 1인 배열을 반환. 
 //아무 값도 제거하지 않았으면 빈 배열을 반환.

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');  //인덱스 2에 'drum'추가

// myFish : ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed : [], 아무것도 제거되지 않아서 빈배열 반환

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1); 인덱스 3부터 1개 요소 제거 

// removed : ["mandarin"] 
// myFish : ["angel", "clown", "drum", "sturgeon"]

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet'); //인덱스 2번에서 1개 요소 삭제하고 그자리에 'trumpet'추가

// myFish : ["angel", "clown", "trumpet", "sturgeon"]
// removed : ["drum"]

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); 
//인덱스 0부터 2개 요소 삭제후
//그 자리에 'parrot', 'anemone', 'blue'추가

// myFish : ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed : ["angel", "clown"]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2); //인덱스 2번부터 끝까지 삭제

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]

 
 
 

Array.prototype.toLocaleString()

toLocaleString() 는 배열 요소를 문자열로 변환함.

이 문자열은 locale 고유 문자열(가령 쉼표 “,”)에 의해 분리됨.

var number = 1337;
var date = new Date();
var myArr = [number, date, 'foo'];

var str = myArr.toLocaleString();

console.log(str); // '1337,6.12.2013 19:37:35,foo'

 

 

Array.prototype.toString()

toString() 메서드는 배열을 문자열로 반환

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());// "1,2,a,1a"

 

 

Array.prototype.unshift()

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

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));// 5 ; length 반환

console.log(array1); // [4, 5, 1, 2, 3] 맨앞에 값 추가 되어 있음

 
 
 

Array.prototype.values()

values() 메서드는 배열에서 각 인덱스에 대한 값을 순회하는 array iterator (순회 가능한 새로운 반복자(*)) 객체를 반환

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

//  "a"
//  "b"
//  "c"

 
 
출처 : MDN