js入门2

js入门二

HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：

• HTML 网页完成加载
• HTML 输入字段被修改
• HTML 按钮被点击
  通常，当事件发生时，用户会希望做某件事。
  JavaScript 允许您在事件被侦测到时执行代码。
  通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

• 每当页面加载时应该做的事情
• 当页面被关闭时应该做的事情
• 当用户点击按钮时应该被执行的动作
• 当用户输入数据时应该被验证的内容 等等

让 JavaScript 处理事件的不同方法有很多：

• HTML 事件属性可执行 JavaScript 代码
• HTML 事件属性能够调用 JavaScript 函数
• 您能够向 HTML 元素分配自己的事件处理函数
• 您能够阻止事件被发送或被处理
• 等等
  特殊字符
  
  
  字符串可以是对象

对象无法比较：


请注意 (x= =y) 与 (x===y) 的区别。
JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。

字符串方法和属性
原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。
但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象。

length 属性返回字符串的长度
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
JavaScript 从零计算位置：
0 是字符串中的第一个位置，1 是第二个，2 是第三个 …
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。

检索字符串中的字符串
search() 方法搜索特定值的字符串，并返回匹配的位置：
两种方法，indexOf() 与 search()，是相等的。
这两种方法是不相等的。区别在于：
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

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

• slice(start, end)
• substring(start, end)
• substr(start, length)

如果省略第二个参数，则该方法将裁剪字符串的剩余部分，
或者从结尾计数。
substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。

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

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。
substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
![replace() 方法不会改变调用它的字符串。它返回的是新字符串。

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

默认地，replace() 对大小写敏感。因此不对匹配 MICROSOFT
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：
实例
str = “Please visit Microsoft!”;
var n = str.replace(/MICROSOFT/i, “W3School”);
转换为大写和小写
通过 toUpperCase() 把字符串转换为大写
通过 toLowerCase() 把字符串转换为小写

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

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
亲自试一试
concat() 方法可用于代替加运算符。下面两行是等效的：
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说：字符串是不可变的：字符串不能更改，只能替换。

提取字符串字符
这是两个提取字符串字符的安全方法：
charAt(position)
charAt() 方法返回字符串中指定下标（位置）的字符串：
实例

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

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

var str = "HELLO WORLD";

str.charCodeAt(0);         // 返回 72

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

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr[0];
}
</script>

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

JavaScript 只有一种数值类型。
书写数值时带不带小数点均可。
超大或超小的数可通过科学计数法来写：

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

数字和字符串相加
JavaScript 的加法和级联（concatenation）都使用 + 运算符。
数字用加法。字符串用级联。
如果您对两个数相加，结果将是一个数：
实例

var x = 10;
var y = 20;
var z = x + y;           // z 将是 30（一个数）

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

实例

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

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

实例

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

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

实例

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

实例

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

JavaScript 从左向右进行编译。
因为 x 和 y 都是数，10 + 20 将被相加
因为 z 是字符串，30 + “30” 被级联。

JavaScript 字符串可以拥有数字内容：
var x = 100; // x 是数字
var y = “100”; // y 是字符串
在所有数字运算中，JavaScript 会尝试将字符串转换为数字：
该例如此运行：

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

var x = "100";
var y = "10";
var z = x * y;       // z 将是 1000

var x = "100";
var y = "10";
var z = x - y;       // z 将是 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 在计算数时超出最大可能数范围时返回的值。
实例
var myNumber = 2;
while (myNumber != Infinity) { // 执行直到 Infinity
myNumber = myNumber * myNumber;
}
除以 0（零）也会生成 Infinity：
实例

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

Infinity 是数：typeOf Infinity 返回 number。
实例

typeof Infinity;        // 返回 "number"

能够使用 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，因为对象无法比较
亲自试一试
JavaScript 对象无法进行比较。

js数字方法
Number 方法和属性
原始值（比如 3.14 或 2016），无法拥有属性和方法（因为它们不是对象）。

但是通过 JavaScript，方法和属性也可用于原始值，因为 JavaScript 在执行方法和属性时将原始值视作对象。

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

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

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

toExponential() 方法
toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。
参数定义小数点后的字符数：

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

该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入
toFixed() 方法
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) 非常适合处理金钱。
valueOf() 方法
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() 方法
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() 还可以把日期转换为数字：
实例

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

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

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

数值属性
属性 描述

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

JavaScript NaN - 非数字
实例

var x = Number.NaN;

NaN 属于 JavaScript 保留字，指示数字并非合法的数字。
尝试使用非数字字符串进行算术运算将导致 NaN（非数字）：
实例

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

数字除以非数字字符串会成为 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”];

什么是数组？
数组是一种特殊的变量，它能够一次存放一个以上的值。
如果有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW"; 

假如希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？
解决方法就是数组！
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。
创建数组
使用数组文本是创建 JavaScript 数组最简单的方法。
语法：

var array-name = [item1, item2, ...];
实例
var cars = ["Saab", "Volvo", "BMW"];

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

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

不要最后一个元素之后写逗号（比如 “BMW”,）。
可能存在跨浏览器兼容性问题。

使用 JavaScript 关键词 new
下面的例子也会创建数组，并为其赋值：
实例

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

以上两个例子效果完全一样。无需使用 new Array()。

访问数组元素
我们通过引用索引号（下标号）来引用某个数组元素。
这条语句访问 cars 中的首个元素的值：

var name = cars[0];

这条语句修改 cars 中的首个元素：

cars[0] = "Opel";（注意Opel可以变成其它任何值 cars[0]也随之而变）

实例

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

[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。
改变数组元素
这条语句修改了 cars 中第一个元素的值：
cars[0] = “Opel”;
实例

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

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

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

数组属性和方法
JavaScript 数组的真实力量隐藏在数组的属性和方法中：
实例

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

访问第一个数组元素
实例

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

访问最后一个数组元素
实例

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

遍历数组元素
遍历数组的最安全方法是使用 “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)

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

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

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

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

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

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 返回 3
var y = person[0];              // person[0] 返回 "Bill"

假如使用命名索引，JavaScript 会把数组重定义为标准对象。
之后，所有数组的方法和属性将产生非正确结果。
实例：

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length 将返回 0
var y = person[0];              // person[0] 将返回 undefined

数组和对象的区别

在 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 个未定义元素的数组！！！ 显示undefined
请避免使用 new Array()。

如何识别数组
常见的问题是：我如何知晓某个变量是否是数组？
问题在于 JavaScript 运算符

typeof 返回 "object"：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // 返回 object

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

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

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

此方案的问题在于 ECMAScript 5 不支持老的浏览器。

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

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

假如参数为数组，则上面的函数始终返回 true。
或者更准确的解释是：假如对象原型包含单词 "Array" 则返回 true。

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

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

JavaScript 数组方法
JavaScript 数组的力量隐藏在数组方法中。
把数组转换为字符串
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

Popping 和 Pushing
在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：
从数组弹出项目，或向数组推入项目。

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
pop() 方法返回“被弹出”的值：

实例

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

Pushing
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

位移元素
位移与弹出等同，但处理首个元素而不是最后一个。
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

更改元素
通过使用它们的索引号来访问数组元素：
数组索引（下标）以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …
实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

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

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

删除元素
既然 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");

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：
实例

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

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素
第一个参数（0）定义新元素应该被添加（接入）的位置。
第二个参数（1）定义应该删除多个元素。
其余参数被省略。没有新元素将被添加。

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

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

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() 方法用数组的某个片段切出新数组。
本例从数组元素 1 （“Orange”）开始切出一段数组：
实例

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

slice() 方法创建新数组。它不会从源数组中删除任何元素。
本例从数组元素 3 （“Apple”）开始切出一段数组：
实例

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

slice() 可接受两个参数，比如 (1, 3)。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。
实例
var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
var citrus = fruits.slice(1, 3);
如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。
实例

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

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

JavaScript 数组排序
sort() 方法是最强大的数组方法之一。
数组排序
sort() 方法以字母顺序对数组进行排序：
实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

反转数组
reverse() 方法反转数组中的元素。
您可以使用它以降序对数组进行排序：
实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

数字排序
默认地，sort() 函数按照字符串顺序对值进行排序。
该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。
不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题：
实例

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() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
实例：
当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。
该函数计算 40-100，然后返回 -60（负值）。
排序函数将把 40 排序为比 100 更低的值。
可以使用下面的代码片段来测试数值和字母排序：

<button onclick="myFunction1()">以字母顺序排序</button>
<button onclick="myFunction2()">以数字顺序排序</button>
<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
		points.sort();
		document.getElementById("demo").innerHTML  = points;
}
function myFunction2() {
		points.sort(function(a, b){return  a - b});
		document.getElementById("demo").innerHTML = points;
}
</script>

以随机顺序排序数组
实例

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

查找最高（或最低）的数组值
JavaScript 不提供查找数组中最大或最小数组值的内建函数。
不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。
升序排序：
实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

对数组使用 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()
可以使用 Math.min.apply 来查找数组中的最低值：
实例

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

最快的解决方法是使用“自制”方法。
此函数遍历数组，用找到的最高值与每个值进行比较：
实例（查找 Max）

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

此函数遍历数组，用找到的最低值与每个值进行比较：
实例（查找 Min）

function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}

排序对象数组
JavaScript 数组经常会包含对象：
实例
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});
比较字符串属性会稍复杂：

实例

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;
});

JavaScript 数组迭代方法
数组迭代方法对每个数组项进行操作。
Array.forEach()
forEach() 方法为每个数组元素调用一次函数（回调函数）。
实例

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

注释：该函数接受 3 个参数：
项目值
项目索引
数组本身
上面的例子只用了 value 参数。这个例子可以重新写为：
实例

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。
这个例子将每个数组值乘以2：
实例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

请注意，该函数有 3 个参数：

• 项目值
• 项目索引
• 数组本身
  当回调函数仅使用 value 参数时，可以省略索引和数组参数：
  实例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。
这个例子用值大于 18 的元素创建一个新数组：
实例

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身
  在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：
  实例

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。
reduce() 方法不会减少原始数组。
这个例子确定数组中所有数字的总和：
实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
结果为99
请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身
  上例并未使用 index 和 array 参数。可以将它改写为：

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

reduce() 方法能够接受一个初始值：
实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Array.reduceRight()
reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。
reduceRight() 方法不会减少原始数组。
这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Array.every()
every() 方法检查所有数组值是否通过测试。
这个例子检查所有数组值是否大于 18：
实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身
  如果回调函数仅使用第一个参数（值）时，可以省略其他参数：
  实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Array.some()
some() 方法检查某些数组值是否通过了测试。
这个例子检查某些数组值是否大于 18：
实例

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
``
请注意此函数接受 3 个参数：
 - 项目值
 - 项目索引
 - 数组本身

Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。
注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。
实例
检索数组中的项目 "Apple"：

```javascript
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

语法
array.indexOf(item, start)
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。
如果未找到项目，Array.indexOf() 返回 -1。
如果项目多次出现，则返回第一次出现的位置。
Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。
实例
检索数组中的项目 “Apple”：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

array.lastIndexOf(item, start)
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。
Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。
这个例子查找（返回）大于 18 的第一个元素的值：
实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
这个例子查找大于 18 的第一个元素的索引：
实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身