Java Script::入門(2)

📝 整列

💡 オブジェクト配列

const actors = [{ name: '김고은' }, { name: '고윤정' }];

console.log(actors);     // Array[Object, Object]
console.log(actors[0]);  // Object {name:"김고은"}
console.log(actors[1]);  // Object {name:"고윤정"}

💡 push:配列にアイテムを追加

actors.push({ name: '신세경' });

💡 length:配列のサイズ配列のサイズ

📝 複文

💡 for...of

💬 アレイを回転させるための繰り返し文です。

あまり使わない

let numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
  console.log(number);  // 10     20     30     40      50
}

💡 for...in

const singer = {
  name: '박채영',
  group: 'BLACKPINK',
  age: 24
};

//Object 함수 사용
console.log(Object.entries(singer)); // [["name", "박채영"], ["group", "BLACKPINK"], ["age" , 24]]
console.log(Object.keys(doggy));     // ["name", "group", "age" ]
console.log(Object.values(doggy));   // ["박채영", "BLACKPINK", 24]

Object.entries:キー、値、キー、値に変換される配列
Object.keys:キー、キー、キーの形状に変換される配列
Object.values:値、値、値に変換された配列

// for...in 사용
for (let key in singer) {
  console.log(`${key}: ${singer[key]}`);
  // name: 박채영
  // group: BLACKPINK
  // age: 24
}

📝 アレイ組み込み関数

💡 forEach

💬 パラメータは、各要素に処理するコードを関数として入力します。

💬 この関数のパラメータは各要素を指します

const actors = ['김고은', '고윤정', '신세경', '한소희'];

// for 반복문 사용
for (let i = 0; i < actors.length; i++) {
  console.log(actors[i]);
}

// forEach 사용
actors.forEach(actor => {
  console.log(actor);
});

// 결과 동일

上記のコードのパラメータactorは各要素を指します

コールバック関数コールバックかんすう:関数形式のパラメータを渡すかんすうがたのぱらめーたを渡す

💡 map

💬 アレイ内の各要素を変換し、このプロセスで新しいアレイを作成します。

💬 パラメータは変化関数(変化関数)を渡します。

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

// 제곱해서 새로운 배열 생성
const squared = [];   // 변화함수

// for 반복문 사용
for (let i = 0; i < array.length; i++) {
  squared.push(array[i] * array[i]); 
}

// forEach 사용
array.forEach(n => {
  squared.push(n * n);
});

// map 사용 1
const square = n => n * n;          // 변화함수 이름 선언
const squared = array.map(square);  // 변화함수 전달

// map 사용 2
const squared = array.map(n => n * n); // 변화함수 이름 선언 X

// 결과 동일
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64];

💡 indexOf

💬 必要なアイテムがいくつかの要素であることを検索する関数です。

値がオブジェクトまたは配列の場合は見つかりません

const actors = ['김고은', '고윤정', '신세경', '한소희'];
const index = actors.indexOf('신세경');
console.log(index);  // 2

💡 findIndex

💬 配列内で検索する要素を知っている関数です。

const todos = [
  {
    id: 1,
    text: '변수',
    done: true
  },
  {
    id: 2,
    text: '함수',
    done: true
  },
  {
    id: 3,
    text: '반복문',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); // 2

💡 find

💬 配列で見つかった値自体を返します。

...

const todo = todos.find(todo => todo.id === 3);
console.log(todo);
// {id: 3, text: "반복문", done: true}

💡 filter

💬 アレイから特定の条件を満たす値を個別に抽出して新しいアレイを作成

💬 パラメータ検査条件を含む関数

💬 関数のパラメータは、各要素の値を受け入れます。

...

const tasksNotDone = todos.filter(todo => todo.done === false);
// const tasksNotDone = todos.filter(todo => !todo.done);
console.log(tasksNotDone);

// [
     {
      id: 4,
      text: '배열 내장 함수',
      done: false
    }
   ];

💡 splice

💬 アレイから特定のアイテムを削除

💬 1番目のパラメータ:どのインデックスから削除しますか。2番目のパラメータ:そのインデックスからいくつか削除します。

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);  // [10, 20, 40]

💡 slice

💬 既存のアレイには影響しないが、アレイの切り取りに使用

💬 1番目のパラメータ:カットを開始する場所、2番目のパラメータ:カットを開始する場所

2番目のパラメータはXを含む

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2);  // 0부터 시작해서 2전까지

console.log(sliced);   // [10, 20]
console.log(numbers);  // [10, 20, 30, 40]

💡 shiftとpop

💬 shift:アレイから最初の要素を抽出

⚠抽出中にアレイ内の要素が消失します

const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value);    // 10
console.log(numbers);  // [20, 30, 40]

💬 pop:配列から最後の項目を抽出する

const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value);    // 40
console.log(numbers);  // [10, 20, 30]

💡 unshift

💬 配列の先頭に新しい要素を追加

const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers);  // [5, 10, 20, 30, 40]

💡 concat

💬 複数のアレイを1つのアレイに結合

ジルコニウムarr 1とarr 2は変化しなかった

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);

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

💡 join

💬 配列内の値を文字列で結合

const array = [1, 2, 3, 4, 5];
console.log(array.join());      // 1,2,3,4,5
console.log(array.join(' '));   // 1 2 3 4 5
console.log(array.join(', '));  // 1, 2, 3, 4, 5

💡 reduce

💬 配列内の値を文字列で結合

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

// forEach 사용
let sum = 0;
numbers.forEach(n => {
  sum += n;
});

// reduce 사용
const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum);

1番目のパラメータ:結果(コールバック関数)を返すためにアキュムレータとcurrentを取得します.2番目のパラメータ:reduce関数で使用される初期値
アキュムレータ:累積値

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

let sum = numbers.reduce((accumulator, current) => {
  console.log({ accumulator, current });
  // Object {accumulator: 0, current: 1}   // 초깃값 0이기 때문에 accumulator: 0
  // Object {accumulator: 1, current: 2}   // accumulator: 0 + 1 = 1
  // Object {accumulator: 3, current: 3}   // accumulator: 1 + 2 = 3
  // Object {accumulator: 6, current: 4}   
  // Object {accumulator: 10, current: 5}  
  return accumulator + current;
}, 0);

console.log(sum);   // 15

let average = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(average);   // 3

11 index:現在処理されているプロジェクトの数

11 array:現在処理中の配列自体を示す

📝 プロトタイプとクラス

💡 オブジェクト作成者

💬 関数を使用して新しいオブジェクトを作成し、挿入する値または関数を実装できます。

💬 newキーワード:新しいオブジェクトの作成に使用

一般関数の名前は大文字で始まる

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function() {
    console.log(this.sound);
  };
}

const dog = new Animal('개', '산체', '멍멍');
const cat = new Animal('고양이', '벌이', '야옹');

dog.say();  // 멍멍
cat.say();  // 야옹

💡 プロトタイプ

💬 同じオブジェクト作成者関数を使用する場合は、特定の関数または値を繰り返し使用できます。

💬 .prototype.[必要な鍵]=コード

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.say = function() {  // 프로토타입
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;    // 프로토타입

const dog = new Animal('개', '산체', '멍멍');
const cat = new Animal('고양이', '벌', '야옹');

dog.say();  // 멍멍
cat.say();  // 야옹

console.log(dog.sharedValue);  // 1
console.log(cat.sharedValue);  // 1

💡 継承オブジェクト作成者

💬 オブジェクト作成者間で関数の機能を再使用する場合

💬 最初のパラメータ:this、次のパラメータ:オブジェクト構築関数に必要なパラメータ

Animal.prototype.say = function() {
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;

function Dog(name, sound) {
  Animal.call(this, '개', name, sound);     // Animal.call 호출 
}
Dog.prototype = Animal.prototype;  // 상속

function Cat(name, sound) {
  Animal.call(this, '고양이', name, sound);  // Animal.call 호출 
}
Cat.prototype = Animal.prototype;  // 상속

const dog = new Dog('산체', '멍멍');
const cat = new Cat('벌', '야옹');

dog.say();
cat.say();

prototypeを共有する必要があるため、継承されたオブジェクトジェネレータ関数を作成した後、prototype値をAnimalに設定します.プロトタイプとして設定

💡 カテゴリ

💬 コンストラクション関数の作成時にコンストラクション関数を使用する

💬 メソッド:クラス内の関数、プロトコルタイプとして自動的に登録

class Animal {
  constructor(type, name, sound) {  // constructor 사용
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say() {   // 메서드
    console.log(this.sound);
  }
}

const dog = new Animal('개', '산체', '멍멍');
const cat = new Animal('고양이', '벌', '야옹');

dog.say();   // 멍멍
cat.say();   // 야옹

💬 継承:extendsキーワードを使用して、コンストラクション関数で使用されるsuper()関数は、継承クラスの作成者を示します。

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say() {
    console.log(this.sound); 
  }
}

class Dog extends Animal {     // 상속, extends 키워드 사용 
  constructor(name, sound) {
    super('개', name, sound);  // super() 함수 사용
  }
}

class Cat extends Animal {
  constructor(name, sound) {
    super('고양이', name, sound);
  }
}

const dog = new Dog('산체', '멍멍');
const dog2 = new Dog('죽은체', '왈왈');
const cat = new Cat('벌', '야옹');
const cat2 = new Cat('나비', '냐옹');

dog.say();   // 멍멍
dog2.say();  // 왈왈
cat.say();   // 야옹
cat2.say();  // 냐옹

Reference
ベロフォードと一緒のモダンJavaScript