1. Repeat

const data = ['1', '2', '3'];
for (let i = 0; i < data.length; ++i) {
	console.log(data[i]);
}

for … of

const data = ['1', '2', '3'];
for (let item of data) { // for 반복 시 가져올 아이템을 넣을 변수 of 배열변수
	console.log(item);
}

Object.entries(), Object.keys(), Object.values()

Object.entries():コンフィギュレーションキーと値からなる各コンフィギュレーションセットのリスト、すなわち「キー、値」、「キー、値」、「キー、値」などからなる配列

を返す.

Object.keys():property鍵のリスト(すなわち「鍵、鍵、鍵」)からなる配列

を返す.

Object.values():構成値リスト(すなわち「値、値、値」)からなる配列

を返す.

const data = {
	name: "sshin",
	age: 20,
	brand: "fun-coding";
}

console.log(Object.entries(data));
console.log(Object.keys(data));
console.log(Object.values(data));

for … in

const data = {
	name: "sshin",
	age: 20,
	brand: "fun-coding"
}

for (let key in data) {
	// 객체의 키를 반복할 때마다 반환
	console.log(key);
}

2. Array

オブジェクトと同様に、配列変数の配列を上書きする新しい配列は少ないため、配列変数を宣言するときにconstが一般的に使用されます.

オブジェクトのように作成

const myArray = new Array();

// 빈 배열을 객체처럼 선언 후, 직접 데이터를 넣어줄 수도 있음
myArray[0] = 1;
myArray[1] = 2;
myArray[2] = "sshin";
console.log(myArray);

splice

配列変数.Splice(削除を開始するインデックス番号、削除を開始するインデックス番号から何個削除するか)

const myArray = [1, 2, 'sshin', 100];
myArray.spice(1, 2);
console.log(myArray);

特殊な形式のJavaScript配列

// 중활고는 객체 리터럴을 통한 객체로 인식하며, 객체도 아이템으로 선언 가능
const data = [
	{ name: 'sshin', age: 20 },
	{ name: 'marvin', age: 40}
];

// 개별 아이템이 객체인 경우, 인덱스 번호로 객체의 프로퍼티 접근 가능
console.log(data);
console.log(data[0].name);

2.2. 複数のアレイ関連関数

push

シナリオの最後にアイテムを追加

pop

アレイの最後のアイテムを返し、アレイから削除します.

shift

配列内の最初の項目を削除し、後続の項目を前に押し出します.

concat

2つの配列を結合

const myArray1 = [1, 2];
const myArray2 = ['sshin', 100];
let myArray = myArray1.concat(myArray2);
console.log(myArray);

join

プロジェクト間に文字列を配置し、すべてのプロジェクトを1つの文字列に結合します.

let myArray = [1, 2, 'sshin', 100]; // const 불가
myArray = myArray.join('|');
console.log(myArray, typeof myArray);

reverse

配列複写を逆順に配置
関数を呼び出すときに配列を逆順序で返すのではなく、現在の配列を変更します.

let myArray = [1, 2, 'sshin']; // const 가능
myArray.reverse();
console.log(myArray);

slice

配列の一部を返す
slice(a,b):a項目インデックスからb-1項目インデックスを抽出する

let myArray = [1, 2, 'sshin', 100];
myArray.slice(0, 1);
console.log(myArray.slice(0, 2));

forEach

置換文を使用して、アレイ内の各エンティティを簡単にインポートできる関数です.

let myArray = [1, 2, 'sshin', 100];
myArray.forEach(item => {
	console.log(item);
})

map

アレイ内の定義された各関数をエンティティに一括適用することで、新しいアレイを返します.

const myArray1 = [1, 2, 5, 10];
const myArray2 = myArray1.map(item => item * 2);

console.log(myArray2);

indexOf

配列で指定したデータが存在するインデックス番号を返します.

let myArray = [1, 2, 'sshin', 100];
let idx = myArray.indexOf('sshin');

findIndex

配列内のアイテムがオブジェクトである場合、オブジェクトで指定したデータの位置を検索する方法があります.

const myArray = [
	{
		id: 1,
		name: 'sshin'
	},
	{
		id: 2,
		name: 'marvin'
	}
];

console.log(myArray.indexOf('marvin')); // -1
console.log(myArray.findIndex(item => item.name === 'marvin')); // 1

find

指定したデータを含むオブジェクト自体を返し、指定したデータの場所を返すのではなく

const myArray = [
	{
		id: 1,
		name: 'sshin'
	},
	{
		id: 2,
		name: 'marvin'
	}
];

console.log(myArray.indexOf('marvin')); // -1
console.log(myArray.findIndex(item => item.name === 'marvin')); // 1
console.log(muArray.find(item => item.name === 'sshin'));

filter

アレイから特定の条件を満たすアイテムのみを抽出

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let even = myArray.filter(item => item % 2 === 0);
console.log(even);

3.特殊文法

こうぞうぶんかいわりあて

配列またはオブジェクトの属性を分解して、単一変数の構文

に値を代入する.

JSでは,オブジェクト文字に基づくオブジェクトと配列が最も一般的なデータ構造であり,構造分解割当てはオブジェクトと配列の構文をより容易に処理できると理解できる.

let data = {
	name: 'sshin',
	age: 20
};

let { age, name } = data; 
// 동일한 프로퍼티 명을 사용해야 해당 프로퍼티에 맞는 값이 대입됨
console.log(name, age);

// 프로퍼티명과 다른 변수명을 사용하고자 하는 경우, 대입할 프로퍼티명: 다른 변수명 의 형태로 사용해야 함
let { name: myName, age: myAge } = data;
console.log(myName, myAge);

// 꼭 객체의 모든 프로퍼티를 가져올 필요는 없고, 객체의 프로퍼티중 가져오고 싶은 데이터만 선택적으로 가져올 수 있음
let { name: myName2 } = data;
console.log(myName2);

// 가져올 프로퍼티가 정의되어 있지 않을 경우에는 디폴트 값으로 대입하게 할 수 있음
let data = {
	name: 'sshin',
	age: 20
};

let { name, hobby = 'coidng' } = data;
console.log(name, hobby);

// 가져올 프로퍼티명을 다른 변수에 저장하되, 해당 프로퍼티명이 객체 안에 없을 경우, 다른 변수에 디폴트 값을 대입하기
let data = {
  	name: 'sshin',
  	age: 20
};

let { name, age: myAge=25, hobby='coding'} = data;
console.log(name, myAge, hobby);

わりあてアレイぶんかい

配列の各項目を別の変数に割り当てる構文

アレイの一部のみ抽出でき、最初の項目から代入を開始し、代入変数がない場合は

は代入されません.

世代加入可能なものがなければ未定義の

世代

パソコンで、不要なものをスキップできます!!

let myArray = [1, 2, 3, 4];
let [first, second, third, fourth] = myArray;

let myArray3 = ['sshin', 'sshin', 'marvin'];
let [value1, , value3] = myArray3;
console.log(value1, value3);

...残りの要素

を同時にインポートできます.

let myArray = ['sshin', 'sshin', 'marvin', 'arthur'];

let [item1, item2, ...item3] = myArray;
console.log(item1);
console.log(item2);
console.log(item3);

オブジェクトと同じデフォルト値

を設定することもできます.

let myArray1 = [10, 20];
let [item1, item2=10, item3=20] = myArray1;
console.log(item1, item2, item3);

変数値の交換

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

関数の戻りに複数のデータを渡す

function getData() {
	return [10, 20];
}

let [a, b] = getData();
console.log(a, b);

文字列を分割し、各変数に代入()

区別するパラメータを明示的に挿入する必要があります

let data = 'sungwoo shin,sshin'
console.log(data.split(' '));
console.log(data.split(','));

let data = 'sungwoo shin';
let [givenName, lastName] = data.split(' ');
console.log(givenName, lastName);

Restパラメータ

関数パラメータ宣言の前に...定義された構文

を追加

この関数に渡すパラメータリストは、変数

に配列として入れる.

タイプrestを実行すると、オブジェクト

とみなされます.

係数の数順に入力、残りのシーケンスのみ

を入力.

function getData(a, ...rest) {
	console.log(a);
  console.log(rest);
	console.log(Array.isArray(rest));
}

getData(10, 20, 30, 40, 50, 60);

...変数はパラメータの末尾にある必要があります.

function getData(...rest, a, b); // error

Spreadパラメータ

関数パラメータ宣言の前に...定義された構文

を追加

iterable変数の前に付加する、この変数のデータを単一項目

に分離する.
iterable
リピート可能オブジェクト配列、文字列など

let myArray = [1, 2, 3];
console.log(...myArray);

関数パラメータに従ってアレイ内の各項目を代入する場合:

function func(a, b, c) {
	console.log(a);
	console.log(b);
	console.log(c);
}

const data = [1, 2, 3];
func(...data);

基本構成

const myArray1 = [1, 2, 3];
const myArray2 = [...myArray1, 4, 5, 6];
console.log(myArray2);