javascript基础知识

标签： Javascript 分类： Javascript 创建时间：2020-03-25 08:16:53 更新时间：2024-11-15 10:49:44

1.两个叹号!!

有些时候看某些javascript的库，比如jquery等，都会有一个变量前面加了两个叹号!!。

1
2
3
4
5
function test(){
    return !!user;
}

var test=!!o.flag; //等效于var test=o.flag||false;

根据参考文章，两个叹号的作用主要是：

在undifined和null时，用一个感叹号返回的都是true,用两个感叹号返回的就是false,所以两个感叹号的作用就在于，如果明确设置了变量的值（非null/undifined/0/""等值),结果就会根据变量的实际值来返回，如果没有设置，结果就会返回false。
参考文章：
1.js中两个感叹号的原理与用法分析
2.javascript里两个叹号“!!”表示什么意思
3.javascript中两个感叹号的作用

2.获取url参数

1
2
3
4
5
6
7
8
function getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    };
    return null;
}
参考文章：
1.js获取url参数值的几种方式
2.JS获取url参数

3.?问号之前会有一个斜杠

今天发现了一个奇怪的问题，当你在浏览器输入:www.bing.com?id=0的时候，浏览器最后会变成：www.bing.com/?id=0,如何去掉这么个东西，我其实还是费了一部分经历的，最后也没有成功。

字符斜杠（“/”）和问号（“？”）可以表示查询组件中的数据。请注意，当某些较旧的错误实现用作相对引用的基本URI时，可能无法正确处理此类数据（第5.1节），这显然是因为它们在查找分层分隔符时无法区分查询数据和路径数据。但是，由于查询组件通常用于携带“key = value”对形式的标识信息，而一个常用值是对另一个URI的引用，因此有时可以更好地避免对这些字符进行百分比编码。
参考文章：
1.URL后面一个斜杠一个问号是如何实现？
2.浏览器是如何对url进行解析的
3.URL跳转原理：
4.在URL中有多个问号是否有效？ (这里讲了多个问号引起的问题)

4.HTTP协议内容

HTTP协议内容，我觉得其实算是一种基础知识吧。只有理解了HTTP协议的内容，才能知道我们前端都在干什么，如何和后端进行更好的交互。我非常喜欢下面一张图

这张图很好的解释了HTTP协议的请求格式，主要包括的内容。

这张图说明了HTTP协议的响应格式。

参考文章：
1.HTTP协议详解 (这篇文章给我耳目一新的感觉，还是比较清爽的,强烈建议阅读)
2.HTTP协议详解（真的很经典） (这个说是很经典，但是实际上，文章的结构有些散，很难抓住重点)

5.html导出pdf

需求测就是要把前端的一个显示页面比如说是报表页面，导出为pdf。但是这个报表是通过ajax请求后台的数据,所以，为了省事省力，只能前台自己导出pdf了。

参考文章：
1.前端实现html转pdf方法总结
2.html导出pdf的四种方式 (两种后台，两种客户端形式。)

6.获取隐藏元素或者是自定义高度的元素的实际高度

通常我们使用.offsetHeight和offsetWidth获取一个元素的高度和宽度，但是如果一个元素是隐藏元素，或者是动态变化的高度，用这样的方法就不行了，获取到的宽高都是零

参考文章：
1.javascript获取隐藏元素(display:none)的高度和宽度的方法 (这里封装了一个方法，类似于jquery的height())
2.Javascript获取div真实高度
3.javascript中获取dom元素的高度和宽度 (这个其实就是说使用offsetHeight获取高度)
5.Window.getComputedStyle()
6.js 获取自适应高度div的高度 (这个是等数据填充完成之后，使用jq的height()方法获取到最后的高度)
7.JS无法获取display为none的隐藏元素的宽度和高度的解决方案 (这个介绍了jQuery Actual Plugin插件完成的获取隐藏元素的宽高)
8.隐藏元素的宽高无法通过原生js获取的问题 (通过先把隐藏元素克隆一份，放置在这个元素相同的父元素里面，然后用display：block来显示元素，用绝对定位position:absolute来脱离文档流，设置top为负值，这样不会影响原先的元素，这样js获取宽高后再把它删掉)

7.使用原生的xmlhttprequest，设置请求头不生效

当我使用 xmlhttp.setRequestHeader(“Content-type”, “text/plain;charset=GB2312”); 设置请求头的时候，后面的charset总是不生效，最后请求头，还是会被修改为charset=utf-8。因为服务器只返回GB2312的编码，所以我要设置这个值，但是实际上，不需要客户端设置这个值，只需要服务端设置这个charset为gb2312就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 发送相关的配置项到服务端
var xmlhttp = new XMLHttpRequest();
var url=options.url||"/";
// 判断url是否是绝对路径
if(url.indexOf("http:")<0&&url.indexOf("https:")<0){
    url=baseUrl+url;
}

var method=options.type||"POST";
method=method.toUpperCase();

var data=options.data||"";

var dataType=options.dataType||"json"; // 数据类型

xmlhttp.open(method, url, true);    

// 序列化相应的数据
var sendData="";
if(data&&Object.prototype.toString.call(data) === '[object Object]'){
    for(var item in data){
        var value=data[item];
        sendData+=item+"="+value+"&";
    }
    if(sendData){
        sendData=sendData.substring(0,sendData.length-1);
    }
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=GB2312");
}else{
    sendData=data;
    xmlhttp.setRequestHeader("Content-type", "text/plain;charset=GB2312"); // 设置请求头
}

// 将数据绑定到url后面
if(method=="GET"){
    if(url.indexOf("?")<0){
        url+="?";
    }
    url+=sendData;
    sendData="";
}
// 发送数据
xmlhttp.send(sendData);

【相关解释】
请求类型不为get，并且传递了参数data，才能设置contentType。

参考文章:
1.使用zepto的ajax进行请求，contentType设置编码不生效？ 这里设计到了jquery的替代库的zepto源码，里面说明的关于设置编码的问题
2.Jquery, No X-Requested-With=XMLHttpRequest in ajax request header?
3.How to change ajax-charset? contentType:”application/x-javascript; charset:ISO-8859-1”

8.设置滚动条的位置

设置滚动条的位置，可以通过scrollLeft进行设置，如下代码示例，需要注意的是，这个滚动条的设置是在html上设置，而不是在body或者是 #app 上进行设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            position: absolute;
        }


        #app {
            width: 3840px;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script>
        const body = document.body
        const bodyClientWidth = body.clientWidth
        window.addEventListener('load',function(){
            body.parentElement.scrollLeft = (3820 - bodyClientWidth) / 2
        })
    </script>
  </body>
</html>

这里有一个地方需要注意，就是浏览器刷新时候，会记住之前的滚动位置，从而将滚动位置设置到之前的滚动的地方，所有有时候你设置了scrolLeft，也会出现无效的情况。

【解决方案】
就是设置浏览器不记住原先的位置

1
2
3
if(history.scrollRestoration) {
  history.scrollRestoration = 'manual'
}
参考文章:
1.scrollLeft属性设置无效的一个记录 首先应该明确scrollLeft这个属性，只有当div中的内容长度大于当前div的长度是才能working
2.前端设置滚动条位置居中 这里是固定一父元素的宽度，固定了一个子元素的宽度，进行了计算。
3.Vue 项目中document.documentElement.scrollTop 设置无效， 一直都是0 的问题记录 列表的div加上一个最小高度， 一般设置为屏幕的高度。
4.浏览器刷新不记住之前的滚动位置 什么意思呢？其实是个浏览器的一个小细节哈，大家可以随便找个网址（B站或者csdn啥的），内容超出浏览器可视区域的都可以，右侧会有个滚动条，这时候向下滚动，然后去刷新浏览器，你会发现浏览器默认会记住当前滚动的位置。解决方法：1.设置为 manual 可以让浏览器不记住之前的滚动位置。2.给外层div容器设置宽高，并设置overflow: auto。
5.居中元素的 scrollleft 的计算方法
6.Vue实现渲染数据后控制滚动条位置 1.使用setTimeout()，将DOM操作改为异步;2.使用nextTick实现。
7.HTML DOM scrollLeft 属性
8.vue设置scrollLeft 一直为0的原因
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.两个叹号!!
  2. 2. 2.获取url参数
  3. 3. 3.?问号之前会有一个斜杠
  4. 4. 4.HTTP协议内容
  5. 5. 5.html导出pdf
  6. 6. 6.获取隐藏元素或者是自定义高度的元素的实际高度
  7. 7. 7.使用原生的xmlhttprequest，设置请求头不生效
  8. 8. 8.设置滚动条的位置
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文