首页 > 其他分享> 文章详细

2021-4月中旬

2021-04-17 12:34:02 阅读：186 来源： 互联网

标签：resolve console log 中旬 await promise 2021 async

layui

页面层是在里面写html代码

iframe层是另外一个html页面

js

1.拼接数组和对象

首先一个最好用的方法，就是扩展运算符...，对象和数组都可以用的

[...arr1 , ...arr2 , ...arr3];

{..obj1 , ...obj2 , ...obj3}

这是ES6的方法，下面介绍ES5的方法，这个就不是共用的了

首先是数组的拼接方法concat

arr1.concat(arr2,arr3)

再就是对象的拼接方法：

Object.assign(obj1,obj2,obj3)
————————————————
版权声明：本文为CSDN博主「Zhou_xiaoqian」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Zhou_xiaoqian/article/details/79867577

2.对象操作

var a={"id":1,"name":"danlis"};
//添加属性
a.age=18;
console.log(a);
//结果：Object { id: 1, name: "danlis", age: 18 }
//修改属性
a.age="我怎么知道";
//结果：Object { id: 1, name: "danlis", age: "我怎么知道" }
 
delete a.age;
//结果：Object { id: 1, name: "danlis" }

3.页面传值

localStorage方式

视频https://www.bilibili.com/video/BV1Ni4y1A7ow?from=search&seid=17301510451121977814

前端的数据库，存储在浏览器中，大概有5M的空间

AAAAAA页面
<body>
    <h1>aaa</h1>
</body>
</html>

<script>
    let x = [123,344534,24323]
    let duixiang = {name:"zhangsan"}
    localStorage.setItem('xxx',x)
    localStorage.setItem("duixiang",duixiang)
</script>

BBBBBB页面
<body>
    <h1>BBB</h1>
</body>
</html>

<script>
    // localStorage.removeItem('xxx')
   console.log(localStorage.getItem('xxx'))
  console.log( localStorage.getItem('duixiang'))
  console.log(localStorage.length)
  localStorage.clear()
  console.log(localStorage.length)
</script>

4.JS 中判断空值 undefined 和 null

var exp = undefined;
if (typeof(exp) == "undefined")
{
    alert("undefined");
}

var exp = null; 
if (!exp && typeof(exp)!=”undefined” && exp!=0) 
{ 
alert(“is null”); 
}

https://www.cnblogs.com/thiaoqueen/p/6904398.html

5.setTimeout和setInterval

settimeout 里面全部写成函数的形式，其他会出现乱七八糟的不知道什么原因的问题

setTimeout(()=>console.log(1),1000);

6.添加标签

 function load(src, resolve) {
      let script = document.createElement("script");
      script.src = src;
      script.onload = resolve;
      document.body.appendChild(script);
    }
    load("js/hd.js", () => {
      load("js/houdunren.js", () => {
        houdunren();
        load("js/a.js", () => {
          houdunren();
        });
      });
    });

7.任务优先级

宏任务，微任务，主线程

宏任务：任务队列里面的,异步的

微任务：promise里面的

主线程：同步的任务

主线程>微任务>宏任务

promise里面的代码也是主任务里面的，then回调函数才是微任务列表

setTimeout(() => {
      console.log("setTimeout");
    }, 0);//异步，宏任务
    new Promise(resolve => {
      resolve();//同步
      console.log("promise");//同步
    }).then(value => console.log("成功"));//异步，微任务
    console.log("后盾人");//同步

8.promise基本语法

//状态改变执行then方法 

// 最开始的样子,一个promise，后面跟两个then，成功的回调和失败的回调
  // 这里没有成功还是失败，会一直等
  new Promise((resolve, reject) => {

  })
    .then(value => {
      console.log(value)
    })
    .then(reason => {
      console.log(reason);
    });

  //成功失败，只能写一个，如果都写执行上面的状态，并且不再执行下面的状态以及他的回调
  new Promise((resolve, reject) => {
    // resolve("一瓶可乐");
    reject("涨价了，买不起了");
  })
    .then(value => {
      console.log(value)
    })
    .then(reason => {
      console.log(reason);
    });


  //如果只关注成功或者失败，可以只写一个then，但是两个状态都要接收，可以填写null，第个参数成功，第二个参数失败
  new Promise((resolve, reject) => {
    // resolve("一瓶可乐");
    reject("涨价了，买不起了");
  })
    .then(null, a => {
      console.log(`处理了失败的状态,${a}`);
    })
      // .then(null, reason => {
      //   console.log(reason);
      // });

//捕获错误
 .catch(error => {})
//不论成功还是失败，最后都会执行的
 .finally(() => {
        loading.style.display = "none";
      });
//给promise 加上return 返回的也是一个promise对象，就可以在最后接着写then成功的回调了，这个then是上一个promise的回调，就不是reject失败的时候的回调了，需要用catch接收错误信息

9.函数给默认值

 function interval(delay=1000){
        return new Promise((resolve,reject)=>{
            let id = setInterval(()=>{
                console.log(1)
            },delay)
        })
    }
    interval()//这里不给值，他会使用默认的1000，每隔1000mm输出1
	interval(100)//这里给值，他会用这里给的，不用默认值，每隔100mm输出1

10.多多练习

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        #div {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="div"></div>
    <script>
        function interval(delay = 1000, callback) {
            return new Promise((resolve, reject) => {
                let id = setInterval(() => {
                    callback(id, resolve)
                }, delay)
            })
        }
        interval(100, (id, resolve) => {
            const div = document.getElementById("div");
            let left = parseInt(window.getComputedStyle(div).left);
            div.style.left = left + 10 + "px";
            if (left > 200) {
                clearInterval(id);
                resolve(div);
            }
        }).then(div => {
            return interval(100, (id, resolve) => {
                let width = parseInt(window.getComputedStyle(div).width);
                div.style.width = width - 10 + "px";
                if(width<=40){
                    clearInterval(id);
                    resolve(div);
                }
            })
        }).then(div=>{
            div.style.backgroundColor = 'red'
        })

    </script>
</body>

</html>

11.async await

async 相当于 new promise

await 相当于 then

await 也是一个微任务

await 只能在 async函数里面才能写

12.await同时请求

 function p1() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve("houdunren");
        }, 2000);
      });
    }
    function p2() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve("hdcms");
        }, 2000);
      });
    }
    async function hd() {
      let res = await Promise.all([p1(), p2()]);
      console.log(res);
      // let h1 = p1();
      // console.log(h1);
      // let h2 = p2();
      // let h1value = await h1; //then
      // let h2value = await h2;
      // console.log(h1value, h2value);
      // console.log(h2);
      // setTimeout(() => {
      //   console.log(h1, h2);
      // }, 2000);
    }
    hd();

13.很好的执行顺序的问题，宏任务微任务，promise async await

https://blog.csdn.net/yun_hou/article/details/88697954

async function async1() {
	console.log('async1 start');
	await async2();
	console.log('asnyc1 end');
}
async function async2() {
	console.log('async2');
}
console.log('script start');
setTimeout(() => {
	console.log('setTimeOut');
}, 0);
async1();
new Promise(function (reslove) {
	console.log('promise1');
	reslove();
}).then(function () {
	console.log('promise2');
})
console.log('script end');

promise、async/await
首先，new Promise是同步的任务，会被放到主进程中去立即执行。而.then()函数是异步任务会放到异步队列中去，那什么时候放到异步队列中去呢？当你的promise状态结束的时候，就会立即放进异步队列中去了。

带async关键字的函数会返回一个promise对象，如果里面没有await，执行起来等同于普通函数；如果没有await，async函数并没有很厉害是不是
await 关键字要在 async 关键字函数的内部，await 写在外面会报错；await如同他的语意，就是在等待，等待右侧的表达式完成。此时的await会让出线程，阻塞async内后续的代码，先去执行async外的代码。等外面的同步代码执行完毕，才会执行里面的后续代码。就算await的不是promise对象，是一个同步函数，也会等这样操作

14.async await promise 定时器效果，每隔一秒输出数组中的数字

 let arr = [1,2,3,4]
    async function sleep() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, 1000)
        })
    }
    (async () => {
        for(let i in arr){
            await sleep ();
            console.log(arr[i]);
        }
    })()

idea

自定义模板

https://majing.io/posts/10000009872000

WebStorm提供了Live Template的功能，可以在JavaScript模块下新建console.log()的快捷方式。

File -> Settings -> Editor -> Live Templates

在JavaScript下新建模板，如设定缩写为.log，模板如下：

console.log($END$);

效果

QGIS

查看wkid

mars3d

1.配置wfs图层

在config.json里面

 {
                "id": 600,
                "name": "沧州模型数据二维",
                "type": "group"
            },
            {
                "pid": 600,
                "name": "管道线",
                "type": "wms",
                "url": "http://120.27.60.10:8765/geoserver/dixiaguandao/wms",
                "layers": "dixiaguandao:gd_line",
                "crs": "EPSG:4326",
                "offset": {
                    "x":116.960,
                    "y":38.291,
                    "z":4000
                },
                "parameters": {
                    "transparent": "true",
                    "format": "image/png"
                },
                "showClickFeature": true,
                "visible": false,
                "flyTo": false
            },

//其中offset用于图层双击跳转

图层的双击跳转在mannageLayers/widget.js里面

 centerAt: function(e) {console.log(e);
    if(!e.originalCenter)
        viewer.mars.centerAt({ "y": e.config.offset.y, "x": e.config.offset.x, "z": e.config.offset.z});
    else
        e.centerAt();
    },
        
 //正常是只有e.centerAt();的
 //他是根据e里面的originalCenter这个属性飞的，wfs对象里没有这个，所以做个判度自己飞了。

  <se:MinScaleDenominator>25</se:MinScaleDenominator>
          <se:MaxScaleDenominator>50000</se:MaxScaleDenominator>

如：这里设置的1：25就不再显示二维地图

2维查询，3维呈现

GEOSERVER

Web Map Server(WMS) , Web Feature Server(WFS) ,Web Coverage Server(WCS) 区别

https://www.cnblogs.com/arxive/p/8315408.html

WMS（Web 地图服务）能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者是SVG和WEB CGM等矢量形式）。WMS支持网络协议HTTP，所支持的操作是由URL定义的。

WFS（Web 要素服务）支持对地理要素的插入，更新，删除，检索和发现服务。该服务根据HTTP客户请求返回GML数据。

WFS对应于常见桌面程序中的条件查询功能，WFS通过OGC Filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，当然还包括基于空间关系和属性域的共同查询。

WCS（Web地理覆盖服务）提供的是包含了地理位置信息或属性的空间栅格图层，而不是静态地图的访问。

(1) WMS服务与WFS服务的区别

wms是web地图服务，wfs 是web要素服务。

wms 能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者是SVG和WEB CGM等矢量形式）。

wfs支持对地理要素的插入，更新，删除，检索和发现服务。

二者的区别，简单的说，wms是基础，是显示地图的，wfs是高级一点的，在前者基础之上可以实现对地图数据的增删改查等操作。

标签：resolve,console,log,中旬,await,promise,2021,async
来源： https://www.cnblogs.com/zcbj588/p/14670377.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9