JavaScript 技术详解

文章目录

1. 介绍

参考文档:W3school 官网JavaScript 参考手册

这篇文档,我们按照 JS 的 三大类对象 为开始,来回顾 JS 的 技术点

  • JS 内置对象
  • BOM 对象 (关于 Browser)
  • DOM 对象(关于 HTML)

2. JS 内置对象(8个)

  • 自动拆箱装箱 的内置对象有:Number,String,Boolean,RegExp 等。
  • 所有 JS 数据类型都有 toString()valueOf() 方法。

2.1 Number 对象(常用属性 5个, 常用方法 4个)

Number 对象:JS 内置的 原始数值 的 包装对象。

常用属性包括:

  • 常量属性 5个:MAX_VALUEMIN_VALUEPOSITIVE_INFINITY(Infinity 代替),NEGATIVE_INFINITY(-Infinity 代替),NaN(NaN 代替)

常用方法包括:toFixed(num),toExponential(num),toPrecision(num),toString(radix)

创建方法:2种

  • new Number(value);:构造函数,value 为 Number 对象存放的值,返回的是一个包含该值的 Number 对象
  • Number(value);全局转换函数,value 为 要 转换成数字的 值(如表示数字的 字符串 等),返回的是一个转换的 数字。如果转换失败,则返回 NaN
    • 其他 2个 转换为数值全局方法parseInt(string, radix)parseFloat(string)

注意:在必要时,JS 会自动地在 原始数字值Number 对象 之间转换。
即:调用 Number 方法的,既可以是 Number 对象,也可以是 原始数字值

var n = 123;
var binary_value = n.toString(2);

属性:

属性 描述 说明 示例
Number.MAX_VALUE 表示 JS 中可表示的最大的数 它的近似值为 1.7976931348623157 x 10308 输出显示为 指数计数法
1.7976931348623157e+308
Number.MIN_VALUE 表示 JS 中可表示的最小的数 它的近似值为 5 x 10-324 输出显示为 指数计数法
5e-324
Number.POSITIVE_INFINITY 正无穷大,表示大于 Number.MAX_VALUE特殊值 ECMAScript v1 和其后的版本中,还可以用 Infinity 代替 Number.POSITIVE_INFINITY。
Number.NEGATIVE_INFINITY 负无穷大,表示小于 Number.MIN_VALUE特殊值 ECMAScript v1 和其后的版本中,还可以用 -Infinity 代替 Number.NEGATIVE_INFINITY。
Number.NaN 表示 非数字值特殊值 1. 可以把 Number 对象设置为该值,来指示其不是数字值。
2. 说明某些算术运算(如求负数的平方根)的结果不是数字。
方法 parseInt()parseFloat() 在不能解析指定的字符串时就返回这个值。
3. 对于一些常规情况下返回有效数字的函数,也可以采用这种方法,用 Number.NaN 说明它的错误情况。
4. NaN 与其他数值进行比较的结果总是不相等的,包括它自身在内。因此,不能与 Number.NaN 比较来检测一个值是不是数字,而只能调用 isNaN(x) 来比较。
ECMAScript v1 和其后的版本中,还可以用预定义的全局属性 NaN 代替 Number.NaN。

方法:

方法 描述 参数 说明 示例
numberObject.toFixed(num) 四舍五入 的方式进行 小数的位数保留 num:必需。规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20。

如果小数位数不足,则会用 0 补足,以便它达到指定的长度。
numberObject.toExponential(num) toFixed(num) 类似,只是它会先用 指数计数法 表示数字,然后对 小数位数 进行 位数保留 同上,但 num 可选。
numberObject.toPrecision(num) 指定数字的最小位数。如果超出,则转换为 指数计数法 num:必需。
numberObject.toString(radix) 把一个Number 对象 转换为 字符串 radix:可选。规定表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。

如:当 radix 为 2 时,NumberObject 会被转换为二进制值表示的字符串。
numberObject.valueOf() 返回 Number 对象的基本 数字值

2.2 String 对象(常用属性 1个, 常用方法 17个)

String 对象:JS 内置的 字符串 的 包装对象。
ES5 中,允许使用 [ ],对 字符串 进行 类似数组 的 只读访问,如 str[0],但是 IE7 及更早不支持,若找不到会返回 undefined
但是不建议这么做,如果希望按照 数组的方式 处理字符串,可以先把它 分割数组

常用属性包括:length

常用方法包括:

  • 静态方法 1个:fromCharCode(numX,numX,…,numX)
  • 对象方法 17个:
    • 锚,超链接 2个:anchor(anchorname),link(url),
    • 字符/子串 查找 3个:charAt(index),charCodeAt(index),match(searchvalue / regexp)
    • 字符/子串 位置 3个:indexOf(searchvalue,fromindex),lastIndexOf(searchvalue,fromindex),search(regexp)
    • 字符/子串 替换 2个:replace(regexp / substr,replacement),trim()
    • 字符/子串 截取 2个:slice(start,end),substring(start,end)
    • 连接,分割 2个:concat(stringX,stringX,…,stringX),split(separator,howmany)
    • 大小写 2个:toUpperCase(),toLowerCase()

其中,支持 正则表达式 的 String 对象的方法:

  • match(searchvalue / regexp),
  • search(regexp),
  • replace(regexp / substr,replacement),
  • split(separator,howmany)

除了 split() 参数必须为 正则表达式 外,其他的 可以为 RegExp 对象,也可以为 正则表达式

创建方法:2种

  • new String(s);:构造函数,s 为 String 对象存放的值,返回的是一个包含该值的 String 对象
  • String(s);全局转换函数,s 为 要 转换成 字符串 的 值(如 数字 等),返回的是一个转换的 字符串

属性:

属性 描述 说明 示例
stringObject.length 返回字符串中的 字符数目

方法:

方法 描述 参数 说明 示例
stringObject.anchor
(anchorname)
创建 HTML anchorname:必需。为锚定义 name 属性值。 字符串 会作为 锚 的文本 var txt="Hello world!";
document.write(txt.anchor("myanchor"));
输出:
<a name="myanchor">Hello world!</a>
stringObject.link(url) 把字符串显示为 超链接 url:必需。为超链接定义 href 属性值。 字符串 会作为 超链接 的文本 var txt="Hello world!";
document.write(txt.link("http://www..."));
输出:
<a href="http://www...">Hello world!</a>
stringObject.charAt(index) 返回 指定位置 的 字符 index:必需。表示字符串中某个位置的数字,即字符在字符串中的 下标

下标的起始为 0,如果参数 index 不在 0string.length 之间,该方法将返回一个 空字符串
JS 并没有一种有别于字符串类型的 字符 数据类型,所以返回的字符是 长度为 1字符串
stringObject.charCodeAt(index) 返回 指定位置 的字符的 Unicode 编码 index:同上。

区别在于如果 index 下标 不存在,则该方法将返回一个 NaN
这个返回值是 0 - 65535 之间的整数。
String.fromCharCode
(numX,numX,…,numX)
返回 1 个 或 多个指定的 Unicode 值的 字符串 numX:必需。单个字符的 Unicode 值。 该方法是 String 的静态方法
stringObject.indexOf
(searchvalue,fromindex)
返回某个指定的 字符串值 在字符串中 首次 出现的 位置 1. searchvalue: 必需。规定需检索的字符串值。

2. fromindex:可选的 整数参数。规定在字符串中 开始 检索的 位置
它的合法取值是 0 到 stringObject.length - 1。
如省略该参数,则将从字符串的首字符开始检索。
1. 如果要检索的字符串值没有出现,则该方法返回 -1

2. indexOf() 方法对大小写敏感。
stringObject.lastIndexOf
(searchvalue,fromindex)
同上,只是 从 最后 开始搜索。 同上 同上
stringObject.match
(searchvalue / regexp)
indexOf(),只是 这里返回的不是 位置,而是 1个多个 匹配的 1. searchvalue:规定要检索的字符串值。用的很少

2. regexp:规定要匹配的模式的 RegExp 对象。
关于 正则表达式 作为参数的 返回值:

1. 如果是全局 匹配,则返回 多个 匹配值 的 数组 或 null。

2. 如果是 单次 匹配,则 返回包括 1个 匹配值 和 其他相关元素数组 或 null。
该数组的说明
a. 第 0 个元素存放的是 匹配文本,其他元素为 与正则表达式的 子表达式 匹配的文本。
b. 该数组还含有两个 对象属性
index:是匹配文本的 起始位置
input:是对 stringObject引用

意思就是:在 全局 检索模式下,match() 即不提供与 子表达式 匹配的文本的信息,也不声明每个匹配子串的位置。如果您需要这些全局检索的信息,可以使用 regExpObject.exec()
stringObject.search(regexp) indexOf(),只是这里参数 除了 子串,还可以使用 RegExp 对象 1. 如果没有找到任何匹配的子串,则返回 -1。

2. search() 方法不执行全局匹配,它将忽略标志 g

3. 同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的 开始 进行检索。
stringObject.replace
(regexp / substr,replacement)
替换 匹配到的 子串。 1. 匹配参数:可以是 子串 substr,也可以是 RegExp 对象

2. 替换文本:可以是 文本,也可以是 一些 特殊的符号,这些符号会 转换成 对应的 替换文本。

特殊的符号 比如:$1 表示匹配到的 第1个字符串。
name = "Doe, John";
name.replace
(/(\w+)\s*, \s*(\w+)/, "$2 $1");
输出:
John Doe
stringObject.trim() 删除字符串 两端 的 空白符 IE 8 或更低版本不支持。建议使用 replace() 替代。 str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')
stringObject.slice(start,end) 截取子串 1. start:子串的起始下标,如果为负值,则从尾部开始提取。

2. end:子串的结束下标(提取时不包括 end)。如果 end 没有指定,则会提取到 结尾
stringObject.substring(start,stop) 截取子串,同 slice(),只是 substring 是始末位置 不能为负数
stringObject.concat
(stringX,stringX,…,stringX)
连接 2 个或 多 个字符串 返回一个连接完成的 新的字符串 stringObject 本身并没有被改变。
stringObject.split(separator,howmany) 把一个字符串 分割 成 字符串 数组 1. separator:必需。表示 分割标志,可以是 子串,也可以是 正则表达式(直接书写,不加引号)。

2. howmany:可选。指定返回的数组最大长度
1. 返回的数组中的 子串 不包括 分割标志 自身。

2. 如果把空字符串 "" 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

3. split() 执行的操作与 array 的 join() 执行的操作是 相反的
var words = sentence.split(/\s+/);
stringObject.toUpperCase() 把字符串 转换为 大写 返回新的字符串
stringObject.toLowerCase() 把字符串 转换为 小写 返回新的字符串
stringObject.toString() 返回 String 对象的 原始字符串 一般不会调用该方法。
stringObject.valueOf() 返回 String 对象的原始值

2.3 Boolean 对象(常用属性 0个, 常用方法 1个)

Boolean 对象:JS 内置的 布尔值 包装对象,表示布尔值 truefalse
它的主要功能是:提供 将 布尔值 转换成 字符串toString() 方法。

常用方法包括:toString()

创建方法:2种

  • new Boolean(value);:构造函数,value 为布尔对象存放的值,返回的是一个包含该值的 Boolean 对象
  • Boolean(value);:全局转换函数,value 为 要转换成布尔值的 值,返回的是一个转换的 布尔值

注意:

如果 省略 value 参数,或设置为 false0-0""NaNundefinednull,则该对象会设置为 false
否则会设置为 true(如,字符串 "false" 也是真)。
简单点说就是:所有不具有“真实”值的 即为 false

方法:

方法 描述 参数 说明 示例
booleanObject.toString() 把一个逻辑值转换为字符串 返回字符串 "true""false"

在 Boolean 对象被用于字符串环境中时,此方法会被自动 调用。
booleanObject.valueOf() 返回 Boolean 对象的原始值 返回 原始布尔值
object.toSource() 返回 对象的源代码 该原始值由 Array 对象派生的所有对象继承。

2.4 Array 对象(常用属性 1个,常用方法 21个)

Array 对象:JS 内置的 数组 对象。

常用属性包括 1个:length

常用方法包括 20个:

  • 迭代方法 9个:forEach(function(value, index, array)),map(function(value, index, array)),filter(function(value, index, array)),find(function(value, index, array)),findIndex(function(value, index, array)),every(function(value, index, array)),some(function(value, index, array)),reduce(function(total, value, index, array)),reduceRight(function(total, value, index, array))
  • 其他方法 12个:concat(arrayX,arrayX,…,arrayX),join(separator),toString(),unshift(newelement1,newelement2,…,newelementX),shift(),push(newelement1,newelement2,…,newelementX),pop(),reverse(),slice(start,end),splice(index,howmany,item1,…,itemX),sort(sortby(a, b)),isArray()

创建方法:3个

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

属性:

属性 描述 说明 示例
arrayObject.length 设置返回 数组中元素的数目 设置时,长度 小于原数据时 截断,大于时补 undefined

方法:

方法 描述 参数 说明 示例
arrayObject.forEach(function(value, index, array)) 遍历数组。ES5 新增 参数是一个函数,foreach 方法会 循环执行函数
并依次传入 数组的 当前项(必需),项索引数组本身,作为函数的参数。
其他 数组遍历 方法2.4.3 小结。
arrayObject.concat(arrayX,arrayX,…,arrayX) 连接 2个或 多个数组 arrayX 可以是 具体的值,也可以是 数组对象 不会改变现有的数组,会返回被连接数组的一个 新数组 var a = [1,2,3];
document.write(a.concat(4,5));
arrayObject.join(separator) 数组转换为 字符串 separator 指定要使用的 分隔符,若省略,默认使用 逗号 返回一个 字符串
arrayObject.toString() 数组转换为 字符串 返回值 与 没有参数的 join() 方法返回的字符串相同。

当数组用于 字符串环境 时,JS 会自动调用这一方法将数组自动转换成字符串。
但是在某些情况下,需要显式地调用该方法。
arrayObject.unshift(newelement1,newelement2,…,newelementX) 向数组的开头 添加 一个或多个 元素 返回 新的长度

IE 不支持。
arrayObject.shift() 删除 数组的 第一个 元素 返回删除的 第一个元素

如果数组已经为空,则不会改变数组,并返回 undefined 值。
arrayObject.push(newelement1,newelement2,…,newelementX) 向数组的末尾 添加 一个或多个 元素 返回 新的长度
arrayObject.pop() 删除 数组的 最后一个 元素 返回删除的 最后一个元素

如果数组已经为空,则不会改变数组,并返回 undefined 值。

push()pop() 的原理是:
数组 提供的 先进后出栈 的功能。
arrayObject.reverse() 颠倒 数组中元素的 顺序 无返回值
arrayObject.slice(start,end) 截取 数组。
不会改变原数组。
start:必需,指定 截取 起点 的下标。
如果为负数,则从数组尾部 开始算。

end:可选,指定 截取 终点 的下标。
如果为负数,则从数组尾部 开始算。
如果不没有指定,则终点到 数组末尾
返回一个 新的数组,包含从 start 到 end (不包括该元素) 的 arrayObject 中的元素。
arrayObject.splice(index,howmany,item1,…,itemX) 截取 数组,并删除 原数组 截取部分,并可选替换
会改变原数组。
index,howmany:必须,表示删除起点的下标,和删除的元素数目 (如果为 0,表示删除到末尾)。

item1, …, itemX:可选,声明的一个或多个值来替换那些被删除的元素
返回 含有 被删除的元素 的数组
arrayObject.sort(sortby(a, b)) 对数组的元素进行 排序 sortby(a, b):可选,规定 排序顺序 的函数。

函数返回值:
负数:表示 a 在 b 的前面。
0:a,b 位置不变。
正数:表示 a 在 b 的后面。

如果没有规定 排序函数,则按 字符编码的顺序 对数组中的元素进行排序。
返回 对数组的 引用 升序:
function(a, b){a - b}
降序:
function(a, b){b - a}
随机排序:
function(a, b){return 0.5 - Math.random()}
arrayObject.valueOf() 返回 Array 对象的原始值 该原始值由 Array 对象派生的所有对象继承。
object.toSource() 返回 对象的源代码 该原始值由 Array 对象派生的所有对象继承。
object.isArray() 判断对象是否是 数组 ES5 提供。

2.4.1 查找 数组中的最值 2 个方法

  • 对数组进行排序(使用 sort(),或 自实现排序)。
  • 使用 Object.apply(nThis,args[]) 方法 劫持 Math 对象的 max 或 min 方法,而 apply() 的 参数正好是 数组 形式。

sort() 示例:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

自实现排序 示例:

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

apply() 示例:

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

2.4.2 排序对象数组

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

// 根据 字符串
cars.sort(function(a, b){
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

// 或根据 数字
cars.sort(function(a, b){return a.year - b.year});

2.4.3 数组的迭代 小结

只使用 value 时,index, array 可省略。

find()findIndex()ES6 新增。
其他 ES5 新增。

迭代方法 描述
arrayObject.forEach(function(value, index, array)) 单纯 执行 回调函数。
arrayObject.map(function(value, index, array)) 回调函数的每个返回值,最后会形成一个数组返回。
arrayObject.filter(function(value, index, array)) map()
arrayObject.find(function(value, index, array)) 第1个返回值为 true 的 回调函数,它对应的 value 会被返回。
arrayObject.findIndex(function(value, index, array)) 第1个返回值为 true 的 回调函数,它对应的 index 会被返回。
arrayObject.every(function(value, index, array)) 如果回调函数的每个返回值都为 true,则返回 true,否则返回 false。
arrayObject.some(function(value, index, array)) every()
arrayObject.reduce(function(total, value, index, array),n) 每个回调函数的 返回值,会重新赋值给 total,最后返回 total。n 可以设置 total 的初始值。执行方向:从左到右。
arrayObject.reduceRight(function(total, value, index, array),n) reduce(),但 执行方向:从右到左。

2.5 Math 对象(常用属性 1个, 常用方法 14个)

Date 对象:JS 内置的 数学 对象。
它的主要功能是:用于执行数学任务。

常用属性包括:

  • 常量属性 1个:PI

常用方法包括 14个:abs(x)ceil(x)floor(x)round(x)random()max(x, y)min(x,y)pow(x,y)sqrt(x)sin(x)cos(x)tan(x)exp(x)log(x)

使用方法:

var pi_value = Math.PI;
var sqrt_value = Math.sqrt(15);

注意:Math 对象没有 构造函数,全是 常量静态方法,直接通过 Math 调用即可。

属性:

属性 描述 说明 示例
Math.PI 表示 π,即圆的周长和它的直径之比 其值近似为 3.141592653589793。
Math.SQRT2 表示 2 的平方根 其值近似为 1.4142135623730951
Math.SQRT1_2 表示 2 的平方根倒数 其值近似为 0.7071067811865476
Math.E 表示 算术常量 e,即自然对数的底数 其值近似于 2.71828
Math.LOG2E 表示 log2e,即以 2 为底 e 的对数 其值近似于 1.442695040888963387
Math.LOG10E 表示 log10e,即以 10 为底 e 的对数 其值近似于 0.43429448190325181667
Math.LN2 表示 loge2,即 2 的自然对数,以 e 为底 2 的对数 其值近似于 0.69314718055994528623
Math.LN10 表示 loge10,即 10 的自然对数,以 e 为底 10 的对数 其值近似于 2.3025850929940459011

方法:

方法 描述 参数 说明 示例
Math.abs(x) 返回数的 绝对值
Math.ceil(x) 向上取整
Math.floor(x) 向下取整
Math.round(x) 四舍五入取整
Math.random() 返回介于 0.0 ~ 1.0 之间的一个随机数
Math.max(x, y) 较大值 如果没有参数,则返回 -Infinity。如果有某个参数为 NaN,或是不能转换成 数字 的非数字值,则返回 NaN
Math.min(x,y) 最小值 如果没有参数,则返回 Infinity。如果有某个参数为 NaN,或是不能转换成 数字 的非数字值,则返回 NaN
Math.pow(x,y) 返回 x 的 y 次幂 的值 如果结果是 虚数 或 负数,则该方法将返回 NaN。如果由于指数过大而引起浮点溢出,则该方法将返回 Infinity
Math.sqrt(x) 返回一个数的 平方根 如果 x 小于 0,则返回 NaN
Math.sin(x) 返回一个数字的 正弦 x 是弧度值,角度 乘以 0.017453293 (2PI/360)即可得到 返回值在 -1.0 到 1.0 之间
Math.cos(x) 返回一个数字的 余弦 同上 返回的是 -1.0 到 1.0 之间
Math.tan(x) 返回一个数字的 正切 同上
Math.exp(x) 返回 e 的 x 次幂的值
Math.log(x) 返回一个数的 自然对数,即 以 e 为底 x 的对数

2.5.1 指定范围内的 随机数 示例

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

2.6 Date 对象(常用属性 0个, 常用方法 24个)

Date 对象:JS 内置的 日期时间 对象。
Date 对象 可以直接使用 >< 进行比较,来判断 日期时间 的前后。

常用方法包括:

  • 类似 转换函数 1个:Date()
  • 静态方法 3个:Date.now()Date.UTC()Date.parse(datestring)
  • 日期时间方法 2个:getTime()setTime(millisec)
  • 日期方法 7个:getFullYear()getMonth()getDate()getDay()setFullYear(year)setMonth(month)setDate(day)
  • 时间方法 8个:getHours()getMinutes()getSeconds()getMilliseconds()setHours(hour)setMinutes(min)setSeconds(sec)setMilliseconds(millisec)
  • 字符串转化方法 3个:toDateString()toTimeString()toString()

创建方法:

var myDate = new Date();
var myDate = new Date(year, month, day, hours, minutes, seconds, milliseconds);
// var d = new Date(2018, 11, 24, 10, 33, 30, 0);
// 1位和2位数 年份 将被解释为 19xx 年。
// 一月是 0。十二月是11。

var myDate = new Date(milliseconds);
var myDate = new Date(datestring/GMT);

注意:Date 对象 默认当前日期和时间 保存为其 初始值

方法:

方法 描述 参数 说明 示例
Date() 返回当天的日期和时间的 字符串 类似于 Boolean 对象的转换方法,只不过转换对象默认为 本地时间。 document.write(Date())
Date.now() 返回当天的日期和时间的 时间戳 ES5 新增
Date.UTC(year,month,day,hours,minutes,seconds,ms) 返回 指定的时间 距 GMT 时间 1970 年 1 月 1 日午夜的 毫秒数 year:必需。表示年份的 4 位数字。
month:必需。表示月份的整数,介于 0 ~ 11。
day:必需。表示日期的整数,介于 1 ~ 31。

hours:可选。表示小时的整数,介于 0 ~ 23。
minutes:可选。表示分钟的整数,介于 0 ~ 59。
seconds:可选。表示秒的整数,介于 0 ~ 59。
ms:可选。表示毫秒的整数,介于 0 ~ 999。
Date.UTC() 是 Date 对象 的 静态方法。 var d = Date.UTC(2005,7,8)
Date.parse(datestring) 返回一个 日期时间字符串 距 GMT 时间 1970 年 1 月 1 日午夜的 毫秒数 datestring:必需。表示日期和时间的字符串。 Date.parse() 是 Date 对象的 静态方法。 var d = Date.parse("Jul 8, 2005")
dateObject.getTime() 返回 GMT 时间 1970 年 1 月 1 日午夜 距今毫秒数
dateObject.setTime(millisec) 毫秒 设置 Date 对象。 millisec:必需,指设置的日期和时间,是据 GMT 时间 1970 年 1 月 1 日午夜之间的 毫秒数 var d = new Date();
d.setTime(77771564221);
dateObject.getFullYear() 返回表示 年份 的 4 位数字 返回值是一个 4位数
dateObject.getMonth() 返回表示 月份 的数字 返回值是 0(一月) 到 11(十二月) 之间的一个整数。
dateObject.getDate() 返回表示 月份中的某一天 的数字 返回值是 1 ~ 31 之间的一个整数。
dateObject.getDay() 返回表示 星期中的某一天 的数字 返回值是 0(周日) 到 6(周六) 之间的一个整数
dateObject.getHours() 返回时间的 小时 字段 返回值是 0 (午夜) 到 23 (晚上 11 点)之间的一个整数。
dateObject.getMinutes() 返回时间的 分钟 字段 返回值是 0 ~ 59 之间的一个整数。
dateObject.getSeconds() 返回时间的 字段 返回值是 0 ~ 59 之间的一个整数。
dateObject.getMilliseconds() 返回时间的 毫秒 字段 返回值是 0 ~ 999 之间的一个整数。
dateObject.setFullYear(year) 设置 年份 year:必需。表示年份的四位整数。
dateObject.setMonth(month) 设置 月份 month:必需。一个表示月份的数值,该值介于 0(一月) ~ 11(十二月) 之间。
dateObject.setDate(day) 设置 一个月某一天 day:必需。表示一个月中的一天的一个数值(1 ~ 31)。
dateObject.setHours(hour) 设置 指定的时间 的 小时 字段 hour:必需。表示小时的数值,介于 0(午夜) ~ 23(晚上11点) 之间。
dateObject.setMinutes(min) 设置 指定的时间 的 分钟 字段 min:必需。表示分钟的数值,介于 0 ~ 59 之间。
dateObject.setSeconds(sec) 设置 指定的时间 的 字段 sec:必需。表示秒的数值,该值是介于 0 ~ 59 之间的整数。
dateObject.setMilliseconds(millisec) 设置 指定的时间 的 毫秒 字段 millisec:必需。表示毫秒的数值,该值是介于 0 ~ 999 之间的整数。
dateObject.toDateString() 把 Date 对象的日期部分转换为字符串
dateObject.toTimeString() 把 Date 对象的时间部分转换为字符串
dateObject.toString() 把 Date 对象转换为字符串 返回字符串格式为 GTM 时间格式,如:
Thu Mar 26 2020 22:26:53 GMT+0800 (中国标准时间)
dateObject.valueOf() 返回 Date 对象的原始值 返回值为 date 的 毫秒表示,和方法Date.now()getTime() 返回的值相等。

该原始值由 Date 对象派生的所有对象继承。
object.toSource() 返回 对象的源代码 该原始值由 Array 对象派生的所有对象继承。

2.6.1 日期时间 格式

2.6.1.1 JS 的 4 种 日期输入格式
类型 示例
ISO 日期(国际标准) “2018-02-19”
短日期 “02/19/2018” 或 “2018/02/19”
长日期 “Feb 19 2018” 或 “19 Feb 2019”
完整日期 “Monday February 25 2015”
2.6.1.2 JS 的 日期输出格式

无论 输入格式 如何,JS 默认将输出 全文本字符串,即 GMT 格式:Mon Feb 19 2018 06:00:00 GMT+0800 (中国标准时间)

2.6.1.3 输入格式 汇总

在某些浏览器中,不带 前导零,会产生错误,会返回 NaN。

类型 示例
YYYY(ISO 日期) “2018”
YYYY-MM(ISO 日期) “2015-03”
YYYY-MM-DD(ISO 日期) “2018-02-19”
YYYY-MM-DDTHH:MM:SS(ISO 日期) “2018-02-19T12:00:00”
MM/DD/YYYY(短日期) “02/19/2018”
MMM DD YYYY(长日期) “Feb 19 2018”

2.6.2 日期时间 格式化

格式化函数,有时间再归纳。

2.7 RegExp 对象(常用属性 2个, 常用方法 3个)

RegExp 对象:JS 内置的 正则表达式 的 对象。是对字符串执行 模式匹配 的强大工具。

常用属性包括 2个:lastIndexsource
常用方法包括 3个:compile(regexp),exec(string),test(string)

创建方法:

new RegExp(pattern);

注意:正则表达式 不是一个字符串,不需要加 引号,正则规则 都是放在 定界符(2个 正斜线 / /) 内部。

属性:

属性 描述 说明 示例
regExpObject.lastIndex 上一次 匹配文本 之后的 第一个字符位置
regExpObject.source 返回 模式匹配 所用的 正则文本,不包括 界定符 / /

方法:

方法 描述 参数 说明 示例
regExpObject.compile(regexp) 修改对象的 正则表达式
regExpObject.exec(string) 执行正则,进行匹配 返回一个 数组,存放匹配的结果。如果未找到匹配,则返回值为 null

说明:
1. 单次匹配时,和 stringObject.match(searchvalue / regexp) 是相同的,数组存在 index(匹配文本第一个字符位置),input(原字符串的索引) 2个属性。
2. 全局匹配时,也是返回所有匹配结果的一个数组,但是会把 匹配文本的 最后一个字符下一个位置,设置给 regExpObject.lastIndex 属性,如果未找到匹配,lastIndex 属性会 重置为 0。
这也是和 stringObject.match(searchvalue / regexp) 的区别。

所以要养成一个习惯:
如果在一个字符串中完成了 单次模式 匹配之后要开始检索新的字符串,必须手动地把 lastIndex 属性重置为 0。
regExpObject.test(string) 判断 匹配值 是否存在 如果有匹配到,则返回 true,否则 返回 false

2.7.1 正则表达式的 书写基础

小括号 ():用来分组
中括号 []:用来限定字符的范围
大括号 {}:用来指定字符,数字 等出现的 次数 或 次数范围

2.7.1.1 修饰符
修饰符 描述 说明 示例
g 用于执行 全局 匹配 默认的是在找到第一个匹配后停止,设置则不停止 /regexp/g
i 用于执行对 大小写 不敏感的匹配 默认敏感 /regexp/gi
m 执行多行匹配
2.7.1.2 方括号

方括号 用于查找 某个范围内 的字符。
方括号 内的字符可以是 任何字符字符范围

表达式 描述 示例
[adgk] 查找 集合内 的任何字符 /[adgk]/g
[^adgk] 查找 给定集合外 的任何字符 /[^adgk]/g
[0-9] 查找任何从 0 至 9 的数字
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
2.7.1.3 元字符

元字符 是拥有 特殊含义 的字符。

元字符 描述 说明 示例
. 表示任意 单个字符,不包括 换行行结束 单独使用意义不大,常和其他组合一起使用 var str="That's hot!";
var patt1=/h.t/g;
匹配结果:
That’s hot!
\d 表示 数字 字符 /\d/g
\D 表示 非数字 字符
\s 表示 空白 字符 空白字符包括:
空格符制表符回车符换行符垂直换行符换页符
\S 表示 非空白 字符
\w 表示 单词 字符
\W 表示 非单词 字符
\b 表示 单词边界
\B 表示 非单词边界
\dd 查找以八进制数 dd 对应的 字符 /\17/g
\xdd 查找以十六进制数 dd 对应的 字符 /\x57/g
\uxxxx 查找以十六进制 xxxx 对应的 Unicode 字符 /\u0057/g
\0 表示 NUL 字符
\n 表示 换行符
\r 表示 回车符
\t 表示 制表符
\v 表示 垂直制表符
\f 表示 换页符
2.7.1.4 量词

n 表示任意 字符,数字 等。

量词 描述
n? 出现 0次 或 1次
n* 出现 0次 或 多次
n+ 出现 1次 或 多次
n{X} 出现 X 次
n{X,} 出现至少 X次
n{X,Y} 出现 X 到 Y 次
^n 以 n 开头
n$ 以 n 结尾
?=n 紧跟 n
?!n 没有跟 n
2.7.1.5 正则示例
  • 去掉字符串前后空白字符:str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')
  • 通用邮箱:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

2.8 全局对象(常用属性 4个, 常用方法 13个)

全局对象 不是任何对象的属性,所以它没有名称。它的属性方法,在 JS 中可以 直接使用,不需要调用。
当然,可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象。因为 全局对象 是 作用域链

常用全局属性包括 4个:InfinityNaNundefinednull

常用全局方法包括 13个:

  • 转换函数 3个:Number(object),String(object),Boolean(object),(Date()
  • 判断 2个:isFinite(number),isNaN(x)
  • 字符串数字化 2个:parseInt(string, radix),parseFloat(string)
  • URI 编解码 5个:escape(string),encodeURI(URIstring),encodeURIComponent(URIstring),decodeURI(URIstring),decodeURIComponent(URIstring)
  • 执行代码 1个:eval(string)

全局属性:

属性 描述 说明 示例
Infinity 代表正的无穷大的数值
NaN 指示某个值是不是数字值 请使用 isNaN(x) 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。
undefined 指示未定义的值 1 只能用 === 运算来测试某个值是否 是未定义的,因为 == 运算符认为 undefined 值等价于 null
2. 在 JS 中,没有值 的变量,其值是 undefined。可以表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性。
3. 而 null 表示的是一个值,它 有值,只是这个值是 无值 而已。
null 表示一个 ,这个值表示 无值

全局方法:

包括上面创建对象时,用到的 转换函数:Number(),String(),Boolean(),Date() 等。

方法 描述 参数 说明 示例
Number(object) 把对象的值转换为 数字 还可以把 日期时间对象 转换为 数字时间戳 Number(new Date());
String(object) 把对象的值转换为 字符串
Boolean(object) 把对象的值转换为 布尔值
Date() 返回包含 当前日期时间 的 字符串
isFinite(number) 检查其参数是否是无穷大
isNaN(x) 检查其参数是否是 非数字值 通常用于检测 parseInt()parseFloat() 的结果,以判断它们表示的是否是合法的数字。
parseInt(string, radix) 解析一个指定 "进制数" 的字符串,并返回一个 十进制 的整数 radix:可选。要解析的数字的基数,即字符串的 进制数。该值介于 2 ~ 36 之间。

省略该参数或其值为 0,则数字将以 10 为基础来解析。

如果它以 “0x” 或 “0X” 开头,将以 16 为基数。

如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN
1. 字符串不论是什么进制,返回的都是 十进制的 数
2. 只有字符串中的 第一个数字会被返回,即字符串不一定 全是 数字形式的,但第一个字符必须是数字形式的。
3. 如果字符串的 第一个字符 不能被转换为数字,那么返回 NaN
4. 开头和结尾的 空格 也是允许的。
5. 遇到 小数点 也会停止。
parseFloat(string) 解析一个字符串,并返回一个浮点数 1. 指定字符串中的首个字符是否是数字,如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字。

2. 在解析过程中遇到了正负号(+ 或 -)、数字 (0-9)、小数点,或者科学记数法中的指数(e 或 E)以外 的字符,则它会忽略 该字符 以及之后的所有字符,返回当前已经解析到的浮点数。同时参数 字符串 首位的空白符会被忽略。

3. 如果字符串的 第一个字符 不能被转换为数字,那么返回 NaN
4. 开头和结尾的 空格 也是允许的。
5. 如果只想解析数字的整数部分,请使用 parseInt() 方法。
escape(string) 对 字符串 进行编码 采用 Unicode 编码,旧函数处理方式,不建议使用。
encodeURI(URIstring) 对 URI 进行编码 采用 UTF-8 编码,编码字符比 encodeURIComponent() 要少。
encodeURIComponent(URIstring) 对 URI 进行编码 采用 UTF-8 编码,编码字符更多,比 encodeURI() 要多编码 11个字符:
# $ & + , / : ; = ? @
decodeURI(URIstring) 对 encodeURI() 函数编码过的 URI 进行解码
decodeURIComponent(URIstring) 对 encodeURIComponent() 函数编码的 URI 进行解码
eval(string) 执行字符串代码 1. string:必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要 执行的语句

该方法只接受 原始字符串 作为参数,如果 string 参数不是原始字符串,那么该方法将 不作任何改变 地返回。
1. 如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。

2. 虽然 eval() 的功能非常强大,但在实际使用中用到它的情况并不多。因为允许任意代码运行,它同时也意味着安全问题。
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))

2.8.1 输出 JS 全局对象 的所有 预定义属性

在 JS 核心语言中,全局对象的预定义属性都是不可枚举的,所有可以用 for/in 循环列出所有 隐式显式 声明的全局变量。
注意:在客户端 JS 中,全局对象 就是 Window 对象,所以在 window 下挂载的 属性 和 方法 属于 JS 全局对象 的 预定义属性。

<!DOCTYPE html>
<html>
    <head>
        <title>代码测试</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    </head>
    <body>
		<script type="application/javascript">
			var variables = "";

			for (var name in this) 
			{
				variables += name + ", ";
			}

			document.write(variables);
        </script>
    </body>
</html>

输出结果:206个

parent, opener, top, length, frames, closed, location, self, window, document, name, customElements, history, locationbar, menubar, personalbar, scrollbars, statusbar, toolbar, status, frameElement, navigator, origin, external, screen, innerWidth, innerHeight, scrollX, pageXOffset, scrollY, pageYOffset, visualViewport, screenX, screenY, outerWidth, outerHeight, devicePixelRatio, clientInformation, screenLeft, screenTop, defaultStatus, defaultstatus, styleMedia, onsearch, onwebkitanimationend, onwebkitanimationiteration, onwebkitanimationstart, onwebkittransitionend, isSecureContext, onabort, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformdata, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting, onwheel, onauxclick, ongotpointercapture, onlostpointercapture, onpointerdown, onpointermove, onpointerup, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, onselectstart, onselectionchange, onanimationend, onanimationiteration, onanimationstart, ontransitionend, onafterprint, onbeforeprint, onbeforeunload, onhashchange, onlanguagechange, onmessage, onmessageerror, onoffline, ononline, onpagehide, onpageshow, onpopstate, onrejectionhandled, onstorage, onunhandledrejection, onunload, performance, stop, open, alert, confirm, prompt, print, queueMicrotask, requestAnimationFrame, cancelAnimationFrame, captureEvents, releaseEvents, requestIdleCallback, cancelIdleCallback, getComputedStyle, matchMedia, moveTo, moveBy, resizeTo, resizeBy, scroll, scrollTo, scrollBy, getSelection, find, webkitRequestAnimationFrame, webkitCancelAnimationFrame, fetch, btoa, atob, setTimeout, clearTimeout, setInterval, clearInterval, createImageBitmap, close, focus, blur, postMessage, onappinstalled, onbeforeinstallprompt, crypto, indexedDB, webkitStorageInfo, sessionStorage, localStorage, chrome, onpointerrawupdate, speechSynthesis, webkitRequestFileSystem, webkitResolveLocalFileSystemURL, openDatabase, applicationCache, caches, ondevicemotion, ondeviceorientation, ondeviceorientationabsolute, variables, TEMPORARY, PERSISTENT, addEventListener, removeEventListener, dispatchEvent,

2.9 JS 事件

  • JS 事件 定义在 HTML 标签 中。
  • 事件 通常与函数 配合使用,这样就可以通过发生的 事件驱动函数执行
  • 具体的 JS函数 可以写在 HTML 标签 内,也可以单独写在 JS 文件 中。

关于 HTML4 的 事件属性,请查阅 《HTML / HTML5 技术详解》 博文。

3. BOM 对象(5个)

BOM 对象包括了 5 个对象:Window 对象Navigator 对象Screen 对象History 对象Location 对象

3.1 Window 对象(客户端的 JS全局对象)(常用属性 22个,常用方法 18个)

Window 对象表示 浏览器 中打开的 窗口
主要是对 浏览器窗口框架 进行某种操作,以及 简单的交互行为
如果文档包含 框架(frame 或 iframe 标签),浏览器会为 HTML 文档 创建一个 window 对象,并为 每个框架 创建一个 额外window 对象

注意:
客户端 JS 中,全局对象 就是 Window 对象,所以使用 window 对象的属性和方法时,window 可以省略
除了下面列出的 属性和方法,Window 对象还实现了上面 JS 内置对象 中的 全局对象 的 属性和方法。

常用属性包括 22个:

  • 挂载在 window对象 上的其他对象 6个:navigatorscreenhistorylocationdocumentevent
  • 窗口的属性 16个:openerselftopparentlengthnameouterWidthouterHeightinnerWidthinnerHeightscreenLeftscreenTopscreenXscreenYpageXOffsetpageYOffset

常用方法包括 18个:

  • 交互 3个:alert(message),confirm(message),prompt(text,defaultText)
  • 定时器 4个:setTimeout(code,millisec),setInterval(code,millisec),clearTimeout(id),clearInterval(id)
  • 窗口操作 5个:window.open(URL,name,features,replace),close(),blur(),focus(),print()
  • 窗口移动 6个:moveBy(x,y),moveTo(x,y),resizeBy(width,height),resizeTo(width,height),scrollBy(xnum,ynum),scrollTo(xpos,ypos)

Window 对象里的集合:

集合 描述
window.frames[] 包含了页面中所有的 Window 对象

属性:

属性 描述 说明 示例
navigator 对 Navigator 对象的只读引用
screen 对 Screen 对象的只读引用
history 对 History 对象的只读引用
location 对 Location 对象的只读引用
document 对 Document 对象的只读引用
event 对 Event 对象的只读引用
opener 返回 创建该窗口Window 对象 的引用。
就是是谁 调用的 open()
1. opener 属性非常有用,可以找到 创建该窗口 的 Window 对象,然后引用它 的属性函数

2. 只有表示 顶层窗口 的 Window 对象的 operner 属性才有效,表示 框架 的 Window 对象的 operner 属性无效

3. 新的顶层浏览器窗口 是由方法 window.open() 创建的。当调用该方法时,应把 open() 调用的返回值,即创建的 window 对象,存储在一个变量中,然后使用这个变量来 调试 新窗口。至于是谁创建了它,则记录在了新窗口的 opener 属性 中。
// 新窗口对象
myWindow=window.open('','MyName','width=200,height=100')
// 通过新窗口对象 找到 创建者对象
myWindow.opener.document.write("This is the parent window")
self 表示当前窗口的对自身的只读引用 // 比如用来检测 当前窗口 是否是 顶层窗口
if (window.top != window.self) { }
top 反回最顶层的窗口
parent 返回父窗口
length 设置 或 返回 窗口中的 框架数量
name 设置 或 返回 窗口的 名称 1. 表示的是 窗口 或 框架 的名称,只是一个标识
2. 该名称是在 open() 方法创建窗口时 指定的,或 使用一个 <frame> 标记的 name 属性 指定的。
3. 窗口的名称可以用作一个 <a> 或者 <form> 标记的 target 属性的值。以这种方式使用 target 属性声明了 超链接文档表单 提交结果应该 显示于 指定的 窗口或框架中。
window.name=name
outerWidth 窗口整体 宽度 和 Screen 对象的 screen.availWidth 是一样的
outerHeight 窗口整体 高度 和 Screen 对象的 screen.availHeight 是一样的
innerWidth 窗口的内容区 宽度 IE 不支持这些属性 // IE 替代:
document.body.clientWidth
document.body.clientHeight
// 或
document.documentElement.clientWidth
document.documentElement.clientHeight
innerHeight 窗口的内容区 高度`
screenLeft 表示 窗口左上角 在屏幕上的 x 和 y 坐标 只读整数。
Chrome、IE 和 Opera 支持。
screenTop
screenX 同上 Firefox 和 Safari 支持。
screenY
pageXOffset 滚动轴在 水平方向 滚动的 距离
pageYOffset 滚动轴在 垂直方向 滚动的 距离

方法:

方法 描述 参数 说明 示例
alert(message) 显示带有一条指定消息和一个 确认 按钮 的 警告框
confirm(message) 显示一个带有指定消息确认取消 按钮对话框 1. 如果用户点击确定按钮,则返回 true,点击取消按钮,则返回false

2. 在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JS 代码的执行,在用户作出响应之前,不会执行下一条语句。
prompt(text,defaultText) 显示需要 用户输入 的带一个 输入框,和 确认取消 按钮 的 对话框,并 获取 用户输入的 1. text:可选。指定 输入框 上方显示的文本。
2. defaultText:可选。输入框 的的 默认文本。
1. 如果用户点击确定按钮,则返回 输入的文本,点击取消按钮,则返回null

2. 同上,期间会暂停其他操作。
setTimeout(code,millisec) 在指定的 毫秒数单次 调用 函数计算表达式 1. code:必需。函数 或 JS代码串。
2. millisec:必需。在执行代码前需等待的 毫秒数
1. setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval(),或者让 code 自身再次调用 setTimeout()。

2. setTimeout()setInterval() 都会返回一个 定时器的 ID,用于后面来 取消 该定时器。
setInterval(code,millisec) 按照指定的 毫秒数周期循环 调用 函数计算表达式 同上
clearTimeout(id) 取消由 setTimeout() 方法设置的 定时器
clearInterval(id) 取消由 clearInterval() 方法设置的 定时器
window.open
(URL,name,features,replace)
新建一个窗口,或 打开一个已命名的窗口 1. URL:可选字符串。新窗口中要显示的 HTML文档 的 URL 链接。如果为 空字符串省略,那么新窗口将是一个 空白窗口。

2. name:可选字符串。可以指定新窗口的 name 名称,其中包括 数字字母下划线
也可以是 已存在窗口 的名称,这样不会创建新的窗口,将返回 已存在窗口的 window 对象,并且 features 会被忽略。
name 名称可以用作标记 <a><form> 的属性 target 的值。

3. features:可选字符串。规定了新窗口的一个由 逗号 分隔的 特征列表。如果省略,则会显示所有特征。窗口特征列表 见下一节。

4. replace:可选布尔值。指定是 新建一条历史记录 还是 替换当前的历史记录。true:替换。false:新建。
有时候为了避免代码混淆window 可以不省略

这里,window.open() 与方法 document.open(),容易造成代码混淆,所以 window 不省略。
close() 关闭由 JS 打开过 的 窗口 1. 某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

2. 只有通过 JS 代码打开的窗口才能够由 JS 代码关闭。这阻止了 恶意的脚本 终止 用户的浏览器
blur() 把 键盘焦点 从顶层窗口移开。 哪个窗口最终 获得键盘焦点 并没有指定。
focus() 把键盘焦点给予一个窗口
print() 打印当前窗口的内容 等效于用户 单击 浏览器的 打印按钮
moveBy(x,y) 窗口的相对移动 1. x:把窗口右移的像素数。
2. y:把窗口下移的像素数
moveTo(x,y) 窗口的绝对移动 (x,y)为窗口左上角的在 屏幕 新坐标 出于安全方面的原因,浏览器限制此方法使其不能把窗口移出屏幕。
resizeBy(width,height) 窗口的相对大小调整 1. width:使窗口宽度增加的像素数。可以是正、负数值。
2. height:使窗口高度增加的像素数。可以是正、负数值。
resizeTo(width,height) 窗口的绝对大小调整 1. width:窗口的 新宽度。以像素计。
2. height:窗口的 新高度。以像素计。
scrollBy(xnum,ynum) 窗口内容 相对滚动 1. xnum:向右滚动的像素数。
2. ynum:向下滚动的像素数。
scrollTo(xnum,ynum) 窗口内容 绝对滚动 1. scrollTo() 可以认为,在窗口重置后,再执行的 scrollBy() 的操作。

2. 而 scrollBy() 是在原来的基础上进行滚动的。

3.1.1 open() 方法的 features 参数的 窗口特征列表

示例:myWindow=window.open('','','width=200,height=100')

窗口特征 描述
width = pixels 窗口的文档 显示区宽度。以像素计。
height = pixels 窗口文档 显示区高度。以像素计。
left = pixels 窗口左上角的 x 坐标。以像素计。
top = pixels 窗口左上角的 y 坐标。
channelmode = yes/no/1/0 是否使用 剧院模式 显示窗口。默认为 no
fullscreen = yes/no/1/0 是否使用全屏模式显示浏览器。默认是 no。处于 全屏模式 的窗口必须同时处于 剧院模式。
resizable = yes/no/1/0 窗口是否 可调节尺寸。默认是 yes
scrollbars = yes/no/1/0 是否显示 滚动条。默认是 yes
directories = yes/no/1/0 是否添加 目录按钮。默认为 yes
location = yes/no/1/0 是否 显示 地址字段。默认是 yes
titlebar = yes/no/1/0 是否显示 标题栏。默认是 yes
menubar = yes/no/1/0 是否 显示 菜单栏。默认是 yes
toolbar = yes/no/1/0 是否显示浏览器的 工具栏。默认是 yes
status = yes/no/1/0 是否添加 状态栏。默认是 yes

3.2 Navigator 对象(常用属性 12个,常用方法 1个)

Navigator 对象 包含了 有关 浏览器信息

常用属性包括 12 个:appNameappCodeNameappVersionappMinorVersionplatformcpuClassuserAgentcookieEnabledonLinesystemLanguagebrowserLanguageuserLanguage

常用方法包括 1个:javaEnabled()

属性:

属性 描述 说明 示例
navigator.appName 返回浏览器的 名称 1. 在基于 Netscape 的浏览器中,这个属性的值是 "Netscape"
2. 在 IE 中,这个属性的值是 "Microsoft Internet Explorer"

3. 其他浏览器可以 正确地表示自己,或者 伪装 成其他的浏览器 以达到 兼容性
navigator.appCodeName 浏览器的 代码名 1. 在所有以 Netscape 代码为基础的浏览器中,它的值是 "Mozilla"
2. 为了兼容起见,在 Microsoft 的浏览器中,它的值也是 "Mozilla"
所以 目前 浏览器的 UA 都是混乱的
navigator.appVersion 返回浏览器的 平台和版本 信息 1. 该字符串的第一部分是 版本号。把该字符串传递给 parseInt() 只能获取 主版本号。该属性的其余部分提供了有关浏览器版本的 其他细节,包括运行它的 操作系统 的信息。
navigator.appMinorVersion 返回浏览器的 次要版本 常返回 undefined
navigator.platform 运行浏览器的 操作系统硬件平台 常用值,比如 "Win32""MacPPC" 以及 "Linuxi586"
navigator.cpuClass 返回浏览器系统的 CPU 等级 常返回 undefined
navigator.userAgent 返回由客户机发送服务器user-agent 头部的值,即 UA 值。 一般来讲,它是在 navigator.appCodeName 的值之后加上斜线navigator.appVersion 的值构成的。 Chrome 中百度搜索时 请求头中的 user-agent 字段:
User-Agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/76.0.3809.132
Safari/537.36
navigator.cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
navigator.onLine 返回指明系统是否处于 脱机模式 的布尔值 脱机模式就是 脱离网络的状态下
navigator.systemLanguage 返回操作系统使用的默认语言 常返回 undefined
navigator.browserLanguage 返回当前 浏览器 的语言 常返回 undefined
navigator.userLanguage 返回 设置的 操作系统的 自然语言 常返回 undefined

方法:

方法 描述 参数 说明 示例
navigator.javaEnabled() 指示浏览器是否支持并启用了 Java 从而知道浏览器是否能显示 Java 小程序。

3.2.1 Navigator 所有属性和方法 展示示例

代码:

<!DOCTYPE html>
<html>
    <head>
        <title>代码测试</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    </head>
    <body>
		<script type="application/javascript">
			document.write('<table border="1">');
			document.write('<tr><th>Navigator的属性和方法</th><th>Chrome 浏览器输出的相关信息</th></tr>');
			document.write('<tr><td>浏览器名称<br />navigator.appName</td>' + '<td>' + navigator.appName + '</td></tr>');
			document.write('<tr><td>浏览器的代码名<br />navigator.appCodeName</td>' + '<td>' + navigator.appCodeName + '</td></tr>');
			document.write('<tr><td>浏览器平台和版本<br />navigator.appVersion</td>' + '<td>' + navigator.appVersion + '</td></tr>');
			document.write('<tr><td>浏览器次要版本<br />navigator.appMinorVersion</td>' + '<td>' + navigator.appMinorVersion + '</td></tr>');
			document.write('<tr><td>操作系统<br />navigator.platform</td>' + '<td>' + navigator.platform + '</td></tr>');
			document.write('<tr><td>浏览器CPU等级<br />navigator.cpuClass</td>' + '<td>' + navigator.cpuClass + '</td></tr>');
			document.write('<tr><td>浏览器UA值<br />navigator.userAgent</td>' + '<td>' + navigator.userAgent + '</td></tr>');
			document.write('<tr><td>浏览器是否启用 cookie<br />navigator.cookieEnabled</td>' + '<td>' + navigator.cookieEnabled + '</td></tr>');
			document.write('<tr><td>浏览器是否离线<br />navigator.onLine</td>' + '<td>' + navigator.onLine + '</td></tr>');
			document.write('<tr><td>操作系统默认语言<br />navigator.systemLanguage</td>' + '<td>' + navigator.systemLanguage + '</td></tr>');
			document.write('<tr><td>浏览器语言<br />navigator.browserLanguage</td>' + '<td>' + navigator.browserLanguage + '</td></tr>');
			document.write('<tr><td>设置的系统语言<br />navigator.userLanguage</td>' + '<td>' + navigator.userLanguage + '</td></tr>');
			document.write('<tr><td>是否支持并启用了 Java<br />navigator.javaEnabled()</td>' + '<td>' + navigator.javaEnabled() + '</td></tr>');
			document.write('</table>');
        </script><tr><td>
    </body>
</html>

输出:
Navigator 所有属性和方法

3.3 Screen 对象(常用属性 12个,常用方法 0个)

Screen 对象 包含了 有关 客户端显示屏幕信息

常用属性包括:

  • 显示器和浏览器的 宽高 4个:widthheightavailWidthavailHeight
  • 颜色分辨率 相关 3个:colorDepthpixelDepthbufferDepth
  • 显示器的分辨率 4个:deviceXDPIdeviceYDPIlogicalXDPIlogicalYDPI
  • 显示器刷新率 1个:updateInterval

属性:

属性 描述 说明 示例
screen.width 显示器 屏幕 的 宽度,以像素计 可以根据 显示器的尺寸 选择使用 大图像 还是使用 小图像
screen.height 显示器 屏幕 的 高度,以像素计
screen.availWidth 浏览器整体的宽高 可以根据有关 屏幕尺寸的 信息 将新的浏览器窗口定位在屏幕中间。
screen.availHeight 浏览器整体的宽高
screen.colorDepth 目标设备调色板的比特深度,即一个像素占的 位数 如 24。
可以根据显示器的 颜色深度 选择使用 16 位色还是使用 8 位色的图形。
screen.pixelDepth 屏幕的颜色分辨率(比特每像素)。同 screen.colorDepth 如 24。
screen.bufferDepth 缓冲器上的 调色板的比特深度 常返回 undefined
screen.deviceXDPI 屏幕的每英寸 水平点数,即 水平分辨率 常返回 undefined
screen.deviceYDPI 屏幕的每英寸 垂直点数,即 垂直分辨率 常返回 undefined
screen.logicalXDPI 同上 常返回 undefined
screen.logicalYDPI 同上 常返回 undefined
screen.updateInterval 设置返回 屏幕的 刷新率 常返回 undefined

3.4 History 对象(常用属性 1个,常用方法 3个)

History 对象 包含了 用户(在浏览器窗口中)访问过URL

注意:History 对象最初设计来表示窗口浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。就是不支持直接 拿取 URL 具体列表,但是 跳转 还是可以的。

常用属性 1个:length

常用方法 3个:go(number / URL),back(),forward()

属性:

属性 描述 说明 示例
history.length 当前窗口 访问过URL数量 数量的起始点:
1. IE 6Opera 90 开始。
2. Firefox 1.51 开始。

方法:

方法 描述 参数 说明 示例
history.go(number / URL) 加载 历史列表 中的某个 具体 的页面,或 指定完整的 URL。 1. number:访问的 URL 在 历史列表 中的 相对 位置。
-1 表示 后退 1页,1 表示前进 1页。

2. URL:可以指定要访问的 具体 URL。
测试,URL 参数不支持。
history.back() 等效于 history.go(-1)
history.forward() 等效于 history.go(1)

3.5 Location 对象(常用属性 8个,常用方法 3个)

Location 对象 包含了有关 当前 URL 的信息。

常用属性 8 个:hrefprotocol,host,hostnameportpathnamesearchhash
说明:除了 href(URL 完整属性) 可以设置值 进行页面跳转,其他的 URL 局部属性 也都可以 设置,但是一般回 跳转失败

常用方法 3个:replace(newURL),assign(URL),reload(force)

一个完整的URL包括 6 部分:协议 // 主机名端口号 路径部分 查询部分 锚部分
URL 示例:https: // www.baidu.com: 8888 /s ?wd=123&rsv_spt=1 #id

属性:

属性 描述 说明 示例
location.href 设置 或 返回 完整的 URL 1. 设置完成时,页面会跳转

2. 并且 在历史记录 history 中,
替换 之前 的URL,即 跳转完成后,无法后退回之前的页面。

等效于 location.replace(newURL)
区别于 location.assign(URL),文档说其可以后退,但 实测也不能后退
https://www.baidu.com:8888/s?wd=123&rsv_spt=1#id
location.protocol 设置 或 返回 URL 的 协议 https:
location.host 设置 或 返回 URL 的 主机名称端口号 www.baidu.com:8888
location.hostname 设置 或 返回 URL 的 主机名称 www.baidu.com
location.port 设置 或 返回 URL 的 端口号 8888
location.pathname 设置 或 返回 URL 的 路径 部分 /s
location.search 设置 或 返回 URL 的 查询 部分 ?wd=123&rsv_spt=1
location.hash 设置 或 返回 URL 的 锚部分 #id

方法:

方法 描述 参数 说明 示例
location.replace(newURL) 替换当前的文档,无法后退
location.assign(URL) 跳转到新的文档,可以后退 实测也不能后退
location.reload(force) 刷新页面 force:规定刷新方式

a. 如果没有 规定参数,或者参数是 false:效果等同于 刷新 按钮。
浏览器会用 HTTP 请求头 if-modified-since (表示的是文档的最后修改时间) 来检测服务器上的文档是否已改变,是否使用 缓存

b. 如果把该方法的参数设置为 true:效果等同于按住 Shift + 刷新 按钮。
浏览器 直接向 服务器 请求新页面,不读取 缓存强制刷新

4. DOM 对象(4个)

DOM 对象包括了 4 个对象:Document 对象Element 对象Attribute 对象Event 对象

DOM 对象中,每个对象都可以看作一个 节点。包括:文档节点元素节点文本节点注释节点属性节点 等。
下面将按 节点 来归纳 DOM 对象的 技术点。

4.1 Document 对象(文档节点)(常用属性 9个, 常用方法 14个)

每个载入浏览器的 HTML 文档 都会成为 Document 对象
Document 对象 使我们可以从 脚本 中对 HTML 页面中的 所有元素 进行访问。
Document 对象Window 对象 的一部分,可通过 window.document 属性对其进行访问,window 可以省略。

常用属性 9个:documentElementheadbodytitleURLdomaincookielastModifiedreferrer

常用方法包括 14个:

  • Element 对象 的 建增删改 5个: createElement(“a”),createTextNode(string),appendChild(ele),removeChild(ele),replaceChild(ele)
  • Attribute 对象 的 建 1个: createAttribute(“class”)
  • 获取 Element 对象 5个:getElementById(id),getElementsByName(name),getElementsByTagName(tagname),querySelector(cssSelector),querySelectorAll(cssSelector)
  • 向文档中添加内容 2个:write(exp1,exp2,exp3,…),writeln(exp1,exp2,exp3,…)
  • 创建输入流,覆盖原文档 2个:open(mimetype,replace),close()

Document 对象里的集合:

集合 描述 说明
document.all[] 返回对文档中 所有 HTML 元素 的 引用 1. all[] 数组源自 IE4,并且已经被很多 其他的浏览器 所采用。
2. all[] 数组 已经被 Document 对象 的 getElementById()getElementsByName()getElementsByTagName() 等方法 所取代。但,all[] 数组 在已有的代码中仍然在使用。
3. all[] 数组 包含的元素保持了最初的顺序,使用方式如下:

document.all[index]:根据 元素下标 来获取。
document.all[name]:根据 标签的 name 属性 来获取。返回的是一个数组。
document.all.tags[tagname]:根据 标签名称 来获取。返回的是一个数组。
document.images[] 返回对文档中 所有Image 对象 的 引用 为了与 0 级 DOM 兼容,该集合不包括由 <object> 标记定义的图像。
document.links[] 返回对文档中 所有 Area 和 Link 对象 的 引用,即 链接对象
document.anchors[] 返回对文档中 所有 Anchor 对象 的 引用,即 锚对象
document.forms[] 返回对文档中 所有 Form 对象 的 引用

属性:

属性 描述 说明 示例
document.documentElement 获取 文档中的 <html> 元素
document.head 获取 文档中的 <head> 元素
document.body 获取 文档中的 <body> 元素 对于定义了框架集的文档,该属性引用最外层的 <frameset> 元素。
document.title 返回文档的 <title> 元素中的 文本
document.URL 返回文档的 URL 等同于 BOM 对象中,Location 对象的 href 属性,即 location.href

区别在于:页面发生重定向时,document.URL 保存的是 原始 URLlocation.href 保存的是 重定向后的 URL
document.domain 返回 服务器的 主机名 等同于 BOM 对象中,Location 对象的 hostname 属性,即 location.hostname
document.cookie 设置返回 与当前文档有关的所有 cookie 可以对当前文档的 cookie 进行 读取创建修改删除 操作。
该属性的行为与普通的 读 / 写 属性是不同的。
document.lastModified 返回文档最后被修改的日期和时间 该值来来源于 Web 服务器 的 响应头 last-modified,被用在 客户端的 请求头 if-modified-since 里。
document.referrer 返回页面的 跳转来源 如果页面不是通过 链接 访问的,则返回 null

方法:

方法 描述 参数 说明 示例
document.
createElement(“a”)
创建 Element 对象
document.
createTextNode(string)
创建 文本节点
document.
appendChild(ele)
追加 Element 对象
document.
removeChild(ele)
删除 Element 对象
document.
replaceChild(ele)
替换 Element 对象
document.
createAttribute(“class”)
创建 Attribute 对象
document.
getElementById(id)
返回对拥有指定 id 的对象的引用
document.
getElementsByName(name)
返回带有指定 name 名称的对象的 数组
document.
getElementsByTagName(tagname)
返回带有指定 标签名 的对象的 HTMLCollection 集合。

类似 数组,但是不能用 数组方法 操作它。
1. tagname:指的标签名,不区分大小写。
如果设置为 *,则返回文档中所有元素的列表,元素排列的顺序就是它们在 文档中的顺序
document.
querySelector(cssSelector)
返回匹配指定 CSS 选择器 的 单个对象。 document.querySelector('#text');
document.
querySelectorAll(cssSelector)
返回匹配指定 CSS 选择器 的对象的 NodeList 集合。

类似 数组,但是不能用 数组方法 操作它。
// 查找 class=“intro” 的所有 <p> 元素
document.querySelectorAll("p.intro");
document.
write(exp1,exp2,exp3,…)
向文档 <body> 标签中 追加 写入 HTML 表达式JavaScript 代码 1. 如果在 文档完全加载后 使用 document.write(),那么 会 清空文档

2. 建议 document.write() 方法仅用于测试。
document.
writeln(exp1,exp2,exp3,…)
document.write(),只是会在每个表达式后写一个换行符 在编写 <pre> 标记的内容时,该方法很有用。
document.
open(mimetype,replace)
擦除当前文档的内容,返回一个新文档 Document 对象 1. mimetype:可选。新文档的类型。默认值是 "text/html"

2. replace:可选。是否继承父文档的 历史记录 History。属性值是 replace,设置参数后,表示继承。
1. 新文档用 write() 方法或 writeln() 方法编写。

2. 必须记住用 document.close() 方法关闭文档,使其内容 显示出来
var newDoc=
document.open('text/html','replace');
var txt='<html><body>L</body></html>';
newDoc.write(txt);
newDoc.close();
document.close() 关闭一个由 document.open() 方法打开的输出流,并显示 选定的数据

4.1.1 动态创建元素的 3种 方式

动态创建元素方法 描述
document.write() 只能在 页面加载时 使用,否则会 清空文档
element.innerHTML 推荐在 页面加载时 使用,因为每次使用都会立即改变 文档树 的结构,导致页面不断重新绘制。
如果清空子元素,子元素的 事件会失效,而且会发生 内存泄漏(即该释放的内存没有释放)。

优化建议:可以借助数组 或 字符串的方式 作为添加元素的 容器,最后再一次性设置给 innerHTML 即可。
document.createElement() 可以在 任何时候 使用,不会 立即 渲染,会先在 内存 中创建,待追加的时候再开始 渲染。
且清空子元素,子元素的 事件不会失效

4.1.2 设置,获取,检测 cookie

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
} 
function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
} 

4.2 Element 对象(元素节点,文本节点,注释节点)(常用属性 37个, 常用方法 18个)

Element 对象 表示 HTML 元素。它一般通过 Document 对象 获取。
Element 对象 拥有类型为 元素节点文本节点注释节点 和它们的 子节点。比如:元素节点 的子节点 NodeList 对象。

当然,元素也可以拥有 属性,属性是 属性节点,Attributes 对象,下一节介绍。
Attributes 对象 挂载在 Element 对象的 attributes 属性上。

常用属性包括 37个:

  • 挂载对象 2个:attributesownerDocument
  • ·事件属性:略。
  • 元素属性 11个:idclassNamestyletitletagNamelangaccessKeytabIndexdircontentEditableisContentEditable
  • 元素宽高度 13个:clientWidthclientHeightoffsetWidthoffsetHeightscrollWidthscrollHeightclientLeftclientTopoffsetLeft,offsetTop,offsetParentscrollLeftscrollTop
  • 节点相关 11个:innerHTMLnodeNamenodeTypenodeValuetextContentparentNodepreviousSiblingnextSiblingchildNodesfirstChildlastChild

常用方法包括 18个:

  • 属性相关 8个:getAttribute(attributename),getAttributeNode(attributename),setAttribute(attributename,attributevalue),setAttributeNode(attributenode),removeAttribute(attributename),removeAttributeNode(attributename),hasAttribute(attributename),hasAttributes()
  • 节点相关 9个:hasChildNodes(),getElementsByTagName(tagname),appendChild(node),replaceChild(newnode,oldnode),removeChild(node),cloneNode(deep),insertBefore(node),normalize(),n1.compareDocumentPosition(n2)
  • 其他 1个:toString()

属性:

属性 描述 说明 示例
挂载对象
attributes 返回元素的 NamedNodeMap 对象 返回的是一个 Attribute 对象 的 无序集合
下一节 Attributes 对象 会介绍。
ownerDocument 返回元素 所在文档的 Document 对象
事件属性 HTML 中的各种 事件属性可以直接设置。 具体事件属性见 《HTML / HTML5 技术详解》 ele.onclick=function(e) { }
元素属性
id 设置返回 元素的 id 属性
className 设置返回 元素的 class 属性
style 设置返回 元素的 style 属性 一般常用来设置元素的 样式属性样式名 需要改变为 驼峰命名

style 偏向于设置 css 里的一些属性。注意命名和 css 的区别,JS 使用是小驼峰
setAttritube(n,v) 偏向于设置 HTML 标签的 固定属性
ele.style.fontSize = "25px";
title 设置返回 元素的 title 属性
tagName 返回 元素的 标签名 部分值 和 nodeName 节点名称 相同
lang 设置返回 元素的 语言代码
accessKey 返回元素的 快捷键 不同的 浏览器 访问快捷键 的组合方式不同,详情见 “Element accessKey 属性”
tabIndex 设置 或 返回 元素 的 tab 键控制次序
dir 设置返回 元素的 文本方向
contentEditable 设置返回 元素的 内容是否可编辑
isContentEditable 返回 元素的 内容是否可编辑
元素宽高度
clientWidth 返回元素的 可见宽度 如 内容区 的宽度:document.body.clientWidth(支持 IE)
clientHeight 同上 如 内容区 的高度:document.body.clientHeight(支持 IE)
offsetWidth 返回元素的 可见宽度包括 边框 的宽度
offsetHeight 同上
scrollWidth 返回元素的 整体宽度包括 滚动条隐藏 的距离
scrollHeight 同上
clientLeft 返回元素可见区域 到 元素外边框外侧的距离 指的就是 边框的宽度
clientTop 同上
offsetLeft 返回元素可见区域外层元素的边框 的距离 指的就是 边框的宽度 + 与外层元素边框的距离
offsetTop 同上
offsetParent 返回元素的 偏移 容器
scrollLeft 返回 滚动条 隐藏的距离 指的就是 滚动条隐藏的距离
scrollTop 同上
节点相关
innerHTML 设置返回 元素的 内容 包括 HTML标签 的 设置 和 返回。
nodeName 返回 节点 的名称 如果是 元素节点,则返回 大写标签名
如果是 属性节点,则返回 属性名
如果是 文本节点,则返回 #text
如果是 文档节点,则返回 #document
nodeType 返回 节点 的类型 如果返回 1,则表示 元素节点
如果返回 3,则表示 文本节点
其他见 “Element nodeType 属性”
nodeValue 返回 文本节点节点值 等效于 textContent

如果是 元素节点,则返回 undefined
如果是 文本节点,则返回 文本
如果是 属性节点,则返回 属性值
textContent 设置返回 节点的 文本内容,以及它的所有后代 会忽略 HTML 标签,只返回 文本
parentNode 返回元素的 父节点
previousSibling 返回上一个 相邻节点
nextSibling 返回下一个 相邻节点
childNodes 返回元素的 子节点 集合数组 NodeList
firstChild 返回元素的 首个 子节点
lastChild 返回元素的 最后一个 子节点

方法:

方法 描述 参数 说明 示例
属性相关
getAttribute(attributename) 获取元素 指定属性属性值 a.getAttribute("target")
getAttributeNode(attributename) 返回的是 指定属性Attribute 属性节点 a.getAttributeNode("target").value
setAttribute
(attributename,attributevalue)
设置元素 的属性值。比较常用。
setAttributeNode(attributenode) 设置元素 的 Attribute 属性节点 Attribute 属性节点的 创建方法:
var atr=
document.createAttribute("class");
atr.nodeValue="democlass";
removeAttribute(attributename) 从元素中 移除 指定属性
removeAttributeNode(attributename) 移除 指定 的 Attribute 属性节点,并 返回 被移除的 节点
hasAttribute(attributename) 元素是否存在 指定的 属性 返回 true:表示存在 该属性
hasAttributes() 元素是否存在 任何的 属性 返回 true:表示存在 属性
节点相关
hasChildNodes() 元素是否有 子节点
getElementsByTagName(tagname) 获取元素的 指定节点类型子节点 集合
appendChild(node) 向元素 追加 新的 子节点 node:可以是新建的节点,也可以是其他元素中的 节点。
被移动的节点,不会再出现再原来的位置。
replaceChild(newnode,oldnode) 新节点 替换某个 子节点
removeChild(node) 移除 元素的某个 指定 的 子节点
cloneNode(deep) 克隆该节点,并返回副本 deep:是否克隆所有后代。true:表示克隆 所有后代false:表示只克隆 当前节点 会克隆所有 属性 以及它们的 值。
insertBefore(node) 已有节点 之前 插入 新的节点 同样,被插入的节点,不会再出现再原来的位置。
normalize() 移除 空的 文本节点,并 连接 相邻的 文本节点
n1.compareDocumentPosition(n2) 比较两个节点的 位置关系 返回值如下:
1:不在同一文档。
2:n1 在 n2 后。
4:n1 在 n2 前。
8:n1 在 n2 内。
16:n2 在 n1 内。
32:2个节点 是同一元素的两个属性。
其它
toString() 把元素转换为 字符串

4.2.1 显示器屏幕,浏览器窗口的 宽高,坐标,距离 等 属性和方法 小结

属性:

类别 属性
显示器屏幕宽高 screen.width,screen.height
浏览器整体的宽高 outerwidth,outerheight
screen.availWidth,screen.availHeight
浏览器内容区的宽高 innerWidth,innerHeight(IE 不支持)
document.body.clientWidth,document.body.clientHeight(IE支持)
document.documentElement.clientWidth,document.documentElement.clientHeight(IE支持)
浏览器整体 左上角屏幕上的坐标 screenLeft,screenTop(Chrome、IE 和 Opera 支持)
screenX,screenY(Firefox 和 Safari 支持)
浏览器 滚动条 水平垂直 的移动 距离 pageXOffsetpageYOffset

方法:

类别 方法
移动 浏览器整体 左上角屏幕上的坐标 moveBy(x,y),moveTo(x,y)
缩放 浏览器 整体 大小 resizeBy(width,height),resizeTo(width,height)
浏览器 滚动条 水平垂直 的移动 scrollBy(xnum,ynum),scrollTo(xpos,ypos)

4.2.2 与 元素的 宽高距离 相关的 6组 Element 属性 小结

属性 描述
clientWidth / clientHeight 返回元素的 可见区域 的宽高
offsetWidth / offsetHeight 返回元素的 可见区域 的宽高 + 边框宽度
scrollWidth / scrollHeight 返回元素的 可见区域 的宽高 + 滚动条隐藏的距离
clientLeft / clientTop 返回元素的 可见区域 到 边框外侧的距离,即是 元素的边框宽度
offsetLeft / offsetTop 返回元素的 可见区域 到 外层元素边框的距离,即是 元素的边框宽度 + 与外层元素边框的距离
scrollLeft / scrollTop 返回元素的 滚动条隐藏的 距离

注意:关于 offsetLeft / offsetTop,如果 元素是 绝对定位 position,则 外层元素 就是 body。

4.2.3 innerHTML 和 textContent 属性 的区别

属性 描述
innerHTML 设置 和 获取 元素的 内容,包括 标签。用的较多。
textContent 设置 和 获取 元素的 内容,会过滤内容中的 标签,只返回文本
nodeValue textContent
innerText textContent

4.2.4 特别说明

Element 对象 的 属性 和 方法,是 HTML 元素对象 公用的
具体的,每个 HTML 元素对象 又有其特有的 属性 和 方法,这里不再归纳。
等用到时,再查阅文档即可:《HTML 对象 特有的 属性和方法》

4.3 Attribute 对象(属性节点)(常用属性 5个, 常用方法 3个)

Attribute 对象表示 元素属性节点
NamedNodeMap 对象表示 元素属性节点无序集合 数组。

注意:Element 对象,和 Attribute 对象,在功能上 会有 重叠覆盖 的地方,那种简单就使用那种。

Attribute 对象 的获取:

  1. Attribute 属性节点 通过 Element 对象的 方法 获取:element.getAttribute(attributename)
  2. Attribute 属性节点 的单独创建:
    var atr = document.createAttribute("class");
    atr.value="democlass";
    // 不能使用 节点 的属性
    // atr.nodeValue="democlass";
    
    注意:在 DOM 4 中,Attribute 属性节点 不能使用 Element 对象 中关于 Node 节点对象 的 属性 和 方法。

NamedNodeMap 对象 的获取:

NamedNodeMap 对象 通过 Element 对象的 属性 获取:element.attributes

属性和方法概要:

Attribute 对象属性包括 4个:namevalueisIdspecified

NamedNodeMap 对象属性包括 1个:length
NamedNodeMap 对象方法包括 3个:setNamedItem(node),getNamedItem(nodename),removeNamedItem(nodename)

Attribute 对象:
属性:

属性 描述 说明 示例
attr.name 返回 属性节点的 属性名
attr.value 设置返回 属性节点的 属性值 var btn=document.getElementsByTagName("BUTTON")[0];
btn.getAttributeNode('onclick').value;

等效于:
btn.getAttribute('onclick');
attr.isId 判断 属性节点 是否 是 id 类型
attr.specified 判断 属性节点 是否 指定属性值

NamedNodeMap 对象:
属性:

属性 描述 说明 示例
nodemap.length 返回 NamedNodeMap 中的 属性节点 总数

方法:

方法 描述 参数 说明 示例
nodemap.setNamedItem(node) 添加 属性节点 node:Attribute 属性节点。 var btn=document.getElementsByTagName("h1")[0];
var typ=document.createAttribute("class");
typ.nodeValue="democlass";
btn.attributes.setNamedItem(typ);
nodemap.getNamedItem(nodename) 返回 具有指定属性名属性节点 var btn=document.getElementsByTagName("BUTTON")[0];
btn.attributes.getNamedItem("onclick").textContent;
nodemap.removeNamedItem(nodename) 移除 具有指定属性名属性节点

4.4 Event 对象(常用属性 26个, 常用方法 3个)

Event 事件对象:在事件触发时,相关属性和方法都保存在 当前的 Event 对象 中。
我们可以在 触发函数 中,使用 事件对象 的属性和方法。
使用方式: window.eventevent
创建方式:Document.createEvent(),然后进行初始化 event.initEvent()

Event 对象 的常用属性包括 26个:

  • 鼠标 / 键盘属性 10个:clientXclientYpageXpageYscreenXscreenYctrlKeyshiftKeyaltKeyrelatedTarget
  • IE 特有属性 9个:xyoffsetXoffsetYkeyCodesrcElementreturnValuefromElementtoElement
  • 2级 DOM 事件 属性 7个:typebubbleseventPhasecancelabletargetcurrentTargettimeStamp

Event 对象 的常用属性包括 3个:

  • 2级 DOM 事件 方法:event.preventDefault(),stopPropagation(),initEvent(eventType,canBubble,cancelable)

鼠标 / 键盘属性 属性:

属性 描述 说明 示例
event.clientX 鼠标 指针 在浏览器 内容页面水平坐标,随 页面滚动 而改变。 1. 2级 DOM事件 不支持。
event.clientY 鼠标 指针 在浏览器 内容页面垂直坐标
event.pageX 鼠标 指针 在浏览器 整个页面水平坐标,不随 页面滚动 而改变。
event.pageY 鼠标 指针 在浏览器 整个页面垂直坐标
event.screenX 鼠标 指针屏幕水平坐标
event.screenY 鼠标 指针屏幕垂直坐标
event.button 哪个鼠标 按键 被点击了 返回值:
0:左键。
1:中键。
2:右键。

IE 中特别的:
1:左键。
4:中键。
2:右键。
event.ctrlKey Ctrl 键 是否被 按下保持 住了 返回值:
1:按下了。
0:没按下。
event.shiftKey Shift 键 是否被 按下保持 住了 返回值:
1:按下了。
0:没按下。
event.altKey Alt 键 是否被 按下保持 住了 返回值:
1:按下了。
0:没按下。
event.relatedTarget 返回与 触发事件的节点 相关的 其他节点 返回值:
1. 该属性只对 事件 mouseovermouseout 有用。
2. 对于 mouseover:返回 移动到 新节点 之前的 旧节点
2. 对于 mouseout:返回 移出 到的 新节点

IE 特有 属性:

属性 描述 说明 示例
event.x 鼠标 指针 在浏览器 内容页面水平坐标,随 页面滚动 而改变。 等效于 event.clientX
event.y 鼠标 指针 在浏览器 内容页面垂直坐标 等效于 e.clientY
event.offsetX 鼠标 指针 在浏览器 整个页面水平坐标,不随 页面滚动 而改变。 等效于 event.pageX
event.offsetY 鼠标 指针 在浏览器 整个页面垂直坐标 等效于 event.pageY
event.keyCode 返回键盘 被按下的 按键Unicode 字符码
event.srcElement 返回 触发事件 的 Window 对象Document 对象Element 对象 的引用
event.returnValue 如果设置了该属性,它的 比事件句柄的返回值 优先级高。把这个属性设置为 fasle,可以 取消 发生事件的源元素的 默认动作
event.fromElement 返回 移动到 新节点 之前的 旧节点
等效于 e.relatedTarget
该属性只对 事件 mouseover 有用。
event.toElement 返回 移出 到的 新节点
等效于 e.relatedTarget
该属性只对 事件 mouseout 有用。

2级 DOM 事件 属性:就是指用 监听器 的方法绑定的 事件

属性 描述 说明 示例
event.type
IE 不支持。
返回发生的 事件的类型 返回值:它与 注册的事件 句柄同名,或是 事件句柄 属性 删除前缀 "on"
比如 "submit""load""click" 等。
event.bubbles
IE 不支持。
返回事件是否是 起泡类型
event.eventPhase 返回 当前事件 所处于的 传播阶段 返回值:
1:表示常量 Event.CAPTURING_PHASE,捕获阶段。
2:表示常量 Event.AT_TARGET,正常事件派发 阶段。
3:表示常量 Event.BUBBLING_PHASE,起泡阶段。
event.cancelable
IE 不支持。
事件 是否拥有 可取消默认动作 的能力 从而判断是否 能使用 默认事件取消函数event.preventDefault()
event.target
IE 不支持。
返回 事件 的 目标节点
event.currentTarget 返回事件 当时 所处的节点 不同 事件阶段 的 当前节点 可能不同。
event.timeStamp
IE 不支持。
返回 事件 生成的 时间戳 计时的 起点 是 客户端启动的 时间。而且 并非所有系统都提供该信息。

2级 DOM 事件 方法:

方法 描述 参数 说明 示例
event.preventDefault() 通知 Web 浏览器 不要执行事件 关联的 默认动作 关于 元素对象的各种默认动作,用到再了解。
event.stopPropagation() 阻止事件 传播其他节点
event.initEvent(eventType,canBubble,cancelable) 只能 初始化 手动创建的 Event 对象 1. eventType:事件的类型。
2. canBubble:事件是否起泡。
3. cancelable:事件是否 能用 preventDefault() 方法取消事件。

4.4.1 事件监听器

事件监听器:为 指定元素 指定 事件处理程序

好处:

  • addEventListener() 方法为 元素 附加事件处理程序 而 不会覆盖 已有的事件处理程序。
    如,给一个元素 同时 添加 2个 "click" 事件
  • 能够向任何 DOM 对象 添加事件处理程序,而非仅仅 HTML 元素。
    如,window 对象。
  • 使用 removeEventListener() 方法 轻松地 删除 事件监听器。
  • 使 HTML 标记 与 JS 分隔,达到更佳的 可读性
  • 更容易控制 事件 如何对 冒泡 作出反应。

注意:IE8Opera6.0 及更早版本不支持 addEventListener()removeEventListener() 方法。可以使用 attachEvent(event, function)detachEvent(event, function) 代替,event 参数值是带 on 的。

兼容示例:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 针对主流浏览器,除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 针对 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
} 

方法:

方法 描述 参数
element.addEventListener(event, function, useCapture) 给元素 添加 事件监听器 1. event:事件的类型,如 “click”,记得去掉 前缀 on
2. function:事件发生时需要 调用的函数

3. useCapture:可选。指定使用 事件冒泡 还是 事件捕获
默认为 false,表示采用 事件冒泡,即 内层 元素事件先触发。
设置为 true 时,表示采用 事件捕获,即 外层 元素事件先触发。
element.removeEventListener(event, function) 移除 元素指定的事件监听器 同上,function 参数 不能省略。

示例:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

4.4.2 关于 0级 DOM 事件,2级 DOM 事件

4.4.2.1 区别
  • 0级 DOM 事件 绑定:通过 给 Element 对象的 事件属性 绑定 触发函数。二次绑定会 覆盖。
    示例:

    box.onclick = function () {
        console.log(1); // 不输出
    }
    box.onclick = function () {
        console.log(2); // 输出
    }
    
  • 2级 DOM 事件 绑定:通过 事件监听器 addEventListener() 实现的。二次绑定不 覆盖。监听器里的 事件名称 没有前缀 on。
    示例:

    box.addEventListener('click', function () {
        console.log(1); // 输出
    }, false);
    box.addEventListener('click', function () {
        console.log(2); // 输出
    }, false);
    
4.4.2.2 事件冒泡:在 2级 DOM 事件中,事件传播 的三个阶段
  • 第一,捕获阶段。事件从 Document 对象 沿着文档树 向下传递目标节点。如果目标的任何一个 先辈 专门注册了捕获事件句柄,那么在事件传播过程 结束后运行这些句柄。
  • 第二,正常事件派发 阶段。发生在 目标节点 自身。直接注册在目标上的适合的事件句柄 将直接运行。这与 0级事件模型提供的事件处理方法相似。
  • 第三,起泡阶段。在此阶段,事件将从 目标元素 向上传播 起泡回 Document 对象 的文档层次。起泡过程中,之前 先辈 的注册的事件 会 依次执行

事件冒泡 的作用:即 可以完成 事件委托。即可以把 子元素 要触发的事件 绑定到 父元素 的身上,最后起泡阶段 父元素 会执行。

5. JS 基础知识 补充

5.1 JS 显示数据的 4 种方式

  • 使用 document.write() 写入 HTML 页面
  • 使用 element.innerHTML() 写入 HTML 元素
  • 使用 window.alert() 写入警告框
  • 使用 console.log() 写入 浏览器 控制台

5.2 JS 注释

  • 单行注释:双斜杠 // 之后。使用单行注释最为常见
  • 多行注释/**/ 之间。常用于 官方声明

5.3 JS 标识符

JS 标识符 用于命名 变量关键字函数 等。
规则就 1条:

  • 首字符 必须是 字母下划线(-)或 美元符号($)。

数值 不可以作为 首字符 的原因:让 JS 能轻松区分 标识符数值

5.3.1 JS 变量命名规则

  • 名称可包含 字母数字下划线美元符号
  • 名称必须以 字母 开头。
    名称也可以 $_ 开头(不建议)。
  • 关键字 无法用作变量名称
  • 大小写 敏感。
  • 一般为 小驼峰命名

5.4 JS 关键字

vartypeofinstanceofthisbreakcontinuefunctiondelete 等。

5.4.1 typeof,instanceof,this,delete 等关键字 的说明

关键字 描述 说明 示例
typeof 用来确定 JS 变量的类型 1. 返回值是 对象的类型 小写字符串。
2. null数组对象 返回的都是 object
3. 函数 返回 function
type of arr
instanceof 用来确定 JS 变量的类型 1. 返回值是 布尔值。 arr instanceof Array
this 1. 单独使用,this 表示 全局对象。在浏览器窗口中,全局对象是 [object Window]
2. 在函数中,this 表示 全局对象。但在严格模式中,表示 undefined
3. 在对象中,this 表示 对象本身 的引用。
4. 在 事件 中,this 指的是 接收事件元素
delete 删除对象 属性的值属性本身 delete 操作符被设计用于 对象 属性,它对 变量函数 没有影响。

5.5 JS 运算符

运算符 描述
+-***(幂运算,ES7 支持),/%++-- 算数 运算符
=+=-+*=/=%= 赋值 运算符,字符串 运算符,级联 运算符
><>=<======!=!==? : 比较 运算符
&&||! 逻辑 运算符
&|~^<<>>(保留符号位 右移),>>>(0 填充右移) 位 运算符
typeofinstanceof 类型 运算符

注意:

  • >< 等两侧如果是 字符串,则比较的是 第1个字符 在 ASCII 表中顺序。
  • 两个不同的 JS 对象 不能进行比较,无论是 ==,还是 ===,始终返回 false

示例:

var x = "Bill";             
var y = new String("Bill");
// (x == y) 为 true,因为 x 和 y 的值相等
// (x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)

var x = new String("Bill");             
var y = new String("Bill");
// (x == y) 为 false,因为 x 和 y 是不同的对象
// (x === y) 为 false,因为 x 和 y 是不同的对象

5.5.1 运算符的优先级

从高到低:

  1. ()
  2. 一元运算符 ++--
  3. 算数运算符 先 */%,后 +-
  4. 关系运算符 <><=>=
  5. 相等运算符 ==!====!==
  6. 逻辑运算符 &&||
  7. 赋值运算符

5.5.2 位运算

JS 将数字存储为 64 位浮点数,但所有 按位运算 都以 32 位 二进制数执行。
步骤:

  • 在执行位运算之前,JS 将数字转换为 32 位 有符号整数。
  • 执行 按位操作 后,结果将转换回 64 位 JS 数。

示例:~5 = - 6

在Java中,有符号整数 是用 补码 来表示,而 补码 = 反码 + 1

00000000000000000000000000000101 (5)
11111111111111111111111111111010 (~5)
1000 0000 0000 0000 0000 0000 0000 0101(反码)
1000 0000 0000 0000 0000 0000 0000 0110(补码,-6)

5.6 JS 条件,循环语句

  • if () {} else {}
  • switch:内部使用的是 ===,严格比较。
    switch(表达式) {
     case n:
        代码块
        break;
     case n1:
     case n2:
        代码块
        break;
     default:
        默认代码块
    } 
    
  • for
    for (i = 0; i < cars.length; i++) { 
        text += cars[i] + "<br>";
     }
    
  • for in
    for (x in person) {
        text += person[x];
    }
    
  • while
    while (i < 10) {
        text += "数字是 " + i;
        i++;
    }
    
  • do while
    do {
        text += "The number is " + i;
        i++;
     } while (i < 10);
    

5.6.1 continue 和 break 的区别

  • continue:指的是,停止循环 中的 当前迭代,继续下一个迭代。

  • break:指的是,停止 整个循环

    break 还可以用于 跳出代码块

    var  cars = ["BMW", "Volvo", "Saab", "Ford"];
    list: {
        text += cars[0] + "<br>"; 
        text += cars[1] + "<br>"; 
        text += cars[2] + "<br>"; 
        break list;
        text += cars[3] + "<br>"; 
        text += cars[4] + "<br>"; 
        text += cars[5] + "<br>"; 
    }
    

5.7 JS 值类型

JS 值类型 分为 2 种:字面量变量(引用)。

  • 字面量:包括 数值字符串 等。
  • 变量:用于存储 字面量
    • 变量声明:var x;
    • 变量赋值:x = 7;

注意:JS 拥有 动态类型,即 相同的变量,可被赋予 不同类型的 值。

5.8 JS 数据类型

JS 数据类型 是对 JS 值类型 进行的 分类。
JS 值类型 包括 数值字符串数组 等,然后对 它们进行分类,得 基本数据类型(占8字节) 和 引用数据类型,并赋予一些属性和方法。

JS 对 数据类型 封装了专门的工具类,包括 NumberStringBooleanArray 等,需要注意的几点是:

  • 封装类对象对应字面量/引用 之间是支持 自动拆装箱 的,包括 NumberStringBooleanRegExp 等。
  • 在创建一个 字面量/引用 时,如果业务不复杂,应该优先 直接创建,而不是通过 封装类 来创建, 因为 new 关键词只会增加代码的 复杂性,并降低 执行速度。

JS 数据类型包括:

  • 基本数据类型 5个:NumberStringBooleanundefinednull
  • 引用数据类型 2个:ArrayObject
数据类型 描述 说明
基本数据类型
Number 类型 JS 唯一数值 类型。 1. 进制:二进制,八进制(0开头),十进制,十六进制(0x开头)
注意:八进制中如果有数位超过了 7,则前导 0 会被忽略,后面的数值会以 十进制 解析。

2. 范围:
最小值:Number.MIN_VALUE
最大值:Number.MAX_VALUE
无穷小:-Infinity(如:-2 / 0)
无穷大:Infinity(如 2 / 0)

3. 浮点数:JS 里的数值是采用 IEEE 754 标准64 位双精度 浮点数。该规范定义了 浮点数 的格式。
对于64位的浮点数在内存中的表示,最高的 1 位是 符号位,接着的 11 位是 指数,剩下的 52 位为 有效数字
一般采用 指数计数法 表示。
浮点值的运算往往是不准确的

4. 判断:
非数字属性:NaN
判断方法:isNaN(num)
String 类型 字符串 的类型 1. 一般习惯用 单引号 包括起来。
2. 转义字符:
\':‘
\":"
\\:\

\r:回车
\n:换行‘
\t:水平制表符
\v:垂直制表符
\b:退格键
\f:换页
\dd:八进制对应的 字符
\xdd:十六进制对应的 字符
\udddd:Unicode码 对应的 字符

3 .长代码行中,如果字符串想换行继续书写,可以在结尾使用\表示换行。
但是最安全的做法是,使用 + 把字符串分开。
Boolean 类型 布尔值 的类型 1. 布尔值 包括2个值:true,false。

2. 布尔值 经常用在 条件测试 中。
undefined 类型 undefined 的类型 1. 在 JS 中,没有值 的变量,其值是 undefined。
2. 任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined
null 无值 的 值类型 1. 在 JS 中 typeof null 返回 object
2. 任何变量均可通过设置值为 null 进行清空。但是其类型是 object
3. undefined == nulltrue
undefined === nullfalse
"" 空值 的 值类型 1. 空 的 字符串变量,既有 也有 类型
引用数据类型
Arrey 类型 特殊 对象类型 1. 数组 是一种 特殊类型的 对象,具有数字索引。在 JS 中 typeof arr 返回 object
为了区分 数组和对象,在 ES5 中,提供了 arr.isArray() 方法。也可以自实现 isArray(),其原理:
return x.constructor == Array;
还可以使用 arr instanceof Array 来判断。

2. 数组用 方括号 书写,项目 由 逗号 分隔。

3. 可以在 相同数组 中存放 不同类型 的变量,包括 函数 等。

4. 请不要在 最后一个元素 之后写 逗号,可能存在跨浏览器兼容性问题。

5. 数组对象 的区别:数组使用 数字索引,对象使用 命名索引
Object 类型 对象类型 1. 对象用 花括号 来书写,项目是 键值对 形式,项目 由 逗号 分隔。

2. 不论是 数组 还是 对象类型,里面都可以存放 不同类型 的变量,包括 函数 等。

5.8.1 数据类型转换

2 个转换方法:

  • JS 内置的 5个全局 类型转换 方法:Number()String()Boolean()parseInt(string, radix),parseFloat(string)。
  • JS 自转换。

JS 所有数据类型 及 对应的 typeof 值:

数据类型 typeof 返回值
数字 number
NaN number
字符串 string
布尔 boolean
函数 function
undefined undefined
null object
日期 object
数组 object
对象 object
5.8.1.1 转换方法 的使用
转换类型 方法
字符串->数值 Number(s),parseInt(string, radix),parseFloat(string)
布尔值->数值 Number(b)
日期->数值(时间戳) Number(new Date()),new Date().getTime()
数值->字符串 String(num),num.toFixed(num),num.toExponential(num),num.toPrecision(num),num.toString(radix)
布尔值->字符串 String(b),true.toString()
日期->字符串 String(new Date()),Date 对象的各种方法:toString(),toDateString(),toTimeString(),getFullYear(),
getMonth(),getDate()(月中的某一天),getDay()(一周中的某一天),getHours(),getMinutes(),getSeconds(),getMilliseconds()
数值->布尔值 Boolean(num):0-0 为 false,其他 为 true。
字符串->布尔值 Boolean(s):"" 为 false,其他 为 true。
全局属性->布尔值 Boolean(o):NaNundefinednull 为 false,Infinity 为 true。
5.8.1.2 自动类型转换 和 自动字符串转换
  • 自动类型转换:当尝试操作一种 “错误” 的数据类型时,JS 会试图将 该值 转换为 “正确” 的类型。

    5 + null    // 返回 5         因为 null 被转换为 0
    "5" + null  // 返回 "5null"   因为 null 被转换为  "null"
    "5" + 2     // 返回 52        因为 2 被转换为 "2"
    "5" - 2     // 返回 3         因为 "5" 被转换为 5
    "5" * "2"   // 返回 10        因为 "5" 和 "2" 被转换为 5 和 2
    
  • 自动字符串转换:当试图 输出 数值布尔值,或 对象 时,会自动调用 toString() 方法。

    document.getElementById("demo").innerHTML = myVar;
    
    // 如果 myVar = 123             // toString 转换为 "123"
    // 如果 myVar = true            // toString 转换为 "true"
    // 如果 myVar = new Date()      // toString 转换为 "Thu Apr 02 2020 05:21:57 GMT+0800 (中国标准时间)"
    // 如果 myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
    // 如果 myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
    

5.9 JS 函数

JS 函数是被设计为 执行 特定任务的 代码块 { }
JS 函数通过 function 关键词进行定义,其后是函数名和括号 ()
函数名 命名和 变量 命名一致。括号 () 里的 参数由 逗号 分隔。

function functionName(parameters) {
  // 要执行的代码
}

需要注意的几点:

  • 在 HTML 中,默认全局对象是 HTML 页面本身
    在 浏览器 中,HTML 页面 就是浏览器窗口,所有的函数都是 窗口函数
    即,myFunction()window.myFunction() 是同一个函数。
  • JS 声明提升 适用于 变量声明函数声明
  • 分号 ; 用于分隔可执行的 JS 语句。由于 函数声明 不是可执行的语句,以 分号 结尾并 不常见
  • 匿名函数 表达式可以在 变量 中存储。此 变量 可 用作函数。匿名函数 使用 分号 结尾,是因为 它是可执行语句的一部分。
    var x = function (a, b) {return a * b};
    var z = x(4, 3);
    
  • JS 中的 typeof 运算符会为 函数 返回 "function"
  • JS 函数都有 属性方法,所以最好是把 JS 函数描述为 对象
    • 属性,如:(内置对象 arguments)arguments.length:会返回 函数被调用时 收到的 参数数目
    • 方法,如:toString():以 字符串 返回 函数的 整体代码。
      function myFunction(a, b) {
      	return arguments.length;
      }
      
      var txt = myFunction.toString();
      
  • 匿名函数 如果是在对象的属性里,则被称为 对象的方法
  • 创建新对象 而设计的函数,就是所说的 构造函数
    函数 的 构造器
    • JS内建 函数构造器 是用来 创建函数的,只能用来执行 函数。
    • 自定义的 函数构造器 是用来 创建函数对象的,是用来调用 函数对象 的 属性方法
      构造器一般使用大写字符开头。
    // 使用 JS 自带的 函数构造器,同时 创建函数
    var myFunction = new Function("a", "b", "return a * b");
    // 执行函数
    var x = myFunction(4, 3);
    
    
    
    // 也可以自定义 函数构造器
    function MyFunction(arg1, arg2) {
     	this.firstName = arg1;
     	this.lastName  = arg2;
    }
    // 然后,创建函数对象
    var x = new MyFunction("Bill", "Gates");
    
    // 调用函数对象 的 属性
    x.firstName;  // 会返回 "Bill"
    

5.9.1 函数参数

JS 不会对 函数的参数 进行 任何检查,包括:

  • 不会为参数(parameter)规定数据类型。
  • 不会对所传递的参数(argument)实行类型检查。
  • 不会检查所接收参数(argument)的数量。

parameter 是指 函数定义 中列出的 名称,即 形参
argument 是指 传递到 函 数或 由函数接收到 的 真实值,即 实参

需要注意的是:

  • 函数调用时,如果省略了 实参 argument(或 少于 形参 parameter 的数量),则 未被赋值的 形参 会被设置为 undefined
  • 函数调用时 传递的 实参 argument,如果是:
    • 字面量 的数据类型,则都属于 值传递。包括:数值,字符串,布尔值
    • 引用类型 的数据类型,则都属于 引用传递。包括:函数,数组,对象
  • 如果是 值传递,则 函数内部 形参的改变,不会影响 外部传进的 实参
    如果是 引用传递,则 函数内部 形参的改变,也就是 实参 的改变,它们是同一个 引用
5.9.1.1 函数内置对象 arguments

函数内置对象 arguments,是包含 函数调用时 使用的 参数数组

arguments 有一个属性 callee,表示当前正在执行的函数的 引用。如 arguments.callee(),表示 自调用。

示例:寻找 数字列表 中的最高值

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i;
    var max = -Infinity;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

5.9.2 函数调用

函数调用的 3 种方式:

  • 当页面事件发生时,调用函数执行。
  • 在 JS 代码 中 调用函数(包括 函数形式 调用,和 对象属性 形式调用)。
  • 自执行匿名函数。

注意:

  • 当在 JS 中以 函数形式 调用函数时:
    • 直接使用 函数名,如 toCelsius,表示的是函数本身的 引用,并没有调用函数。不过可以作为 一些方法的 参数,由方法去 执行。
    • 使用 函数名 和 括号 (),如 toCelsius(),则表示的是 函数结果,会 调用并执行 函数。
  • 匿名函数 可以作为 对象中属性的值,然后可以调用 对象的属性 来执行函数。
    var myObject = {
     	firstName:"Bill",
     	lastName: "Gates",
     	fullName: function () {
         	return this;
    	}
    }
    myObject.fullName();  // 将返回 [object Object]
    
  • 在 JS 函数中声明的 变量,会成为函数的 局部变量。局部变量只能在 函数内 访问。
5.9.2.1 自执行匿名函数

自执行匿名函数,里面的代码会在加载时自动执行。外侧的 () 是为了 防止歧义 加上的。

(function () { /* code */ } ()); 

5.9.3 ES6 箭头函数

箭头函数:允许使用 简短的语法 来编写 函数表达式。IE11 及 更早版本 不支持。
不需要 function 关键字、return 关键字 和 花括号

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

需要注意的是:

  • 箭头函数 没有 自己的 this。它们 不适合 定义 对象方法
  • 箭头函数 未被 JS 提升。它们必须在 使用前 进行 定义
  • 使用 const 比使用 var 更安全,因为 函数表达式 始终是 常量值
  • 如果函数是单个语句,则可以省略 return 关键字和 大括号。但是,保留它们 可能是一个 好习惯
    const x = (x, y) => { return x * y };
    

5.9.4 换绑 this 的方法,bind(),call(),apply()

bind(),call(),apply() 都是 预定义的 JS 方法,可以在 任何对象的函数 上使用,改变它们函数的 this 指向,构成 新函数
并可以 选择 给 新函数 提供 参数值

方法 描述 返回值
bind(newThis,args…) 改变 对象的函数 的 this 指向,可以 以列表方式 提供参数。不执行函数 返回 新函数
call(newThis,args…) 改变 对象的函数 的 this 指向,可以 以列表方式 提供参数。最后执行函数
apply(newThis,args[ ]) 改变 对象的函数 的 this 指向,可以 以数组方式 提供参数。最后执行函数

示例:

// call()
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");


// apply()
Math.max.apply(null, [1,2,3]);

5.9.5 JS 闭包

JS 闭包目的:让函数拥有 私有变量,且这个 私有变量 不会因为 函数重复 执行而被 重置,且函数外部无法 直接访问 它。
闭包 标准定义:指的是有权访问 父作用域,即使在 父函数 关闭 之后。

JS 闭包实现:通过 自执行匿名函数嵌套函数 来实现。

所有函数都有权访问 全局作用域。原因是,在 JS 中,所有函数 都有权 访问 它们 “上面” 的作用域。
JS 支持 嵌套函数,在嵌套函数中,内部函数 可以访问 父函数 的作用域。

示例代码:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
}());

add();
add();
add(); // 返回 3

5.10 JS 对象

对象也是 变量,但是对象能够包含 很多值

所有 JavaScript 值,除了 原始值,都是对象。

  • 数字 是对象(如果用 new 关键词定义)
  • 字符串 是对象(如果用 new 关键词定义)
  • 布尔 是对象(如果用 new 关键词定义)
  • 日期 永远都是对象
  • 正则表达式 永远都是对象
  • 数组 永远都是对象
  • 函数 永远都是对象
  • 对象 永远都是对象

3 种 对象的 创建方法
注意:通过 构造器 创建的 对象,是无法自己添加 新属性新方法的,需要通过 对象的原型属性 prototype 来添加。

// 使用 对象字面量 创建
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};


// 使用 内建构造器 创建
var person = new Object();
person.firstName = "Bill";


// 自定义构造器 创建
function Person(first, last, age, eyecolor) {
   this.firstName = first;
   this.lastName = last;
   this.age = age;
   this.eyeColor = eyecolor;
   this.name = function() {return this.firstName + " " + this.lastName;};
}
var myFriend = new Person("Bill", "Gates", 62, "blue");

5.10.1 ES5,对象属性访问器 Setter 和 Getter

通过定义 对象属性访问器方法,实现直接 设置获取 新属性 的 功能。
好处:可以确保更好的 数据质量。因为在 访问器 方法里可以进行 数据操作,来决定怎样 设置返回 属性值。

示例:

var person = {
  firstName: "Bill",
  lastName: "Gates",
  language: "NO",
  get lang() {
    return this.language.toUpperCase();  // 操作数据
  },
  set lang(value) {
    this.language = value;
  }
};

// 设置 lang 属性:
person.lang = "en";

// 获取 lang 属性:
document.getElementById("demo").innerHTML = person.lang;

5.10.2 JS 对象原型 prototype

在 JS 中描述一个类型是用 构造函数 来描述的,在 Java 中描述一个类型是用 来描述的。
所有 JS 对象 都从 上级原型 那里继承 属性方法,一直继承到 Object 构造函数原型对象,形成 原型链

构造函数 上有 原型对象 prototype,通过它可以在 原型上 添加 属性方法
原型对象 prototype 上有个 constructor 属性,是一个 指向 构造函数 的引用,可以被修改。

特别的:对象上 也有一个 constructor 属性,和 prototype 同级,常用来 辨别 对象的类型

var test=new Boolean();
if (test.constructor==Array) {
	document.write("This is an Array");
}

相关属性:

属性 描述 说明 示例
object.constructor 指向对象的 构造函数
object.prototype 构造函数 上挂载 自添加的 属性 和 方法 object.prototype.name=value
object.prototype.constructor 指向对象的 构造函数,可以被修改 如果重置 prototype 时,记得给 constructor 赋值。

示例:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

function Student() {
  this.nationality = "English";
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

// 单个添加
Person.prototype.nationality = "English";
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

// 同时添加
Person.prototype = new Student();
// 记得改回 constructor 属性
Person.prototype.constructor = Person;
5.10.2.1 组合继承(借用构造函数 + 原型继承)

使用 构造函数(改变 this) 来实现 属性继承和设置,使用 原型继承 来实现 方法继承

// 实现 Student 继承 Person 的 属性 和 方法

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.sayHi = function () {
  	console.log(this.name);
  }
}

function Student(name, age, sex, score) {
  // 借用 构造函数,实现属性的 继承 和 设置
  Person.call(this, name, age, sex);  

  this.score = score;
}

// 使用原型继承,来继承 父类型 的方法
Student.prototype = new Person(); 
// 记得改回 constructor 属性
Student.prototype.constructor = Student;


var stu = new Student(100, 'zs', 18, '男'); 
stu.sayHi();

5.11 JS JSON

JSON:JavaScript Object NotationJS 对象标记法。是一种 存储传输数据 的格式。
JSON 是通过 JS对象标记法 书写的 纯文本。读取和生成 JSON 数据的代码可以在 任何编程语言 编写。
JSON 让 JS 对象存储为文本成为可能。

语法规则:键值对 格式,JSON 中只能 双引号

{
	"firstName":"Bill",
	"employees":[
   		{"firstName":"Bill", "lastName":"Gates"}, 
   		{"firstName":"Steve", "lastName":"Jobs"},
  		{"firstName":"Alan", "lastName":"Turing"}
	]
}

需要注意的是:

  • JSON 文件的 文件类型".json"
  • JSON 文本的 MIME 类型"application/json"
  • for-in 循环 JSON 对象时,请使用 括号标记法 来访问 属性值
    myObj =  { "name":"Bill Gates", "age":62, "car":null };
    for (x in myObj) {
    	document.getElementById("demo").innerHTML  += myObj[x];
    }
    
  • 使用 delete 关键词来删除 JSON 对象的属性:delete myObj.cars.car1;

5.11.1 JSON 和 XML

用到 XML 在归纳。

5.11.2 JSON 和 字符串 互转

  • 从服务器获取到 JSON 格式的 字符串 jsonText:
    需要在 JS 中将 jsonText 转换为 JSON 对象json 使用:var json = JSON.parse(jsonText);
  • 发送给服务器的数据必需是 JSON 格式的 字符串 形式 jsonText:
    需要在 JS 中将准备好的 JSON 对象json 转换为 jsonTextvar jsonText= JSON.stringify(json);

需要注意的是:

  • JSON.parse(jsonText) 中不允许 日期对象,请写成字符串格式,然后再转换即可。
    或者使用 parse(jsonText,function (key, value) { }),第二个参数是函数,在返回 之前,它会检查每个属性。
    var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
    var obj = JSON.parse(text, function (key, value) {
     	if  (key == "birth") {
         	return new Date(value);
     	} else {
          	return value;
    	}});
    
    document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
    
  • JSON.stringify(json) 会把 日期对象 转化为 GTM格式字符串

5.11.3 PHP 解析 JSON

PHP 提供 处理JSON内建函数
通过使用 PHP 函数 json_encode(json / array),PHP 中的 对象数组 可转换为 jsonText。
通过使用 PHP 函数 json_decode(jsonText),将接收到的 jsonText 可转换为 对象数组

5.11.4 JSONP

JSONP 是一种无需考虑 跨域问题 即可传送 JSON 数据 的方法。
JSONP 不使用 XMLHttpRequest 对象,使用 <script> 标签取而代之。
原理:由于跨域政策,从另一个域请求文件会引起问题,但从另一个域 请求 外部脚本 没有这个问题。

可以静态 或 动态 创建 <script> 标签,发送请求到后台后,后台会返回一个 函数调用,并把回传的数据放在 参数里
只要 JS 中创建了 这个函数,就可以拿到 JSON 数据。
至于不知道 返回的 函数调用函数名,服务器是支持在 请求中 带上一个 函数名 作为参数的。

5.12 JS 异常

发生异常时,JS 会创建并抛出一个 Error 对象,它包含 2 个属性,namemessage

name 属性的值有 6 个:

错误名 描述
EvalError 已在 eval() 全局函数 中发生的错误(新版本JS中,由SyntaxError代替)
URIError encodeURI() 全局函数 中已发生的错误
SyntaxError 已发生 语法错误
RangeError 已发生超出 数字范围 的错误
ReferenceError 已发生 非法引用
TypeError 已发生 类型错误

捕捉异常:

try {
     // 供测试的代码块
}
 catch(err) {
     // 处理错误的代码块
} finally {
     // 无论 try / catch 结果如何都执行的代码块
}

抛出异常:

throw "Too big";    // 抛出文本
throw 500;          //抛出数字

5.13 JS 作用域

JS 作用域 分为 全局作用域函数作用域ES5 新增的 块作用域(即由 letconst 声明的 变量 和 常量)。
在 HTML 中,全局作用域是 window,所有 全局变量 均属于 window 对象。(但通过 let 关键词定义的 全局变量 不属于 window 对象)

注意点 :

  1. 自动全局:为 尚未声明 的变量赋值,此变量会 自动声明 并成为 全局变量。即使这个 变量 在 函数内部
    不过,在 严格模式 中不会 自动 创建 全局变量。且所有现代浏览器都 支持严格模式 运行 JS。
    myFunction();
    
    // 此处的代码能够使用 carName 变量
    
    function myFunction() {
        carName = "porsche";
    }
    

5.14 JS 声明提升

JS 声明提升 Hoisting:是将 所有声明 提升到 当前作用域 顶部 的 默认行为(提升到 当前脚本当前函数 的顶部)。
所以,在 JS 中,可以在 使用 变量函数 之后,再对其 进行声明

特别需要注意的 3 点:

  1. ES5 新增的 letconst 声明的 变量常量 不会被提升。(IE11 或更早的版本 不完全支持 let 关键词)
  2. JS 只提升声明,而非初始化。使用 未声明 的变量,其默认值为 undefined
  3. 严格模式 中的 JS 不允许,在 未被声明 的情况下 使用变量

建议:Hoisting,对很多开发者来说,是 JS 的一种 未知的被忽视 的行为。如果开发者不理解 hoisting,程序也许会包含 bug。为了避免 bug,请始终在每个作用域的开头声明所有变量。

5.15 JS 严格模式

严格模式 指令:"use strict";
声明方式:在 脚本函数 的开头,添加指令。(在脚本开头 进行声明,拥有 全局作用域,即 脚本中的 所有代码 均以 严格模式`来执行)

它是 ES5 的新指令,支持它的 浏览器 包括:

  • 版本 13 以后的 Chrome
  • 版本 10 以后的 IE
  • 版本 4 以后的 Firefox
  • 版本 5.1 以后的 Safari
  • 版本 12 以后的 Opera

严格模式中不允许的事项:

  • 不会自动创建 全局变量。在不声明变量的情况下, 是不允许使用变量的。
  • 八进制 数值文本 是不允许的。
  • 转义字符 是不允许的。
  • 自动类型转换 是不允许。
  • 字符串 "eval""arguments" 不可用作变量。
  • 处于安全考虑,不允许访问 eval() 内创建的变量。
  • 在类似 f() 的函数调用中,this 的值是全局对象。在严格模式中,现在它成为了 undefined。
  • 不允许使用为未来预留的关键词。

5.16 ES6 新增的 let 和 const 关键字

关键字 描述
let 1. let 声明的变量,不能在 声明之前 使用,会导致 非法引用 ReferenceError。即 不会进行 声明提升
2. let 声明的变量,不能在 块作用域 之外使用。
3. let 声明的 全局变量不属于 window 对象,不能通过 window 调用。
const 1. const 声明的常量,必需在声明时赋值
2. const 并没有 定义常量,它值是 常量引用,只是它这个引用常量而已。
所以,const 常量引用 不能重复赋值,只能赋值 1 次

3. const 常量引用,可以引用的对象包括 所有数据类型
其中,数组类型对象类型 的项是 可以被修改的,如:
const car = {color:"Black",...};
car.color = "White";
car.owner = "Bill";

5.17 其他

5.17.1 JS 调试

  • 通过 浏览器 提供的 调试器,配合 console.log(),在控制台显示相关输出。
  • 设置断点。

5.17.2 JS 代码约定

命名规则:

  • 变量 和 函数名以 小驼峰 来写。
  • 全局变量 使用 大写

编程习惯和准则:

  • 字符串 加 单引号,和 HTML 作区别。
  • 在 数组 和 对象 的定义中,可以使用 尾随逗号 来结束定义。
    但 IE8 会崩溃,JSON 也不允许尾随逗号。
  • 测试对象 非null 之前,先测试对象 是否定义
    if  (typeof myObj !== 'undefined' && myObj !== null) {  }
    

空格,缩进,注释规则:

  • 运算符 周围= + - * /),逗号 之后,),添加 空格。
  • 代码块 缩进 使用 4 个空格。请勿使用 Tab。因为不同的编辑器对 tab 的解释不一定相同。
  • 行长度小于 80。换行 的最佳位置是 运算符逗号 之后。
  • 循环:
    for (i = 0; i < 5; i++) {
      x += i;
    }
    
  • 函数:
    function toCelsius(fahrenheit) {
      return (5 / 9) * (fahrenheit - 32);
    }
    
  • 对象:
    var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};
    
    var person = {
    	 firstName: "Bill",
     	lastName: "Gates",
     	age: 50,
     	eyeColor:  "blue"
    };
    

5.17.3 JS 最佳实践

  • 请避免使用 全局变量,请使用 局部变量 替代,并学习如何使用 闭包
  • 请避免使用 == 比较,它总是在比较之前 自动进行 类型转换
  • 请避免使用 eval(),因为允许任意代码运行,它同时也意味着安全问题。
  • 始终在 顶部 声明。
  • 始终 初始化变量。
  • 意识到 自动类型转换
  • 请勿使用 new
    • 请使用 {} 来代替 new Object()
    • 请使用 0 来代替 new Number()
    • 请使用 "" 来代替 new String()
    • 请使用 false 来代替 new Boolean()
    • 请使用 [] 来代替 new Array()
    • 请使用 /()/ 来代替 new RegExp()
    • 请使用 function (){} 来代替 new Function()

5.17.4 JS 性能

提高性能:

  • 减少循环代码中的活动
    // 修改前
    var i;
    for (i = 0; i < arr.length; i++) { }
    
    // 修改后
    var i;
    var l = arr.length;
    for (i = 0; i < l; i++) { }
    
  • 减少 DOM 访问
    与其他 JS 代码相比,访问 HTML DOM 非常缓慢
    访问某个 DOM 元素 若干次,那么应该 只访问一次,并把它作为 本地变量 来使用。
  • 避免不必要的变量
    // 修改前
    var fullName = firstName + " " + lastName;
    document.getElementById("demo").innerHTML = fullName; 
    
    // 修改后
    document.getElementById("demo").innerHTML = firstName + " " + lastName
    
  • 延迟 JS 加载
    可以把脚本放在 body 元素 的底部,使浏览器首先 加载页面。
    也可以在 script 标签 中使用 defer,进行延迟加载。但是只适用于 外部脚本。

5.17.5 JS 版本

JavaScript,1995 年由 Brendan Eich 发明,于 1997 年成为 ECMA 标准。
ECMAScript 是该语言的 官方名称
从 2015 年起,ECMAScript 按年命名,如 ECMAScript 2015。

所有现代浏览器都完全支持 ES5
IE 不支持 ES5 的严格模式 "use strict";
IE 不支持 ES6

版本 官方名称 描述
1 ECMAScript 1 (1997) 第一版。
2 ECMAScript 2 (1998) 只改变编辑方式。
3 ECMAScript 3 (1999) 添加了正则表达式
添加了 try/catch
4 ECMAScript 4 从未发布过。
5 ECMAScript 5 (2009),简称 ES5 添加了 “严格模式”
添加了 string.trim()
添加了 array.isArray()
添加了 数组迭代 方法。
添加了 JSON 支持。
5.1 ECMAScript 5.1 (2011) 编辑改变。
6 ECMAScript 2015 (2015),简称 ES6 添加了 letconst
添加了 array.find()
添加了 array.findIndex()
添加了默认参数值 (在形参上使用 = 设置,不设置默认为 undefined)。
7 ECMAScript 2016 (2016),简称 ES7 添加了指数运算符(**)。
添加了 array.prototype.includes
8 ECMAScript 2017 (2017),简称 ES8 添加了 字符串填充。添加了新的 Object 属性。
添加了异步功能
添加了共享内存
9 ECMAScript 2018 (2018),简称 ES9 添加了 rest / spread 属性。
添加了 异步迭代
添加了 Promise.finally()。
增加 RegExp
5.17.5.1 ES5 说明

ES5 特性

  • "use strict"; 指令,即 严格模式。
  • string.trim()。不过建议使用 str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '') 代替。
  • Date.now()
  • array.isArray()
  • array.indexOf()
  • array.lastIndexOf()
  • 数组 大部分 迭代方法:
    • array.forEach()
    • array.map()
    • array.filter()
    • array.every()
    • array.some()
    • array.reduce()
    • array.reduceRight()
  • JSON.parse()
  • JSON.stringify()
  • 对象 属性访问器 Getter 和 Setter
  • 对象的 新属性和方法(使用不多,可查阅 《ES5 新增对象方法》

ES5 语法更改

  • 提供 字符串 的 属性访问 [ ]:允许 对 字符串 进行 类似数组 的 只读访问,如 str[0],但是 IE7 及更早不支持,若找不到会返回 undefined
  • 数组对象 字面量中的 尾随逗号
  • 多行 字符串 字面量,即 在行末加 \
  • 允许 保留字 作为对象 属性名称。
5.17.5.2 ES6 说明

ES6 特性

  • 箭头函数。
  • let,const
  • 幂运算:**
  • 数组 部分 迭代方法:
    • Array.find()
    • Array.findIndex()
  • 函数默认参数值。
  • 新的数字 静态属性:Number.EPSILON,Number.MIN_SAFE_INTEGER,Number.MAX_SAFE_INTEGER
  • 新的数字 静态方法:Number.isInteger(n),Number.isSafeInteger(n)
  • 新的全局方法:isFinite(),isNaN()
5.17.5.2.1 ES6 函数默认参数值
function myFunction(x, y = 10) { // y 不设置,默认为 undefined
  return x + y;
}
myFunction(5); // 将返回 15

6. JS 高级用法 补充

6.1 JS 表单验证

示例:

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
	姓名:<input type="text" name="fname" required>
	<input type="submit" value="Submit">
</form>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

6.2 Ajax

Ajax:Asynchronous JavaScript And XML。它仅仅是 组合了 浏览器内建 的 XMLHttpRequest 对象,用来 从 web 服务器请求数据
Ajax 应用程序可能使用 XML 来传输数据,但将数据作为 纯文本JSON 文本 传输也同样 常见
实现:不刷新页面 更新网页。

工作步骤:

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由 JS 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器 发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JS 读取响应
  7. 由 JS 执行正确的动作(比如更新页面)

示例:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>让 AJAX 更改这段文本</h2>
  <button type="button" onclick="loadDoc()">更改文本</button>
</div>

</body>
</html> 
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
     document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
    }
  };
  
  // GET
  xhttp.open("GET", "demo_get.asp?fname=Bill&t=" + Math.random(), true);
  xhttp.send();
 
  // POST
  xhttp.open("POST", "ajax_test.asp", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Bill&lname=Gates");
}

6.2.1 XMLHttpRequest 对象的 属性 和 方法

Ajax 的核心是 XMLHttpRequest 浏览器内建对象。
现代浏览器不允许跨域访问,所以 Ajax 也不支持 跨域

XMLHttpRequest 对象的创建:

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

关于响应,需要注意的是:

  • 每当 readyState 发生变化时就会调用 onreadystatechange 函数。
  • readyState 为 4,status 为 200 时,响应就绪。
  • onreadystatechange 会被触发 5 次(0-4),每次 readyState 都发生了变化。

属性:

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数。
readyState 服务端返回响应时,XMLHttpRequest 的状态

0:请求未初始化
1:服务器连接已建立
2:请求已收到
3:正在处理请求
4:请求已完成且响应已就绪。
status 服务端返回响应时,HTTP 的状态码

200:请求成功。
403:请求的页面被禁止。
404:服务器无法找到请求的页面。
500:服务端错误。
504:请求超时。
statusText 服务端返回响应时,HTTP 的状态文本
responseText 返回的 响应数据,字符串 形式
responseXML 返回的 响应数据,XML 形式

方法:

方法 描述
open(method, url, async, user, psw) 设置请求信息。

method:请求类型 GET 或 POST
url:文件位置
async:true(异步)或 false(同步)
user:可选的用户名称
psw:可选的密码
setRequestHeader(header, value) 添加 请求头 信息
send() 发送 GET 请求
send(string) 发送 POST 请求
abort() 取消当前请求
getAllResponseHeaders() 返回 响应头 信息
getResponseHeader(string) 返回 指定的 响应头 信息

6.3 jQuery

篇幅太长,请查阅 《JS - jQuery 技术详解》 博文。

7. H5 新特性 补充

7.1 H5 Web 存储

HTML5 提供了 2 种在 客户端 存储数据window 全局对象localStoragesessionStorage

  • window.localStorage:存储没有截止日期的数据。
  • window.sessionStorage:针对一个 session 来存储数据,当关闭浏览器标签页时数据会丢失。

注意的几点:

  • localStorage 对象在 IE8 + 中使用时,必须是 服务器环境localhost,本地文件环境 无法使用,为 null。
  • 通过本地存储,在用户浏览器中 根据 域名分类数据 进行本地的存储。
  • 在 H5 之前,应用程序 数据 只能存储在 cookie 中,包括每个服务器请求。
    本地存储 则 更安全,并且可在不影响网站性能的前提下将 大量数据(至少5MB) 存储于本地,并且 信息 不会被 传输到 服务器
  • 在使用本地存储时,请先检测 浏览器是否支持 localStoragesessionStorage

相关方法:

方法 描述
localStorage.setItem(key, value) 设置数据
localStorage.getItem(key) 获取数据
localStorage.removeItem(key) 删除数据

示例:

if (typeof(Storage) !== "undefined") {
	localStorage.setItem("lastname", "Gates");
	document.getElementById("result").innerHTML = localStorage.getItem("lastname");
	// 或者 简化写法
	// localStorage.lastname = "Gates";
	// document.getElementById("result").innerHTML = localStorage.lastname;

	localStorage.removeItem("lastname");
} else {
    // 抱歉!不支持 Web Storage ..
}

7.2 H5 应用缓存

必须在 web 服务器上配置 Manifest 文件,未遇到 应用场景,待补充。

7.3 H5 地理定位

H5 提供了 在 客户端 获取 地理位置Navigator 的子对象:navigator.geolocation
参考:《Geolocation 接口文档》

注意的几点:

  • 鉴于该特性可能侵犯用户的 隐私,所以 浏览器 会询问 用户 是否同意 给予 位置访问 的。
  • 在使用地理定位时,请先检测 浏览器是否支持 geolocation

相关方法:

方法 描述 参数 说明
navigator.geolocation.getCurrentPosition(showPosition, showError) 获得用户的位置 1. showPosition:一个函数引用,会调用它,并传入一个 coordinates 对象。里面包含了 地理位置 的相关信息。
在下面会进行归纳。

2. showError:一个函数引用,会调用它,并传如一个 error 对象。里面包含了 错误 的相关信息。
在下面会进行归纳。
navigator.geolocation.watchPosition(showPosition, showError) 注册一个位置改变监听器,实时 返回用的位置。 同上。 会返回一个 long 类型的该监听器的 id 值,用于取消监听。
navigator.geolocation.clearWatch(id) 移除指定 id 的 位置监听器

coordinates 对象 属性:

属性 描述
coords.latitude 十进制的 纬度
coords.longitude 十进制的 经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的 日期/时间

error 对象 属性:

属性 描述 属性值
error.code 错误的代码 1. error.PERMISSION_DENIED:用户不允许 地理定位。
2. error.POSITION_UNAVAILABLE:无法获取当前位置。
3. error.TIMEOUT:操作超时。
4. error.UNKNOWN_ERROR:位置错误。

示例:

<!DOCTYPE html>
<html>
  <head>
	  <title>测试</title>
	  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <p id="demo">点击这个按钮,获得您的坐标:</p>
    <button onclick="getLocation()">试一下</button>

    <script>
		var x = document.getElementById("demo");
		
		function getLocation() {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showPosition, showError);
			} else {
				x.innerHTML = "Geolocation is not supported by this browser.";
			}
		}
		
		function showPosition(position) {
			x.innerHTML = "Latitude(纬度): " + position.coords.latitude +
			"<br />Longitude(经度): " + position.coords.longitude;
		}

		function showError(error) {
			switch (error.code) {
				case error.PERMISSION_DENIED:
					x.innerHTML="User denied the request for Geolocation."
					break;
				case error.POSITION_UNAVAILABLE:
					x.innerHTML="Location information is unavailable."
					break;
				case error.TIMEOUT:
					x.innerHTML="The request to get user location timed out."
					break;
				case error.UNKNOWN_ERROR:
					x.innerHTML="An unknown error occurred."
					break;
			}
		}
	</script>
  </body>
</html>

7.4 H5 Web Workers

H5 提供了 在 客户端 允许执行的 后台脚本 对象:Worker
Web workers 是运行在后台的 JS,独立于其他脚本,不会影响页面的性能。

注意:

  • web workers 的 执行代码 是 在 外部文件 中的,它们无法访问 BOM 对象DOM 对象
  • 在使用后台脚本时,请先检测 浏览器是否支持 Worker
  • 我们需要在 Worker 对象上监听 onmessage 事件。当 后台脚本 web workers 传送完消息后,前台会执行 事件代码,并且来自 后台脚本 的数据会存储于 event.data 中。

Web workers 后台脚本文件 中的 方法:

方法 描述
postMessage(string) 向 HTML 页面 传回 一段消息,即 后台脚本 运行的结果

Worker 对象的 创建 和 终止:

方法 描述
new Worker() 创建 Worker 对象
terminate() Worker 对象的终止方法

示例:
后台脚本文件 demo_workers.js

// 这里练习了下 JS闭包
(function() {
	var i = 0;
    (function timedCount() {
        i = i + 1;
    	postMessage(i);
    	// setTimeout(arguments.callee, 1000);
    	setTimeout(timedCount, 1000);
    }());
}());

HTML 代码 文件:

<!DOCTYPE html>
<html>
  <head>
	  <title>测试</title>
	  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
	<body>
	  <p>计数: <output id="result"></output></p>
	  <button onclick="startWorker()">开始 Worker</button>
	  <button onclick="stopWorker()">停止 Worker</button>

    <script>
      	let w;
		function startWorker() {
			if (typeof Worker !== "undefined") {
				if (typeof w == "undefined") {
					w = new Worker("/example/html5/demo_workers.js");
				}
				w.onmessage = function() {
					document.getElementById("result").innerHTML = event.data;
				};
			} else {
				document.getElementById("result").innerHTML =
				"Sorry, your browser does not support Web Workers...";
			}
		}

		function stopWorker() {
			w.terminate();
		}
	</script>
  </body>
</html>

7.5 H5 SSE

SSE:server-sent event,服务器发送事件。浏览器提供了 用于 监听服务器 的对象:EventSource 对象
以前,是需要 网页 去询问 服务器 是否有更新,主动权 在 客户端
现在,H5 提供了 在 客户端 允许 网页 自动响应来自 服务器的更新,主动权 在 服务端 了。

示例:

var source=new EventSource("demo_sse.php");
source.onmessage = function() {
  	document.getElementById("result").innerHTML += event.data + "<br />";
};
发布了5 篇原创文章 · 获赞 0 · 访问量 429
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览