目录
2、查找字符串中的字符串 indexOf()、lastindexOf()
6、转换为大写和小写 toUpperCase()、toLowerCase()
9、提取字符串字符 charAt(position)、charCodeAt(position)
6、把变量转换为数值 Number()、parseInt()、parseFloat()
1、字符串长度 length
length 属性返回字符串的长度：
实例：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
//length 属性返回字符串的长度：
26
2、查找字符串中的字符串 indexOf()、lastindexOf()
indexOf() 方法返回字符串中指定文本
首次
出现的索引（位置）：
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
//indexOf() 方法返回指定文本首次出现的位置：
17JavaScript 从零计算位置。
0 是字符串中的第一个位置，1 是第二个，2 是第三个 …
lastIndexOf() 方法返回指定文本在字符串中
最后
一次出现的索引：
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
//lastIndexOf() 返回指定文本最后出现的位置：
51如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("USA");
//如果未找到文本，则 indexOf() 和 lastIndexOf() 都返回 -1：
-1两种方法都接受作为检索起始位置的第二个参数。
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);
//indexOf() 方法接受第二个参数作为搜索的起始位置：
51lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);
//lastIndexOf() 方法接受第二个参数作为搜索的起始位置：
请记住，lastIndexOf（）方法向后搜索，因此位置 50 表示在第 50 位开始搜索，并搜索到开头。
位置 50 指的是从开头算起的位置 50。
17
3、检索字符串中的字符串 search()
search() 方法搜索特定值的字符串，并返回匹配的位置：
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");
//search() 方法返回字符串中指定文本第一次出现的位置：
17
您注意到了吗？
两种方法，indexOf() 与 search()，是
相等的
。
这两种方法是不相等的。区别在于：
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值（正则表达式）。
4、提取部分字符串
有三种提取部分字符串的方法：
-
slice(
start
,
end
)
-
substring(
start
,
end
)
-
substr(
start
,
length
)
（1）、slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
这个例子裁剪字符串中位置 7 到位置 13 的片段：
实例
var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);
//slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Banana如果省略第二个参数，则该方法将裁剪字符串的剩余部分：
实例
var res = str.slice(7);
//slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Banana, Mango或者从结尾计数：
实例
var res = str.slice(-13);
//slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Banana, Mango
（2）、substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。
实例
var str = "Apple, Banana, Mango";
var res = str.substring(7,13);
//substring() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Banana如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。
（3）、substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的
长度
。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
//substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Banana如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(7);
//substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Banana, Mango如果首个参数为负，则从字符串的结尾计算位置。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(-5);
//substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
Mango第二个参数不能为负，因为它定义的是长度。
5、替换字符串内容 replace()
replace() 方法用另一个值替换在字符串中指定的值：
实例
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");
//请把下面的段落中的“Microsoft”替换为“W3School”：
请访问 Microsoft！---> 请访问 W3School！replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace()
只替换首个匹配
：
实例
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");
//请把下面的段落中的“Microsoft”替换为“W3School”：
请访问 Microsoft 和 Microsoft->请访问 W3School 和 Microsoft->请访问 W3School 和 W3School！默认地，replace() 对大小写敏感。因此不对匹配 MICROSOFT：
实例
str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School");
//请把下面的段落中的“Microsoft”替换为“W3School”：
请访问 Microsoft！
此例无效，因为 MICROSOFT 为大写。如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：
实例
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
//请把下面的段落中的“Microsoft”替换为“W3School”：
请访问 Microsoft！---> 请访问 W3School！请注意正则表达式不带引号。
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：
实例
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
//请把下面的段落中的“Microsoft”替换为“W3School”：
请访问 Microsoft 和 Microsoft！--->请访问 W3School 和 W3School！
6、转换为大写和小写 toUpperCase()、toLowerCase()
通过 toUpperCase() 把字符串转换为大写：
实例
var text1 = "Hello World!"; // 字符串
var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1
//把字符串转换为大写：
Hello World! ---> HELLO WORLD!通过 toLowerCase() 把字符串转换为小写：
实例
var text1 = "Hello World!"; // 字符串
var text2 = text1.toLowerCase(); // text2 是被转换为小写的 text1
//把字符串转换为小写：
Hello World! ---> hello world!
7、concat() 方法
concat() 连接两个或多个字符串：
实例
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
//concat() 方法连接两个或多个字符串：
Hello World!concat() 方法可用于代替加运算符。下面两行是等效的：
实例
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说：字符串是不可变的：字符串不能更改，只能替换。
8、String.trim()
trim() 方法删除字符串两端的空白符：
实例
var str = " Hello World! ";
alert(str.trim());
//删除空白字符的字符串：
Hello World!
9、提取字符串字符 charAt(
position
)、charCodeAt(
position
)
这是两个提取字符串字符的
安全
方法：
-
charAt(
position
) -
charCodeAt(
position
)
（1）、charAt() 方法
charAt() 方法返回字符串中指定下标（位置）的字符串：
实例
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
//charAt() 方法返回字符串中指定位置的字符串：
H
（2）、charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
实例
var str = "HELLO WORLD";
str.charCodeAt(0); // 返回 72
//charCodeAt() 方法返回字符串中指定位置的字符 unicode 编码：
72
属性访问（Property Access）
ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]：
实例
var str = "HELLO WORLD";
str[0]; // 返回 H
//ECMAscript 5 允许对字符串的属性访问：
H
10、把字符串转换为数组 split()
可以通过 split() 将字符串转换为数组：
实例
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML = arr[0];
}
//a如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：
实例
var txt = "Hello"; // 字符串
txt.split(""); // 分隔为字符var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
//
H
e
l
l
o
二、JavaScript 数值方法
1、toString() 方法
toString() 以字符串返回数值。
所有数字方法可用于任意类型的数字（字面量、变量或表达式）：
实例
var x = 123;
x.toString(); // 从变量 x 返回 123
(123).toString(); // 从文本 123 返回 123
(100 + 23).toString(); // 从表达式 100 + 23 返回 123var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" +
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);
//toString() 方法以基数 2 到 36 输出字符串：
32 =
Decimal 32
Hexadecimal 20
Octal 40
Binary 100000
2、toExponential() 方法
toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。
参数定义小数点后的字符数：
实例
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0var x = 9.656;
document.getElementById("demo").innerHTML =
x.toExponential() + "<br>" +
x.toExponential(2) + "<br>" +
x.toExponential(4) + "<br>" +
x.toExponential(6);
//9.656e+0
9.66e+0
9.6560e+0
9.656000e+0该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。
3、toFixed() 方法
toFixed() 返回字符串值，它包含了指定位数小数的数字：
实例
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000toFixed(2) 非常适合处理金钱。
4、toPrecision() 方法
toPrecision() 返回字符串值，它包含了指定长度的数字：
实例
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
5、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() 方法。
6、把变量转换为数值 Number()、parseInt()、parseFloat()
这三种 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)。
parseFloat() 方法
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 | 表示无穷大（溢出返回）。 |
三、JavaScript 数组方法
1、把数组转换为字符串 toString()
JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
结果：
Banana,Orange,Apple,Mangojoin() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString()，但是您还可以规定分隔符：
实例
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
结果：
Banana * Orange * Apple * Mango
2、Popping 和 Pushing
在处理数组时，删除元素和添加新元素是很简单的。
Popping 和 Pushing 指的是：
从数组
弹出
项目，或向数组
推入
项目。
Popping
pop() 方法从数组中删除最后一个元素：
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // 从 fruits 删除最后一个元素（"Mango"）
//pop() 方法从数组中删除最后一个元素。
Banana,Orange,Applepop() 方法返回“被弹出”的值：
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // x 的值是 "Mango"
//pop() 方法从数组中删除最后一个元素。
pop() 方法的返回值是已删除的项目。
Banana,Orange,Apple
Pushing
push() 方法（在数组结尾处）向数组添加一个新的元素：
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // 向 fruits 添加一个新元素
//push() 方法将新元素追加到数组中。
Banana,Orange,Apple,Mango,Kiwipush() 方法返回新数组的长度：
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // x 的值是 5
//无限增加
3、位移元素shift()、unshift()
位移与弹出等同，但处理首个元素而不是最后一个。
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // 从 fruits 删除第一个元素 "Banana"
//Orange,Apple,Mangoshift() 方法返回被“位移出”的字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.shift();
document.getElementById("demo3").innerHTML = fruits;
//
Banana,Orange,Apple,Mango
Banana
Orange,Apple,Mangounshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // 向 fruits 添加新元素 "Lemon"
//Lemon,Banana,Orange,Apple,Mangounshift() 方法返回新数组的长度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo3").innerHTML = fruits;
//
Banana,Orange,Apple,Mango
5
Lemon,Banana,Orange,Apple,Mango
4、更改元素
通过使用它们的
索引号
来访问数组元素：
数组
索引（下标）
以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Lemon";
document.getElementById("demo2").innerHTML = fruits;
//
Banana,Orange,Apple,Mango
Lemon,Orange,Apple,Mangolength 属性提供了向数组追加新元素的简易方法：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}
//
Banana,Orange,Apple,Mango,Lemon,Lemon,Lemon........
5、删除元素 delete
既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来
删除
：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"第一种水果是：" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"第一种水果是：" + fruits[0];
//
第一种水果是：Banana
第一种水果是：undefined使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
6、拼接数组splice()
splice() 方法可用于向数组添加新项：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
function myFunction() {
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
}
//
原数组：
Banana,Orange,Apple,Mango
新数组：
Banana,Orange,Lemon,Kiwi,Apple,Mango第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br> " + fruits;
function myFunction() {
var removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
document.getElementById("demo3").innerHTML = "已删除项：<br> " + removed;
}
//
原数组：
Banana,Orange,Apple,Mango
新数组：
Banana,Orange,Lemon,Kiwi
已删除项：
Apple,Mango
7、使用 splice() 来删除元素
通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.splice(0, 1);
document.getElementById("demo").innerHTML = fruits;
}
//Orange,Apple,Mango
第一个参数（0）定义新元素应该被
添加
（接入）的位置。
第二个参数（1）定义应该
删除多个
元素。
其余参数被省略。没有新元素将被添加。
8、合并（连接）数组 concat()
concat() 方法通过合并（连接）现有数组来创建一个新数组：
实例（合并两个数组）
var myGirls = ["Emma", "Isabella"];
var myBoys = ["Jacob", "Michael", "Ethan"];
var myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
//Emma,Isabella,Jacob,Michael,Ethanconcat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：
实例（合并三个数组）
var arr1 = ["Emma", "Isabella"];
var arr2 = ["Jacob", "Michael", "Ethan"];
var arr3 = ["Joshua", "Daniel"];
var myChildren = arr1.concat(arr2, arr3);
document.getElementById("demo").innerHTML = myChildren;
//Emma,Isabella,Jacob,Michael,Ethan,Joshua,Danielconcat() 方法也可以将值作为参数：
实例（将数组与值合并）.
var arr1 = ["Emma", "Isabella"];
var myChildren = arr1.concat(["Jacob", "Michael", "Ethan"]);
document.getElementById("demo").innerHTML = myChildren;
//Emma,Isabella,Jacob,Michael,Ethan
9、裁剪数组 slice()
slice() 方法用数组的某个片段切出新数组。
本例从数组元素 1 （”Orange”）开始切出一段数组：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
//
此例从数组元素 1（“Orange”）开始切出数组的一部分：
Banana,Orange,Lemon,Apple,Mango
Orange,Lemon,Apple,Mangoslice() 方法创建新数组。它不会从源数组中删除任何元素。
本例从数组元素 3 （”Apple”）开始切出一段数组：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
//
此例从数组元素 3（“Apple”）开始切出数组的一部分：
Banana,Orange,Lemon,Apple,Mango
Apple,Mangoslice() 可接受两个参数，比如 (1, 3)。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
//
当给 slice() 方法赋予两个参数时，它从 start 参数中选择数组元素，直到（但不包括）end 参数：
Banana,Orange,Lemon,Apple,Mango
Orange,Lemon如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
//
此例从数组元素 2（“Lemon”）开始切出数组的一部分：
Banana,Orange,Lemon,Apple,Mango
Lemon,Apple,Mango
10、自动 toString()
如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
//toString() 方法以逗号分隔的字符串返回数组：
Banana,Orange,Apple,Mango所有 JavaScript 对象都拥有 toString() 方法。
四、JavaScript 数组排序
sort() 方法是最强大的数组方法之一。
1、数组排序sort()
sort() 方法以字母顺序对数组进行排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
//sort() 方法按字母顺序对数组进行排序。
Apple,Banana,Mango,Orange
2、反转数组 reverse()
reverse() 方法反转数组中的元素。
您可以使用它以降序对数组进行排序：
// Create and display an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
//通过组合 sort() 和 reverse()，您可以按降序对数组进行排序。
Orange,Mango,Banana,Apple
3、数字排序
默认地，sort() 函数按照
字符串
顺序对值进行排序。
该函数很适合字符串（”Apple” 会排在 “Banana” 之前）。
不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个
比值函数
来修正此问题：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
//升序对数组进行排序。
1,5,10,25,40,100使用相同的技巧对数组进行降序排序：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return b - a});
document.getElementById("demo").innerHTML = points;
}
//按降序对数组进行排序。
100,40,25,10,5,1
4、比值函数
比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负，零或正值，这取决于参数：
function(a, b){return a-b}当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
实例：
当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。
该函数计算 40-100，然后返回 -60（负值）。
排序函数将把 40 排序为比 100 更低的值。
您可以使用下面的代码片段来测试数值和字母排序：
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;
}
//按字母排序
1,10,100,25,40,5
//按数字排序
1,5,10,25,40,100
5、以随机顺序排序数组
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points;
}
//随机
25,1,100,40,10,5
........
........
........
6、查找最高（或最低）的数组值
JavaScript 不提供查找数组中最大或最小数组值的内建函数。
不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。
升序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
//最低值是：1降序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
//最高值是：100如果您仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。
7、对数组使用 Math.max()
您可以使用 Math.max.apply 来查找数组中的最高值：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
//最高值是：100Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。
8、对数组使用 Math.min()
您可以使用 Math.min.apply 来查找数组中的最低值：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
//最低值是：1Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。
9、我的 Min / Max JavaScript 方法
最快的解决方法是使用“自制”方法。
此函数遍历数组，用找到的最高值与每个值进行比较：
实例（查找 Max）
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
//最高值是：100此函数遍历数组，用找到的最低值与每个值进行比较：
实例（查找 Min）
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
//最低值是：1
10、排序对象数组
JavaScript 数组经常会包含对象：
实例
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。
解决方法是通过比较函数来对比属性值：
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){return a.year - b.year});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
//
BMW 2017
porsche 2018
Audi 2019比较字符串属性会稍复杂：
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
];
displayCars();
function myFunction() {
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;
});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
//
Audi 2019
BMW 2017
porsche 2018
五、JavaScript 数组迭代方法
1、Array.forEach()
forEach() 方法为每个数组元素调用一次函数（回调函数）。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
//为每个元素调用一次函数。
45
4
9
16
25
注释：该函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
上面的例子只用了 value 参数。这个例子可以重新写为：
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "<br>";
}
//为每个元素调用一次函数。
45
4
9
16
25
2、Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。
这个例子将每个数组值乘以2：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
//通过对每个数组元素执行函数来创建新数组。
90,8,18,32,50请注意，该函数有 3 个参数：
- 项目值
- 项目索引
- 数组本身
当回调函数仅使用 value 参数时，可以省略索引和数组参数：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
//通过对每个数组元素执行函数来创建新数组。
90,8,18,32,50
3、Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。
这个例子用值大于 18 的元素创建一个新数组：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
//使用通过测试的所有数组元素创建一个新数组。
45,25请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
//使用通过测试的所有数组元素创建一个新数组。
45,25
4、Array.reduce()
reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。
reduce() 方法不会减少原始数组。
这个例子确定数组中所有数字的总和：
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
//此例确定数组中所有数字的总和：
总和是：99请注意此函数接受 4 个参数：
- 总数（初始值/先前返回的值）
- 项目值
- 项目索引
- 数组本身
上例并未使用 index 和 array 参数。可以将它改写为：
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value) {
return total + value;
}
//此例确定数组中所有数字的总和：
总和是：99reduce() 方法能够接受一个初始值：
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value) {
return total + value;
}
//此例确定数组中所有数字的总和：
总和是：199
5、Array.reduceRight()
reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。
reduceRight() 方法不会减少原始数组。
这个例子确定数组中所有数字的总和：
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
//此例确定数组中所有数字的总和：
总和是：99请注意此函数接受 4 个参数：
- 总数（初始值/先前返回的值）
- 项目值
- 项目索引
- 数组本身
上例并未使用 index 和 array 参数。可以将它改写为：
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value) {
return total + value;
}
//此例确定数组中所有数字的总和：
总和是：99
6、Array.every()
every() 方法检查所有数组值是否通过测试。
这个例子检查所有数组值是否大于 18：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
//every() 方法检查所有数组值是否通过测试。
所有大于 18 的是：false请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
如果回调函数仅使用第一个参数（值）时，可以省略其他参数：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
function myFunction(value) {
return value > 18;
}
//every() 方法检查所有数组值是否通过测试。
所有大于 18 的是：false
7、Array.some()
some() 方法检查某些数组值是否通过了测试。
这个例子检查某些数组值是否大于 18：
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "某些值大于 18 是：" + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
//some() 方法检查某些数组值是否通过了测试。
某些值大于 18 是：true请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
8、Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。
注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。
检索数组中的项目 “Apple”：
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple 被找到的位置是：" + (a + 1);
//Apple 被找到的位置是：1
语法
array.indexOf(item, start)| item | 必需。要检索的项目。 |
| start | 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。 |
如果未找到项目，Array.indexOf() 返回 -1。
如果项目多次出现，则返回第一次出现的位置。
9、Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。
检索数组中的项目 “Apple”：.
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
//Apple is found in position 3array.lastIndexOf(item, start)| item | 必需。要检索的项目。 |
| start | 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。 |
10、Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。
这个例子查找（返回）大于 18 的第一个元素的值：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
//大于 18 的第一个值是：25请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
11、Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
这个例子查找大于 18 的第一个元素的索引：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
//大于 18 的第一个值的索引是：3请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身