学习ES6的课堂笔记（二）

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