[Java Script]配列

52829 ワード

Java Script テキストリンク

📍 整列

順番のリストが並んでいる

ハーモニー

let student1 = '철수';
let student2 = '영희';
.
.
.
let student30 = '영수';

// 배열을 이용하면 아래와 같이 간단하게 표현 가능
let students = ['철수', '영희', ..., '영수'];
for(let name in students){
  console.log(students[name]); // "철수", "영희", ..., "영수"
}

students[0] = '민정' // index별 값 변경 가능

📍 パターンフィーチャー

配列には、アルファベット、数字、オブジェクト、関数を含めることができます.

ハーモニー

let arr = [
  '민수', // 문자열
  3, // 숫자
  false, // Boolean
  { // Object
    name : 'Mike',
    age : 30,
  }
  function(){ // 함수
    console.log('TEST');
  }
];

📍 配列の方法
📍 length

アレイサイズを示す方法

ハーモニー

let days = ['월','화','수'];
days.length; // 3

📍 push

アレイ末尾に値を追加するpush

ハーモニー

let days = ['월','화','수'];
days.push('목');
console.log(days) // ['월','화','수','목']

📍 pop

アレイ末尾で値を削除するpop

ハーモニー

let days = ['월','화','수'];
days.pop();
console.log(days) // ['월','화']

📍 shift

配列の前に値を追加するshift

ハーモニー

let days = ['월','화','수'];
days.shift('일');
console.log(days) // ['일','월','화','수']

📍 unshift

アレイ前面値を消去するunshift

ハーモニー

let days = ['월','화','수'];
days.unshift();
console.log(days) // ['화','수']

📍 splice(start,count,elements)

start count個の要素の削除を開始し、要素をアレイに追加

ハーモニー

let arr = ['a','b','c','d','e','f'];

// 삭제된 원소 반환
console.log(arr.splice(2,3)); // [ 'c', 'd', 'e' ]

// 제거 후 남은 원소 목록
console.log(arr); // [ 'a', 'b', 'f' ]

// 원소 제거 후 새로운 원소 추가
let arr2 = ['a','b','c','d','e','f'];

// index 2부터 3개의 원소를 제거한 후 77, 100을 배열에 추가
arr2.splice(2,3,77,100);
// 배열의 끝에 추가되는 것이 아닌 제거가 끝난 index 위치에 추가!
console.log(arr2); // [ 'a', 'b', 77, 100, 'f' ]

📍 slice(start,end)

開始から終了までの要素を返す

ハーモニー

const arr = ['a','b','c','d','e','f'];
console.log(arr.slice()); // [ 'a', 'b', 'c', 'd', 'e', 'f' ], 배열이 복사됨
console.log(arr.slice(3)); // [ 'd', 'e', 'f' ]
console.log(arr.slice(1,4)); // [ 'b', 'c', 'd' ]

📍 concat(arr1,arr2,...)

アレイを統合して新しいアレイに戻る

ハーモニー

let arr1 = ['a','b'];
const arr2 = ['c','d'];
console.log(arr1.concat(arr2)); // [ 'a', 'b', 'c', 'd' ]
// 배열이 아닌 원소도 추가할 수 있다!
console.log(arr1.concat(arr2,'e','f')); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]

📍 forEach(function)

配列ごとに機能を実行する

ハーモニー

function print(item){
  console.log(item);
}

let arr = ['ABC','DEF','GHI'];

// item : 원소, index : 배열 인덱스, array : 배열
arr.forEach((item, index, array)=>{
  console.log(`${index+1}. ${item}`); // 1. ABC 2. DEF 3. GHI
});

arr.forEach(print); // "ABC" "DEF" "GHI"

📍 indexOf() , lastIndexOf()ハーモニー

const arr = [10,20,30,40,50,10];
console.log(arr.indexOf(40)); // 3
console.log(arr.indexOf(70)); // -1, 배열에 존재하지 않을 경우
console.log(arr.indexOf(10)); // 0
// 1번 index 이후부터 존재하는 원소를 찾아 index값 반환
console.log(arr.indexOf(10,1)); // 5
// 배열 끝에서부터 원소를 찾아 index값 반환
console.log(arr.lastIndexOf(10)); // 5

📍 includes()

アレイに要素が含まれているか確認する

ハーモニー

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

📍 find(function)ハーモニー

const arr = [1,2,3,4,5];
const result = arr.find((item)=>{
  return item%2 ===0; // 식이 true일 경우 반복을 멈추고 item 값을 반환합니다.
});
console.log(result); // 2
// 주의점 : 첫번째 값만 반환하고 반복이 종료됨

📍 findIndex(function)ハーモニー

const arr = [
  { number : 1, name : "ksh" },
  { number : 2, name : "eyj" },
  { number : 3, name : "wsb" }
];
const result = arr.findIndex((item)=>{
  if(item.number === 2){
    return true;
  }
  return false;
});
console.log(result); // 1, arr 배열의 index 1 위치의 값
// 주의점 : 첫번째 값만 반환하고 반복이 종료됨

📍 filter(function)

条件を満たす全ての要素をアレイに戻す

ハーモニー

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

📍 reverse()

逆順

ハーモニー

const arr = [1,2,3,4,5];
console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]

📍 map(function)

関数を受け取って特定の機能を実行し、新しいアレイに戻る

ハーモニー

const arr = [
  { number : 1, name : "ksh" },
  { number : 2, name : "eyj" },
  { number : 3, name : "wsb" }
];

// ※ 현업에서 많이 사용되는 방식!!!
const newArr = arr.map((item,index)=>{
  return Object.assign({}, item, {
    odd : item.number % 2 === 1
  })
});

console.log(newArr)
// [ { number: 1, name: 'ksh', odd: true },
// { number: 2, name: 'eyj', odd: false },
// { number: 3, name: 'wsb', odd: true } ]

📍 join()

文字列連結

ハーモニー

const arr = ['Hello','My','name','is','KSH'];
console.log(arr.join()); // Hello ,My ,name ,is ,KSH
console.log(arr.join("")); // HelloMynameisKSH
console.log(arr.join(" ")); //Hello My name is KSH

📍 split()

文字列分離

ハーモニー

const arr = 'Hello My name is KSH';
console.log(arr.split(' ')); // [ 'Hello', 'My', 'name', 'is', 'KSH' ]

📍 Array.isArray()

文字列分離

ハーモニー

// 객체
const arr1 = {
  name : 'KSH',
  age : 26
}

// 배열
const arr2 = [ 'SHK', 26 ];

console.log(typeof(arr1)); // object
console.log(typeof(arr2)); // object

console.log(Array.isArray(arr1)); // false
console.log(Array.isArray(arr2)); // true

📍 sort(function)

並び順、並び自体変更

Lodash:実務でよく使う、勉強!

ハーモニー

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

// ※ 주의 : 숫자 자체가 아닌 숫자의 앞자리 수를 기준으로 정렬함

let arr1 = [13, 5, 41, 20, 3];
console.log(arr1); // [ 13, 5, 41, 20, 3 ]
arr1.sort();
console.log(arr1); // [ 13, 20, 3, 41, 5 ]

arr1.sort((a, b) => {
  return a - b;
});
console.log(arr1); // [ 3, 5, 13, 20, 41 ]

📍 reduce()ハーモニー

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

// prev : 누적 계산값, cur : 현재값
const result = arr.reduce((prev, cur) => {
  return prev + cur; // 누적값 += 현재값
},0); // 0은 초기값
console.log(result) // 15

const userList = [
  { name : "KSH", age : 26 },
  { name : "EYJ", age : 17 },
  { name : "WSB", age : 33 },
  { name : "LSH", age : 42 },
  { name : "KMJ", age : 8 },
  { name : "LHG", age : 23 },
];

const result = userList.reduce((prev, cur)=>{
  if(cur.age > 19){
    prev.push(cur.name);
  }
  return prev;
}, []); // 초기값 [] > 빈 배열

console.log(result); // [ 'KSH', 'WSB', 'LSH', 'LHG' ]

// recuedRight() 는 reduce()와 같지만 오른쪽부터 연산한다는 점이 다릅니다.

📍 配列で重複する文を使用する例

配列のlengthmethodにより、配列長さに等しい繰り返し文を使用できます!

ハーモニー

let days = ['월','화','수','목','금','토','일'];
for(let i = 0; i < days.length; i++){ // days 배열의 길이만큼 반복
  console.log(days[i]);
}

配列の値を呼び出す場合はfor ... inを使用できますが、メリットよりもデメリットが多いため、使用は推奨されません.

とは逆に、タイルを使う場合に使うfor ... of

・for(let i = 0; i < arr.length; i++)ゲートと比較すると、使いやすいがインデックス値が得られないというデメリットがあります.

ハーモニー

let days = ['월','화','수','목','금','토','일'];
for(let day of days){
  console.log(day); // '월','화','수','목','금','토','일'
}

Reference

この問題について([Java Script]配列), 我々は、より多くの情報をここで見つけました https://velog.io/@isayaksh/Java-Script-배열

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[Android Pro]CountDownTimerカウントダウン

チャレンジ:反応アプリケーションからスプレッドシートを作成する?