JavaScript相关内容

定义变量let 变量名 值 var const对比项varletconst作用域函数级块级块级变量提升提升且为 undefined提升但 TDZ 死区同 let重复声明允许不允许不允许重新赋值可以可以不可以声明时赋值可先声明可先声明必须赋值数据类型number 数字类型 string 字符串类型 boolean 布尔类型 undefined 变量声明未初始化 null 空对象 object 复合类型输入方式prompt(请输入 )输出方式console.log(123) // 控制台 alert(提示) // 弹窗 document.write(内容) // 写入页面查看数据类型typeof() instanceof()Object.prototype.toString.call([]) // [object Array] typeof 123 // number typeof abc // string typeof undefined // undefined typeof null // object历史bug typeof [] // object [] instanceof Array // true比较运算符 等于 全等 !不等于 大于 小于 大于等于 小于等于逻辑运算符: 字符串拼接“”条件if (条件){执行语句} if……else if……else if……else…… switchif (条件) { } else if (条件) { } else { }switch (a) { case 1: break case 2: break default: }循环for let while (条件) do ……while(条件)for (let i 0; i 10; i) { }for in 遍历对象key for of 遍历数组valuefor (let key in obj) {}for (let val of arr) {}函数函数定义函数声明function 函数名{} 箭头函数: let 函数名 {} 函数表达式const 函数名 function(){}箭头函数特点没有自己的this没有arguments不能当构造函数不能使用yieldfunction fn() {} const fn () {} const fn function() {}参数//普通参数 function sum(a, b) { return a b } //默认参数 function fn(a 1, b 2) {} //剩余参数 function fn(...args) { console.log(args) // 数组 } //类数组存储实参 function fn() { console.log(arguments) }调用函数let a fn(); console.log(a);对象创建对象方式 const 对象名 new Object(); const 对象名 {};const obj {name:value} const obj new Object()访问obj.name; obj[name];遍历for (let key in obj) {} Object.keys(obj) Object.values(obj) Object.entries(obj)数组创建空数组:let 数组名 [] let 数组名 new Array()const arr [1,2,3] const arr new Array()多维数组let 数组名 [[ ],[ ],[ ]];数组操作方法增push() // 尾部加 unshift() // 头部加 splice(i,0,val)// 中间插 在i插入val删pop() // 删尾 shift() // 删头 splice(i,n) // 删任意 从索引i开始删除n个元素 slice(begin,end)// 截取不影响原数组改splice(i,n,val……) //从i开始删除n个元素然后插入val查forEach() map() // 返回新数组 reduce() // 累计 some() // 一个满足 every() // 全部满足其他sort() // 排序 reverse() // 反转 join() // 转字符串 concat() // 合并 copywithin() // 批量复制 按照指定范围复制数组中部分内容 // 后将其插入指定索引开始位置 fill(val,i) // 填充数组 从i开始填充val事件onclick // 点击元素 onchange // HTML元素改变 onmouseover //鼠标指针移动到指定的元素上时发生 onmouseout //用户从HTML元素上移开鼠标时发生 onkeydown //按下键盘 onload //浏览器完成页面加载 button onclick/button错误try { ... //异常的抛出 } catch(e) { ... //捕捉到 try 块中的错误并执行代码来处理 } finally { ... //不论之前的 try 和 catch 是否产生异常都会执行该代码块 }表单form namemyForm methodpost 名字: input typetext namemyname input typesubmit value提交 /formfunction validateForm() { var yanz document.forms[myForm][myname].value; if (yanz null || x yanz ) { alert(名字不能为空); return false; } }面向对象class Person { constructor(name) { this.name name } say() { console.log(this.name) } static run() { console.log(static) } } class Student extends Person { constructor() { super() } }MathMath.random() Math.floor() Math.ceil() Math.round() Math.max() Math.min()Dateconst d new Date() d.getFullYear() d.getMonth() d.getDate() d.getHours() d.getMinutes() d.getSeconds()StringindexOf() split() substr() substring() replace() trim() toUpperCase() toLowerCase()回调函数setTimeout(() { // 回调 }, 1000)Promisenew Promise((resolve, reject) { setTimeout(() { resolve(ok) }) }) .then(res {}) //指定Promise状态变为fulfilled或rejected时的回调函数 .catch(err {}) //处理Promise被拒绝的情况 .finally(() {}) // 无论Promise最终状态如何都会执行静态方法Promise.all() // 等待所有Promise完成或任意一个失败 Promise.race() //返回最先完成的结果无论是成功还是失败async/await await只能在async函数内部使用await会暂停async函数的执行等待Promise完成async function fn() { const res await request() }DOM获取元素document.getElementById(id) document.querySelector(.类选择器) document.querySelectorAll(标签选择器)获取改变标签的内容或属性操作内容innerHTML // 获取修改元素内文字包含标签和样式 innerText // 获取或者修改元素内文字不包括标签和样式 textContent //操作属性className // 给标签添加属性 elem.src elem.href elem.setAttribute elem.getAttribute操作样式elem.style.color elem.classList.add() elem.classList.remove() elem.classList.toggle()操作节点document.createElement appendChild removeChild insertBefore事件const btn document.getElementById(btn); btn.onclick function () { alert(hi!); } // 1 btn.addEventListener(click,function (){ if () { } else { } }) // 2 btn.addEventListener(click, () { alert(hi); }) // 3定时器//创建定时器 setTimeout(() { }, 1000) //调用一次 setInterval(() { }, 1000) //重复调用 clearTimeout() //销毁定时器 const timed setTimeout(要执行的函数名,时间间隔,参数) clearTimeouttimed