async,wait,複数の繰り返し文

17682 ワード
フロントエンド テキストリンク
async/await
Promiseが使いにくい場合は、ES 8文法の方が使いやすいです.
async function 더하기(){ // 그냥 간단하게 함수앞에 async만 붙이면 된다.
  var 어려운연산 = new Promise((성공, 실패)=>{
    실패();
  });
  try {  var 결과 = await 어려운연산 } //await은 무조건 async 함수 내부에서 사용해야 한다.
  catch { 어려운연산 Promise가 실패할 경우 실행할 코드 } //실패할 경우를 대비해, catch문 이용
}
더하기() //함수 호출
例1.async、待機路<button>을 누르면 성공하는 Promise 만들기
<body>
<button id="test">버튼</button> 
</body>

<script>
  var 프로미스 = new Promise(function(성공, 실패){ //버튼을 클릭하면 성공으로
      document.getElementById('test').addEventListener('click', function(){
        성공('성공했어요');
      });
  })
  async function 버튼누르기(){ //함수에 async 사용
   try{
    var 결과 = await 프로미스; //프로미스로 넘어가서 await으로 기다려준다.
    console.log(결과); //성공했어요 출력
   } catch {  console.log('실패했어요'); } //실패했을 경우
 }

  버튼누르기(); //함수 호출
</script>
for in/for of
重複文の用途(for、foreachを含む)
1.単純重複コード
2.資料型資料を選ぶ場合
for in
オブジェクトに使用します.
var 오브젝트 = { name : 'Kim', age : 30 };
for (var key in 오브젝트) { //내부 데이터 갯수만큼, 반복할 때마다 key라는 변수는 name, age이다. 
console.log(오브젝트[key]); //key를 []에 넣어서 사용, key를 이렇게 .점 찍고는 사용을 못한다.
}
inフィーチャー
1.実値のみ(可数を示す)を出力し、falseの場合はフィルタします.
var 오브젝트 = { name : 'Kim' }; //{ name : 'Kim' } 이걸 저장하면 Kim 이라는 자료만 달랑 저장되는게 아니라, Kim과 함께 비밀스러운 속성들 3개가 true로 저장된다.
console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); //{value: "Kim", writable: true, enumerable: true, configurable: true} 출력
2.親の原型に保存されているものも出力されます.これは欠点です.
class 부모 {
}
부모.prototype.name = 'Park';

var 오브젝트 = new 부모();

for (var key in 오브젝트) {
if (오브젝트.hasOwnProperty(key)) // Park이 싫다면, 오브젝트가 이 key값을 직접 가지고 있냐라고 조건문을 단다. 그래서 오브젝트가 가진 것만 반복시키고 싶으면 이걸 꼭 써야한다.
 console.log(오브젝트[key]); //Park을 출력하지 않는다. 부모만 가지고 있고 오브젝트는 없기때문이다.
}
for of
array、文字、arguments、NoteList、Map、Setに使用します.
var 어레이 = [2,3,4,5];
for (var 자료 of 어레이) {
console.log(자료);
}
とくせい
1.正確には、Iterableの資料型にのみ適用されます.
iterable-Symbol.iteratorとは、1つの方法を有する資料型を指す.
var 어레이 = [2,3,4,5];
console.log( 어레이[Symbol.iterator]() ); // 깊게 이해는 하지말고, 이걸 가지고 있으면 for of 반복문을 쓸 수 있구나~라고 알고 있자.
2.使用するNoteList
document.getElementsByClassName()またはdocument.querySelector All()コレクタで検索された要素は、配列ではなく[]カッコに含まれ、NodeListと呼ばれます.
HTML要素を1つずつ取り出して処理する場合、非常によく使われる重複文と考えられます.(ただしforの互換性注意)
例1.九九九九九
let 데이터 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

 for (let 자료1 of 데이터) {
     for (let 자료2 of 데이터) {
         console.log(`${자료1}*${자료2} = ${자료1*자료2}`) //1*1 = 1 부터 9*9 = 81까지 출력 
     }
 }
例2.鍵の最後の数字を削除
tip
最初から繰り返し文に慣れていなければ、ハードコーディングをあげましょう.そしてそれを繰り返し文にするとずっと簡単になります.
var products = [{
            name1: 'chair',
            price1: 7000
        },
        {
            name2: 'sofa',
            price: 5000
        },
        {
            name1: 'desk',
            price3: 9000
        },
    ];

    for (let array of products) // array라서 for of
        for (let key in array) { // object라서 for in
            let value = array[key]; //일단 데이터 값을 따로 저장하고
            newKey = key.slice(0, -1); //기존 key의 마지막 숫자를 떼버린다.
            array[newKey] = value; //새로운 key에 데이터 다시 저장

	delete array[key] //기존 key들은 없앤다.
        }

    console.log(products)
vueのcytoscape.jsの使用
に変換するpx -効果的なワークフロー