[JS]オブジェクト、Arrayでよく使われるループをクリーンアップする方法
22893 ワード
Object
key,valueが2つの値にアクセスした場合はObjectとなる.entries()
for...in文は、プロトコル・タイプによって継承された属性をリストする機能を有する.
ちょっと油断すると、後頭部を殴られやすい.だからできるだけ...inの使用を避ける.
for..Object.entries( ) inではなく/* bad
for (const key in collection) {
iterator(collection[key], key, collection);
}
*/
😁 for of + Object.entries + 구조분해할당 😃
for (const [key, value] of Object.entries(collection)) {
iterator(collection[key], key, collection);
}
😁Object.entries + forEach 😃
Object.entries(generateEvents).forEach(([key, value]) => {
配列にkeyおよびvalueを含む配列[ [key:'value'], ...]
.
for...of、foreachなどと一緒に使えばいいです.
ただし、対象.返されるエントリの配列は、オブジェクト定義の順序に関係ありません.
だから配列順が役に立つなら、sort()
も一緒に使います.
配列にも似たような機能の整列entries()メソッドがあります.
keyのみアクセスする場合はObjectです。keys()
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// ["a", "b", "c"]
Object.keys( ):オブジェクトキーからなる配列を返します.
for...ofとともに使用し、ループアクセスできます.
valueのみにアクセスする場合、オブジェクト。values()
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.values(object1));
// ["somestring", 42, false]
Object.values( ):オブジェクト値からなる配列を返します.
for...ofとともに使用すると、**へのループアクセスが可能になります.
特定の鍵を確認するときhasOwnProperty
obj = new Object();
obj.name = 'colki';
obj = {prop: 'colki'}
/* 직접 소유한 obj 고유속성 */
obj.hasOwnProperty('prop'); // returns true
/* 프로토타입 상속받은 속성 */
obj.hasOwnProperty('toString'); // returns false
obj.hasOwnProperty('hasOwnProperty'); // returns false
__.hasOwnProperty()オブジェクトのプロパティを確認してbooleanに戻ります.
ただし、アトリビュートを継承するのではなく、直接所有するオブジェクトのアトリビュートを確認してください.const person = {
name: 'hany',
age: 20,
gender: 'female',
address: 'seoul'
};
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
// "name"
// "age"
// "gender"
// "address"
そして...inサイクルを使うときも一緒に使います.
プロトタイプ継承のプロパティforもリストされています...inの欠点?객체.hasOwnProperty(key)
を用いて二重処理を行うことで、オブジェクト固有の属性の使用やループを防止することができる.
Array
インデックスのみにアクセスする場合はfor文(ループ)
インデックス1、2、3...同様に適用されます.
ほとんどが文脈を使用しています.
前の論理が次のインデックス論理を変更した場合while
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
// 첫번째 반복; n=1 과 x=1
// 두번째 반복; n=2 과 x=3
// 세번째 반복; n=3 과 x=6
반복을 살펴보면, n을 x에 계속 더하게 된다.
세번째 반복후, n<3 이라는 초건은 더 이상 참이아니가 되므로 반복은 종료된다
whileは、条件文が真である場合に繰り返し文を実行する.while (condition) { statement }
この方法は、インデックス0で使用される論理の結果が次のインデックス1に影響する場合に使用します.
indexとvalueを受信するとentries()
const a = ['a', 'b', 'c'];
for (const [index, element] of a.entries())
console.log(index, element);
// 0 "a"
// 1 "b"
// 2 "c"
整列entries() arr.entries()
objectではobjectです.entries(obj)ですが、配列では文法が簡単です.
for...ofとともに使用し、整列を巡回することができます.
valueのみにアクセス..。of
const iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
/** string에서도 사용가능하다! 😮**/
const iterable = "boo";
for (const value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
for...of各要素を繰り返します
関数を渡すときにforEachを使用する
/** 구조분해할당**/
newArray.forEach(([key, value]) => {
iterator(value, key, collection)
})
// for문
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// forEach문
items.forEach(function(item){
copy.push(item);
});
forEachはコールバック関数を受け入れ、アレイ内の各要素にコールバックを実行する.
for文(array[i])に比べてvalueはより明確に表現され、理解しやすい.
また,パラメータ2をパラメータindex,3をパラメータ配列として用いることができる.
したがってforEachは複数の配列に同じ反復器を適用する場合に便利である.
ただし、すべての要素に対してコールバック関数を実行し、戻り値を吐き出して終了する方法であるため、特定の値を検索して終了する論理を実現するにはforEachを使用し、配列の末尾要素を無条件に迂回する.そのため、この場合は使用を避けるべきです.
異常を投げ出さない限り、forEach()は途中で停止できません.途中で止める必要がある場合はforeach()が適切な方法ではない可能性があります.-MDN-
新しい配列として関数を適用して受信するときのマッピング
const a = [
{a:1},
{b:2},
{c:2}
];
const b = a.map((o, i) => {
o.index = i;
return o;
});
console.log(b);
// [{a: 1, index: 0}, {b: 2, index: 1}, {c: 2, index: 2}]
map이 두번째 인자로 index받는 것을 이용해서
객체로 이루어진 배열에서 각 객체 요소에 key, value를 추가해줄 수 있다.
foreachと同じように
パラメータ2はindexとすることができ、3はパラメータ配列とすることができる.
したがってmapは,複数の配列に同じ反復器を適用する場合に便利である.
空の要素の巡回
アレイに他の空の要素がある場合は、
クエリが空でない場合もあります.
for, for ... ofはまた、未定義の値でも返される空の要素もチェックします.
forEachのようにコールバック関数を受け入れる高次関数は空の値をチェックせずに空の値を渡します.const arr = new Array(5);
arr[0] = 1;
arr[4] = 5;
console.log(arr);
// (5) [1, empty × 3, 5]
https://interacting.tistory.com/145?category=777643
Reference
この問題について([JS]オブジェクト、Arrayでよく使われるループをクリーンアップする方法), 我々は、より多くの情報をここで見つけました
https://velog.io/@colki/JS-Object-Array-자주-사용하는-순환-Method-정리
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
/* bad
for (const key in collection) {
iterator(collection[key], key, collection);
}
*/
😁 for of + Object.entries + 구조분해할당 😃
for (const [key, value] of Object.entries(collection)) {
iterator(collection[key], key, collection);
}
😁Object.entries + forEach 😃
Object.entries(generateEvents).forEach(([key, value]) => {
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// ["a", "b", "c"]
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.values(object1));
// ["somestring", 42, false]
obj = new Object();
obj.name = 'colki';
obj = {prop: 'colki'}
/* 직접 소유한 obj 고유속성 */
obj.hasOwnProperty('prop'); // returns true
/* 프로토타입 상속받은 속성 */
obj.hasOwnProperty('toString'); // returns false
obj.hasOwnProperty('hasOwnProperty'); // returns false
const person = {
name: 'hany',
age: 20,
gender: 'female',
address: 'seoul'
};
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
// "name"
// "age"
// "gender"
// "address"
インデックスのみにアクセスする場合はfor文(ループ)
インデックス1、2、3...同様に適用されます.ほとんどが文脈を使用しています.
前の論理が次のインデックス論理を変更した場合while
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
// 첫번째 반복; n=1 과 x=1
// 두번째 반복; n=2 과 x=3
// 세번째 반복; n=3 과 x=6
반복을 살펴보면, n을 x에 계속 더하게 된다.
세번째 반복후, n<3 이라는 초건은 더 이상 참이아니가 되므로 반복은 종료된다
whileは、条件文が真である場合に繰り返し文を実行する.while (condition) { statement }
この方法は、インデックス0で使用される論理の結果が次のインデックス1に影響する場合に使用します.indexとvalueを受信するとentries()
const a = ['a', 'b', 'c'];
for (const [index, element] of a.entries())
console.log(index, element);
// 0 "a"
// 1 "b"
// 2 "c"
整列entries() arr.entries()
objectではobjectです.entries(obj)ですが、配列では文法が簡単です.for...ofとともに使用し、整列を巡回することができます.
valueのみにアクセス..。of
const iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
/** string에서도 사용가능하다! 😮**/
const iterable = "boo";
for (const value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
for...of各要素を繰り返します関数を渡すときにforEachを使用する
/** 구조분해할당**/
newArray.forEach(([key, value]) => {
iterator(value, key, collection)
})
// for문
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// forEach문
items.forEach(function(item){
copy.push(item);
});
forEachはコールバック関数を受け入れ、アレイ内の各要素にコールバックを実行する.for文(array[i])に比べてvalueはより明確に表現され、理解しやすい.
また,パラメータ2をパラメータindex,3をパラメータ配列として用いることができる.
したがってforEachは複数の配列に同じ反復器を適用する場合に便利である.
ただし、すべての要素に対してコールバック関数を実行し、戻り値を吐き出して終了する方法であるため、特定の値を検索して終了する論理を実現するにはforEachを使用し、配列の末尾要素を無条件に迂回する.そのため、この場合は使用を避けるべきです.
異常を投げ出さない限り、forEach()は途中で停止できません.途中で止める必要がある場合はforeach()が適切な方法ではない可能性があります.-MDN-
新しい配列として関数を適用して受信するときのマッピング
const a = [
{a:1},
{b:2},
{c:2}
];
const b = a.map((o, i) => {
o.index = i;
return o;
});
console.log(b);
// [{a: 1, index: 0}, {b: 2, index: 1}, {c: 2, index: 2}]
map이 두번째 인자로 index받는 것을 이용해서
객체로 이루어진 배열에서 각 객체 요소에 key, value를 추가해줄 수 있다.
foreachと同じようにパラメータ2はindexとすることができ、3はパラメータ配列とすることができる.
したがってmapは,複数の配列に同じ反復器を適用する場合に便利である.
空の要素の巡回
アレイに他の空の要素がある場合は、
クエリが空でない場合もあります.
for, for ... ofはまた、未定義の値でも返される空の要素もチェックします.
forEachのようにコールバック関数を受け入れる高次関数は空の値をチェックせずに空の値を渡します.
const arr = new Array(5);
arr[0] = 1;
arr[4] = 5;
console.log(arr);
// (5) [1, empty × 3, 5]
https://interacting.tistory.com/145?category=777643
Reference
この問題について([JS]オブジェクト、Arrayでよく使われるループをクリーンアップする方法), 我々は、より多くの情報をここで見つけました https://velog.io/@colki/JS-Object-Array-자주-사용하는-순환-Method-정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol