第11天-2026-7-30-cnblog

今天学习了两个模块：

解构赋值；
字符串常用API；

早上睡得太香了，闹钟没听到响，差点迟到，今天早上雨下的太大了，加上肚子痛，中途下来上厕所，差点就迟到。

我要反思自己，上班竟然连打卡都不注意。入职指南一定要好好看。

下午去办了银行卡，差不多一个半小时，下午回来的时候，和罗师兄聊了一下，越好明天中午11点40叫我在门口等他们一起去吃饭。

解构赋值

实际上就是模式匹配，对于数组的解构，主要是依据位置来进行模式匹配，同时也会出现不完全匹配的现象；而对于对象解构，是会按照属性名:变量名的形式进行匹配，最终可以用的是变量名，内容也在其中，如果只是一个单属性名，那么其实是属性名和变量名相同了。

解构赋值允许有默认值，同时在解构时，undefined不会覆盖原值，但是null会。同时如果等号右边是基本数据类形，js引擎会将其转化成其对应的包装类型，然后undefined和null不具有包装数据类型，因此等号右边不能使用。

惰性求值，对于Generator函数，原生实现了Iterator接口，可以拿到其实例对象迭代器，配合yield暂停，向外产出变量值，可以实现按需取值，比如斐波拉契数列，我们可以拿到const iterator=fib();，之后只需要每次需要时使用iterator.next().value，就可以不断获取斐波拉契数列的每一项了，他不会一开始就无穷计算所有项。

同时将函数当作默认值赋值给变量时，也会有惰性求值，只有当变量不能不赋值时，才使用函数赋值。

字符串常用API

对于常用的我们不去谈了，这里最主要说一个，我觉得非常叼的，因为以前不知道。

但是首先将一个模板字符串吧，需要使用一对反引号来声明，比如：

const name = "lizhe";
cosnt op = `Hello ${name}.`;

这个可以支持转义字符以及插值表达式。

也就是说我们要写一些特殊字符时，不需要写很多\\来进行一个转义，直接可以在这里面写，这个和Python的'''还挺像的，使用三个单引号，同时它也可以支持插值表达式，使用格式为${variableName}。

之后就是标签模板了，最开始看这个，给我看晕了，没看懂到第在讲什么，其实质仍然是函数表达式，比如：

function tag(){
    
}
const name = 'lizhe';
tag`Hello ${name},how old are you?`;

//等价于

tag(linears,...values);

这里linears是由插值表达式分割的静态文本组成的数组，在这里它的内容为["Hello " , ",how old are you?"]，values的值为"lizhe"。

我们可以使用一个函数来进行拼接：

function tag(linears,...values){
    let result;
   	result+=linears[0];
    for(let i=1;i<linears.length;i++){
        result+=values[i]+linears[i];
    }
    return result;
}

或者下面这种写法：

function tag(){
    let result;
    let[linears,values]=argments;//arguments=[linears,values]
    
}

这样就可以将静态文本和插值表达式分开，而这样的好处就是可以对插值表达式进行处理，同时保留静态文本。

插值表达式一般都是用户输入，可能会有恶意攻击代码，所以我们单独将插值表达式进行转义，让浏览器无法将其解析为dom元素，只是纯文本，最后转义会本身内容。

下面一个demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板标签，防止恶意代码</title>
</head>

<body>
    <script>
        function escapeHTML(str) {
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function safeHtml(literals, ...values) {
            let res = "";
            for (let i = 0; i < literals.length; i++) {
                res += literals[i];
                if (values[i]) {
                    res += escapeHTML(values[i]);
                }
            }
            return res;
        }

        // const evilText = '<img src=x onerror="alert(\'xss\')">';
        const evilText = `<img src=x onerror="alert(\'xss\')">`;
        const template = safeHtml`<p>评论：${evilText}</p>`;
        console.log(template);
        document.body.innerHTML = template;
    </script>
</body>

</html>

最后不会出现弹窗xss，说明浏览器将其作为了纯文本要展示的内容。

Vue/React 插值 {{ msg }} 默认就是这套转义逻辑防止 XSS。

介绍一下XSS：

XSS 全称：Cross-Site Scripting，跨站脚本攻击

因为 CSS 已经占了缩写，所以取名 XSS。

盗取用户 Cookie（最经典），冒充账号登录
伪造页面、诱导输入账号密码
篡改网页内容
调用前端接口，以当前用户身份发起操作

第一点确实常见，写过后端登录的朋友肯定知道，如果使用cookie保存SessionId的话，那么盗取cookie之后，就可以伪造登录请求，把cookie换成盗取用户的，这样在进行认证的时候，后端就会通过认证，实现冒充登录。

第二个也是很常见的，经常可以听到什么说钓鱼执法这种，就是点击之后会伪造一个页面，输入个人信息之后就会发送到远端。

今天感觉还是学到挺多东西的，但是我有一个感觉，就是这个还是偏理论，实践感觉有点少，等再学一些吧，把es6学了，就去学vue2，同时使用公司的组件库，做一些好看的页面，实现一些功能。

哦对了，今天超哥叫我配置了一下环境，明天需要具体问一下公司的环境，记住一定要加版本，不然相当于白问，明天问一下jdk、maven和springboot的版本，今天下了一个数据库管理工具，DBeaver，可以连接很多种数据库，而且还是免费的，我感觉还行。

posted @ 2026-07-30 21:47 alij 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

alij

第11天-2026-7-30-cnblog

公告