JavaScript笔记

前端 评论

const、let、var的区别

const是常量，定义时必须赋初值，值不可修改。只限制变量绑定的值，不会限制引用数据类型内部的变动。如：

1
2
3
4
5
6
7
8
const a = 1
a = 2   // 报错

const b = {
    name: '张三'
}
b.name = '李四'     // 不会报错
b = 1   // 报错

let声明的是变量。

const和let只在块内有效，即两个花括号之间，相当于局部的值。

var定义的变量是全局的，但一个函数内var的变量不能在函数外访问。

1
2
3
4
5
6
7
8
var a = '我是a'

function fun() {
    console.log(a)  // 输出'我是a'
    var b = '我是b'
}

console.log(b)  // 报错

用var定义两个同名变量，后定义的会覆盖掉先定义的。const和let不允许重复定义。

var存在变量提升的特性。当用var定义了一个变量，即便还未执行到，该变量也已经存在了，且值为undefined。

1
2
3
4
5
6
function fun() {
    if (a == undefined) {
        var a = 10
    }
    console.log(a)  // 输出为10
}

造成这种现象的原因是，if中用var定义了a，因变量提升（hoisting）特性，在执行前a被提升到函数作用域顶部，且初始值为undefined，于是if成立，早已存在的a由undefined被赋值为10。

将var改用let就不会有这样的问题。

总结：无特殊情况不要用var，声明变量用let。声明对象类型用const，非对象类型用let。

innerHTML 和 innerText 的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head><title>innerHTML与innerText的区别</title></head>
    <body>
        <div id="div1">
            <p id="p1">hello world </p>
        </div>
        <script>
            var div1 = document.getElementById("div1");
            alert(div1.innerHTML);    // <p id="p1">hello world </p>
            alert(div1.innerText)    // hello world
        </script>
    </body>
</html>

正则表达式

各种正则表达式样例

一些常用的正则校验

正则表达式剔除HTML标签与markdown语法符号生成文章简介

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
/// 剔除文章中的markdown语法符号，剔除所有html标签
const removeHTML = (htmlStr: string): string => {
  // 定义script的正则表达式，去除js可以防止注入
  const scriptRegex: RegExp = new RegExp('<script[^>]*?>[\\s\\S]*?<\\/script>', 'gm')

  // 定义style的正则表达式，去除style样式，防止css代码过多时只截取到css样式代码
  const styleRegex: RegExp = new RegExp('<style[^>]*?>[\\s\\S]*?<\\/style>', 'gm')

  // 定义HTML标签的正则表达式，去除标签，只提取文字内容
  const htmlRegex: RegExp = new RegExp('<[^>]+>', 'gm')

  // 定义空格,回车,换行符,制表符
  const spaceRegex: RegExp = new RegExp('\\s*|\t|\r|\n', 'gm')

  // 过滤script标签
  htmlStr = htmlStr.replace(scriptRegex, "");
  // 过滤style标签
  htmlStr = htmlStr.replace(styleRegex, "");
  // 过滤html标签
  htmlStr = htmlStr.replace(htmlRegex, "");
  // 过滤空格等
  htmlStr = htmlStr.replace(spaceRegex, " ");

  return htmlStr.trim().substring(0, 100); // 返回文本字符串，最大长度100
}

剔除<script>标签可以防止XSS攻击

骚客.Frontend Developer

参观我的个人网站：http://saoke.fun