个人理解下的总结，仅供参考

字符串

字符串拼接

const lonlatPos =  lonat[0].toString() + ',' + lonlat[1].toString()

parseInt将字符串转数字

• 计算数组中最大的元素
• 用数组排序来获取数组中最大元素

const a = [1, 2, 3, 4, 5, 6]
const b = a.sort()[a.length-1]
// 获得数组a的最大值吧 b=6

将字符串[1.2121, 2.34343] 以 ‘,’ 拆分开

// lonlatPos = [ 1.23232, 3.4343 ]
a = lonlatPos.split(',')[0],   // a = 1.23232
b = lonlatPos.split(',')[1],   // b = 3.4343

数字转字符串，数值超过千位，加上千位符号

let a = 30000000;
a.toLocaleString();
// a '30,000,000'

字符串-截取字符串-找到字符串-截取其后

let a = '2020-03-21 12:29';
a.slice(a.indexOf('-', 0) + 1);
// a '03-21 12:29'
// 获取'-'在a字符串从左到右第一次出现的位置下标

json 解析字符串数组，字符串数组的格式

{"routeName":"路线1","startSite":"校区1","endSite":"北站","time":"08:30 - 14:30","routeSites":["yugang","yugang2","yugang3"]}

这样json.parse就能将routeSites数组解析出来

解析网址并返回相应地址参数

// 获取地址参数，判断是否为六面体进行操作
getURLParamsMap(key) {const search = window.location.href.split('?');const params = {};if (Array.isArray(search)) {if (!search[1]) return;search[1].split('&').forEach((item) => {const arr = item.split('=');params[arr[0]] = arr[1];});}return params[key];
},

js 操作DOM

根据id/class 获取dom元素

<div class="tabsbox" id="tab"><!-- tab 标签 --><nav class="fisrstnav"><ul><li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li><li><span>测试2</span><span class="iconfont icon-guanbi"></span></li><li><span>测试3</span><span class="iconfont icon-guanbi"></span></li></ul><div class="tabadd"><span>+</span></div></nav>
</div>this.main = document.querySelector('#tab');    // 根据id来获取dom元素
this.add = this.main.querySelector('.tabadd');  // 获取底部ul容器
this.ul = this.main.querySelector('.fisrstnav ul:first-child');   // 根据class，及css3来获取元素

判断dom是否存在滚动条

// 获取dom元素
方法一：
document.getElementsByClassName('bottom-part')[0]
方法二：
const ListDOM = this.$refs.PersonchildPanelRef.$refs.bottomPartRef;
// this.$refs.PersonchildPanelRef在父组件中获取引用的子组件元素
// this.$refs.PersonchildPanelRef.$refs 在父组件中获取引用的子组件的内部的dom元素
// this.$refs.PersonchildPanelRef.$refs.bottomPartRef 在父组件中获取引用的子组件的内部的dom元素的bottomPartRef元素，效果同等于document.getElementsByClassName('bottom-part')[0]// 获取到dom元素的容器高度(dom元素以上面拿到的 ListDOM 为例子）
const containerHeight = ListDOM.clientHeight;// 获取到dom元素的全文高度
const contentHeight = ListDOM.scrollHeight;// 如果dom的全文高度 > dom的容器高度，则说明有滚动条
if (contentHeight > containerHeight) {console.log('存在滚动条')
}

js 操作存在滚动条的dom带有滚动动画地滚动到dom底部

不带动画的移动到底部

ListDOM.scrollTop = ListDOM.scrollHeight;
// scrollTop 指的是 dom向上滚动的像素数

带有滚动动画的滚动到底部

ListDOM.scrollTo({top: ListDOM.scrollHeight,behavior: "smooth",
});
// element.scrollTo()
// 有三个参数，top/left/behavior
// 前两个参数 top/left 代表的是距离页面左上角的像素数
// 第三个参数 behavior 有三种参数 auto(默认) smooth(平滑滚动) instant(瞬间滚动)

获取dom元素，并修改其样式名称

this.add.onclick.className = 'liactive';

监听dom大小的变化，做出相应反应

<Company ref="companyInfoRef"/>

const myObserver = new ResizeObserver(() => {// 先去掉毛玻璃 再加上this.removeBlureract();this.addBlureract();
});
myObserver.observe(this.$refs.companyInfoRef.$el);

DOM横向溢出时 鼠标滚轮横向滚动

<div ref="topRef"></div>

const scrollDiv = this.$refs.topRef;
scrollDiv.addEventListener('mousewheel', (event) => {// 获取滚动方向const detail = event.wheelDelta || event.detail;// 定义滚动方向，其实也可以在赋值的时候写const moveForwardStep = 1;const moveBackStep = -1;// 定义滚动距离let step = 0;// 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的if (detail < 0) {step = moveForwardStep * 100;} else {step = moveBackStep * 100;}// 对需要滚动的元素进行滚动操作scrollDiv.scrollLeft += step;
}, false);

数组

方法梳理(增、删、改、查、遍历）

push 数组末尾增加元素（可多个），改变原数组，并返回数组的长度

pop 数组末尾删除元素，改变原数组，并返回删除的元素

unshift 数组头部增加元素（可多个），改变原数组，并返回数组的长度

shift 数组头部删除元素，改变原数组，并返回删除的元素

reverse 倒序数组元素，改变原数组，并返回该数组

concat 合并数组（可多个）, 不改变合并的原数组，并返回合并后的数组

join 转字符串

fill (填充元素，起始位置，结束位置）数组指定位置填充元素

flat 扁平化数组，可传参数 Infinity 无限大，深度扁平化数组

map 遍历数组所有元素， 返回数组

forEach 遍历数组所有元素，不返回

reduce 正序遍历数组 接受4个参数（累加器，当前值，当前下标index，原数组）

reduceRight 倒叙遍历数组

every 所有元素是否符合指定的条件，返回布尔值

some 是否存在元素符合指定的条件，返回布尔值

filter 过滤 返回新数组

slice 截取数组元素，返回新数组，引用复制，不改变原数组

includes 判断数组是否包含改元素，返回布尔值

indexOf 查找元素在数组中指定下标的位置，不改变原数组，返回该元素在数组中位置

lastIndexOf 查找元素在数组中最后一个索引，不改变原数组，并返回索引

find 查找字符串，返回一个新数组，不改变原数组

findIndex 查找

findIndex 与 indexOf区别：
findexIndex 传判断条件
indexOf 传元素，主要判断元素存在与否（includes > indexOf > findIndex）

splice 万能方法（增、删、改（替））

传入三个参数（指定位置a，删除个数b，添加的元素c）
增加：(指定位置_必传，删除个数_0, 添加的元素_必传）
删除：(指定位置_必传，删除个数_非必传, 添加的元素_不传）
删除最后1个元素，splice(-1)
删除最后2个元素，splice(-2)
删除指定位置元素，splice(0, 2) 开始位置，删除2个元素
替换元素： (指定位置_必传，删除个数_必传, 添加的元素_不传）
替换第一个元素，splice(0, 1, 9)

数组案例

let a = [{m: 2,n: 3,},{m: 3,n: 4,}
]

遍历数组，批量修改变数组对象中某个字段的值，并返回数组

a.forEach(item => {item.m = item.m + item.n;
})
// a的返回值变为
[{m: 5,n: 3,},{m: 7,n: 4,}
]

新建指定个数数组并填充指定元素

new Array(3).fill(2);
// [2, 2, 2];

找出元素出现的所有位置（indexOf）

var indices = [];
var array = [1, 2, 1, 3, 1, 1];
var element = 1;
var idx = array.indexOf(element);
while(idx != -1) {indices.push(idx);idx = array.indexOf(element, idx + 1);
}
console.log(indices)
// [0, 2, 4, 5]

遍历数组，返回数组对象中某个字段的值的和

方法一 forEach

let count = 0;
a.forEach(item => {count += parseInt(item.m);
})
// a的值
5

方法二 reduce

let b = a.reduce((m,n) =>  m.m + n.m);
// b 12

逆转数组

let a = [1, 2, 3, 4, 5];
a.reverse();  // a[5, 4, 3, 2, 1]

数组中固定位置添加元素

// 向数组中的倒数第二位添加元素
let a = [0, 2];
a.splice(-1, 0, 1)
// a [0, 1, 2]
// 向数组中倒数第二位添加元素
a.splice(-2, 0, 2);
// a [0, 2, 1, 2]

用一个固定值替换原数组的值，

• 需求：我想得到一个和a数组同等长度的数组，且数组内的元素都是a数组中的最大值，又不破坏原数组a

const a = [1,2,3,4,5,6];
const max = a.sort()[a.length -1];
let b = Array(a.length).fill(max);
// 这样得到b数组，b=[6,6,6,6,6,6]，a数组仍然是a=[1,2,3,4,5,6]

用固定值填充数组Array.fill()
数组排序Array.sort()：弊端，sort会改变原数组

获取数组中最大值

一维单元素数组

const a = [1,2,3,4,5,6];
const maxvalue = Math.max(...a);
// maxvalue ：6

非单一数组方法1

const a = [{value: 3,},{value: 1,},{value: 2,},
];
const maxValue = a.reduce(((pre, val) => pre > +val.value ? pre : +val.value), 0)
// maxvalue ：6

知识点reduce

a.reduce(function(total, currentItem, currentIndex, arrayItem), initialValue)
// total 计算结束后会返回的值 必需 initialValue会给它赋初始值
// currentItem 当前元素 必需
// currentIndex 当前元素-索引
// arrayItem 当前元素所属的数组对象

非单一数组方法2

// 数据源
datasource: [
{name: 'huhuh',value: 12,
},
{name: 'huhuh',value: 21,
},
{name: 'huhuh',value: 31,
},
{name: 'huhuh',value: 43,
},
{name: 'huhuh',value: 67,
},
// 循环数组，返回数组中的value值
const valueArray = datasource.map((item) => {return +item.value;
});
// 找到数组中最大值
const max = Math.max(...valueArray);

合并两个数组

a: [{name: '鱼缸',age: 23,}
]b: [{name: '余航',age: 23,}
]
// 将a、b数组合并成一个数组 合成下面的c
c: [{name: '鱼缸',age: 23,},{name: '余航',age: 23,}
]

则

a.concat(b);

数组排序 (sort)（正序、倒序）

let a = [{value: 3,},{value: 2,},{value: 4,},
]
// 根据value的值，正序 -从小到大
a.sort((a, b) => return a.value - b.value);
// 根据value的值，正序 -从大到小
a.sort((a, b) => return b.value - a.value);

数组排序（冒泡排序）

正序（从小到大）

let a = [{num: 3}, {num: 1}, {num: 9}, {num: 8}]
let temp;
for (let m = 0; m < a.length - 1; m++) {for( let n = 0; n < a.length - 1; n++) {if (a[n].num> a[n+1].num) {temp = a[n];a[n] = a[n+1];a[n+1] = temp;}}
}

倒序（从大到小）

let a = [{num: 3}, {num: 1}, {num: 9}, {num: 8}]
let temp;
for (let m = 0; m < a.length - 1; m++) {for(let n = 0; n < a.length - 1; n++) {if (a[n].num < a[n+1].num) {temp = a[n+1];a[n+1] = a[n];a[n] = temp;}}
}

a b 两数组，计算 a b 数组的重叠部分，不重叠部分

let a = [1, 2, 3, 4];
let b = [3, 4, 5, 6];
// 计算 ab 数组重叠部分，并返回一个数组c c[3, 4],
let c = a.filter((m) => b.findIndex((n) => n === m ) !== -1); // 过滤掉不想等的元素
// 计算 a数组中 数组不重叠的部分，并返回一个数组 c c[1, 2]
let c = a.filter((m) =>  b.findIndex((n) => n === m ) === -1) // 过滤掉b中有的元素
// 计算 b 数组中 数组不重叠的部分，并返回一个数组c c[5, 6]
let c = b.filter((m) => a.findIndex((n) => n === m ) === -1) // 过滤掉a中有的元素

计算进度条的百分比

根据当前值及最大值返回百分比

computed: {// 计算百分比getpercentage() {return function getpercentage(value) {return `${Math.floor((+value * 100) / (this.maxNum * 1.3))}%`;};},
},

js Date

js获取本地时间并动态变化

this.timer = setInterval(() => {this.timeNow = new Date().toLocaleString('chinese', { hour12: false,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second: "2-digit", hour12: false}).replace(' ', '  ');
}, 1000);

获取年时间 如2020-12-15

new Date().toLocaleString('chinese', { year:"numeric",month:"2-digit",day:"2-digit",}).replaceAll('/', '-');

获取日时间

new Date().toLocaleString('chinese', {hour:"2-digit",minute:"2-digit",second: "2-digit", hour12: false}).replace(' ', '  ');

根据当前日期，推算前一年，前一个月，前一周的时间

let num = 365,num = 31,num = 7;
// 获取当前时间
let date = new Date();
let timeStamp = date.getTime();
let newDate = timeStamp - num * 1000 * 3600 * 24;
let month = `${newDate.getmonth() + 1`.padStart(2, '0');
let day =`${newDate.getDate()`.padStart(2, '0');
// 返回推算结果（年-月-日）
return [newDate.getFullYear(), month, day].join('-');

获取本地文件，并且把内容穿刺进入

fetch(url).then(r = > r.json()).then((res) => {
}))

$.ajax({type: 'GET',url: url,dataType: 'json',success: function (data) {createBuildings(data);}
});

对象

获取某对象中某值的最大值

let a =  [{name: '鱼香肉丝',number: 256,},{name: '鱼香肉丝',number: 238,},{name: '鱼香肉丝',number: 203,}];
let b = a.map((item) => {return item.number});
let maxNumber = Math.max.apply(null, b); // 256

Object.is

效果和 === 差不多

Object.is('', undefined)
// false
Object.is('', '')
// true

区别

+0 === -0
// true
Object.is(+0, -0)
// false
NaN === NaN
// false
Object.is(NaN, NaN)
// true

iframe

iframe允许窗口放大
allowfullscreen=“true” webkitallowfullscreen=“true” mozallowfullscreen=“true”

<iframe :src="((index <= lastIndex && index >= (lastIndex - 3))) ? item.videoUrl : ''"  width="330px" allow="autoplay" height="186px" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

鼠标事件

监听鼠标键盘操作-10s无操作后即进行相应操作

// 如果超过10s鼠标无操作则执行场景自转事件
addmousemonitorEvent() {// 鼠标移动document.onmousemove = () => {window.lastMove = new Date().getTime();};// 鼠标点击document.onmousedown = () => {window.lastMove = new Date().getTime();};// 键盘按下document.onkeydown = () => {window.lastMove = new Date().getTime();};window.lastMove = new Date().getTime();window.setInterval(() => {const now = new Date().getTime();if (now - window.lastMove > 3000) {// 执行方法this.scenceRotate = true;} else {this.scenceRotate = false;}}, 1000);
},

watch: {scenceRotate(val) {if (val) {// 开始操作this.startRotateEvent();} else {// 结束操作this.stopRotateEvent();}},
}

将HEX颜色值转换为RGBA（）

// hex值转rgba
handleColor(color, opacty) {const reg = /^#([0-9a-fA-F]){3}|[0-0-9a-fA-F]{6}$/;if (color && reg.test(color)) {let c = color.substring(1).split('');if (c.length === 3) {c = [c[0], c[0], c[1], c[1], c[2], c[2]];}c = `0x${c.join('')}`;/* eslint-disable */return `rgba(${[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',')},${opacty})`;}return `rgba(255, 255, 255,${opacty})`;
},

Promise

Promise all

优点：
1、传入PromiseAll数组中的promise实例，不管他们谁先获取到数据，返回的数组仍然依照传入的顺序返回结果

initData() {Promise.all([fetch('/try/geojson/try1.geojson').then(r => r.json()),fetch('/try/geojson/try2.geojson').then(r => r.json()),this.thing1();]).then((data) => {console.log(data);}).catch((error) => {console.error(error);})
},thing1() {return new Promise ((resolve, reject) => {resolve('333');};
},

优点: 传入PromiseRace的promise实例，谁先获取结果就返回谁的promise实例的结果，不会返回全局实例的结果，常见应用场景，多台服务器上部署了同样的服务，比如获取接口，哪个接口响应速度快就返回谁的结果

Promise race

initData4() {Promise.race([fetch('/try/geojson/try1.geojson').then(r => r.json()),this.thing1(),this.thing2(),fetch('/try/geojson/try2.geojson').then(r => r.json()),]).then((result) => {console.log(result);}).catch((error) => {console.error(error);})
},thing1() {return new Promise ((resolve, reject) => {resolve('333');};
},

js操作路由

重新打开页面并跳转到指定路由

// 项目重新打开一页面，指向一个路由
window.open('/public', '_blank');

判断回调函数cb是否是Function类型

if (callback instanceof Function) {callback();
}

Es6新增属性

模板字符串

字符串 + 变量

多行文字

解构赋值

箭头函数

特点

• 没有this
• 没有arguments 如果要添加的话，则使用 call 或者 apply
• 适合匿名函数

Promise

Jst知识点个人总结相关推荐

1. JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx

   JavaWeb笔记:第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx 1. MVC ...

2. 解释型语言与编译型的必须知识点

   解释型语言与编译型的必须知识点 概念: 计算机不能理解直接理解高级语言,只能理解机器语言,所以必须把高级语言翻译成机器语言,计算机才能执行高级语言编写的程序. 翻译的方式有两种: 编译 解释 两种翻译 ...

3. YOLOV4知识点分析（二）

   YOLOV4知识点分析(二) 数据增强相关-mixup 论文名称:mixup: BEYOND EMPIRICAL RISK MINIMIZATION 论文地址:https://arxiv.org/ab ...

4. YOLOV4知识点分析（一）

   YOLOV4知识点分析(一) 简 介 yolov4论文:YOLOv4: Optimal Speed and Accuracy of Object Detection arxiv:https://arx ...

5. 你需要掌握的有关.NET DateTime类型的知识点和坑位 都在这里

   引言    DateTime数据类型是一个复杂的问题,复杂到足以让你在编写[将日期从Web服务器返回到浏览器]简单代码时感到困惑. ASP.NET MVC 5和 Web API 2/ASP.NETCo ...

6. 简练软考知识点整理-范围确认易混概念

   与确认范围容易混淆的知识点包括,确认范围与核实产品.质量控制.项目收尾,下面进行比较分析. (1)确认范围与核实产品 核实产品是针对产品是否完成,在项目(或阶段)结束时由发起人或客户来验证,强调产品是 ...

7. 朴素贝叶斯知识点概括

   1. 简述 贝叶斯是典型的生成学习方法 对于给定的训练数据集,首先,基于特征条件独立假设,学习输入/输出的联合概率分布:然后,基于此模型,对于给定的输入x,根据贝叶斯定理求后验概率最大的输出y 术语说 ...

8. 计算机二级函数知识,2017年全国计算机二级考试MS Office高级应用知识点：INDIRECT函数...

   INDIRECT函数知识点 适用考试:全国计算机二级考试 考试科目:MS Office高级应用 科目知识点:INDIRECT函数 INDIRECT函数立即对引用进行计算,并显示其内容.当需要更改公式中 ...

9. python如何创建一个类_python （知识点：类）简单的创建一个类

   #!/usr/bin/env python # -*- coding: utf-8 -*- """ Created on Mon Nov 14 01:01:29 2016 ...

最新文章

1. 分享8个非常实用但是名气不大的软件
2. ECMAScript 6 Features 中文版
3. junit4 assert类中的assert方法总结
4. （转）光照模型及cg实现
5. scikit-learn学习笔记（三）Generalized Linear Models ( 广义线性模型 )
6. 下行文格式图片_帮你填平论文投稿格式修改这个大坑，一文了解三大出版社投稿要求...
7. leetcode117. 填充每个节点的下一个右侧节点指针 II(dfs)
8. git 空提交和重置提交者（转载）
9. IO流 (三) ----- 字符流和字符缓冲流
10. 院士大咖齐聚苏州，共话AI未来，30个优秀个人和企业、产品受到表彰
11. [pytorch] 深度学习分割网络U-net的pytorch模型实现 原创 2017年03月08日 21:48:21 标签： python / 深度学习 / 生物图
12. java毕业设计蔚蓝在线学习平台源码+lw文档+mybatis+系统+mysql数据库+调试
13. 知到网课教师口语艺术考试题库（含答案）
14. 扩展欧几里得算法的实现
15. xjoi 1524 枚举集合
16. PERT图之事件、活动、松弛时间、关键路径
17. Mac 双系统之windows坏了咋办
18. 空间和时间 ----节选《时间简史》 霍金
19. MQTT QOS Retained Message
20. CSS基础教程（下）

热门文章

1. Java的内部类详解（成员内部类、静态内部类、局部内部类、匿名内部类）
2. Datawhale 7月学习——李弘毅深度学习：回归
3. 嵌入式Linux开发环境搭建之八---Ubuntu16.04 tftp环境搭建
4. 津津有味：你吃内脏吗？除了凳子腿儿，我什么都吃
5. 自己轻松打印电子发票
6. java集合Collection
7. 《那些年，我们一起追的女孩》：他们台湾那些年
8. 华为gpon二层互通_干货 | 华为HCNA实战培训视频教程汇总集【共70集】，非常适合新入门的童鞋...
9. WordPress 搬家方法总结：迁移主机和更换域名
10. input文本框设置不可编辑方法和HTML5 新的 Input 类型