JS2
68663 ワード
👨🏻🏫 クラスとオブジェクトの違い(クラスとオブジェクト)
source : dream符号化jsベース6
classにはフィールドとメソッドが含まれており、これらのフィールドのみが含まれている場合はdataclassと呼ばれます.カプセル化、継承、多形性.
classはtemplate、青写真と呼ばれています.class自体にはデータは含まれず、フレームワークのみを設定します.
このクラスに実際にデータを入れて作成したのがobjectです.したがって、クラスを使用して新しいインスタンス数を作成するとobjectになります.
object-oriented programming
class: template
object: instance of a class
JavaScript classes
-introduced in ES6
-syntactical sugar over prototype-base inheritance
jsにclassを追加して間もなく.これまでクラスを定義するのではなくobjectを作成し、関数を使用してテンプレートを作成しました.classは完全に新しく追加されたのではなく、既存のプロトタイプに文法クラスを追加して、より便利に使用できます.文法上の甘さと便利さ
1. Class declaration
class Person{
//constructor
constructor(mname, age){
//fields
this.mname = name;
this.age = age;
}
//method
speak(){
console.log(
${this.mname}: hello! );}
}
const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
2. Getter and Setter
setterはユーザーの入力範囲を制限します.
getterを定義した瞬間がこれです.ageはメモリからデータを読み出すものではありません.
getterを直接呼び出します.
setterを定義する瞬間、等号()=age;)つまり、値の割り当て時にすぐに
割り当てではなくsetterを呼び出します.
したがって、getterおよびsetterはメモリに値を割り当てるのではなく、setter getterを介して呼び出しスタックを超えるために無限呼び出しを継続します.
したがって、getter、setterで使用する変数の名前を少し変える必要があります.
最終的に、UserクラスのフィールドはfirstName、lastName、ageの3つです.
Field ageは僕らだけどageと呼べるもの、そして.ageに値を割り当てることができるのは、getterとsetterが内部で使用されているからです.
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age(){
return this._age;
}
set age(value){
// if(value < 0){
// throw Error('age can not be negative');
// }
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Jobs', -1);
console.log(user1.age);3. Fields (public, private)
追加時間が遅すぎます.
class Experiment {
publicField = 2; //public
#privateField = 0;// private 외부에서 접근 불가능
}
const experiment = new Experiment();4. Static properties and methods
追加時間が遅すぎます.
オブジェクトやデータにかかわらず、クラスで繰り返し使用されるフィールドとメソッドに静的キーを追加します.
class Article{
static publisher = 'Dream coding';
constructor(articleNumber) {
this.articleNumber = articleNumber;
}
static printPublisher() {
console.log(Article.publisher);
}
}
console.log(Article.publisher);
Article.printPublisher();5. Inheritance
a way for one class to extend another class
class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color of`);
}
getArea(){
return width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape {
draw (){ // 오버라이딩
super.draw(); //부모의 super 호출
console.log('?');
}
getArea(){ //오버라이딩
return (this.width*this.height) / 2;
}
toString(){ //오버라이딩
return `Triangle: color: ${this.color}`;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Triangle(20, 20, 'red');
triangle.draw();6. Class checking : instanceof
objectがクラスを使用して作成されたインスタンスであることを確認します.
console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object); //js의 모든 object는 Object를 상속받음.
console.log(triangle.toString());👨🏻🏫 オブジェクトオブジェクトオブジェクト
source : dream符号化jsベース7
Objects
one of the JavaScript's data types.
a collection of related data and/or functionality.
Nearly all objects in JavaScript are instances of Object.
object = {key : value};
オブジェクトはkeyとvalueの集合です.
1. Literals and properties
objectはカッコで作成するかnewキーオブジェクトクラスとして作成する
1つ目の方法は「objectliteral」syntaxです
オブジェクトコンストラクション関数構文
const obj1 = {}; //'object literal' syntax
const obj2 = new Object();//'object constructor' syntax
function print(person){
console.log(person.mname);
console.log(person.age);
}
const ellie = {mname: 'ellie', age: 4};
//클래스가 없어도 괄호를 이용해서 오브젝트 생성
print(ellie);con add properties laters
jsは実行時にタイプを決定します.
object宣言後にpropertyを追加または削除できます.
ellie.hasJob = true;
delete ellie.hasJob;2.計算された計算属性
objectのデータにアクセスする場合"."データ名にアクセスするには、カッコ内の文字列を使用します.
後者の方法をComputed Propertiesと呼ぶ.このときキーは常にstringであるべきです
前者の方法は、符号化された瞬間に、対応する値を得たいときに使用します.
Computed propertiesは、実行時にどのキーが必要か分からないときに使用します.
すなわち、必要な鍵の値をリアルタイムで取得したい場合に使用します.
console.log(ellie.name);
console.log(ellie['name']);//object안의 변수 이름의 스트링 형태로 접근 가능.
ellie['hasJob'] = true; //computed properties를 이용한 프로퍼티 추가エンコードするときに何を出力するか全然分かりません.
だからこの時computed propertiesを使うべきです.
keyに関するvalueを動的に取得する必要がある場合に使用します.
function printValue(obj, key){
// console.log(obj.key); -> object에 'key'라는 프로퍼티가 들어있지 않으므로 undefined 리턴
console.log(obj[key]);
}
printValue(ellie, 'name');3. Property value shorthand
functionからobjectを返す場合、keyとvalueが同じであれば省略できます.
const person1 = {mname: 'bob', age: 2};
const person2 = {mname: 'bob', age: 2};
const person3 = {mname: 'bob', age: 2};したがって、値を渡すだけでobjectを作成する関数が作成されます.
たとえば、クラス(template).
const person4 = makePerson('ellie', 30);
console.log(person4);
function makePerson(name, age){
return { //object를 리턴
name, //key와 value가 동일하면 생략 가능.
age,
};
}4. constructor function
したがって,他の計算を行わずにobjectを純粋に作成する関数はclassのように大文字で始まるnameを作成し,戻りではなく構造関数で行ったように作成する.name=name; を作成します.
また,呼び出し時にもnewキーワードをnew Person()として用いる.
jsエンジンは自分でobjectを生成します.
const person5 = new Person('kwang', 29);
console.log(person5);
function Person(name, age){
// this = {}; -> 생략된 부분: 새로운 object 생성
this.name = name;
this.age =age;
//return this; -> 생략
}
5. in operator: property existence check (key in obj)
objに対応する鍵があるかどうか
console.log('name' in ellie);6. for..in vs for..of
for(let key in ellie){ //key들을 하나씩 받아옴
console.log(key);
}
//for (value of iterable)
//object를 쓰는 것이 아니라 배열과 같은 순차적인 구조에 해당.
const array = [1,2,3,4];
for(let value of array){
console.log(value);
}7. Fun cloning
Object.assign(dest, [obj1, obj2, obj3...])
🍀 objectが割り当てられている場合、同じobjを指します.
const user = {mname: 'ellie', age: '20'};
const user2 = user;
user2.mname = 'kwang';
console.log(user);old way:空のobjを作成し、valueを手動で繰り返して割り当てます.
const user3 ={};
for(let key in user){
user3[key] = user[key]; //새로운 프로퍼티 key를 만들고 value를 넣는다.
}
console.log(user3);const user4 = Object.assign({}, user);
console.log(user4);const fruit1 = {color : 'red'};
const fruit2 = {color : 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); //뒤에 나오는 변수가 있고 동일한 프로퍼티가 있다면 값을 계속 덮어씌워진다.
console.log(mixed.size);👨🏻🏫 アレイの概念とAPI
👀 objectと資料構造の違い:objectは相互に関連する特徴と行為を組み合わせている.また,類似のタイプのオブジェクトを結合して資料構造と呼ぶ.他の言語では、同じタイプのobjectのみがデータ構造に含めることができますが、jsは動的タイプの言語であるため、1つのバスケットに複数のタイプのデータを含めることができます.しかし、そうしないほうがいいです.
source : dream符号化jsベース8
1. Declaration
const arr1 = new Array();
const arr2 = [1,2];2. Index position
const fruits = ['🍎' , '🍌'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[fruits.length -1]);
console.clear();3. Looping over an array
a. for
for (let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}b. for of
for (let fruit of fruits){
console.log(fruit);
}c. for each
各配列のvalueは、私が渡した関数を実行します.
fruits.forEach(function (fruit, index) {
console.log(fruit, index);
});行の場合、カッコとセミコロンは必要ありません.
fruits.forEach((fruit, index) => console.log(fruit, index));4. additon, deletion, copy
push: add an item to the end
fruits.push('🍓','🍑');pop: remove an item from the end
削除された要素を削除して返します.
fruits.pop();
fruits.pop();
console.log(fruits);unshift: add an item to the beginning
fruits.unshift('🍆', '🌽');
console.log(fruits);shift: remove an item from the beginning
fruits.shift();
fruits.shift();
console.log(fruits);一番前のすべての要素を挿入または削除するには、後ろのすべての要素をストレッチまたはストレッチする必要があるため、時間がかかります.
splice: remove an item by index position
splice(開始インデックス、削除する個数):「削除する個数」を指定しない場合は、開始インデックスから終了まで削除します.
splice(開始インデックス、削除する数、挿入要素1、挿入要素2...):また、削除した場所に新しい要素を挿入することもできます.
returnは削除された要素を返します.
削除する個数が0の場合は、挿入のみ可能です.
fruits.push('🥑', '🍋', '🍊');
fruits.splice(1, 1);
console.log(fruits);
fruits.splice(1, 1, '🍏','🍐');
console.log(fruits);concat: combine two arrays
const fruits2 = ['🍒','🌶'];
const newFruits = fruits.concat(fruits2);5. serching
indexOf: find the index
includes
console.log(fruits.indexOf('🍎'));
console.log(fruits.includes('🍌')); // false, 해당 원소가 포함되어있는지LastIndexOf:要素が2つの例外の場合、最後の要素のインデックスを返します。
fruits.push('🍎');
console.log(fruits.indexOf('🍎'));
console.log(fruits.lastIndexOf('🍎'));👨🏻🏫 10種類の有用な配列関数、Array API
source : dream符号化jsベース9
// Q1. make a string out of an array
{
const fruits = ['apple', 'banana', 'orange'];
const res = fruits.join();
console.log(res);
}
// Q2. make an array out of a string
{
const fruits = '🍎, 🍌, 🍒, 🍏';
const res = fruits.split(',', 2); //2 -> 앞에서 두개만 나오도록 제한할 수 있다.
console.log(res);
}
// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
const array = [1, 2, 3, 4, 5];
const res = array.reverse();
console.log(res);
console.log(array);//기존 배열도 reverse된다
}
// Q4. make new array without the first two elements
{
const array = [1, 2, 3, 4, 5];
//splice는 제거된 원소들의 배열을 리턴하고 기존 배열은 남은 원소들로 변경된다
const res = array.splice(0, 2);
console.log(res);
console.log(array);
//slice는 배열의 특정부분을 배열로써 리턴하고 기존 배열을 변하지 않는다.
//end index는 제외된다는 점을 주의하자.
//Returns a copy of a section of an array.
const array2 = [1, 2, 3, 4, 5];
const res2 = array2.slice(2, 5);
console.log(res2);
console.log(array2);
}
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 88),
];
// Q5. find a student with the score 90
{
//find: Returns the value of the first element in the array where predicate is true, and undefined
//콜백함수가 true를 리턴하면 즉시 중단하고 그때의 원소를 리턴함.
const res = students.find((student) => student.score === 90);
console.log(res);
}
// Q6. make an array of enrolled students
{
//filter: Returns the elements of an array that meet the condition specified in a callback function.
//조건에 맞는 원소들을 리턴한다. 콜백함수에서 true를 리턴하면 조건에 맞는거다.
const res = students.filter((student) => student.enrolled);
console.log(res);
}
// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
//map: 배열의 각 원소들을 콜백함수로 가공한 뒤 return하고 그 원소들(results)의 배열을 리턴함.
const res = students.map((student) => student.score);
console.log(res);
}
// Q8. check if there is a student with the score lower than 50
{
//some: 배열의 각 원소들에 대해 콜백함수에서 true를 리턴하는 원소가 있는지 탐색함.
const res = students.some((student) => student.score < 50);
console.log(res);
//every: 배열의 모든 원소들이 콜백함수에서 true를 return하는지 확인.
const res2 = !students.every((student) => student < 50 );
console.log(res2);
}
// Q9. compute students' average score
{
//reduce: 누적된(accumulated) 정보를 얻을 때 사용함.
//리턴된 값을 다음 콜백함수의 prev인자로 씀.
//초기값(init) 설정있음.
// const res = students.reduce(function(prev, curv) {
// return prev + curv.score;
// }, 0);
const res = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(res / 5);
}
// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
const res = students.map((student) => student.score).join();
console.log(res);
}
// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
//sort: 이 메서드는 배열을 변경하고 동일한 배열에 대한 참조를 반환합니다.
//a - b에서 음수가 나오면 b가 크다는 뜻이므로 정렬된다.
const res = students.map((student) => student.score)
.sort((a, b) => a - b)
.join();
console.log(res);
}Reference
この問題について(JS2), 我々は、より多くの情報をここで見つけました https://velog.io/@dnflrhkddyd/JS2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol