ES6 第四次
实战 MAP Set
实战增删改查
------------------------------------
//Map 转数组 and 数组转Map
const m = new Map([['x',1],['y',2],['z',3]]);
let s = [...m];//转数组 转完后是一个二维数组
//如果要转回来
let m1 = new Map([...m]);//数组转 Map
------------------------------------
//Map 转对象
const m = new Map([['x',1],['y',2],['z',3],['a',4]]);
let obj = {};//声明一个对象
for(let[k,v] of m){//遍历
obj[k]=v;
}
console.log(obj);
//obj
//for of 遍历数据结构
//for in 是遍历对象 如果遍历数组 拿到的是索引
------------------------------------
let obj1 = {'x':1,'y':2}
for(let a in obj1){
console.log(a);
}
x y
------------------------------------
prommise （本例子操作的全是Map）
//构造函数
处理 异步执行 异步优化
测试浏览器是否支持：
new Promise(function(){});
console.log("ok");//不报错就证明支持
new Promise(function(resolive,reject));
//如果两个请求 因为是异步 可能后面那个会先执行 可以用 Promise
链式写法 then 串行
要装：server-static
npm install server-static
http://localhost:3000/
const getJSON = function(url,type, data) {
const promise = new Promise(function(resolve, reject){//一个是成功之后的 一个是失败之后的
const handler = function() {
if (this.readyState !== 4) {
return;
};
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
cons
------------------------------------
贴上一个demo
//getJson 是对XMLHttprequest 对象的封装，用于发出一个针对JSon 的数据的HTTP请求，并且返回一个Promise对象 ////promise 函数的作用是将Promise 对象的状态从“未完成”变成“成功”（即使pending办成resolver），在异步操作成功时调用，将异步操作的结果，作为参数传递出去； /////reject函数的作用是，将prmies对象的状态从 未完成 变成 失败 （即从pending 变成 rejected）,在异步操作失败时调用，并将异步操作 const getJSON = function(url,type, data) {//地址 类型 数据 const promise = new Promise(function(resolve, reject){////一个是成功之后的 一个是失败之后的 const handler = function() { if (this.readyState !== 4) {//XHR的状态 从0-4发生变化 0请求未初始化，1服务器已经连接 2请求已经接受 3请求处理中 4请求完成 响应就绪 return; }; if (this.status === 200) { resolve(this.response);//成功 } else { reject(new Error(this.statusText));//失败 } }; const client = new XMLHttpRequest(); client.open(type, url); client.onreadystatechange = handler; client.responseType = "json"; if(type =='get'){ client.send(); }else { client.setRequestHeader("Content-Type", "application/json"); client.send(JSON.stringify(data)); } }); return promise; }; $(function() { //添加留言 A $(".submit").click(() => { submit(true);//添加和修改同一个方法 参数不一样 }); //修改留言 $(".update").click(()=>{ submit(false);//添加和修改同一个方法 参数不一 }); //删除留言 $(".deleteAll").click(() => { getJSON("/map/delAll",'delete') .then(function(json) { $(".messageList").html('全部数据已经清除'); }, function(error) { console.error('出错了', error); }); }); //查看留言 $(".viewMes").click(()=> listShow()); //提交 A let submit = (isAdd) =>{//isAdd 如果ture 添加 如果false 就是修改 let _name = $(".name").val(), _message = $(".message").val(); if(_name =='' || _message =='') { alert('请输入信息！'); return false; } $(".name,.message").val(""); isAdd ? add(_name, _message) : upd(_name, _message); }; //添加数据 let add = (name, message) => { getJSON("/map/add",'post', {name: name, message: message}) .then(function(json) {//成功 listShow();//列表显示 }, function(error) {//失败 console.error('出错了', error); }); }; //删除数据 let del = (name) =>{ getJSON("/map/del",'delete', {name:name}) .then(function(json) { listShow(); }, function(error) { console.error('出错了', error); }); }; //编辑数据 let upd = (name, message) =>{ getJSON("/map/upd",'put', {name: name, message: message}) .then(function(json) { $("#inputEmail3").attr('disabled',false); listShow(); }, function(error) { console.error('出错了', error); }); }; //绑定未来元素 绑定动态数据的事件 $(".messageList").on('click', '.del', (e)=>{ del($(e.target).attr('name')); }); $(".messageList").on('click', '.upd', (e) =>{///修改 let value = $(e.target).val(); $("#inputEmail3").attr('disabled',true); $(".name").val(value.split(',')[0]); $(".message").val(value.split(',')[1]); }); //列表显示 let listShow = () => { //原生promise getJSON("/map/get",'get').then(function(d) { _showList(d); }, function(error) { console.error('出错了', error); }); }; let _showList = (d) =>{//渲染数据 传的是返回的 data let list = $(".messageList"),str = ""; for (let i=0; i<d.length; i++) { str += `<li class="list-group-item"><span class="key">${d[i].key}</span><span>说：</span><span class="value">${d[i].value}</span> <span style="float:right;"><button class="del" name="${d[i].key}">删除</button> <button class="upd" value="${d[i].key},${d[i].value}">更新</button></span></li>`; } list.html(str); }; })
------------------------------------
/** Simple Server for web api test. */ /**Connect是一个node中间件（middleware）框架。 如果把一个http处理过程比作是污水处理，中间件就像是一层层的过滤网。 每个中间件在http处理过程中通过改写request或（和）response的数据、状态，实现了特定的功能。 中间件就是类似于一个过滤器的东西，在客户端和应用程序之间的一个处理请求和响应的的方法。*/ var connect = require('connect'); //创建连接 var bodyParser = require('body-parser'); //body解析 var serveStatic = require('serve-static'); //目录访问（静态文件访问） let map = new Map();//声明 Map 对象 var data={//返回状态模板 "code": "200", "msg": "success" }; function strMapToObj(strMap) { let arr = []; for (let [k,v] of strMap) { let obj = {}; obj.key = k; obj.value = v; arr.push(obj); } return arr; }; function strMapToJson(strMap) { return JSON.stringify(strMapToObj(strMap)); }; var app = connect() .use(bodyParser.json()) //JSON解析 .use(bodyParser.urlencoded({extended: true})) .use(serveStatic(__dirname)) //use()方法还有一个可选的路径字符串，对传入请求的URL的开始匹配。 //use方法来维护一个中间件队列 .use(function (req, res, next) { //跨域处理 // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', '*'); //允许任何源 // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); //允许任何方法 // Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token'); //允许任何类型 res.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"}); //utf-8转码 next(); //next 方法就是一个递归调用 }) .use('/map/add', function(req, res, next) {//添加 console.log(req.body.name); //console.log(req.originalUrl, req.url); map.set(req.body.name, req.body.message);//操作Map 添加 res.end(JSON.stringify(data));//返回 next(); }) .use('/map/upd', function(req, res, next) {//修改 console.log(req.body.name); //console.log(req.originalUrl, req.url); if (map.has(req.body.name)) {//如果这个key是map对象的 map.set(req.body.name, req.body.message);//MAP 修改 } res.end(JSON.stringify(data));//返回 next(); }) .use('/map/get', function(req, res, next) {//获取列表 console.log(strMapToJson(map)); res.end(strMapToJson(map));//直接返回整个Map strMapToJson(map) 转JjSon next(); }) .use('/map/del', function(req, res, next) {//单个删除 console.log(req.body); if(map.has(req.body.name)) {//判断要删的存不存在 map.delete(req.body.name);//删除 } res.end(JSON.stringify(data));//返回 next(); }) .use('/map/delAll', function(req, res, next) {//全部删除 map.clear();//全部删除 res.end(JSON.stringify(data));//返回 next(); }) .listen(3000); console.log('Server started on port 3000.');
------------------------------------