JavaScript基础精简版3（Number,String,Boolean,Array,JSON,Date,Math,正则，BOM）

本篇文章记录一下标准库的常用对象的API。

包装对象Number、String、Boolean

valueOf()返回包装对象实例的原始值。

new Number(123).valueOf()  // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true

toString()方法返回对应的字符串形式。

new Number(123).toString() // "123"
new String('abc').toString() // "abc"
new Boolean(true).toString() // "true"

Boolean

if (Boolean(false)) {
  console.log('true');
} // 无输出
if (new Boolean(false)) {
  console.log('true');
} // true
if (new Boolean(false).valueOf()) {
  console.log('true');
} // 无输出

Number

Number对象拥有以下一些静态属性.

Number.POSITIVE_INFINITY // 正的无限 Infinity
Number.NEGATIVE_INFINITY // -Infinity
Number.NaN // NaN

Number.MAX_VALUE  // 1.7976931348623157e+308
Number.MAX_VALUE < Infinity // true

Number.MIN_VALUE // 表示最小的正数 5e-324
Number.MIN_VALUE > 0 // true
Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

Number实例方法

(10).toString() // "10"
10.005.toFixed(2) // 先转为指定位数的小数，然后返回字符串。 "10.01"
(10).toExponential(2) // 科学计数法形式 "1.00e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(2) // "12" 将一个数转为指定位数的有效数字。
(123).toLocaleString('zh-Hans-CN-u-nu-hanidec') // "一二三"  当地书写形式

String

String.fromCharCode(104, 101, 108, 108, 111)
// "hello"

实例属性 String.prototype.length

实例方法

• charAt方法返回指定位置的字符，参数是从0开始编号的位置。

var s = new String('abc');
'abc'.charAt(1) // "b"
'abc'[1] // "b"

• charCodeAt()方法返回字符串指定位置的 Unicode 码点。
• concat``连接两个字符串，返回新串，不改变原字符串。
• slice substr从原字符串取出子串并返回，不改变原字符串闭闭【】。
• substring取出子串并返回，不改变原字符串 闭开【）.
• indexOf lastIndexOf出现的位置。
• trim用于去除字符串两端的空格并，不改变原字符串。
• toLowerCase全部转为小写，toUpperCase全部转为大写。并且返回，不改变原字符串。
• match确定原字符串是否匹配某个子字符串，返回数组，成员为匹配的第一个字符串，还有index属性和input属性，分别表示匹配字符串开始的位置和原始字符串。（可传正则）
• search方法的用法基本等同于match，但是返回值为匹配的第一个位置index。（可传正则）
• replace用于替换匹配的子字符串（可传正则）。
• split按照规则分割串，返回数组。
• localeCompare用于比较两个字符串。返回-1,0,1。

Array

Array()作为构造函数，行为很不一致。因此字面量是更好的做法。

// bad
var arr = new Array(1, 2);

// good 
var arr = [1, 2];

Array.isArray参数是否为数组。

实例方法

• valueOf

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

• toString

var arr = [1, 2, 3];
arr.toString() // "1,2,3"

var arr = [1, 2, 3, [4, 5, 6]];
arr.toString() // "1,2,3,4,5,6"

• push用于在数组的末端添加一个或多个元素.
• pop用于删除数组的最后一个元素，并返回该元素。会改变原数组。
• shift()用于删除数组的第一个元素，并返回该元素。会改变原数组。结合while可以遍历并清空一个数组。
• unshift()在第一个位置添加元素,接受多个参数,返回添加后的数组长度。会改变原数组。
• join()以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。默认用逗号分隔。
• concat方法用于多个数组的合并。返回一个新数组，原数组不变。拷贝的是对象的引用，改变原对象以后，新数组跟着改变。
• reverse用于翻转数组，该方法将改变原数组。
• slice(start, _ end)方法用于提取目标数组的一部分，原数组不变。
• arr.splice(start, count, addElement1, addElement2, ...)用于删除一部分，并可以在删除的位置添加新成员，返回被删除的元素。注意，该方法会改变原数组。
• sort用于排序，原数组将被改变。
• map()将数组的所有成员依次遍历，然后把每一次的执行结果组成一个新数组返回。
• forEach()遍历数组。
• filter()用于过滤数组成员，满足条件的成员组成一个新数组返回。
• some方法返回一个布尔值，只要一个成员的返回值是true就可以。

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true

• every方法返回一个布尔值，是所有成员的返回值都是true才可以。
• reduce()方法和reduceRight()方法依次处理数组的每个成员，最终累计为一个值。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15
第一次执行：`a`是数组的第一个成员`1`，`b`是数组的第二个成员`2`。
第二次执行：`a`为上一轮的返回值`3`，`b`为第三个成员`3`。
第三次执行：`a`为上一轮的返回值`6`，`b`为第四个成员`4`。
第四次执行：`a`为上一轮返回值`10`，`b`为第五个成员`5`。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值`15`。

[1, 2, 3, 4, 5].reduce(function (
  a,   // 累积变量，必须
  b,   // 当前变量，必须
  i,   // 当前位置，可选
  arr  // 原数组，可选
) {
  // ... ...

• indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。
• lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。
• 以上返回数组的方法可以链式调用。

JSON

静态方法

JSON.stringify()方法用于将一个值转为 JSON 字符串。会忽略对象的不可遍历的属性。

var obj = {  
  'prop1': 'value1',
  'prop2': 'value2',
  'prop3': 'value3'
};

var selectedProperties = ['prop1', 'prop2'];

JSON.stringify(obj, selectedProperties) //第二个参数，指定属性转成字符串。
// "{"prop1":"value1","prop2":"value2"}"

JSON.stringify({ p1: 1, p2: 2 }, null, '\t') //第三个参数，增加可读性。

JSON.stringify()参数对象有toJSON()方法，就直接使用。

JSON.parse()将 JSON 字符串转换成对应的值。可以放在try catch中。

BOM

网页中嵌入 JavaScript 代码:

• <script>元素直接嵌入代码。
• <script>标签加载外部脚本
• 事件属性
• URL 协议

<a href="javascript: new Date().toLocaleTimeString();void 0;">点击</a>

浏览器一边下载 HTML 网页，一边开始解析。遇到script就(下载)将控制权交给JS引擎。为避免“阻塞效应”最好将脚本都写在在下方或者本地。或者直接用 defer 属性让脚本延迟执行(不影响下载)。或者用 async 开启另一个线程下载。
浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。
google浏览器渲染引擎内核是webkit（渲染页面）（自家有开发了Blink）， V8引擎是解析和执行脚本的。

window

window.name 主要配合超链接和表单的target属性使用
window.closed窗口是否关闭。
window.opener打开当前窗口的父窗口。
window.self和window.window属性都指向窗口本身。
window.frames页面内所有框架窗口
window.length当前网页包含的框架总数。
window.frameElement当前窗口嵌在另一个网页的情况
window.top属性指向最顶层窗口 window.parent属性指向父窗口
window.devicePixelRatio一个 CSS 像素物理像素的比率。
位置信息和大小信息：
screenX innerHeight outerHeight scrollX pageXOffset

组件对象 都有.visible

• window.locationbar：地址栏对象
• window.menubar：菜单栏对象
• window.scrollbars：窗口的滚动条对象
• window.toolbar：工具栏对象
• window.statusbar：状态栏对象
• window.personalbar：用户安装的个人工具栏对象

全局对象

documen Location Navigator（环境信息）History localStorage sessionStorage console Screen
isSecureContext是否处在加密环境。如果是 HTTPS 协议，就是true

对象方法

window.alert()、window.prompt()、window.confirm()它弹出不同的无法定制的对话框。
window.open新建另一个浏览器窗口。
window.close关闭当前窗口。
window.stop()等同于单击浏览器的停止按钮。 window.moveTo(x,y)移动浏览器窗口到指定位置。moveBy是相对位置。
window.resizeTo()缩放窗口到指定大小，resizeBy是相对缩放。
window.scrollTo将文档滚动到指定位置，scrollBy指定距离。
window.print打印对话框。
focus blur。 window.getSelection表示用户现在选中的文本。
window.getComputedStyle(“节点”)返回一个包含该元素的最终样式信息的对象。

事件

onload onerror onafterprint onbeforeprint onoffline onpageshow onunload

多窗口

由于网页可以使用iframe元素，嵌入其他网页。 window.top w.self. w.parent

Naviagtor

属性：
userAgent 表示用户设备信息。
plugins 插件。 platform 操作系统。onLine 在线状态。language``languages
geolocation包含用户地理位置的信息。只有在 HTTPS 协议下可用。
cookieEnabled Cookie 功能是否打开。
静态方法：
javaEnabled 是否能运行 Java Applet 小程序。
sendBeacon()方法用于向服务器异步发送数
实验性属性：
deviceMemory 内存数量GB
connection ，包含当前网络连接的相关信息。

Screen window.screen

浏览器窗口所在的屏幕height,availHeight,pixelDepth,colorDepth,orientation

Cookie 浏览器每次发出请求，会自动附上。document.cookie

区分 Cookie 时不考虑协议和端口。
HTTP 响应可以包含多个Set-Cookie字段：

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

如果同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。
Cookie 的SameSite属性用来限制第三方 Cookie，从而减少风险。

XMLHttpRequest

AJAX是 JavaScript 脚本发起 HTTP 通信的代名词。 AJAX 已成一个通用名词。

var xhr = new XMLHttpRequest();//没有参数


xhr.setRequestHeader('Content-Type', 'application/json');//设置 请求头

`overrideMimeType()`方法用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型

xhr.ontimeout = function () {
  console.error('The request for ' + url + ' timed out.');
};
//还可以监听：onloadstart，onprogress，onabort，onload，onloadend

xhr.onreadystatechange = function(){ //监听通信状态（`readyState`属性）的变化。
  // 通信成功时，状态值为
  -   0，实例已经生成，但是`open()`方法还没有被调用。
-   1，`open()`已经调用，但是`send()`还没调用，仍然可以使用实例的`setRequestHeader()`方法。
-   2，`send()`方法已经调用，并且服务器返回的头信息和状态码已经收到。
-   3，表示正在接收服务器传来的数据体（body 部分）。
-   4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText|response|responseType("arraybuffer|blob二进制|document文档对象|json|text"));
    } else {
      console.error(xhr.statusText|responseXML|responseURL);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.getAllResponseHeaders()); //服务器发来的所有 HTTP 头信息。
  console.error(xhr.statusText);
  console.error(xhr.withCredentials);//跨域请求时，用户信息是否会包含在请求之中
};

xhr.open('GET', '/endpoint', true); //建立 HTTP 连接的一些细节。
xhr.timeout = 10 * 1000;// 指定 10 秒钟超时
xhr.send(Blob|ArrayBufferView|Document|String|FormData);  //发出请求

xhr.abort() //终止请求

Navigator.sendBeacon() 请求与当前页面线程脱钩，可以保证会把数据发出去。

---

同源限制 协议，域名，端口

window 可以读取其他非同源的网页属性：closed, frames,length,location(读写),opener,parent, self,top,window,blur(),close(),focus(),postMessage()(跨窗口通信，不论是否同源)
三种规避AJAX同源限制的方式： JSONP: 网页添加一个<script>元素，向服务器请求一个脚本

<script src="http://api.foo.com?callback=callBackFountion()"></script>

WebSocket 使用ws://（非加密）和wss://（加密）作为协议前缀。
CORS 允许任何类型的请求。

---

CORS “跨域资源共享”（Cross-origin resource sharing )

CORS 需要浏览器和服务器同时支持。浏览器发现跨域请求，就会自动添加一些附加的头信息，有时还会多出一次附加的预检请求。因此只要服务器实现了 CORS 接口，就可以跨域通信。

Access-Control-Allow-Origin: * //预检请求需要的头部信息   

---

Storage

sessionStorage用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空。
localStorage保存的数据长期存在，下一次访问网页可以直接读。

window.localStorage.setItem('key', 'value');
window.localStorage.key = 'value';
window.localStorage['key'] = 'value';

window.localStorage.length 

window.sessionStorage.getItem('key')
window.sessionStorage.key(index) //返回该位置键名 配合length可遍历

window.sessionStorage.removeItem('key')
window.sessionStorage.clear() //清除所有数据

Storage 接口储存的数据发生变化时：

function onStorageChange(e) {
  console.log(e.key|newValue|oldValue|url(网址)|storageArea(整个对象));
}

window.addEventListener('storage', onStorageChange);

---

History 当前窗口的浏览历史

window.history.length //表示当前窗口一共访问过n个网址

window.history.back() // 后退到前一个网址

window.history.forward() //移动到下一个网址

window.history.go(int) //默认0即刷新当前页面

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');  //在历史中添加一条记录
replaceState //修改 History 对象的当前记录
history.state // {foo: "bar"}  //堆栈最上层的状态值


window.onpopstate = function (event) {
  console.log('只有用户点击浏览器倒退按钮和前进按钮，或者back forward go`方法时才会触发);
};

---

其他对象

Location对象提供以下属性和方法：

// 如当前网址为
// http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href //等同网址
document.location.protocol // "http:"
document.location.host hostname
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.username // "user"
document.location.password // "passwd"
document.location.origin // "http://user:passwd@www.example.com:4097"


document.location.assign('http://www.example.com') // 跳转到新的网址
document.location.replace('http://www.example.com') // 跳转到新的网址
window.location.reload(true); // 向服务器重新请求当前网址

URL

encodeURI()``decodeURI 用于整个URL。
encodeURIComponent() decodeURIComponent 只能用于URL的片段。

var url = new URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1');
url.href
url.protocol
url.hostname host
url.port
url.origin
url.pathname
url.search
url.searchParams
url.hash
url.password
url.username

URLSearchParams toString(), append(), delete(), has(), set(), getAll(), keys(), values(), entries()

ArrayBuffer 对象表示一段二进制数据，用于操作内存。

Blob ( Binary Large Object)

表示一个二进制文件(图片等)。通常用来读写文件。

var myBlob = new Blob(value, {type : 'text/html'}); //传入值和\

myBlob.size 
myBlob.type

// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>
function fileinfo(files) {
  for (var i = 0; i < files.length; i++) {
    var f = files[i];
    console.log(
      f.name, // 文件名，不含路径
      f.size, // 文件大小，Blob 实例属性
      f.type, // 文件类型，Blob 实例属性
      f.lastModifiedDate // 文件的最后修改时间
    );
  }
}

File相关 （FileList）（FileReader）

// <input type="file" onchange="onChange(event)">

function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (event) { //onabort onerror onloadstart onprogress
    console.log(event.target.result)
  };

  reader.readAsText(file);
}


var myFile = new File([], 'file.bin', {
  lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""

FormData

var myForm = document.getElementById('myForm');
myForm.checkValidity() //是否通过校验

var formData = new FormData(myForm);

formData.set('username', '张三');
formData.append('username', '李四');
formData.get('username') // "张三"
formData.getAll('username')

formData.keys()
formData.values()
entries()

表单的编码属性 enctype： application/x-www-form-urlencoded text/plain multipart/form-data

IndexedDB

IndexedDB 允许储存大量数据，不支持 SQL 查询语句，更接近 NoSQL 数据库。
特点： 键值对，异步，支持事务，同源限制，存储空间大，支持二进制存储。 各种对象：

• 数据库：IDBDatabase 对象
• 对象仓库：IDBObjectStore 对象
• 索引： IDBIndex 对象
• 事务： IDBTransaction 对象
• 操作请求：IDBRequest 对象
• 指针： IDBCursor 对象
• 主键集合：IDBKeyRange 对象

多线程Worker

var worker = new Worker('work.js');

worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

worker.onmessage = function (event) {
  doSomething(event.data);
}


worker.terminate(); // 主线程关闭

self.close();// Worker 线程关闭

轮训操作也可以放在Worker里面。

Date以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，范围是前后各1亿天（单位为毫秒）。

var today = new Date(); //当前时间
//today 的值等同于today.toString()

Date对象可以接受多种格式的参数.

new Date(1378218728000) //毫秒数
new Date('January 6, 2013'); //日期字符串
// Sun Jan 06 2013 00:00:00 GMT+0800 (CST)
new Date(2013, 0, 1, 0, 0, 0, 0) // 整数代表年、月、日、小时、分钟、秒、毫秒。
//年和月是不能省略。`0`表示一月的，

Date.parse()能解析的字符串，都可为参数。

//以下为同一个时间
new Date('2013-2-15')
new Date('2013/2/15')
new Date('02/15/2013')
new Date('2013-FEB-15')
new Date('FEB, 15, 2013')
new Date('FEB 15, 2013')
new Date('February, 15, 2013')
new Date('February 15, 2013')
new Date('15 Feb 2013')
new Date('15, February, 2013')

静态方法

Date.now距1970年1月1日 00:00:00 UTC的毫秒数。
Date.parse解析字符串，返回毫秒数。
Date.UTC方法接受年、月、日等变量作为参数，返回毫秒数。

实例方法

• to类：从Date对象返回一个字符串，表示指定的时间。
• get类：获取Date对象的日期和时间。
• set类：设置Date对象的日期和时间。

valueOf getTime返回毫秒数。
toString返回一个完整的日期字符串。
toUTCString返回对应的 UTC 时间，北京时间晚8个小时。
toISOString返回对应时间的 ISO8601 写法。
toJSON返回一个符合 JSON 格式的 ISO 日期字符串，结果同上。
toDateString返回日期字符串（不含小时、分和秒）。
toTimeString返回时间字符串（不含年月日）。

本地时间

var d = new Date(2013, 0, 1);

d.toLocaleString() 
// 中文版浏览器为"2013年1月1日 上午12:00:00"
// 英文版浏览器为"1/1/2013 12:00:00 AM"
d.toLocaleDateString()
// 中文版浏览器为"2013年1月1日"
// 英文版浏览器为"1/1/2013"
d.toLocaleTimeString()
// 中文版浏览器为"上午12:00:00"
// 英文版浏览器为"12:00:00 AM"

// 可选参数 ([locales[, options]])  ('zh-CN'，{month: long})
d.toLocaleDateString('en-US', {
 weekday: 'long',
 year: 'numeric',
 month: 'long',
 day: 'numeric'
})
// "Tuesday, January 1, 2013"

get

• getTime()：返回实例距离1970年1月1日00:00:00的毫秒数，等同于valueOf方法
• getDate()：返回实例对象对应每个月的几号（从1开始）。
• getDay()：返回星期几，星期日为0，星期一为1，以此类推。
• getFullYear()：返回四位的年份。
• getMonth()：返回月份（0表示1月，11表示12月）。
• getHours()：返回小时（0-23）。
• getMilliseconds()：返回毫秒（0-999）。
• getMinutes()：返回分钟（0-59）。
• getSeconds()：返回秒（0-59）。
• getTimezoneOffset()：返回当前时间与 UTC 的时区差异，以分钟表示，考虑到了夏令时因素。

set setUTC** 就是对应的UTC方法

• setDate(date)：设置实例对象对应的每个月的几号（1-31），返回改变后毫秒时间戳。
• setFullYear(year [, month, date])：设置四位年份。
• setHours(hour [, min, sec, ms])：设置小时（0-23）。
• setMilliseconds(ms)：设置毫秒（0-999）。
• setMinutes(min [, sec, ms])：设置分钟（0-59）。
• setMonth(month [, date])：设置月份（0-11）。
• setSeconds(sec [, ms])：设置秒（0-59）。
• setTime(milliseconds)：设置毫秒时间戳。

正则表达式

var regex = /xyz/; //字面量表示，以斜杠表示开始和结束。编译新建正则，效率较高
var regex = new RegExp('xyz'); //运行时新建正则

实例属性

var r = /abc/igm;

r.ignoreCase // true  是否设置了`i`修饰符。
r.global // true 是否设置了`g`修饰符。
r.multiline // true 是否设置了`m`修饰符。
r.flags // 'gim' 返字符串，包含了已经设置的所有修饰符，按字母排序。
r.lastIndex // 0 返回下一次开始搜索的位置。
r.source // "abc" 返回其字符串形式（不包括反斜杠）。

Math 不是构造函数，不能生成实例

静态属性 只读

Math.E // 2.718281828459045 常数`e`。
Math.LN2 // 0.6931471805599453 2 的自然对数。
Math.LN10 // 2.302585092994046 10 的自然对数。
Math.LOG2E // 1.4426950408889634 以 2 为底的`e`的对数。
Math.LOG10E // 0.4342944819032518 ：以 10 为底的`e`的对数。
Math.PI // 3.141592653589793 常数`π`。
Math.SQRT1_2 // 0.7071067811865476 0.5 的平方根。
Math.SQRT2 // 1.4142135623730951 2 的平方根。

静态方法

• Math.abs()：绝对值
• Math.ceil()：向上取整
• Math.floor()：向下取整
• Math.max()：最大值
• Math.min()：最小值
• Math.pow()：幂运算
• Math.sqrt()：平方根
• Math.log()：自然对数
• Math.exp()：e的指数
• Math.round()：四舍五入
• Math.random()：随机数

三角函数

• Math.sin()：返回参数的正弦（参数为弧度值）
• Math.cos()：返回参数的余弦（参数为弧度值）
• Math.tan()：返回参数的正切（参数为弧度值）
• Math.asin()：返回参数的反正弦（返回值为弧度值）
• Math.acos()：返回参数的反余弦（返回值为弧度值）
• Math.atan()：返回参数的反正切（返回值为弧度值）