ES6笔记(二)

124 阅读4分钟

一、集合:

数组 

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

set:

无序不可重复的集合、容器
1)实例化
    let set = new Set();
    let set = new Set([1,2,3,2,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,3]=>[1,2,3]
    方法1:编写算法
    方法2set
            let set = new Set(arr);
            [...set]

map:

键值对合集,键可以为任意数据类型
key -> val
对象 字符串->值 {name:'jennie'}
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最核心知识)

是异步编程的一种解决方案。用于异步代码封装,有一下三个状态:

1.初始化(Pending)
2.成功(resolved)
3.失败(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 = Promise.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()

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.number = 0;
Animal.sayNumber = function(){}

var a = new Animal('kuma',2);
var b = new Animal('leo',2);
a.sayName();
b.sayName();

//继承:
function Dog(name,age,gender){
    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('luca',2);
a.sayName();
a.sayAge();
Animal.foo()

三、es6中的模块化

模块化思想用于开发阶段,产品阶段一般需要打包构建

commonJS es6中的模块化机制有什么关联?

  1. commonJS出现在es6之前,在早期使用commonJS的模块机制进行服务器端编程,node对于commonJS完全支持。对es6支持程度不高
  2. es6语法简洁,功能强大
  3. webpack打包

模块定义

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}

模块的引用

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

export default

可以直接跟具体的值

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

五、vue环境搭建

模块JS基础之上vue(数据绑定mvvm)

1)所需数据:linux/os/windows
2)nodejs8
    >node -v
    >npm -v
3)vue脚手架(一个单独的开发工具)
    快速创建vue工程
    企业级项目框架
    基础框架 src build config App.vue...
    开发环境,测试环境,打包环境
        webpack
        babel
        webpack-server
    自动化脚本
        自动打包,部署,刷新
    > npm install vue-cli@2.96 --global
    > vue --version
    2.96
4)使用脚手架创建第一个vue项目
    > vue init webpack app01
    > cd app01
    > npm install
    > npm run dev