Jst知识点个人总结

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

字符串

字符串拼接

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