test

JavaScript

简介

document.getElementById("demo").innerHTML = "Hello JavaScript";

用来查找id为“demo”的HTML元素，并把元素内容更改为“Hello JavaScript”

JavaScript能干什么？

改变HTML内容

document.getElementById("demo").innerHTML = 'Hello JavaScript';

改变HTML属性

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

改变HTML样式

document.getElementById("demo").style.fontSize = "25px";

隐藏HTML元素

document.getElementById("demo").style.display="none";

显示HTML元素

document.getElementById("demo").style.display="block";

JavaScript可同时接受双引号和单引号，如：document.getElementById("demo").innerHTML = 'Hello JavaScript' ;

JavaScript代码需要写在HTML文档的标签内。

script标签可在HTML文档的head标签或body标签内，也可以写成外部脚本，然后再HTML文档里面引用，如

<script src="myScript.js"></script>

还可以通过完整的URL来链接

注意：

外部脚本不能包含script标签

JavaScript写在外部的优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

输出

JavaScript显示方案

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

innerHTML()也可以这样写：

document.getElementById("demo").innerHTML = 6 * 10; 将写入60

注意：

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。

分号分隔 JavaScript 语句

如果有分号分隔，允许在同一行写多条语句

所有 JavaScript 标识符对大小写敏感

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）

多行注释以 /* 开头，以 */ 结尾。

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

变量

JavaScript 变量是存储数据值的容器。

所有 JavaScript 变量必须以唯一的名称的标识。

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感

在 JavaScript 中，等号（=）是赋值运算符， JavaScript 中的“等于”运算符是 ==。

在 JavaScript 中创建变量被称为“声明”变量。

您可以通过 var关键词来声明 JavaScript 变量

声明之后，变量是没有值的。（技术上，它的值是 undefined。）

您可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量：

var person = "Bill Gates", carName = "porsche", price = 15000;

声明可横跨多行：

var person = "Bill Gates",
carName = "porsche",
price = 15000;

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

var carName;

变量 carName 在这条语句执行后的值是 undefined

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 "porsche"

var carName = "porsche";
var carName;     //值仍为"porsche"

如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

var x = "8" + 3 + 5;        //835
x = x + 5;    //8355
x = x - 3;    //8352

var y = 3 + 5 + "8";    //88
y = y + 5;    //885
y = y - 3;    //882

注意：

var x = "8" + 3 + 5;此时x为string类型，值为“835”，x + 5也为string类型，值为“8355”，但是x - 5 为number类型，值为8350

var x = 911 + “Porsche”；此时x为string类型，值为“911Porsche”，x + 5也为string类型，值为“911Porsche5“，但是输出x - 5结果为NaN，typeof(x - 5)为number类型

typeof（NaN）结果为number

—————————分割线—————————

JS算术

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
**	幂（ES2016）
/	除法
%	系数（求余）
++	递增
--	递减

赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

逻辑运算符

&&	逻辑与
\|\|	逻辑或
!	逻辑非

类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

优先级

值	运算符	描述	实例
20	( )	表达式分组	(3 + 4)

19	.	成员	person.name
19	[]	成员	person["name"]
19	()	函数调用	myFunction()
19	new	创建	new Date()

17	++	后缀递增	i++
17	--	后缀递减	i--

16	++	前缀递增	++i
16	--	前缀递减	--i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x

15	**	求幂 (ES7)	10 ** 2

14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5

13	+	加	10 + 5
13	-	减	10 - 5

12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2

11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	"PI" in Math
11	instanceof	对象的实例	instanceof Array

10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y

9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	\|	按位或	x \| y
6	&&	逻辑与	x && y
5	\|\|	逻辑否	x \|\| y
4	? :	条件	? "Yes" : "No"

3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	\|=	赋值	x \|= y

2	yield	暂停函数	yield x
1	,	逗号	7 , 8

JS数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

布尔值只有两个值：true 或 false。

JavaScript 数组用方括号书写。

数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

JavaScript 对象用花括号来书写。

对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型

typeof 运算符返回变量或表达式的类型：

typeof 运算符对数组返回 "object"，因为在 JavaScript 中数组属于对象。

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"
typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"

undefined

在 JavaScript 中，没有值的变量，(技术上)其值是 undefined。typeof 也返回 undefined

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

var person;                  // 值是 undefined，类型是 undefined

空值

空值与 undefined 不是一回事

空的字符串变量既有值也有类型

var car = "";    // 值是 ""，类型是 "string"

null

在 JavaScript 中，null 是 "nothing"。它被看做不存在的事物。

不幸的是，在 JavaScript 中，null 的数据类型是对象。

您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

您可以通过设置值为 null 清空对象：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
person = null;    // 值是 null，但是类型仍然是对象
document.getElementById("demo").innerHTML = typeof person;    //object

您也可以通过设置值为 undefined 清空对象：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
person = undefined;    // 值是 undefined，类型是 undefined
document.getElementById("demo").innerHTML = person;    //undefined

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

原始数据值是一种没有额外属性和方法的单一简单数据值。

typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x

复杂数据

typeof 运算符可返回以下两种类型之一：

function
object

typeof 运算符把对象、数组或 null 返回 object。

typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，在JavaScript数组即对象)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

JavaScript函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

实例

把华氏度转换为摄氏度：

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77);

使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius;    //结果为function toCelsius(f) { return (5/9) * (f-32); }

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

JavaScript对象

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

访问对象属性

person.id

或者

person["id"]

访问对象方法

name = person.fullName();

如果您不使用 () 访问 fullName 方法，则将返回函数定义：

name = person.fullName;    //function() { return this.firstName + " " + this.lastName; }

JavaScript事件

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

在下面的例子中，onclick 属性（以及代码）被添加到 button 元素：

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

下面的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

下面是一些常见的 HTML 事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

JavaScript字符串

JavaScript 字符串是引号中的零个或多个字符。

您可以在字符串中使用引号，只要不匹配围绕字符串的引号即可：

var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';

内建属性 length 可返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;    //26

转义字符

代码	结果	描述
'	'	单引号
"	"	双引号
		反斜杠

其他六个 JavaScript 中有效的转义序列：

代码	结果
	退格键
f	换页
	新行
	回车
	水平制表符
v	垂直制表符

长代码换行

可以这么换

document.getElementById("demo").innerHTML =
"Hello Kitty.";

也可以在字符串中换

document.getElementById("demo").innerHTML = "Hello 
Kitty";

方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：

document.getElementById("demo").innerHTML = "Hello " + 
"Kitty!";

您不能通过反斜杠对代码行进行换行：

document.getElementById("demo").innerHTML =  
"Hello Kitty!";    //这是错误的，不会被执行

字符串也可以是对象 （但不推荐，因为这会拖慢速度）

var firstName = new String("Bill")

var x = "Bill";
var y = new String("Bill");

// typeof x 将返回 string
// typeof y 将返回 object

当使用 == 相等运算符时，相等字符串是相等的

var x = "Bill";             
var y = new String("Bill");

// (x == y) 为 true，因为 x 和 y 的值相等

当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。

var x = "Bill";             
var y = new String("Bill");

// (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 是不同的对象

JavaScript 对象无法进行对比，比较两个对象 JavaScript 将始终返回 false。

字符串方法

字符串长度

length 属性返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;    //26

查找子串

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");   //17

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");    //51

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1

两种方法都接受作为检索起始位置的第二个参数

lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。注意最后给出的结果是从字符串头到尾的索引位置

检索子串

search() 方法搜索特定值的字符串，并返回匹配的位置

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");

两种方法，indexOf() 与 search()，是既相等，又有所不同。

区别在于：

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

提取字符串

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

ar str = "Apple, Banana, Mango";
var res = str.slice(7,13);    //Banana

如果某个参数为负，则从字符串的结尾开始计数。

这个例子裁剪字符串中位置 -13 到位置 -8 的片段

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);  //包含-13，-6截至，不包含-7 ，Banana

如果省略第二个参数，则该方法将裁剪字符串的剩余部分

var res = str.slice(7);  //Banana, Mango

substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);  //Banana

substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的长度。

var str = "Apple, Banana, Mango";
var res = str.substr(7,7);  //Banana,

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

var str = "Apple, Banana, Mango";
var res = str.substr(7);  //Banana, Mango

如果首个参数为负，则从字符串的结尾计算位置。

var str = "Apple, Banana, Mango";
var res = str.substr(-5);  //Mango

第二个参数不能为负，因为它定义的是长度。

替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");  //n = Please visit W3School

默认地，replace() 只替换首个匹配

默认地，replace() 对大小写敏感。

如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
// 请访问 W3School 和 W3School！

转换大小写

通过 toUpperCase() 把字符串转换为大写

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1，即HELLO WORLD!

通过 toLowerCase() 把字符串转换为小写

var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1，即hello world

concat() 方法可用于代替加运算符。下面两行是等效的

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串

正式地说：字符串是不可变的：字符串不能更改，只能替换

trim() 方法删除字符串两端的空白符

var str = "       Hello World!        ";
alert(str.trim());  //Hello World!

警告：Internet Explorer 8 或更低版本不支持 trim() 方法，如需支持 IE 8，您可搭配正则表达式使用 replace() 方法代替

var str = "       Hello World!        ";
alert(str.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, ''));

您还可以使用上面的 replace 方案把 trim 函数添加到 JavaScript String.prototype

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
};
var str = "       Hello World!        ";
alert(str.trim());

提取字符串字符

这是两个提取字符串字符的安全方法：

charAt(position)

charCodeAt(position)

charAt() 方法返回字符串中指定下标（位置）的字符串

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

属性访问

var str = "HELLO WORLD";
str[0];                   // 返回 H

使用属性访问有点不太靠谱：

不适用 Internet Explorer 7 或更早的版本
它让字符串看起来像是数组（其实并不是）
如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）字符串是不可变的

字符串转换成数组

可以通过 split() 将字符串转换为数组

var txt = "a,b,c,d,e";      // 字符串
txt.split(",");           // 用逗号分隔
txt.split(" ");           // 用空格分隔
txt.split("|");           // 用竖线分隔

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。

var str = "a,b,c,d,e,f";
var arr = str.split();
document.getElementById("demo").innerHTML = arr[0];  //a[0]="a,b,c,d,e,f"

如果分隔符是 ""(空串)，被返回的数组将是间隔单个字符的数组

var txt = "Hello";       // 字符串
var arr = txt.split("");   // 分隔为字符arr[0]=H

如果分隔符是 " "（一个空格符），被返回的数组要视具体情况而定，如果原字符串中有空格，则以空格分隔；如果字符串中没有空格，则arr[0] = 原来的字符串

var txt = "He llo";       // 字符串
var arr = txt.split(" ");   // 分隔为一个空格arr[0]=He; arr[1]=llo

var txt = "Hello";       // 字符串
var arr = txt.split(" ");   // 分隔为一个空格arr[0]=Hello;

————————分隔符————————

JavaScript数字

JavaScript 只有一种数值类型。

书写数值时带不带小数点均可。

var x = 3.14;    // 带小数点的数值
var y = 3;       // 不带小数点的数值

超大或超小的数可通过科学计数法来写

var x = 123e5;    // 12300000
var y = 123e-5;   // 0.00123

JavaScript数值始终是64位的浮点数

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。

JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。

此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

值(aka Fraction/Mantissa)	指数	符号
52 bits(0 - 51)	11 bits (52 - 62)	1 bit (63)

整数（不使用指数或科学计数法）会被精确到 15 位。

var x = 999999999999999;   // x 将是 999999999999999
var y = 9999999999999999;  // y 将是 10000000000000000

小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准：

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

使用乘除法有助于解决上面的问题：

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

数字和字符串相加

JavaScript 的加法和级联（concatenation）都使用 + 运算符。

数字用加法。字符串用级联。

如果您对两个数相加，结果将是一个数

如果对两个字符串相加，结果将是一个字符串的级联

如果您对一个数和一个字符串相加，结果也是字符串级联

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020（一个字符串）

如果您对一个字符串和一个数字相加，结果也是字符串级联

var x = "10";
var y = 20;
var z = x + y;           // z 将是 1020（字符串）

注意: JavaScript 从左向右进行编译。

var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;  //x+y=30；30+"30"="3030"

数字字符串

JavaScript 字符串可以拥有数字内容：

var x = 100;        // x 是数字
var y = "100";       // y 是字符串

在所有数字运算中，JavaScript 会尝试将字符串转换为数字

var x = "100";
var y = "10";
var a = x / y;       // a 将是 10
var b = x * y;       // b 将是 1000
var c = x - y;       // c 将是 90

但是该例不会如上例般运行

var x = "100";
var y = "10";
var z = x + y;       // z 不会是 110（而是 10010）

JavaScript 用 + 运算符对字符串进行了级联

NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）

如果是数字字符串，则结果将是数

var x = 100 / "10";     // x 将是 10

您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数

var x = 100 / "Apple";
isNaN(x);               // 返回 true，因为 x 不是数

要小心 NaN。假如您在数学运算中使用了 NaN，则结果也将是 NaN：

var x = NaN;
var y = 5;
var z = x + y;         // z 将是 NaN

结果也许是串连接

var x = NaN;
var y = "5";
var z = x + y;         // z 将是 NaN5

⭐⭐⭐ NaN 是数，typeof NaN 返回 number ⭐⭐⭐

typeof NaN;             // 返回 "number"

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

除以 0（零）也会生成 Infinity

var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity

⭐⭐⭐ Infinity 是数：typeOf Infinity 返回 number。 ⭐⭐⭐

十六进制

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

var x = 0xFF;             // x 将是 255

绝不要用前导零写数字（比如 07）。

一些 JavaScript 版本会把带有前导零的数解释为八进制。

默认地，Javascript 把数显示为十进制小数。

但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。

var myNumber = 128;
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

数值可以是对象（但不推荐，这样会拖慢执行速度）

通常 JavaScript 数值是通过字面量创建的原始值：var x = 123

但是也可以通过关键词 new 定义为对象：var y = new Number(123)

var x = 123;
var y = new Number(123);

// typeof x 返回 number
// typeof y 返回 object

请不要创建数值对象。这样会拖慢执行速度。

new 关键词使代码复杂化，并产生某些无法预料的结果：

当使用 == 相等运算符时，相等的数看上去相等：

var x = 500;             
var y = new Number(500);

// (x == y) 为 true，因为 x 和 y 有相等的值

当使用 === 相等运算符后，相等的数变为不相等，因为 === 运算符需要类型和值同时相等。

var x = 500;             
var y = new Number(500);

// (x === y) 为 false，因为 x 和 y 的类型不同

甚至更糟。对象无法进行对比：

var x = new Number(500);             
var y = new Number(500);

// (x == y) 为 false，因为对象无法比较

数字方法

所有数字方法可用于任意类型的数字（字面量、变量或表达式）

toString()方法，以字符串返回数值

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

toFixed() 返回字符串值，它包含了指定位数小数的数字

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

toFixed(2) 非常适合处理金钱。

toPrecision() 返回字符串值，它包含了指定长度的数字

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

valueOf() 以数值返回数值

var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

在 JavaScript 中，数字可以是原始值（typeof = number）或对象（typeof = object）。

在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。

没有理由在代码中使用它。

所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。

把变量转换成数值

这三种 JavaScript 方法可用于将变量转换为数字：

Number() 方法
parseInt() 方法
parseFloat() 方法

这些方法并非数字方法，而是全局JavaScript 方法。

全局方法

JavaScript 全局方法可用于所有 JavaScript 数据类型。

这些是在处理数字时最相关的方法：

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

Number() 可用于把 JavaScript 变量转换为数值

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

如果无法转换数字，则返回 NaN

Number() 还可以把日期转换为数字

Number(new Date("2019-04-15"));    // 返回 1506729600000

上面的 Number() 方法返回 1970 年 1 月 1 日至今的毫秒数。

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

如果无法转换为数值，则返回 NaN (Not a Number)。

parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

如果无法转换为数值，则返回 NaN (Not a Number)。

数值属性

属性	描述
MAX_VALUE	返回 JavaScript 中可能的最大数。
MIN_VALUE	返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY	表示负的无穷大（溢出返回）。
NaN	表示非数字值（"Not-a-Number"）。
POSITIVE_INFINITY	表示无穷大（溢出返回）。

MAX_VALUE 返回 JavaScript 中可能的最大数字

var x = Number.MAX_VALUE;
document.getElementById("demo").innerHTML = x;  //1.7976931348623157e+308

MIN_VALUE 返回 JavaScript 中可能的最小数字。

var x = Number.MIN_VALUE;
document.getElementById("demo").innerHTML = x;  //5e-324

POSITIVE_INFINITY 表示无穷大（溢出返回）

var x = Number.POSITIVE_INFINITY;  //Infinity

溢出时返回 POSITIVE_INFINITY

var x = 1 / 0;  //Infinity

NEGATIVE_INFINITY 表示负的无穷大（溢出返回）

var x = Number.NEGATIVE_INFINITY;  //-Infinity

溢出时返回 NEGATIVE_INFINITY：

var x = -1 / 0;  //-Infinity

NaN - 非数字

var x = Number.NaN;

NaN 属于 JavaScript 保留字，指示数字并非合法的数字。

尝试使用非数字字符串进行算术运算将导致 NaN（非数字）

var x = 100 / "Apple";  // x 将是 NaN (Not a Number)

数字属性不可用于变量

数字属性属于名为 number 的 JavaScript 数字对象包装器。

这些属性只能作为 Number.MAX_VALUE 访问。

使用 myNumber.MAX_VALUE，其中 myNumber 是变量、表达式或值，将返回 undefined

var x = 6;
var y = x.MAX_VALUE;    // y 成为 undefined

————————分割线————————

什么是数组

JavaScript 数组用于在单一变量中存储多个值。数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

var cars = ["Saab", "Volvo", "BMW"];

创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

var cars = ["Saab", "Volvo", "BMW"];

空格和折行并不重要。声明可横跨多行：

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

请不要最后一个元素之后写逗号（比如 "BMW",）。

JavaScript关键字new创建数组

var cars = new Array("Saab", "Volvo", "BMW");

访问数组元素

我们通过引用索引号（下标号）来引用某个数组元素。

[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。

这条语句访问 cars 中的首个元素的值：

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

这条语句访问 cars 中的最后一个元素的值：

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

改变数组元素

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];  //Opel

访问完整数组

通过 JavaScript，可通过引用数组名来访问完整数组

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;   //Saab,Volvo,BMW

数组是对象

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 "object"。

但是，JavaScript 数组最好以数组来描述。

数组使用数字来访问其“元素”。对象使用名称来访问其“成员”。

数组元素可以是对象

JavaScript 变量可以是对象。数组是特殊类型的对象。正因如此，您可以在相同数组中存放不同类型的变量。您可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组。

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

数组属性和方法

length属性，返回数组的长度（数组元素的数目）

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;    // fruits 的长度是 4

遍历数组元素

遍历数组的最安全方法是使用 "for" 循环

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

您也可以使用 Array.foreach() 函数

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

添加数组元素

向数组添加新元素的最佳方法是使用 push() 方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon);Banana,Orange,Apple,Mango,Lemon

也可以使用 length 属性向数组添加新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

警告！

添加最高索引的元素可在数组中创建未定义的“洞”

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon);fruits[4]=undefined,fruits[5]=undefined

通过数组名访问完整数组

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";

fLen = fruits.length;
text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
//Banana
//Orange
//Apple
//Mango
//undefined
//undefined
//Lemon

具有命名索引的数组被称为关联数组（或散列），JavaScript不支持命名索引的数组，在JavaScript中数组只能使用数字索引。

假如您使用命名索引，JavaScript 会把数组重定义为标准对象。

之后，所有数组的方法和属性将产生非正确结果。

数组和对象的区别

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

数组是特殊类型的对象，具有数字索引。

何时使用数组，何时使用对象

JavaScript 不支持关联数组

如果希望元素名为字符串（文本）则应该使用对象。

如果希望元素名为数字则应该使用数组。

避免使用new Array()

没有必要使用 JavaScript 的内建数组构造器 new Array()。

请使用 [] 取而代之！

下面两条不同的语句创建了名为 points 的新的空数组：

var points = new Array();         // 差
var points = [];                  // 优

下面两条不同的语句创建包含六个数字的新数组：

var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 优

new 关键词只会使代码复杂化。它还会产生某些不可预期的结果：

var points = new Array(40, 100);  // 创建包含两个元素的数组（40 和 100）

假如删除其中一个元素会怎么样？

var points = new Array(40);       // 创建包含 40 个未定义元素的数组！！！

如何识别数组

问题在于 JavaScript 运算符 typeof 返回 "object"

typeof 运算符返回 "object"，因为 JavaScript 中数组属于对象。

解决方案1：

为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：

Array.isArray(fruits);     // 返回 true

解决方案2：

创建您自己的 isArray() 函数以解决此问题：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

解决方案3：

假如对象由给定的构造器创建，则 instanceof 运算符返回 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // 返回 true

——————————分割线——————————

数组方法

把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();   //Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");   //Banana * Orange * Apple * Mango

添加元素或删除元素

pop() 方法从数组中删除最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

push() 方法（在数组结尾处）向数组添加一个新的元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

length 属性提供了向数组追加新元素的简易方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

位移元素

位移与弹出等同，但处理首个元素而不是最后一个。shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift() 方法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

⭐⭐⭐使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。 ⭐⭐⭐

拼接数组

splice() 方法可用于向数组添加新项

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");  //Banana,Orange,Lemon,Kiwi,Apple,Mango

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。(从第一个参数给的位置开始删)

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回*一个包含已删除项的数组

使用splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Lone", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   
// 连接 myGirls 和 myBoys
//Cecilie,Lone,Lone,Tobias,Linus

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用___任意数量的数组参数___

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数：

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

裁剪数组

slice() 方法用数组的某个片段切出新数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); 
//Orange,Lemon,Apple,Mango

slice() 方法创建新数组。它不会从源数组中删除任何元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3); 
//citrus = ["Apple", "Mango"]

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
//citrus = ["Orange", "Lemon"]

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); 
//citrus = ["Lemon", "Apple", "Mango"]

自动toString（）

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

所有 JavaScript 对象都拥有 toString() 方法。