DOM(网页文档对象模型)
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点(包括文档、HTML元素、HTML属性、文本等)
当浏览器载入HTML文档，它就成为Document对象
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
document.方法
document代表整个文档的对象
BOM
BOM操作的时候，操作的整个浏览器，浏览器就被封装为一个对象，这个对象叫window
window
window指的是浏览器对象，又被称为顶级对象(浏览器比文档更大)
事件
事件委托
元素是动态创建时
// 功能3:删除数据
let del = document.querySelector('a')
//动态创建a标签，网页刚打开时还没有a标签，此时获取a标签的对象报错
del.addEventListener('click', function () {
tbody.removeChild(del.parentNode)
})
//改写：
tbody.addEventListener('click', function (e) {
let btn = e.target
//事件源判断 代表点击的就是a标签，要大写
if (btn.tagName === 'A')
})
可以采用事件委托，将这个事件委托给a标签的父元素
给后追加的元素添加事件，需要使用事件委托
标签
标签对象
获取标签的自定义属性
<a href="javascript:" data-id="${i}">删除</a>
//获取标签的自定义属性
标签对象.dataset.id(自定义属性名)
获取标签内容
获取textarea内容：textarea对象.value
设置标签属性 setAttribute()
设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
要获取某个属性当前的值，可使用 getAttribute()；要删除某个属性，可使用 removeAttribute()。
input获得焦点
input对象.focus()
Element.querySelecttor()
Element.querySelector()
返回与指定的选择器组匹配的元素的后代的第一个元素。
对象.innerHTML
设置元素的 innerHTML 将会删除所有该元素的后代并以给定值替代
单选框、复选框状态改变常用onchange事件
select选择器的change事件处理函数
select标签的赋值问题
不能简单通过 Select.value=值来给select赋值，select的赋值必须在有列表之后，列表为空时，value值为空
数据结构
Number
isNaN() 函数用来确定一个值是否为 NaN，若有必要，则首先将值转换为数字。由于 isNaN() 函数内部的强制类型转换可能令人迷惑，因此你可能更想要使用 Number.isNaN()。
Math.ceil()
Math.ceil() 静态方法总是向上舍入，并返回大于等于给定数字的最小整数。
String
JavaScript字符串在底层是一个字符串数组，比如hello字符串在底层是[“h”,“e”,“l”,“l”,“o”].
length: 字符串的属性，代表字符串的长度。
字符串可以像数组那样使用下标取值,比如 hello[0]，但是不能设置值。
JS中字符串可以进行>、<、==、===比较
回文字符串
定义：字符串正序读的结果与倒序读的结果一样，例如“上海自来水来自海上”
Symbol
每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。
js中bool值是false
只有 NaN 0 ’ ’ undefined null转成布尔值为flase，其余转成布尔值都为true
Set(集合)
Set类似于数组，但是成员的值都是唯一的，没有重复的值。
也就是说它是一系列无序，没有重复数值的数据集合。
很多时候我们把Set叫做集合,但是，Set可以是集合，集合不一定是Set
参考文章
Set.prototype.has()
Set 实例的 has() 方法返回一个布尔值来指示对应的值是否存在于该集合中。
Set.prototype.size
Set 实例的 size 访问器属性将返回该集合中（唯一的）元素的个数。
作用域
函数的上下文
总结一下JavaScript 中apply、call、bind的使用方法（在调用函数时设置）
对象
获取对象全部的键
访问对象的属性值
按照键名获取对象的键值：对象[键名]
举例：参考
对象.属性
对象[‘属性’] //键有 - 这样的特殊字符，必须用这个语法
对象[变量] //键用一个变量表示的，必须用[ ]语法，并且变量不能加引号
let obj={
uname:'zs',
'user-name':'lisa',
age:20
}
valueOf()
js调用 valueOf 方法来将对象转换成基本类型值
获取对象的键
可以调用Object的静态方法:Object.keys(对象),来获取该对象的全部键,返回的是一个数组
遍历对象
let obj = {
name:"ned",
like:"man"
}
Object.defineProperty(obj, 'age', {
value: "18",
enumerable: false
});
for(item in obj) {
console.log(item)
}
对象数组
对对象数组进行排序
<script type="text/javascript">
let total = [{ chinese: 93, math: 60, english: 10 }, { chinese: 73, math: 50, english: 80 }, { chinese: 13, math: 100, english: 40 }]
const _rank = array => { return array.sort((a, b) => (b.chinese + b.math + b.english) - (a.chinese + a.math + a.english)) }
console.log('排序结果：', _rank(total));
</script>
数组
生成一个定长数组
[...Array(number)].map(x => number)
强制类型转换
String
String(数据)；：可将任何的一种数据类型转换为字符串类型
数组转字符串
字符串转数组
对象和字符串之间的转换
语法
运算符
可选链运算符（?.）
函数
函数声明和函数表达式的区别
参考：参考文章
Jst中try{}catch{}finally的使用
if(a in b)
js中的if(…in…)语句，用来判断一个属性是否属于一个对象
for…in循环
for…of循环
for…of 循环是 JavaScript 中的一种循环结构，它可以用于遍历各种数据结构，例如数组、字符串、Map、Set 等。for…of 循环通常用于替代传统的 for 循环或 forEach 循环，因为它具有更加简洁和易读的语法，能够提高代码的可读性和可维护性。
每次迭代都会创建一个新的变量。在循环体内部重新赋值变量不会影响可迭代对象（在本例中，是一个数组）的原始值。
回显大量数据到form表单的写法
// 回显数据
// 定义一个数组，保存的是我们可以直接渲染的键
const arrKeys = ['name', 'age', 'group', 'hope_salary', 'salary']
arrKeys.forEach(item => {
// 根据属性选择器找到对应的对象
document.querySelector(`[name=${item}]`).value = res.data[item]
})
// 渲染性别,单选框的回显
const genders = document.querySelectorAll('[name="gender"]')
genders[res.data.gender].checked = true
如何给使用闭包的内部函数传值(给返回值为函数的函数传值)
力扣2623
<script>
function memoize(fn) {
const cache = {};
return function () {
// 将参数转换为字符串
console.log('arguments', arguments);
return arguments[0]
}
}
let fn = function () {
}
var b = memoize(fn) //返回一个函数
console.log('return:', b(1, 2, 3)); //b(参数)调用返回的函数
</script>
正则表达式
RegExp
RegExp 对象用于将文本与一个模式匹配。
正则表达式中的符号
首先是^$意思就是按照我们所设定的规则进行匹配
\是转义的意思，因为$在正则里面是以什么什么结尾的意思，所以要先用\把它转成普通含义
*就是可有可无的意思
AJAX
解析url参数
<script>
const _getParams = (url) => {
// 补全代码)
var searchString = url.substring(url.indexOf('?'));
const params = new URLSearchParams(searchString)
console.log('params:', params);
const obj = Object.fromEntries(params)
console.log(obj)
console.log('js1', JSON.stringify(obj));
console.log('js2', JSON.stringify({ id: '1', sales: '1000', tt: '3232' }));
return obj
}
_getParams('https://nowcoder.com/online?id=1&salas=1000&tt=3232')
</script>
拼接URL参数
//创建URLSearchParams对象
const paramsObj=new URLSearchParams({
参数名1：值1，
参数名2：值2
})
//2.生成指定格式查询参数，字符串
const queryString=paramsObj.toString()
//结束： 参数名1=值1&参数名2=值2
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
