一、集合:
数组
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:编写算法
方法2:set
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中的模块化机制有什么关联?
- commonJS出现在es6之前,在早期使用commonJS的模块机制进行服务器端编程,node对于commonJS完全支持。对es6支持程度不高
- es6语法简洁,功能强大
- 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