ES 6基礎知識点3

ES 6基礎知識点3

1モジュール

1.1モジュールケース

2ジェネレータGeneratorの初歩的な認識

2.1オブジェクトに対する反復

3 Promise承諾

3.1コールバック関数

.3.2 Promiseによりコールバック関数を実現する機能

1モジュール
1.1モジュールケース

インポート:import{name}from"./be.js";

エクスポート:export{name}

be.js

var name="tom";
function func(){
  console.log("hellow"+name);
}
class Cat {
  constructor(name) {
      this.name=name
  }
  
}
//  
export{name,func}
//    
export default Cat;

be.htrml

	
		
		
	
	
		
		//  
			import Cat,{name,func} from "./be.js";
			
			console.log(name)
			func();
			var c1=new Cat("jack");
			console.log(c1);
			
		
		
	

2ジェネレータGeneratorの初歩的な認識

js反復可能なタイプString Set Map Arry;

の目的は、ステップをスキップすることなく、ステップを継続して実行できるようにすることができる.

function * gen() {
				yield " 1";
				yield " 2";
				yield " 3";
				yield " 4";
			}

			var iter = gen();
			//        yield     
			//  next             yield  
			//     yield {value：yield   ，done：false}
			/* console.log(iter.next())
			console.log(iter.next())
			 console.log(iter.next())
			 console.log(iter.next())
			 console.log(iter.next())
			 console.log(iter.next()) */
			 
			 
			for (let item of iter) {
				console.log(item)
			}

2.1オブジェクトの反復

	
		
		
	
	
		
  
		
			var obj = {
				name: "mumu",
				age: 18,
				weight: 130
			};
			//          
			function* gen(obj) {
				var keys = Object.keys(obj);
				//        key( )   
				//          yield        [ ， ]
				for (var i = 0; i < keys.length; i++) {
					yield [keys[i], obj[keys[i]]];
				}
			}
			//        
			//   k ，v 
			// for(let [k,v] of iter){
			// 	console.log(k,v)
			// }
			//  h1   
			var iter=gen(obj);
			myh.onclick = function() {
				var obj = iter.next();
				//     next   
				if (!obj.done) { //      done
					myh.innerText = obj.value; //      
				} else {
					myh.innerText = "   " //       
				}

			}
		
	

3 Promise承諾

			//    promise 
			//  ： reslove     reject   
			//   ： then         catch    
			//   ：         ，  30  ，     
			//          
			
			
			var p=new Promise(function(reslove,reject){
				
				setTimeout(()=>{
					var n=Math.random();
					if (n>0.5) {
						reslove("     ");
					}else{
						reject("   40 ");
					}	
				},5000)
			})
			
			p.then(function(res){
				console.log(res);//    
			}).catch(err=>{
				
				console.log(err);//   ，  
			})
			
			
			
			
		

分離

3.1コールバック関数

の欠点階層が多すぎると、コードが非常に肥大化します.

			//            
			//3  ，          
			//5  ，    ，      
			//2  ，       ，   100    。。
			
			//          ，    （    ）
			function say(str,time,callback){
				setTimeout(()=>{
					console.log(str);
//        callback     undefined  false
					if (callback) {
						callback();
					}
				},time)
			}
			say("       ",3000,function(){
				say("      ",5000,function(){
					say("   100    ",2000)
				})
			})
			
			
		

3.2 Promiseによるコールバック関数の機能

//promise           ，    
			function say(str, time) {
				return new Promise((reslove, reject) => {
					setTimeout(() => {
						reslove(str);
					}, time)
				})
			}
			say("       ", 3000).then(res => {
				console.log(res);
				return say("      ", 5000).then(res => {
					console.log(res);
					return say("   100    ", 2000).then(res => {
                          console.log(res)
					})
				})
			})
```





## 3.3   Promise         




```