数组去重
双FOR循环
for (let i = 0; i < arr.length - 1; i++) {
let item = arr[i]
for (let j = i + 1; j < arr.length; j++){
if(item === arr[j]){
// 用最后一项替代当前项
arr[i] = arr[arr.length - 1]
// 最后一项删掉
arr.length--
// 下一轮还和这一项比
j--
}
}
}
缺点
- 循环次数多,性能不好
对象的键值对
let obj = {}
for (let i = 0; i < arr.length; i++) {
// 把每一次循环得到的当前项,作为对象的属性名和属性值存储进去
let item = arr[i]
if(obj[item] !== undefined){
// 证明对象中有这个属性
arr[i] = arr[arr.length - 1]
arr.length--
i--
continue
}
obj[item] = item
}
优点
- 只有一个循环,所以性能很好
缺点
- 如果数组中出现对象则存在问题(因为对象的属性名不能是对象,遇到会转换为字符串)
- 如果数组中存在数字10和字符串’10’,则也会认为是重复的
- 数组中的值如果是undefined可能也会出现问题
indexOf检测方式
let newAry = []
for (let i = 0; i < arr.length; i++) {
let item = arr[i]
if(newAry.indexOf(item) == -1){
newAry.push(item)
}
}
缺点
- 低版本浏览器不兼容
时间格式化
(proto =>{
function formatTime(template = '{0}年{1}月{2}日 {3}时{4}分{5}秒') {
let arr = this.match(/\d+/g)
return template.replace(/\{(\d+)\}/g, (_, n) => {
let item = arr[n] || '0'
item.length < 2 ? item = '0' + item : null
return item
})
}
proto.formatTime = formatTime
})(String.prototype)
let time = '2020-1-1 11:11:11'
time.formatTime() // 2020年01月01日 11时11分11秒
time.formatTime('{1}-{2} {3}:{4}') // 01-01 11:11
time.formatTime('{0}年{1}月{2}日') // 2020年01月01日
获取DOM标签的方式
document.getElementById
- getElementById方法的上下文只能是document
[context].getElementsByTagName、[context].getElementsByClassName
- 获取的结果是HTMLCollection元素集合(类数组:数字作为索引,length代表长度)
- 想操作某一项需要通过索引获取后再操作
document.getElementsByName
- 操作表单元素,尤其是单选框或者复选框
获取DOM节点的方式
节点类型
类型 | nodeType | nodeName | nodeValue |
---|---|---|---|
文档节点 | 9 | #document | null |
元素节点 | 1 | 大写标签名 | null |
文本节点 | 3 | #text | 文本内容 |
注释节点 | 8 | #comment | 注释内容 |
属性
- [container].childNodes获取到的是一个节点集合,包含容器中所有类型节点
- [container].children获取到的只有元素节点集合
设置DOM元素自定义属性
[元素].xxx = xxx / 元素[xxx] = xxx
获取:[元素].xxx
删除:delete [元素].xxx
原理:操作堆内存
[元素].setAttribute(‘xxx’, xxx)
获取:[元素].getAttribute(‘xxx’)
删除:[元素].removeAttribute(‘xxx’)
原理:操作DOM结构
操作DOM元素样式
- 行内样式:元素.style.xxx
- ie:元素.currentStyle[“height”]
- 非ie:getComputedStyle(元素).height