JS中級教程整理

97896 ワード

JavaScript テキストリンク

ビデオを整理

1.コンストラクタ

関数にnewを追加し、実行するとコンストラクション関数になります.

ジェネレータ関数は、印刷対象のフレームワークと言える.

慣例に従って、最初の字は大文字で書きます.

function Item(title, price){
    //this = {}
    this.title = title;
    this.price = price;
    this.showPrice = function(){
        console.log('가격은 ${price}원 입니다.');
    };
    // return this;
}

const item1 = new Item("인형", 3000);
const item2 = new Item("가방", 4000);
const item3 = new Item("지갑", 9000);

console.log(item1, item2, item3);

item3.showPrice();

Item {title: "인형", price: 3000, showPrice: f}
Item {title: "가방", price: 4000, showPrice: f}
Item {title: "지갑", price: 9000, showPrice: f}

newを貼り付けて関数を実行する場合は、コメント処理のコードを実行と見なすことができます.const item2 = Item("가방", 4000);のように修正して実行すると、以下の結果が得られます.

Item {title: "인형", price: 3000, showPrice: f}
undefined // 반환하는 값이 없기 때문
Item {title: "지갑", price: 9000, showPrice: f}

2.オブジェクトメソッド、computed property

2.1 Computed property

aという変数とuserというオブジェクトがあります.

let a = 'age';
const user = {
    name: 'Mike', // name: 'Mike'
    age: 30 // age: 30
}

このとき,ageではなく[a]を用いると,変数aに割り当てられた値ageがkeyとなる.

let a = 'age';
const user = {
    name: 'Mike', // name: 'Mike'
    [a]: 30 // age: 30
}

儀式に参加することも可能です.

const user = {
    [1 + 4]: 5,
    ["안녕" + "하세요"]: "Hello"
}

> {5: 5, 안녕하세요: "Hello"}

2.2オブジェクトで使用可能なメソッド

1) Object.assign()
オブジェクトをコピー!

const user = {
    name: "Mike",
    age: 30
}

const cloneUser = user; //참조값만 복사, 하나의 객체에 두 변수가 접근

const newUser = Object.assign({}, user);
// 첫 번째 매개변수는 초기값이고, 두 번째 매개변수를 통해 들어온 값이 들어오게 된다.

{} ← {name: "Mike", age: 30}

결과↓
{
    name: "Mike",
    age: 30,
}

assignを使用すると、同じ内容ですが、新しいオブジェクトを作成できます.
初期値を入れると、マージされます.

Object.assign({gender:"male"}, user);

=> gender: "male",
    name: "mike",
    age: 30,

名前に同じ初期値がある場合は上書きされます.

Object.assign({name:"Tom"}, user);

=>  name: "mike", // Tom은 사라짐
    age: 30,

2つ以上のオブジェクトをマージできます.

const user = {
    name: "Mike"
}
const info1 = {
    age: 30,
}
const info2 = {
    gender: "male",
}
Object.assign(user, info1, info2)
// user에 info1과 info2가 합쳐짐

{
    name: "Mike",
    age: 30,
    gender: "male",
}

2) Object.keys()
鍵スキームを返します!

const user = {
    name: "Mike",
    age: 30,
    gender: "male",
}

Object.keys(user)

=> ["name", "age", "gender"]

3) Object.values()
value配列を返します!

const user = {
    name: "Mike",
    age: 30,
    gender: "male",
}

Object.values(user)

=> ["Mike", 30, "male"]

4) Object.entries()
キー/値バインドが返されます!

const user = {
    name: "Mike",
    age: 30,
    gender: "male",
}

Object.entries(user)

=> 
[
    ["name", "Mike"],
    ["age", 30],
    ["gender", "male"],
]

5) Object.fromEntries()
キー/値を組み合わせてオブジェクトに挿入!

const arr =
[
    ["name", "Mike"],
    ["age", 30],
    ["gender", "male"],
];

Object.fromEntries(arr);
=>
{
    name: "Mike",
    age: 30,
    gender: "male",
}

3.構成部品

オブジェクトのpropertyキーは基本的に文字型です.

const obj = {
    1: '1입니다',
    flase: '거짓',
}
# 문자열 배열로 반환됨
Object.keys(obj); // ["1", "false"]

# 접근시 문자열로 접근해야 함
obj['1'] // "1입니다"
obj['false'] // '거짓'

素子(symbol)型である可能性のあるキーの形式.

# 1. 심볼 만들기
const a = Symbol();
const b = Symbol();

a === b // false
a == b // false

素子形状は一意性を保証します.同じ値段でも等しくない.

# 2. 설명 붙여주기
const id = Symbol('id');
const id2 = Symbol('id');

id
> Symbol(id)
id2
> Symbol(id)
결과는 같지만,
id === id2 // false
id == id2 // false
동등하지 않다.

コンポーネントをオブジェクトのキーとして使用できます.

const id = Symbol('id');
const user = {
    name: "Mike",
    age: 30,
    [id]: "myid"
}

user
> {name: "Mike", age: 30, Symbol(id): "mmyid"}

user[id] // Symbol(id)가 아니라 id로 접근!
> "myid"

ただし、keysまたはvaluesを使用すると、構成部品は表示されません.

const id = Symbol('id');
const user = {
    name: "Mike",
    age: 30,
    [id]: "myid"
}

Object.keys(user);
> ["name", "age"]

Object.values(user);
> ["Mike", 30]

Object.entries(user);
[Array(2), Array(2)]

for(let a in user){
    console.log(a) // name, age까지만 나옴
}

非表示の構成部品はどこで使用しますか?
一部のオブジェクトの元のデータは、タッチせずにプロパティを追加できます.
他の人が作成したオブジェクトに私が作成したコードを上書きしたり、名前の重複を避けるために奇妙な属性を作成したりすることはできません.この場合は構成部品を使用します.

# Symbol의 이름(변수명이 아니라 Symbol에 들어있는 값)을 알아내는 방법
const id = Symbol('id 입니다.')
id.description; // "id 입니다."

# keyFor는 사용할 수 없다.

# 잘 사용하지 않는, symbol을 보기 위한 메서드
Object.getOwnPropertySymbols(user); // [Symbol(id)]  symbol만 보여주기
Reflect.ownKeys(user); // ["name", "age", Symbol(id)] Symbol을 포함한 모든 키를 보여준다.

Symbolの例

// 다른 개발자가 만든 객체
const user = {
    name: "Mike",
    age: 30,
};

// 내가 작업하는 공간
user.showName = function() {}; 

// 사용자가 접속하면 보는 메세지
for (let key in user) {
    console.log(`His ${key} is ${user[key]}.`);
}

His name is Mike.
His age is 30.
His showName is function() {}. // 이런 메시지가 나온다.

showNameという名前の関数(){}を追加すると、このような話にならないメッセージが表示されます.これを防ぐには、オブジェクトに新しい変数を追加するときにSymbolを使用します.

// 다른 개발자가 만든 객체
const user = {
    name: "Mike",
    age: 30,
};

// 내가 작업하는 공간
const showName = Symbol('show name');
user[showName] = function() {
    console.log(this.name);
}
user[showName]();

// 사용자가 접속하면 보는 메세지
for (let key in user) {
    console.log(`His ${key} is ${user[key]}.`);
}

Mike // 내가 추가한 Symbol 메서드를 사용한 결과! 
His name is Mike.
His age is 30.
//여기에 His showName is Symbol('show name') 이런 식으로 잡히지 않음

Symbol.for()<==グローバル構成部品

は、1つの要素のみが保護されている

がなければ作成するので、あれば

をインポートする

Symbol関数は、毎回異なるSymbol値を生成しますが、Symbolです.forメソッドはSymbolを作成し、鍵によって同じSymbol

を共有する.

コードはどこでも使用できます.

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2; // true

これはどこで使いますか.他の人が作成したオブジェクトに新しいプロパティを追加する必要がある場合、これらのプロパティが後で作成する他のプロパティと重複しないようにしますか?

# Symbol.for의 이름을 알아내는 방법
Symbol.keyFor(id1) // "id"

4.数字、数学の方法

1) toString()

10進数=>バイナリ/16進数

数字を文字に変換し、バイナリまたは16進数に変換できます.

let num = 10;

num.toString(); // "10"
num.toString(2); // "1010"

let num2 = 255;
num2.toString(16); // "ff"

2) Math

Math.PI; // 3.141592...

let num1 = 5.1;
let num2 = 5.7;

# 올림
Math.ceil(num1); // 6
Math.ceil(num2); // 6

# 내림
Math.floor(num1); // 5
Math.floor(num2); // 5

# 반올림
Math.round(num1); // 5
Math.round(num2); // 6

# 셋째 자리에서 반올림해서 둘째 자리까지 보여주기
let userRate = 30.1234;

Math.round(userRate * 100)/100 // 30.12, 숫자로 반환
Math.toFixed(2); // "30.12", 문자로 반환
Math.toFixed(0); // "30"
Math.toFixed(6); // "30.123400"
# 숫자로 변환하기
Number(userRate.toFixed(2)); // 30.12

# 0~1사이 무작위 숫자 생성
Math.random() // 0.26027823967117425
Math.random() // 0.63185928941158756
...

# 1~100 사이 임의의 수를 뽑고 싶다면?
Math.floor(Math.random()*100)+1 // 1은 0이 나왔을 때를 생각해서 더해준 것

0.6789 -> 67.89 -> 67 -> 68

# 최댓값
Math.max(1, 4, -1, 5, 10, 9, 5) // 10

# 최솟값
Math.min(1, 4, -1, 5, 10, 9, 5) // -1

# 절대값
Math.abs()
Math.abs(-1) // 1

# n의 m승
Math.pow(n, m)
Math.pow(2, 10) // 1024

# 제곱근
Math.sqrt()
Math.sqrt(16) // 4

3) isNaN()

xはNaNで、xがNaNかどうかをチェックする方法はisNaN()!

let x = Number('x'); // NaN

x는 NaN인데, x가 NaN인지 검사하는 방법은 isNaN()이 유일하다!
x == NaN // false
x === NaN // false
NaN == NaN // false

isNaN(x) // true, x가 NaN인지 확인하는 유일한 방법
isNaN(3) // false

4) parseInt()

数字は文字をブレンドするときには機能しませんが、文法入力は機能します.

最初から数字で読める部分だけ読んで、返します.

進数を設定できます.

let margin = '10px';

parseInt(margin); // 10
Number(margin); // NaN

let redColor = 'f3';
parseInt(redColor); // NaN, 문자로 시작해서 읽을 수 없음
parseInt(redColor, 16); // 243, 16진수로 읽어서 10진수로 반환

parseInt('11', 2) // 3, 2진수로 읽어서 10진수로 반환

5) parseFloat()

解析器Intと同じですが、浮動小数点を返します.

let padding = '18.5%';
parseInt(padding); // 18
parseFloat(padding); // 18.5

5.文字列メソッド

バカはたくさんの行で表現できる.引用符として使用するには、nを使用する必要があります.
配列のように場所にアクセスできますが、変更は許可されません.

let desc = '안녕하세요.'
desc[2] // '하'
desc[4] = '용';
console.log(desc);
안녕하세요. // 변화 x

1) length

文字列長

let desc = '안녕하세요.'
desc.length // 5

2) toUpperCase()/toLowerCase

let desc = "Hi guys. Nice to meet you."

desc.toUpperCase();
"HI GUYS. NICE TO MEET YOU."

desc.toLowerCase();
"hi guys. nice to meet you."

3) str.indexOf(text)

let desc = "Hi guys. Nice to meet you.";

desc.indexOf('to') // 14
desc.indexOf('man') // -1, 없을 때

if (desc.indexOf('Hi') > -1) { // -1보다 크면 있는 것
    console.log('Hi가 포함된 문장입니다.')
}

4) str.slice(n, m)

n以上からm未満の滑走路まで、mが範囲を超えると最終的に

となる.

let desc = "abcdefg";

desc.slice(2) // "cdefg"
desc.slice(0, 5) // "abcde"
desc.slice(2, -2) // "cde"

5) str.substring(n, m)

n~m,n以上m(シーケンス相関x)、負値0

let desc = "abcdefg";

desc.substring(2, 5) // "cde"
desc.substring(5, 2) // "cde"

6) str.substr(n, m)

nからm個の

を取得する.

let desc = "abcdefg"

desc.substr(2, 4) // "cdef"
desc.substr(-4, 2) // "de"

7) str.trim()

前後のスペースを削除

入力受信時に

を用いる.

let desc = " coding     "
desc.trim(); // "coding"

8) str.repeat(n)

n回繰り返し

let hello = "hello!"

hello.repeat(3); // "hello!hello!hello!"

9)文字列比較

1 < 3 // true
"a" < "c" // true

"a".codePointAt(0); // 97 ("a"라는 문자열의 0번째 ASCII 위치)
String.fromCodePoint(97) // "a"

例1)

let list = [
    "01. 들어가며",
    "02. JS의 역사".
    "03. 자료형",
    "04. 함수",
    "05. 배열",
];

let newList = [];

for (let i=0; i<list.length; i++){
    newList.push(
    list[i].slice(4));
}
console.log(newList) // ["들어가며", "JS의 역사", "자료형", "함수", "배열"]

例2)

//금칙어: 콜라

function hasCola(str){
    if(str.indexOf('콜라')){
        console.log('금칙어가 있습니다.');
    } else{
        console.log("통과");
    }
}

hasCola("와 사이다가 짱이야!"); // 금칙어가 있습니다.
hasCola("무슨 소리, 콜라가 최고"); // 금칙어가 있습니다.
hasCola("콜라"); // 통과

結果はおかしい.最初から見ましょう.hasCola("와 사이다가 짱이야!")が実行されると、indexOfによって−1が戻される.if(-1)はtrueであるため、console.log('금칙어가 있습니다.')が実行される.
最後の例では、if(0)を表し、else文を実行するindexOf("콜라")の値が0であることを示します.

// 금칙어: 콜라, 개선!!
function hasCola(str){
    if(str.indexOf('콜라') > -1){
        console.log('금칙어가 있습니다.');
    } else{
        console.log("통과");
    }
}

hasCola("와 사이다가 짱이야!"); // 통과
hasCola("무슨 소리, 콜라가 최고"); // 금칙어가 있습니다.
hasCola("콜라"); // 금칙어가 있습니다.

Includeの方が簡単!

文字はtrue、無文字はfalse

function hasCola(str){
    if(str.includes('콜라')){
        console.log('금칙어가 있습니다.');
    } else{
        console.log("통과");
    }
}

hasCola("와 사이다가 짱이야!"); // 통과
hasCola("무슨 소리, 콜라가 최고"); // 금칙어가 있습니다.
hasCola("콜라"); // 금칙어가 있습니다.



## 6. 배열 메서드

push, pop, unshift, shift까지 다뤘었음.



1) arr.splice(n, m)

- n부터 시작해서 m개를 지운다.
- 삭제된 요소는 반환된다.

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

2) arr.splice(n, m, x)

nからmを消去し、x要素

を追加する

削除された要素が返されます.

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

# 두 번째 인수에 0을 넣으면 아무것도 지우지 않고 추가만 한다!
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");

console.log(arr); // ["나는", "대한민국", "소방관", "철수", "입니다"]

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

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

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);

4) 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]
arr.concat([3, 4], 5, 6); // [1, 2, 3, 4, 5, 6]

5) arr.forEach(fn)
繰り返し

配列

let users = ["Mike", "Tom", "Jane"]

users.forEach((item, index, arr) => {
    // ..       Mike   0    users
                 Tom   1
                 Jane  2
});

6) arr.indexOf/arr.lastIndexOf
は、

インデックスを返し、-1がない場合は

インデックスを返します.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 4) // 7, 3을 찾는데, 인덱스 4이상부터 찾는다.
arr.lastIndexOf(3) // 7, 끝에서부터 찾기

7) arr.includes()

は含まれていますか?

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

8) arr.find(fn)/arr.findIndex(fn)

関数を追加できます.最初のtrue値のみが返されます.そうしないと、定義されていない

が返されます.

findIndexはインデックスを返し、-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) // Tom


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

console.log(result) // 2

9) arr.filter(fn)

の条件を満たすすべての要素

を返します.

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

console.log(result); // [2, 4, 6]

10) arr.reverse()
逆順序

11) 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, {
        id: index + 1,
        isAdult: user.age > 19,
    });
});

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

12) join, split

let arr = ["안녕", "나는", "철수야"]
let result = arr.join("-");
console.log(result); // 안녕-나는-철수야

const users = "Mike,Jane,Tom,Tony";
const result = users.split(",");

console.log(result); // ["Mike", "Jane", "Tom", "Tony"]

13) Array.isArray();

let user = {
    name: "Mike",
    age: 30,
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user); // object
console.log(typeof userList); //object

console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true

Reference

この問題について(JS中級教程整理), 我々は、より多くの情報をここで見つけました https://velog.io/@ysh096/JS-중급-강좌-정리

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

Collection and Share based on the CC Protocol

canvasでのピクセルペイントの問題

Lecture1_1