JS常见问题总结二

console.log(100)
setTimeout(function(){
     console.log(200)
})
console.log(300)

console.log(1)
setTimeout(function(){
    console.log(2)
},0)
console.log(3)
setTimeout(function(){
    console.log(4)
},1000)
console.log(5)

打印顺序：1，3，5，2，一秒钟之后打印4

var arr = [‘a‘,‘b‘,‘c‘,‘d‘]
arr.forEach(function(item,index){
    console.log(index,item)
})

var arr = [1.2.3.4]
var result = arr.every(function(item,index){
    if (item<5) {
        return true
    }
})
console.log(result)

var arr = [1.2.3.4]
var result = arr.some(function(item,index){
    if (item<3) {
        return true
    }
})
console.log(result)

var arr = [1.2.3.4]
var arr2 = arr.sort(function(a,b){
    //从小到大排序
    return a-b

    //从大到小排序
    return b-a
})
console.log(arr2)

var arr = [1,2,3,4]
var arr2 = arr.map(function(item,index){
    return ‘<b>‘+item+‘<b>‘
})
console.log(arr2)

var arr = [1,2,3,4]
var arr2 = arr.filter(function(item,index){
if (item<3) {
return true
}
})
console.log(arr2)

function formatDate(dt){
    if (!dt) {
        dt = new Date()
    }
    var year = dt.getFullYear()
    var month = dt.getMonth()+1
    var date = dt.getDate()
    if (month < 10) {
        //强制类型转换
        month = ‘0‘+month
    }
    if (date < 10) {
        date= ‘0‘+date
    }
    return year + ‘-‘+month + ‘-‘+date
}
var dt = new Date()
var formatDate = formatDate(dt)
console.log(formatDate)

var random = Math.random()
var random = random + ‘0000000000‘
//后面加上10个0
var random = random.slice(0,10)
console.log(random)

function forEach(obj,fn){
    var key
    if (obj instanceof Array) {
        obj.forEach(function(item,index){
            fn(index,item)
        })
    }else {
        //不是数组就是对象
        for(key in obj){
            fn(key,obj[key])
        }
    }
}
var arr = [1,2,3]
//参数顺序换了，为了和对象的遍历格式一致
forEach(arr,function(item,index){
    console.log(index,item)
})
var obj = {x:100 , y:200}
forEach(obj,function(key,value){
    console.log(key,value)
})

var div1=document.getElementById(‘div1‘)
//添加新节点
var p1 - document.createElement(‘p‘)
p1.innerHTML=‘this is p1‘
//添加新创建的元素
div1.appendChild(p1)
//移动已有节点
var p2 = document.getElementById(‘p2‘)
div1.appendChild(p2)

//获取父元素和子元素
var div1 = document.getElementById(‘div1‘)
var parent = div1.parentElement
var child = div1.childNodes
div1.removeChild(child[0])

//获取DOM节点
var div1= document.getElementById(‘div1‘)//元素
var divList = document.getElementsByTagName(‘div‘)//集合
console.log(divList.length)
console.log(divList[0])

var containerList = document.getElementByClassName(‘.container‘)
var pList = document.querySelectorAll(‘p‘) 

//property
var div1 = document.getElementById(‘div1‘)
console.log(div1.className)
div1.className=‘abc‘
console.log(div1.className)

//attr
var p1 = document.getElementById(‘p1‘)
console.log(p1.getAttribute(‘data-name‘))
p1.setAttribute(‘data-name‘,‘xyz‘)

//检测浏览器类型，以chrome为例
//navigator
var ua=navigator.userAgent
var isChrome = ua.indexOf(‘Chrome‘)
console.log(isChrome)

//screen
console.log(screen.width)
console.log(screen.height)

//location
console.log(location.href)
console.log(location.protocol)
console.log(location.host)
console.log(location.ashpathname)
console.log(location.search)
console.log(location.h)

//history
history.back()
history.forward()

var rhr = new XMLHttpRequest()
xhr.open("GET","/api",false)
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4) {
        if (xhr.state === 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

function bindEvent(elem,type,selector,fn){
    if (fn==null) {
        fn=selector
        selector=null
    }
    elem.addEventListener(type,function(e){
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target,e)
            }
        }else{
            fn(e)
        }
    })
}

//使用代理
var div1 = document.getElementById(‘div1‘)
bindEvent(div1,‘click‘,‘a‘,function(e){
    console.log(this.innerHTML)
})

//不使用代理
var a = document.getElementById(‘div1‘)
bindEvent(div1,‘click‘,function(e){
    console.log(a.innerHTML)
})

window.addEventListener(‘load‘,function(){
    //页面得全部加载完成才会执行，包括图片、视频等
})
document.addEventListener(‘DOMContentLoaded‘,function(){
    //DOM渲染完即可执行，此时图片、视频可能还没加载完
})