（JS基础）BOM

window 对象

let str = 'foo';
alert(window.str);   // 'foo'

setTimeout(function(){
  alert('timeout!');
}, 1000);    // 1秒后执行

setInterval(function(){
  console.log('timeout!');
}, 1000);    // 每隔1秒后执行

弹出对话框

alert(<string>);    // 警告框，显示参数字符串
let bool = confirm(<string>);    // 确认框，显示参数字符，能返回一个布尔值
let str = prompt(<string>);    // 输入提示框，显示参数字符串，能返回用户输入的字符串

console 对象

通过 console 对象 内的方法可以向 JavaScript 控制台写入消息。下面介绍几个常用的。

console.log()

就是最常用的一种向控制台打印内容的方法。除了一般用法console.log(value);外，还有另一种使用占位符的用法：

console.log('I like %s but I do not like %s.', 'Skittles', 'pus');
// I like Skittles but I do not like pus.

常见的占位符号：%o (字母o)表示接受对象，%s表示接受字符串，%d表示接受数值。

类似的打印信息还有console.info();、console.warn();、console.error();，都是向控制台打印信息，只是显示的效果不一样，而且各浏览器可能会有差别。效果如下图：

console.dir()

用法和console.log()一致，打印的内容也很相似，打印的内容类似文件树样式的交互列表，常用于对象。就我个人已知的，两者差别在于打印 HTML 元素，console.log()打印元素的 HTML 文档，console.dir()打印的是该元素对象的属性及方法，如下图。

console.table()

打印出表格形式，常用于打印包含多个对象的数组。如arr=[{a:1,b:2,c:3},...]。效果如下图：

还可以传入第二个参数，用于控制展示的字段，如console.table(arr, ["a", "b"]);就只显示上图的a和b两列。

注意，console.table()只能处理最多1000行，因此它可能不适合所有数据集。

console.count()

打印计数器，用于统计该行命令执行的次数。传入的参数只有一个，就是计数器的名称，如console.count('myCount');。效果如下图：

还有，可以通过console.countReset('myCount');重置计数器。

console.assert()

对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

console.assert(true, 1);    // 不会打印
console.assert(false, 1);   // Assertion failed: 1

console.trace()

向控制台输出一个堆栈跟踪。效果如下：

console.time()

打印计时器。必须配合console.timeEnd();使用。用于计算函数执行耗时。都接受一个参数，就是计时器的名称。示例如下：

function fn() {
  console.time('myTimer');
  for (let i = 0; i < 1000; i++) { }
  console.timeEnd('myTimer');
}
fn();   // myTimer: 1ms

console.group()

将打印内容分组显示。必须配合console.groupEnd()使用。在控制台上创建一个新的分组，随后输出到控制台上的内容都会被添加一个缩进，表示该内容属于当前分组，直到调用console.groupEnd()之后，当前分组结束。分组内可以包含另外的分组。传入唯一参数，就是分组的名称。示例如下：

console.clear()

这个没什么好说的，就是清除控制台的所有打印内容。

location 对象

location 对象 提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。简言之跟URL有关。它既是 window 对象的属性，也是 document 对象的属性。

属性

• hash：哈希模式下，"#"后面的字符串，无则返回空字符串。
• host：服务器名称及端口号(如果有)，如 "www.foo.com:80"。
• hostname：服务器名称，如 "www.foo.com"。
• href：完整 URL。
• pathname：路径名，如 "/path"。
  
• port：端口号。
• protocol：协议，如 "https:"。
• search：查询字符串，如 "?user=admin"。
  

方法：

• assign(<url>)：打开该URL并生成一条浏览器历史纪录，如location.assign('https://www.baidu.com');。

• replace(<url>)：同样是打开新URL，与 "assign" 不同的是，会替换当前浏览器记录。
• reload()：无参数，重新加载本页面。

history 对象

history 对象 是 widow 对象的属性之一，用于保存用户的上网记录，从窗口被打开的一刻算起。

属性

• length：获取历史记录的条数。

• go(<number|string>)：传入正整数时，表示前进 n 条记录；负数则后退；传入字符串时，表示跳转到最近一条包含该字符串的历史纪录；无效信息则什么都不发生。
• back()：无参数，后退一条记录。
• forward()：无参数，前进一条记录。
  

"无刷新"路由的方法：

• pushState(<data>, <title>, <url>)：<data>用于触发popstate事件时的数据，可以时任意类型；<title>表示该路由的标题，一般路由器都将其忽略；<url>只能使用同源的，可以使用相对路径。该方法会在 history.state 添加一条记录，但不会刷新页面，只改变路由地址，使用history.go(-1)能返回上一个路由，并清除history.state的相应记录，这方法是 vue 框架的路由实现的原理。
• replaceState(<data>, <title>, <url>)：与pushState()类似，有同样的参数，同样在history.state添加一条记录，不同的是会将当前路由替换，导致history.go(-1)不能返回当前路由。
  

上面两个方法还涉及一个事件：当活动历史记录条目更改时，将触发popstate事件。在 window 对象上可以添加该事件，即window.addEventListener('popstate', <cb>);，其中，事件对象event中的state属性正是pushState或repalceState方法传入的第一个参数。

顺便一说

当history.state内有值，history.go(-1)不会刷新页面，只改变路由地址；否则会刷新页面并跳转。

navigation 对象

navigation 对象 同样属于 window 的属性。通常用于检测浏览器的特性。

常用属性

• geolocation：返回一个Geolocation对象，通过这个对象可以访问设备的位置信息，如navigator.geolocation.getCurrentPosition(e=>{console.log(e)});。
• connection：实验性API，到目前只有 chrome 浏览器实现。只读，返回一个包含设备的网络连接信息的对象。
• cookieEnable：布尔值，浏览器不支持或者用户禁用了cookie，都会返回false。
• onLine：布尔值，浏览器是否联网。

常用方法