Javascript常用API备忘录

API备忘录

Bom常见API

• 获取浏览器信息

var ua = navigator.userAgent
if (ua.indexOf('Chrome')){

    console.log("这是一个chrome浏览器!");
}

• 获取屏幕宽度和高度

screen.width
screen.height

• url拆解

// 获取当前页面网址(也可以通过赋值进行跳转)
location.href

// 获取协议
location.protocol
// 获取路径(不包含域名)
location.pathname
// 获取get信息
location.search
// 获取锚点信息
location.hash

• 根据浏览器历史,前进或后退

// 浏览器前进一个页面
history.forward()
// 浏览器后退一个页面
history.back()

Dom操作

• 获取节点

document.getElementById("test3"); // 单个
var pList = document.getElementsByTagName("p") // 集合
// 获取父元素
var parentNode = a1.parentElement;
console.log(parentNode);
// 获取子元素
var childs = parentNode.childNodes;
console.log(childs);

• 创建并添加节点

var a1 = document.createElement('a');
a1.innerHTML = "Youtebe";
a1.style.fontSize = '100px';
a1.style.color = "#c03035";
a1.href = "https://www.youtube.com/"
document.getElementsByTagName('body')[0].appendChild(a1)

• 删除节点

// 删除子元素节点
parentNode.removeChild(childs[0])

更改节点属性

// prototype/property(针对javascript对象的属性)
// 获取样式
pList[0].style.width
// 修改样式
pList[0].style.width = '100px'
// 获取className
pList[0].className
// 修改className
pList[0].className = 'colorP'

// Attribute(针对dom节点的属性)
var p = pList[1]
p.getAttribute('style')
p.setAttribute('style', 'font-size: 50px')

Attribute 和 prototype的区别:

• Attribute针对的主体是dom对象
• prototype针对的是javascript对象

关于时间

• 获取年/月/日/时/分/秒

// 当前时间 Fri Mar 02 2018 12:30:35 GMT+0800 (CST)
var dt = new Date()

// 获取年份
console.log("当前年份:"+dt.getFullYear());

// 获取月份(0-11)
console.log("当前月份"+ (dt.getMonth()));

// 获取日
console.log("当前日:"+dt.getDate());

// 获取小时
console.log("当前小时:"+dt.getHours());
 
// 获取分钟
console.log("当前分钟:"+dt.getMinutes());
// 获取秒
console.log("当前秒数:"+dt.getSeconds())

题目: 获取2018-03-02格式的字符串

function getNowDate(dt){
    if(!dt){
        dt = new Date();
    }

    var year = dt.getFullYear();
    var month = dt.getMonth();
    var day = dt.getDate();

    // 将月份加1
    month = month + 1;
    // 将月份补齐到两位
    if (month <= 9){
        month = "0" + month;
    }

    // 将日补齐到两位
    if (day <= 9){

        day = "0" + day;
    }

    return year+"-"+month+"-"+day;
}

关于 Math

题目: 获取字符串, 要求是长度一致的字符串(10位)

(Math.random()+"0000000000").slice(2, 12)

---

数组 操作API

• 获取数组长度

var arr = [100, 300, 200, 500, 400]
arr.length

• forEach 对"每一个"元素进行函数运算(无法产生返回值)

arr.forEach(function(item, index){
    console.log("索引:"+index+"值:"+item);
})

• 相当于"与",如果每一个符合条件, 则最终结果为true

arr.every(function(item, index){

    if (item > 300){

        return true
    }

})

• 相当于"或",如果"有一个"符合条件的元素, 则返回true

arr.some(function(item, index){

    if (item > 100){

        return true;
    }

})

• 对"每一个"元素进行函数处理, 会产生新的返回值

arrMap = arr.map(function(item, index){
    return "<b>"+ index + "|" + item + "</b>";
})

• 对"每一个"元素进行过滤, 获取大于200的元素

var arrFilter = arr.filter(function(item, index){
    if (item > 200){
        return true;
    }
})

• 升序排序(会影响原数组)

console.log("sort之前:"+arr);
var sortArr = arr.sort(function(a, b){

    return a-b;
})
console.log("sort之后:"+arr);

对象

• for循环遍历json属性

var obj = {
    name : "jianzhao",
    age : 18,
}


for (key in obj){
    if (obj.hasOwnProperty(key)){

        console.log("键:"+key+"|"+"值:"+obj[key])
    }

}

题目: 写一个能兼容遍历数组和对象的forEach函数

function forEach(oa){

    // 如果传入的为object, 进行遍历
    if (typeof(oa) == "object"){
        // 如果为数组
        if (oa instanceof Array){

            oa.forEach(function(item, index){
                console.log(index, item);
            })
        }
        // 如果为对象
        else{
            for(key in oa){
                console.log(key, oa[key]);
            }
        }
    }
    // 如果不是对象,直接原路返回
    else{
        return oa;
    }
}

forEach({name:"zhaoolee", age: 12})
forEach(["第一", "第二", "第三"])