深入理解JavaScript：ES6, DOM操作与Ajax-优快云博客

本文详细探讨了JavaScript中的ES6特性，包括变量声明（var, let, const）、模板字符串、解构赋值等。还介绍了DOM操作，如节点处理、样式修改和事件处理。同时，讲解了Ajax的基础知识以及BOM中的浏览器对象、路由和缓存。最后，强调了let和const的块级作用域和变量提升的概念，建议开发者避免使用var。" 108494164,10012261,实时正则表达式实现：中文到拉丁文转换,"['正则表达式', 'java', 'python']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6

变量
var，let，const(常量) 作用域，变量提升，暂时性死区，重复声明，声明变量
模板字符串
解构赋值
数组和对象的扩展
扩展运算符
数组：from
对象：assign
class
继承：原型继承 -> 借用构造函数继承 -> 组合继承 -> 原型式继承 -> class(extends super)
原型实例，私有属性静态 static
箭头函数
this，constructor，arguments
promise
pending，fulfilled，rejected
then，catch，allsettled，all，race，finally unhandlerrejection，rejectionhanled
async，await
ajax，eventloop
proxy
get(target,prop,receiver)，set(target,prop,value,receiver)
module
esm,cjs,iife,amd/cmd
export default / export
as

DOM

节点
元素，文本，注释，文档对象，文档碎片(documentFragmengt)
元素节点
crud (Create,REtrieve,Update,Delete)
appendChild
id，class，tagName，name，表达式
replaceChild,insertBefore
removeChild,remove
修改样式 / 文本处理
style / className
innerHTML，innerText，value，
事件处理
句柄绑定方式 / addEventListener / attchEvent
鼠标 / 减盘 / 音视频 / 系统
e.stopProPagation / e.preventDefault
事件传播
冒泡 / 捕获
事件源对象： e.target，e.path
事件委托

BOM

浏览器
navigator
路由
location / history
屏幕
screen
缓存
localStorge / sessionStorge / cookie
打开网站
open

Ajax

function request({type, url, params, success, error}) {
        let xmlhttp = new XMLHttpRequest()
        // 请求阶段
        if (type === 'GET') {
            xmlhttp.open(type, url + "?" + qs.stringify(params), true)
            xmlhttp.send()
        } else {
            xmlhttp.open(type, url, true)
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xmlhttp.send(qs.stringify(params))
        }
        // 响应阶段
        xmlhttp.onreadystatechange = (e) => {
            // readyState 请求状态  0:请求未初始化 1:连接已建立 2:请求已接受 3:请求处理中 4:请求已完成
            if (xmlhttp.readyState === 4) {
                // status 响应状态  2 成功 3 重定向 4 客户端错误 5 服务端问题
                if ((200 <= xmlhttp.status && xmlhttp.status <= 300) || xmlhttp.status === 304) {
                    success(xmlhttp)
                } else {
                    error(xmlhttp)
                }
            }
        }
    }
    const qs = {
        stringify(obj, res = []) {
            Object.entries(obj || {}).forEach(([key, val]) => res.push(`${encodeURIComponent(key)}=${encodeURIComponent(val)}`))
            return res.join("&");
        }
    }