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() 方法。