Modern Javascipt(アレイ内蔵関数)

次に、よく使われる配列内蔵関数を見てみましょう.

forEach

forEach:アレイを巡回するための単純な組み込み関数

const array = ['a', 'b', 'c', 'd'];

array.forEach((param) => console.log(param)); // a, b, c, d

Push、pop、shift、unshiftなどの機能を組み合わせることで、Eachの内蔵関数をより大きな役割を果たすことができます.

const array = ['a', 'b', 'c', 'd'];
const newArray = [];

array.forEach((param) => newArray.push(param + param));

console.log(newArray);  // ['aa', 'bb', 'cc', 'dd']

map

map:元の配列をループし、各要素に対してコールバック関数を実行し、戻り値を返します.
forEachと似ていますが、戻りを返しますので、変数に代入できます.

const array = ['a', 'b', 'c', 'd'];

const newArray = array.map((param) => {return param + param + param;})

console.log(newArray); // ['aaa', 'bbb', 'ccc', 'ddd']

includes

include:所与の配列に任意の値が存在するか否かを判断する(true,false)

const array = ['a', 'b', 'c', 'd'];
let str = "b";

console.log(array.includes(str));	// true

indexOf

indexOf:任意の値が所与の配列の何番目に存在するかを返します.(-1がない場合)
indexOfが最初の値である場合、すなわち0を返す場合false処理(0はfalsey)
それを補うためにincludeが現れた.

const array = ['a', 'b', 'c', 'd'];
let str = "b";

console.log(array.indexOf(str));    // 1

findIndex

findIndex:条件を満たす配列のインデックス番号を返す

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.findIndex((value) => { 
  return value.color === "pink";	// 3
}));

find

find:条件を満たす配列の要素を返します.

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.find((value) => {
  return value.color === "pink";	// {color : pink}
}));

filter

filter:条件に基づいて配列内のtrueを返すすべての要素を返す

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.filter((value) => value.color === "blue"))	// [{color: 'blue'}, {color: 'blue'}]

slice

slice:配列内の要素を条件に基づいて切り取る方法

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.slice(0,3));	[{color: 'red'}, {color: 'blue'}, {color: "green"}]

concat

concat:2つの配列をマージする方法

const array = ['a', 'b', 'c', 'd']
const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(array.concat(arrObj)); // ['a', 'b', 'c', 'd', {…}, {…}, {…}, {…}, {…}]

sort

sort:元の配列をアルファベット順にソート

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

engs.sort();

console.log(engs);  //['a', 'b', 'c', 'd', 'e']

ただし、数値をソートする場合は、数値を文字と見なし、1、12、2、233、および3にソートします.

const numbers = [3,124,23,5,46,345,32,12,3,41,24,2];

numbers.sort();

console.log(numbers); //[12, 124, 2, 23, 24, 3, 3, 32, 345, 41, 46, 5]

// 때문에 비교함수를 만드는 사전 작업이 필요함
const compare = (num1 , num2) => {
  if (num1 > num2){
    // numb1 이 num2 보다 크다면 num1을 num2보다 뒤로 보냄
    return 1;   
  };
  if (num1 < num2){
    // numb1 이 num2 보다 작다면 num1을 num2보다 앞으로 보냄
    return -1;
  };
  return 0;
};
numbers.sort(compare);
console.log(numbers);   //[2, 3, 3, 5, 12, 23, 24, 32, 41, 46, 124, 345]

join

join:配列内の値を後続の出力として使用する方法

const strings = ["안녕하세요", "자바스크립트", "es6", "이후", "공부중입니다."];

console.log(strings.join(" ")); // 안녕하세요 자바스크립트 es6 이후 공부중입니다.