目录
JavaScript 组成
1. JavaScript 由三部分组成:
1.1 ECMAScript:定义基础语法
1.2 DOM:文档对象模型
1.3 BOM: 浏览器对象模型
ECMAScript
1. ECMAScript
DOM
1. 提供一系列操作DOM 的API
获取元素
1. 通过id 获取:document.getElementById('元素id')
2. 通过标签名称获取:document.getElementsByTagName('标签名称') - 返回值是一个动态的伪数组
3. 通过选择器获取:document.querySelector()/document.querySelectorAll() PC存在兼容性问题(IE 8以上支持)
注册事件及其应用
1. element.onclick = function () {}
className
1. class 在js 中是关键字,不能作为变量名称或属性名称,因此动态js 进行给元素加class类名称的时候得使用className
取消a 标签默认跳转行为
1. aElement.onclick = function () { return false } // aElement 当前获取到的 a 标签元素
innerText & textContent
处理PC浏览器兼容性问题
innerText (旧版本IE , IE9以下支持)
textContent (旧版本火狐支持)
function getInnerText( ele ) {
let result = ''
if (typeof ele.innerText === 'string') result = ele.innerText()
else (typeof ele.innerText === 'undefined') result = ele.textContent()
return result
}
getInnerText( 获取的页面元素 ) // 返回标签的内容
发起原生请求
let that = this
var xhr = new XMLHttpRequest()
xhr.open('get', fileUrl, true) // true - 异步操作
xhr.responseType = "blob"
xhr.onload = function () {
if (this.status === 200) {
let blobData = this.response // 拿到响应的 blob数据
var reader = new FileReader()
reader.onload = function(evt) {
that.textHandle(evt.target.result)
}
reader.readAsText(blobData)
}
}
xhr.send()
实现多个数组取交集
/**
* 多个数组取交集,数组数量至少2个
* isExitIntersect - 是否存在交集
* resultArr - 处理好的交集组成的一维数组
*/
export function toIntersect() {
let tempArr = [], isExitIntersect = true, resultArr = []
tempArr.map.call(arguments, arr => {
tempArr.push(arr)
})
if (tempArr.length < 2) {
isExitIntersect = false
console.error(`函数toIntersect的方法是实现取交集,入参:${ JSON.stringify(tempArr) }的长度不符合要求,数组长度至少为2`)
} else {
/**
* 判断传入的入参是否都是数组,且不为空数组,否则交集结果为[], 是否存在交集为 false
*/
tempArr.map(arr => {
if (!Array.isArray(arr) || !arr.length) isExitIntersect = false
})
}
if (isExitIntersect) {
// 进行取交集操作
console.log(`目标数组:`, JSON.stringify(tempArr), tempArr);
let length = tempArr.length, arr = [], isAllowAdd = true
for (let i = 0; i < length - 1; i++) {
for (let j = i + 1; j < length; j++) {
arr = tempArr[i].filter( a => { return tempArr[j].includes(a) })
if ( arr.length ) {
// 返回二个数组之前的交集,存入resultArr
if (resultArr.length) {
resultArr.map(subItem => {
if (JSON.stringify(subItem) === JSON.stringify(arr)) isAllowAdd = false
})
if (isAllowAdd) resultArr.push( arr )
} else resultArr.push( arr )
}
}
}
console.log(`取交集结果:${ resultArr.length >= 2 ? JSON.stringify(resultArr) : JSON.stringify(resultArr.length ? resultArr[0] : []) }, ${ resultArr.length >= 2 ? `需要继续从结果中筛选` : `处理结束,此交集就是最终结果` }`);
if ( resultArr.length >= 2 ) resultArr = toIntersect( ...resultArr ).resultArr
else resultArr = resultArr.length ? resultArr[0] : []
if (!resultArr.length) isExitIntersect = false
}
return {
isExitIntersect,
resultArr,
}
}
Array.from的使用
···
Array.from(需要转换成数组的类数组或迭代对象, 需要执行的回调函数, this指向的当前对象)
像dom 里面的元素集合就是一个类数组(结构类似数组)、箭头函数里面隐含参数arguments等等
export function getDeduplicationArr(arr) {
// 数组去重
return Array.from(new Set(arr))
}
···
!! 的使用
···
!!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false;
···