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 个参数:
- 项目值
- 项目索引
- 数组本身