《前端开发 实践之 JavaScript 的组成》

---

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;
···