js

javascript ๋ฐฐ์—ด ๋ฉ”์†Œ๋“œ(Array methods)

์œถโ‰ 2022. 10. 4. 16:31

- 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): ํŠน์ • ์š”์†Œ ์ง€์šฐ๊ณ  ์ถ”๊ฐ€

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

console.log(arr); //[1,100,200,5]

-> m ์ž๋ฆฌ์— 0์ด ๋“ค์–ด๊ฐˆ ๊ฒฝ์šฐ ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ๋Š” ์ˆซ์ž ๊ฐฏ์ˆ˜ ์—†์ด x๋ฅผ ์ถ”๊ฐ€ํ•จ

let arr = ["๋‚˜๋Š”", "์œถ", "์ž…๋‹ˆ๋‹ค"]
arr.splice(1,0,"๋Œ€ํ•œ๋ฏผ๊ตญ", "์‚ฌ๋žŒ");

console.log(arr); //["๋‚˜๋Š”","๋Œ€ํ•œ๋ฏผ๊ตญ","์‚ฌ๋žŒ","์œถ","์ž…๋‹ˆ๋‹ค"]

- 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๊นŒ์ง€ ๋ฐ˜ํ™˜

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

-> ๋งŒ์•ฝ ๊ด„ํ˜ธ์•ˆ์— ์•„๋ฌด ๊ฒƒ๋„ ์—†๋Š” ๊ฒฝ์šฐ ๋‚ด์šฉ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌ๋จ

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

- arr.concat(arr2, arr3 ...): ํ•ฉ์ณ์„œ ์ƒˆ ๋ฐฐ์—ด ๋ฐ˜ํ™˜

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

->[3,4]๋Š” ๋ฐฐ์—ด 5,6์€ ๊ฐ๊ฐ ๋ฐ˜ํ™˜ํ•œ ๊ฒฝ์šฐ

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

-arr.forEach(fn): ๋ฐฐ์—ด ๋ฐ˜๋ณต, ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ๋ฐ›์Œ

let users = ['Mike','Tom','jane'];
users.forEach((item, index, arr) => {});

ํ•จ์ˆ˜์— ์ด 3๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์žˆ์Œ

item: ํ•ด๋‹น ์š”์†Œ
index: ํ•ด๋‹น index

arr:ํ•ด๋‹น ๋ฐฐ์—ด ์ž์ฒด

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

index๋Š” 0 ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š”๋ฐ 1 ์ถ”๊ฐ€ํ•˜๋ฉด์„œ 1๋ถ€ํ„ฐ ํ‘œ์‹œ๊ฐ€ ๋จ

์˜ˆ์‹œ) ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์ˆ˜ ํ•ฉ์น˜๊ธฐ

let arr = [1,2,3,4,5];
let result = 0;
arr.forEach((num) => {
  result += num;
});
console.log(result); //15

 

-arr.indexOf / arr.lastIndexOf: ๋ฌธ์ž์—ด array ์™€ ์‚ฌ์šฉ๋ฒ•์€ ๊ฐ™์Œ
์ผ๋ฐ˜์  ๋ฐฐ์—ด์—์„œ ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” index๋ฅผ ๋ฐ˜ํ™˜
์—†์„ ๊ฒฝ์šฐ -1๋กœ ๋ฐ˜ํ™˜

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

์ธ์ˆ˜๊ฐ€ 2๊ฐœ์ผ ๊ฒฝ์šฐ ๋‘๋ฒˆ์งธ ๊ฐ’์€ ์‹œ์ž‘ ์œ„์น˜ ์˜๋ฏธ

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

๋์—์„œ๋ถ€ํ„ฐ ํƒ์ƒ‰ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ lastIdexOf ์‚ฌ์šฉ

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

-arr.includes(): ํฌํ•จํ•˜๋Š”์ง€ ํ™•์ธ

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

- arr.find(fn) / arr.findIndex(fn): ๋ณด๋‹ค ๋ณต์žกํ•œ ์—ฐ์‚ฐ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉ
์ฒซ๋ฒˆ์งธ true ๊ฐ’๋งŒ ๋ฐ˜ํ™˜ํ•˜๊ณ  ๋๋‚จ. ๋งŒ์•ฝ ์—†์œผ๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜
findIndex๋Š” ํ•ด๋‹น index๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์—†๋Š” ๊ฒฝ์šฐ -1 ๋ฐ˜ํ™˜
์˜ˆ์‹œ) ์ง์ˆ˜ ์ฐพ์•„๋‚ด๊ธฐ

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 result = userList.find((user) => {
  if (user.age < 19){
    return true;
  }
  return false;
});

console.log(result) //{name: 'Tom', age: 10}

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

console.log(result) //2

- arr.filter(fn): ๋งŒ์กฑํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜
find์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ๋™์ผ

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

- arr.reverse(): ๋ฐฐ์—ด์„ ์—ญ์ˆœ์œผ๋กœ ์žฌ์ •๋ ฌ. ์ตœ๊ทผ ๊ฐ€์ž…์ž ํ˜น์€ ์ตœ๊ทผ ๊ฒŒ์‹œ ์ •๋ ฌ

let arr = [1,2,3,4,5];
console.log(arr.reverse()); //(5)[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, {
    isAdult: user.age > 19,
  });
});

console.log(newUserList);
console.log(userList);

- arr.join: ๋ฐฐ์—ด์„ ํ•ฉ์ณ์„œ ๋ฌธ์ž์—ด ๋งŒ๋“ฆ

() ์•ˆ์— ์•„๋ฌด ๊ฒƒ๋„ ๋„ฃ์ง€ ์•Š์„ ๊ฒฝ์šฐ ๋ฌธ์ž์™€ ๋ฌธ์ž ์‚ฌ์ด , ๋กœ ํ‘œ์‹œ๋จ

let arr = ["์•ˆ๋…•", "๋‚˜๋Š”", "์ฒ ์ˆ˜์•ผ"];
let result = arr.join();
console.log(result); //์•ˆ๋…•,๋‚˜๋Š”,์ฒ ์ˆ˜์•ผ

(" ")์•ˆ์— ๋„ฃ์€ ๋Œ€๋กœ ๋ฌธ์ž ์‚ฌ์ด์— ์ถœ๋ ฅ ๋จ. ๋„์–ด์“ฐ๊ธฐ(๊ณต๋ฐฑ) ๋„ฃ์œผ๋ฉด ๊ณต๋ฐฑ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์คŒ

let arr = ["์•ˆ๋…•", "๋‚˜๋Š”", "์ฒ ์ˆ˜์•ผ"];
let result = arr.join(" ");
console.log(result); //์•ˆ๋…•  ๋‚˜๋Š”  ์ฒ ์ˆ˜์•ผ

- split: ๋ฌธ์ž์—ด์„ , ๊ธฐ์ค€์œผ๋กœ ๋‚˜๋ˆ ์„œ ๋ฐฐ์—ด์„ ๋งŒ๋“ค์–ด์คŒ

const users = "Mike,Jane,Tom,Tony";
const result = users.split(",");
console.log(result); //(4) ['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(Array.isArray(user)); //false
console.log(Array.isArray(userList)); //true