2018.10.11 星期四

複習：

一、集合：

陣列

arr = [1,2,3,2,1]

set:

無序不可重複的集合、容器
**1)例項化**
   let set = new Set();
   let set = new Set([1,2,3,3,2]);
**2)容器的增刪改查(CRUD)操作**
   set.add()   
     無法新增重複值
   set.delete()   
     要通過變數才能刪除空物件
   set.has()
     返回布林值
   set.clear() 
     清除所有成員，沒有返回值
   set.size 
     屬性，獲取集合的大小  
**3)容器的遍歷**
   for-of
   set.keys()   返回鍵名的遍歷器
   set.values()   返回鍵值的遍歷器
   set.entries()  返回鍵值對的遍歷器 
   set.forEach()  使用回撥函式遍歷每個成員 
**4)陣列去重**
  [1,2,3,3,2]->[1,2,3]

  方法1：編寫演算法
  方法2：set
    let set = new Set(arr);
    [...set]; 
 

map:

鍵值對集合，鍵可以為任意資料型別。
key -> val
物件 字串->值 {name:'terry'}
map  值->值  {1=>true,true->2}

Set.constructor === Map.constructor

**1)例項化**
   let map = new Map();
   let map = new Map([[1,2],[3,4],[5,6]]);
**2)容器的增刪改查操作**
   map.set(key,val)  
      key不可以重複，若重複，val會被替換
   map.delete(key)      
   map.has(key)      
   map.clear()
   map.get(key)
   map.size
**3)遍歷**
   for-of  
   map.keys()   
   map.values()   
   map.entries()
   map.forEach()       
 

二、Promise(ES6最核心知識)

是非同步程式設計的一種解決方案。用於封裝非同步程式碼。有以下三個狀態：

  初始化(Pending)
  成功(Resolved)
  失敗(Rejected)

resolve函式作用：初始化狀態->成功狀態
reject函式作用：初始化狀態->失敗狀態

非同步程式碼：Ajax,資料庫操作（sql）,io流

1)例項化Promise物件

   let p = new Promise((resolve,reject)=>{});

2)監聽承諾物件狀態的改變

   p
   .then(()=>{//承諾兌現的時候執行})
   .catch(()=>{//承諾異常的時候執行})
   .finally(()=>{//無論如何都需要執行的程式碼})
 

3)promise

 let p = Promise.all([p1,p2,p3]);

將p1,p2,p3合併為一個承諾物件，當p1,p2,p3都成功的時候，p的狀態才會轉換為成功狀態。
但是如果p1,p2,p3中有一個為失敗狀態，p的狀態就轉換為失敗狀態。

 let p = Promise.race([p1,p2,p3]); 

p的狀態與p1,p2,p3中狀態改變最快的承諾物件保持一致。

  var p = new Promise((resolve,reject)=>{
     //模擬非同步
     setTimeout(()=>{
       //獲取一個隨機數
       let random = Math.random();
       if(random > 0.5){
          //成功
          resolve(random);
       }else{
          //失敗
          reject(random);
       }
     },1000);
  });
  
  p.then((data)=>{
     console.log('success:',data);
  }).catch((error)=>{
     console.log('error:',error);
  });

promise.all([p1,p2])

將陣列中的多個承諾物件合併為一個承諾物件。
用於多個請求成功。

   let p = Proise.all([p1,p2]);
   p.then(function(data){}).catch(()=>{});//data為陣列，儲存了p1,p2的返回值。只要有一個承諾失敗catch()就會執行

promise.race([p1,p2]);

底層方法：

$.ajax(url,{})
$.ajaxSetup({}) 預設

快捷方法：

    $.ajaxSetup({error:function(){}});
    $.get(url[,data][,success][,dataType]);
   =>
    $.ajax(url,{
       method:'get',
       data:{},
       success:function(){},
       error:function(){},
       complete:function(){},
       dataType:'json'
    });
    
   $.post();    
   $.getJSON();

2018.10.12 星期五

複習：

Class

一、建構函式 – 類:

function Animal(name,age){
	this.name = name;
	this.age = age;
}
Animal.prototype = {
	constructor:Animal;
	//非靜態屬性，非靜態方法
	sayName(){
	   console.log(this.name);
	},
	sayAge(){
	   console.log(this.age);
	}
}
//靜態屬性，靜態方法
Animal.nunber = 0;
Animal.sayNumber = function(){}

var a = new Animal('terry',12);
var b = new Animal)('larry',13);
a.sayName();
b.sayName();

//繼承：
   function Dog(name,age,gendeer){
       Animal.call(this,name,age);//借用建構函式
       this.gender = gender;
   }
   Dog.prototype = new Animal();
   Dog.prototype.constructor = Dog;
   Dog.sayGender = function(){
      console.log('my gender is',this.gender);
   }

   var d = new Dog('一休',1,'male');
   d.sayName();
   d.sayGender();

二、企業級應用:

class Animal {
	constructor(name,age){
	   this.name = name;
	   this.age = age;
	}
	sayName(){
	   console.log(this.name);
	}
	sayAge(){
	   console.log(this.age);
	}
	static foo(){
	   console.log();
	}
}
//繼承：
class Dog extends Animal{
	constructor(name,age,gender){
	   super(name,age);
	   this.gender = gender;
	}
	sayGender(){
	   console.log();
	}
}

var a = new Animal('terry',12);
a.sayName();
a.sayAge();
Animal.foo();

三、java:

public class Student{
	//建構函式
	public Student(String name,int age){
	      this.name = name;
	      this.age = age;
	}
	//方法
	public String getName{
	    return this.name;
	}
	public int getAge(){
	    return this.age;
	}
}
//物件
Student stu = new Student('terry',12);
stu.getName();
stu.getAge();

四、ES6中的模組化:

模組化思想用於開發階段，產品階段一般需要打包構建。

commonJS es6中的模組化機制有什麼關聯？

1.commonJS出現在es6之前，在早期使用commonJS的模組機制進行伺服器端程式設計，node對於commonJS完全支援。對es6支援程度不高。

2.es6語法簡潔，功能強大。

3.webpack打包。

1）模組定義
export不能為具體的值。export可以執行多次。

 以下示例是非法的：
     let a = 3;
     export a;
     或
     export 3;
     export 1;
  以下示例是合法的：
     export let a = 3;
     export let b = 1;
     或
     let a = 3;
     let b = 1;
     import {a:a,b:b}

2）模組的引用

   import {a,b} from './module1' 

3）export default
可以直接跟具體的值。

   export default 100;
   export default function(){}
   export default {}  

五、vue環境搭建

模組JS基礎之上 vue (資料繫結 mvvm)

  0) 所需系統：linux/os/windows

  1) nodejs8
    > node -v
    > npm -v

  2) vue腳手架（一個單獨的開發工具）
     快速建立vue工程
       企業級專案框架  
       基礎框架 src build config App.vue...
       開發環境，測試環境，打包環境
         webpack
         babel
         webpack-server
       自動化指令碼
          自動打包，部署，重新整理

       > npm install [email protected] --global
       > vue --version
       2.9.6

  3 )使用腳手架建立第一個vue專案
      > vue init webpack app01
      > cd app01
      > npm install
      > npm run dev