学习JavaScript

1，JavaScript代码必须位于 <script></script>内，并且type不是必须的属性
2，脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。
3，脚本可放置与外部文件中，文件扩展名为.js.代码段为：

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

外部脚本不能包含 <script>标签。

在外部文件中放置脚本有如下优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

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

JavaScript关键字

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

JavaScript 标识符

• 在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
• 连串的字符可以是字母、数字、下划线或美元符号。
• 且JavaScript对大小写敏感。

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

• 如果再次声明某个 JavaScript 变量，将不会丢它的值。
• 如果您对数字和字符串相加，结果将是字符串！

JavaScript运算符之幂运算符

** ：x ** 2表示x的2次方

JavaScript 数据类型

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

var x = 911 + 7 + “Porsche”; 结果是918Porsche。
var x = “Porsche” + 911 + 7; 结果是Porsche9117。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型（就是x既可以是数值也可以是字符串型或未定义型）。

typeof 运算符

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

Null：是一个对象

用null清空对象

var person = null;           // 值是 null，但是类型仍然是对象

Undefined：未定义，（可以理解为最初状态）

用ndefined清空对象

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

Undefined 与 Null 的区别

值相等，类型不相等

空值：既有值，又有类型

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

原始数据

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

• string
• number
• boolean
• undefined

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)

复杂数据

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

• function
• object

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

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

JavaScript方法

indexOf(“china”,12) 方法返回字符串中指定文本首次出现的索引（位置）。
lastIndexOf(“china”,12) 方法返回指定文本在字符串中最后一次出现的索引。
search() 方法搜索特定值的字符串，并返回匹配的位置。
ndexOf() 与 search() 是不相等的，区别在于：

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

有三种提取部分字符串的方法：

• slice(start, end):提取字符串的某个部分并在新字符串中返回被提取的部分。如果某个参数为负，则从字符串的结尾开始计数。如果省略第二个参数，则该方法将裁剪字符串的剩余部分
• substring(start, end):类似于 slice()。不同之处在于不能接受负的参数。
• substr(start, length)：类似于 slice()。不同之处在于第二个参数规定为截取长度。如果首个参数为负，则从字符串的结尾计算位置。第二个参数不能为负。

替换字符串内容

replace(“被调换的字符串”，“要换进去的字符串”)： 方法用另一个值替换在字符串中指定的值,且不会改变调用它的字符串，返回的是新的字符串。默认的，只替换首个匹配。

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

且对大小写敏感，如果要不敏感，需要用 \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");

转换为大写和小写

toLowerCase()

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

concat() 连接两个或多个字符串：

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

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

提取字符串字符

charAt(position)： 方法返回字符串中指定下标（位置）的字符串。
charCodeAt(position)：charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码。

把字符串转换为数组

split() 将字符串转换为数组：

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

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。(就是将整个字符串当成一个arr[0])

如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

数组

JavaScript数组是对象
数组元素可以是对象：

var person = {firstName:"John", lastName:"Doe", age:46};

您可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组：

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

数组属性和方法

var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序

遍历数组元素

for (i = 0; i < arr.length; 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() 方法：向数组添加新元素
也可以使用 length 属性向数组添加新元素：

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

JavaScript 不支持关联数组

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

如何识别数组

方法1：ECMAScript 5 定义了新方法 Array.isArray()：
方法2：ECMAScript 5 定义了新方法 Array.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(); 

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

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

pop() 方法从数组中删除最后一个元素，并且返回被弹出的值：

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

push() 方法（在数组结尾处）向数组添加一个新的元素，并且返回新数组的长度：

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

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，并且返回被移除的字符串。

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

length 属性提供了向数组追加新元素的简易方法：fruits[fruits.length] = “Kiwi”; // 向 fruits 追加 “Kiwi”

元素就可以使用 JavaScript delete 运算符来删除：delete fruits[0]; // 把 fruits 中的首个元素改为 undefined。

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

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

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

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

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组

使用 splice() 来删除元素：splice() 在数组中不留“空洞”的情况下移除元素

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

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

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

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：

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); //从下标1开始，将后面的拆件出来

slice() 方法创建新数组。它不会从源数组中删除任何元素。
slice() 可接受两个参数，比如 (1, 3)。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。

自动 toString()
如果需要原始值，则 JavaScript 会自动把数组转换为字符串
所有 JavaScript 对象都拥有 toString() 方法。

sort() 方法

以字母顺序对数组进行排序

reverse() 方法反转数组中的元素。
我们通过一个比值函数来将数组中的数字进行升序排序。

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

降序排序：

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

比值函数

比较函数应该返回一个负，零或正值，这取决于参数：
function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

以随机顺序排序数组

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); //这里比值函数返回的正负是随机的，虽有a和b哪个排在前面也是随机的

对数组使用 Math.max()

使用 Math.max.apply 来查找数组中的最高值：

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

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

可以使用 Math.min.apply 来查找数组中的最低值：

排序对象数组

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

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。
解决方法是通过比较函数来对比属性值：

cars.sort(function(a, b){return a.year - b.year});