2020.7.4 Javascript红宝书学习

154 阅读3分钟

BOM

BOM:浏览器对象模型

BOM的核心对象是window,window为全局对象

//在全局作用域下定义的变量与函数,在window下均可以访问
var age = 17;
function sayAge(){
    console.log(this.age);
}
console.log(window.age);
sayAge();
window.sayAge();

delete不可以删除全局变量,但可以删除定义在window上的属性

var age = 20;
window.name = 'wang';
delete window.age;//IE<9抛出错误,其他浏览器返回false
delete window.name; //IE<9抛出错误,其他浏览器返回true
console.log(age);//20
console.log(window.name);//undefined

因为var定义的变量值有一个属性configurable,它的值为false,意为delete操作不可以删除。

将一个未定义的值赋值给另外一个变量,输出这个变量会抛出错误

var newValue = value;
console.log(newValue);//value not defined

但是将value设置为window下,则newValue的值为undefined

var newValue = window.value;
console.log(newValue);//undefined

window.value相当于查询window下是否存在value这个属性,不会抛出错误

setTimeout()与setInterval()

setTimeout()函数为每个一个时间段就执行一次,传递两个参数,第一个参数为定时执行方法,第二个参数为执行间隔时间,返回值为数值ID,是计划执行代码的唯一标识

//隔1s仅调用一次
var time = setTimeout(function(){
    console.log('123');
},1000);
//取消超时调用
clearTimeout(time);

setInterval()与setTimeout()参数相同,它为间隔调用,每隔一段时间调用一次

//每个1s调用一次
var time = setInterval(function(){
    console.log('123');
},1000);
clearInterval(time);

setInterval例:

var num = 0;
var max = 10;
var intervalId = null;
function increamentNumber(){
    num++;
    if(num == max){
        clearInterval(intervalId);
        console.log("Done");
    }
}
intervalId = setInterval(increamentNumber,500);

setTimeout例:

var num = 0;
var max = 10;
var timeoutId = null;
function increamentNumber(){
    num++;
    console.log(num);
    if(num<max){
        setTimeout(increamentNumber,500);
    }else{
        clearTimeout(timeoutId);
        console.log("Done");
    }
}
timeoutId = setTimeout(increamentNumber,500);

在使用间歇调用时,最后一次间歇调用可能在前一次间歇调用(setInterval())结束之前启动,所以最好不用间歇调用

location对象

location对象用途为提供了与当前窗口中加载的文档有关的信息,还可以将url解析为独立片段。

下面给出location对象的所有属性

属性名 例子 说明
hash "#contents" 返回URL的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串
host "www.xxx.com:8080" 返回服务器名称和端口号(若存在)
href "www.xxx.com" 返回不带端口号的服务器名称
pathname "/xx/" 返回URL的目录和(或)文件名
port "8080" 返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串
protocal “http:” 返回页面使用的协议。通常时http:或https
search "?val=xxx" 返回URL的查询字符串。这个字符串以问号开头

查询字符串参数

function getQueryStringArgs(){
    //去除字符串首个(问号)?
    var qs = (location.search.length>0?location.search.substring(1):"");
    args = {},
        //以&分割为多个数组
        items = qs.length?qs.split("&"):[],item = 0,name = null,value = null;
    //循环数组,用等号分割
    for(var i=0;i<items.length;i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;
}
var args = getQueryStringArgs();
console.log(args);//例?q=1&p=2 结果:{q: "1", p: "2"}