javascript基础知识

原创

用户6841540

发布于 2024-08-01 10:26:22

930

发布于 2024-08-01 10:26:22

文章被收录于专栏：安义技术分享

基础运算

`++`与`--`

加减乘除取余这些就不说了，在js中也有++与--的运算，比如：

n++

--n

`==`与`===`

还有提一下==与===的区别，==是强制类型转换比较，===是不强制类型转换比较。

let a = 1,b = 2,c = '1';

console.log(a < b); //true

console.log(a == b); //false

console.log(a == c); //true

console.log(a === c); //false

console.log(a == true); //true

console.log(a === true); //false

且与或

且的符号为&&,或的符号为||,两者间且的优先级高于或。当然，也有之前在c语言学过的短路特性。

流程控制

for

for (let n = 5 - i; n > 0; n--) {



  document.write('^');

  }

一般这样写即可，但有的人为了省事会忽略着写，那样也是行的(for 的三个参数可以都省略或取几个).

let i = 1;


for (; i < 10; ) {



  console.log(i++);


}

label

标签(label) 为程序定义位置，可以使用continue/break跳到该位置。

下面取i+n 大于 15 时退出循环

houdunren: for (let i = 1; i <= 10; i++) {



  hdcms: for (let n = 1; n <= 10; n++) {


if (n % 2 != 0) {

  continue hdcms;

}

console.log(i, n);

if (i + n > 15) {

  break houdunren;

}


  }



}

结果如下：

1 2

1 4

1 6

1 8

1 10

2 2

2 4

2 6

2 8

2 10

3 2

3 4

3 6

3 8

3 10

4 2

4 4

4 6

4 8

4 10

5 2

5 4

5 6

5 8

5 10

6 2

6 4

6 6

6 8

6 10

for/in与for/of

for/in一般用来遍历对象，（不建议遍历数组），遍历的就是下标（可以先这么理解）。

var person = {fname:"John", lname:"Doe", age:25}; 



var text = "";



var x;



for (x in person) {


text += person[x] + " ";


}

与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。

let arr = 1, 2, 3;



for (const iterator of arr) {


console.log(iterator);


}

基本类型

typeof与instanceof

typeof查看变量类型会返回变量类型名，而instanceof更多的适用于变量的类型是否是给出的类型。

let a = 1;

console.log(typeof a); //number


let hd = [];



let houdunren = {};



console.log(hd instanceof Array); //true



console.log(houdunren instanceof Array); //false

转义符号

有些字符有双层含义，需要使用 \ 转义符号进行含义转换。下例中引号为字符串边界符，如果输出引号时需要使用转义符号。

let content = '后盾人 \'houduren.com\'';


console.log(content);

输出结果为：

后盾人'houduren.com'

其实也可以这么写：

let content = "后盾人 'houduren.com'";



console.log(content);

常用转义列表如下：

符号	说明
\t	制表符
\n	换行
\	斜杠符号
\'（显示问题：其实前面有个\）	单引号
\"（显示问题：其实前面有个\）	双引号

连接运算符

跟python类似，可以直接使用+将多个字符串组合成一个。

let year = 2010,


name = '后盾人';


console.log(name + '成立于' + year + '年');

注意：js中+=也能对字符串使用。

布尔类型

除了常见的转换成布尔类型，还可以使用!!转换布尔类型

let hd = '';


console.log(!!hd); //false


hd = 0;


console.log(!!hd); //false


hd = null;


console.log(!!hd); //false



hd = new Date("2020-2-22 10:33");


console.log(!!hd); //true

数组

Array.of

使用Array.of 与 new Array 不同是设置一个参数时不会创建空元素数组

数组合并

使用展开语法来合并数组相比 concat 要更简单，使用... 可将数组展开为多个值。

let a = 1, 2, 3;


let b = 'a', '后盾人', ...a;


console.log(b); //"a", "后盾人", 1, 2, 3

push

压入元素，直接改变元数组，返回值为数组元素数量

let arr = "后盾人", "hdcms";


console.log(arr.push('向军大叔', 'houdunren')); //4


console.log(arr); //"后盾人", "hdcms", "向军大叔", "houdunren"

copyWithin

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。

语法说明

array.copyWithin(target, start, end)

参数说明

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

const arr = 1, 2, 3, 4;


console.log(arr.copyWithin(2, 0, 2)); //1, 2, 1, 2

将0~2位置的内容（1，2）,复制到2开始的位置（3，4）

模块设计

默认导出与普通导入

导入默认接口时不需要使用 {} ，普通接口还用 {} 导入

promise

异步操作

任务管理

优先级：同步任务（主代码、promise）>微任务（比如Promise.then ）>异步任务（setTimeout中的任务）

var、let、const三个变量声明的区别

具体的区别可以参考这篇博客，我简单将三者的特性概括为下面三种;

1.var

var声明的变量可以重复定义，比如下面这种情况：

var a = 1;

var a = 2;

console.log(a)

最终控制台输出的的内容就是2，第二次赋值的内容会覆盖第一次。

其次，var声明的变量不会在块之外被销毁，依然会存在。

function func() {

  for (var i = 0; i < 5; i++) {}

  console.log(i); // 5

}

func();

上面输出的内容会是5

2.let

首先let定义的变量不能重复定义（let 关键字声明的变量可以重新赋值，但不能在同一作用域赋值）：

let i = 5;

let i = 6;

console.log(i);

这样是不正确的，在程序中会报错。

其次，let定义的变量在块区域外会失效，比如跟上面var定义类似的：

function func() {

  for (let i = 0; i < 5; i++) {}

  console.log(i);

}

func();

这时候输出的i就是未定义的，console.log()命令在for循环外，而let的赋值是在循环内。

3.const

const跟const类似定义的变量不能改变、也是具有块级作用域；但不同的是，const即使是在不同块级作用域也不能重新赋值。由于const声明的变量不是真正的常量，而是指向内存地址的指针。因此，如果 const 声明的变量是对象或数组，虽然无法重新赋值，但是可以更改其属性或元素值。

script位置问题

1.放在html中，内部引用

<!DOCTYPE html>

<html>

<head>

<title>test</title>

</head>

<style type="text/css">

	.box{



		width: 300px;


		height: 300px;


		background:blue;



	}


</style>


<body>

<div class='box'>

</div>

<script type="text/javascript">


	document.querySelector('.box').onclick = function () {

		alert('welcome')

	}

</script>

</body>

</html>

2.放在html外，外部引用

<!DOCTYPE html>

<html>

<head>


<title>test</title>

<style type="text/css">

	.box{

		width: 300px;

		height: 300px;


	}

</style>


<body>

<div class='box'>

</div>

<script src="test.js">	//test.js保存在同级目录中

</script>


</body>

</html>

获取元素

1.getElementById

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

    button{

        width: 300px;

        height: 35px;

    }

</style>


</head>

<body>

<button id="btn">

    按钮

</button>

<!--   script严格区分大小写-->

<script>

    document.getElementById('btn')

    console.log(document.getElementById('btn')) //在控制台验证是否找到元素

</script>

</body>

</html>

在JSP中的注释一共分为两种注释：

显式注释：在HTML中存在注释“”

隐式注释：可以使用java中的“//”、“/…./”，以及JSP中自己的注释：“”

ts相关

解决报错问题

当运行下面的指令将ts转换为js时

 tsc helloworld.ts

报错：: 无法加载文件 C:\Users\yezhoubing\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。

解决方法：

用管理员身份打开 windowsPowerShell

输入命令：

set-ExecutionPolicy RemoteSigned

最后按Y确定

进入某个文件命令行的方法(pycharm)

MapServer安装

windows环境下安装

1.下载

官网下载

下载ms4w压缩包或者exe，这里以zip为例

2.安装

将压缩包解压到D盘中，执行D:\ms4w\apache-install.bat文件（注意以管理员身份运行）

在本机上80端口被占用，修改端口：打开D:\ms4w\Apache\conf\httpd.conf文件，修改为Listen 81

服务启动成功

访问http://localhost:81/，出现以下界面说明安装成功

mappyfile

python包中对Mapfile进行处理的包

官方文档

说明介绍文档

openlayers

天地图使用示例

 // 天地图是将路网图层和注记图层分开发布的，我们还要单独请求注记图层，然后叠加在路网上面

    // 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile

    var TiandiMap_vec = new ol.layer.Tile({

        title: "天地图矢量图层",

        // 用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile。T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别

        source: new ol.source.XYZ({

            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + "261dae6ae5ff631786cb4ad53d0a9b8a",//261dae6ae5ff631786cb4ad53d0a9b8a为天地图密钥

            wrapX: false

        })

    });

    var Tianditu_cva = new ol.layer.Tile({

        title: "天地图矢量注记图层",

        source: new ol.source.XYZ({

            // cva_w 表示请求的切片类型是注记图层切片

            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + "261dae6ae5ff631786cb4ad53d0a9b8a",//261dae6ae5ff631786cb4ad53d0a9b8a为天地图密钥

            wrapX: false

        })

    });

    //实例化Map对象加载地图

    var map = new ol.Map({

        //地图容器div的ID

        target: 'mapCon',

        controls: ol.control.defaults({

            /** @type {olx.control.AttributionOptions} */

            attributionOptions: ({

                collapsible: true

            })

        }).extend([

      new ol.control.ZoomToExtent({

          extent: [

            813079.7791264898, 5929220.284081122,

            848966.9639063801, 5936863.986909639

          ]

      })

        ]),

        //地图容器中加载的图层

        layers: [TiandiMap_vec, Tianditu_cva],

        //地图视图设置

        view: new ol.View({

            //地图初始中心点

            center: [0, 0],

            //地图初始显示级别

            zoom: 2,

            projection: "EPSG:3857"

        })

    });

新版地址：https://map.tianditu.gov.cn/,老版：https://t0.tianditu.com

调用

 url: "[https://t0.tianditu.gov.cn/DataServer?T=vec\_c&x=3233&y=673&l=12&tk=](https://t0.tianditu.gov.cn/DataServer?T=vec_c&x=3233&y=673&l=12&tk=)你的密钥"

天地图

天地图共有 8 个服务地址，子域名分别从 t0 到 t7，如下列表所示。使用时自己选择。

http://t0.tianditu.gov.cn/DataServer?
http://t1.tianditu.gov.cn/DataServer?
http://t2.tianditu.gov.cn/DataServer?
http://t3.tianditu.gov.cn/DataServer?
http://t4.tianditu.gov.cn/DataServer?
http://t5.tianditu.gov.cn/DataServer?
http://t6.tianditu.gov.cn/DataServer?
http://t7.tianditu.gov.cn/DataServer? 旧后缀 tianditu.com，不支持 https。新后缀 tianditu.gov.cn，兼容 http 和 https 注意：url: "https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=261dae6ae5ff631786cb4ad53d0a9b8a"中T=表示投影类型，要标记与地图一致，否则会出现偏移问题

openlayer 5 的地图容器默认（ol.control.defaults）加载了3个常用控件：缩放控件（ol.control.Zoom）、旋转控件（ol.control.Rotate）、图层数据源属性控件（ol.control.Attribution）

修改地图导航条关联控件的样式

缩放控件（ol.control.Zoom）的默认样式类为.ol-zoom,ol-zoom-out与ol-zoom-in分别为两个按钮的样式类名;缩放滑块控件（ol.control.ZoomSlider）的默认样式class为ol-zoomslider;ol.control.ZoomToExtent控件的默认样式class则为ol-zoom-extent

/ _修改地图导航条关联样式_ /

    /* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能*/

    #mapCon .ol-zoom .ol-zoom-out {

           margin-top: 204px;

       }   /*选择id为mapCon元素下class为ol-zoom的元素下的ol-zoom-out样式*/

       #mapCon .ol-zoomslider {

           background-color: transparent;

           top: 2.3em;

       }

       #mapCon .ol-touch .ol-zoom .ol-zoom-out {

           margin-top: 212px;

       }

       #mapCon .ol-touch .ol-zoomslider {

           top: 2.75em;

       }

       #mapCon .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],

       #mapCon .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {

           top: 3px;

       }

       #mapCon .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],

       #mapCon .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {

           top: 232px;

       }

       #mapCon .ol-zoom-extent {

           top: 280px;

       }

参数意义

参数	含义
wrapX: false	对于-180°和180°子午线上的矢量编辑图形时，false不会重复平铺，true会重复
crossOrigin: "anonymous"	不允许跨域显示

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S8

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S8

javascript

登录后参与评论

0 条评论

热度