21、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;
}
Array.reduce()
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;
}
亲自试一试
请注意此函数接受 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;
}
亲自试一试
请注意此函数接受 4 个参数:
总数(初始值/先前返回的值)
项目值
项目索引
数组本身
上例并未使用 index 和 array 参数。可以将它改写为:
实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
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”:
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 个参数:
项目值
项目索引
数组本身
22、JavaScript 日期
实例
var d = new Date();
亲自试一试
JavaScript 日期输出
默认情况下,JavaScript 将使用浏览器的时区并将日期显示为全文本字符串:
Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)
稍后,您将在本教程学到更多关于如何显示日期的知识。
创建 Date 对象
Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象:
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
new Date()
new Date() 用当前日期和时间创建新的日期对象:
实例
var d = new Date();
亲自试一试
日期对象是静态的。计算机时间正在滴答作响,但日期对象不会。
new Date(year, month, …)
new Date(year, month, …) 用指定日期和时间创建新的日期对象。
7个数字分别指定年、月、日、小时、分钟、秒和毫秒(按此顺序):
实例
var d = new Date(2018, 11, 24, 10, 33, 30, 0);
亲自试一试
注释:JavaScript 从 0 到 11 计算月份。
一月是 0。十二月是11。
6个数字指定年、月、日、小时、分钟、秒:
实例
var d = new Date(2018, 11, 24, 10, 33, 30);
亲自试一试
5个数字指定年、月、日、小时和分钟:
实例
var d = new Date(2018, 11, 24, 10, 33);
亲自试一试
4个数字指定年、月、日和小时:
实例
var d = new Date(2018, 11, 24, 10);
亲自试一试
3 个数字指定年、月和日:
实例
var d = new Date(2018, 11, 24);
亲自试一试
2个数字指定年份和月份:
实例
var d = new Date(2018, 11);
亲自试一试
您不能省略月份。如果只提供一个参数,则将其视为毫秒。
实例
var d = new Date(2018);
亲自试一试
上个世纪
一位和两位数年份将被解释为 19xx 年:
实例
var d = new Date(99, 11, 24);
亲自试一试
实例
var d = new Date(9, 11, 24);
亲自试一试
new Date(dateString)
new Date(dateString) 从日期字符串创建一个新的日期对象:
实例
var d = new Date("October 13, 2014 11:13:00");
亲自试一试
日期字符串将在下一章中介绍。
JavaScript 将日期存储为毫秒
JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC(协调世界时)以来的毫秒数。
零时间是 1970 年 1 月 1 日 00:00:00 UTC。
现在的时间是:1970 年 1 月 1 日之后的 1554166879383 毫秒。
new Date(milliseconds)
new Date(milliseconds) 创建一个零时加毫秒的新日期对象:
实例
var d = new Date(0);
亲自试一试
1970年 1 月 1 日加上100 000 000 000毫秒,大约是 1973 年 3 月 3 日:
实例
var d = new Date(100000000000);
亲自试一试
1970 年 1 月 1 日减去 100 000 000 000 毫秒大约是 1966 年 10 月 31 日:
实例
var d = new Date(-100000000000);
亲自试一试
实例
var d = new Date(86400000);
亲自试一试
一天(24 小时)是 86 400 000 毫秒。
日期方法
创建 Date 对象时,可以使用许多方法对其进行操作。
日期方法允许您使用本地时间或 UTC(通用或 GMT)时间来获取和设置日期对象的年、月、日、小时、分钟、秒和毫秒。
日期方法和时区将在下一章中介绍。
显示日期
JavaScript(默认情况下)将以全文本字符串格式输出日期:
Wed Mar 25 2015 08:00:00 GMT+0800 (中国标准时间)
在 HTML 中显示日期对象时,会使用 toString() 方法自动转换为字符串。
实例
d = new Date();
document.getElementById("demo").innerHTML = d;
亲自试一试
等同于:
d = new Date();
document.getElementById("demo").innerHTML = d.toString();
亲自试一试
toUTCString() 方法将日期转换为 UTC 字符串(一种日期显示标准)。
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
亲自试一试
toDateString() 方法将日期转换为更易读的格式:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
23、JavaScript 日期格式化
有四种 JavaScript 日期输入格式:
ISO 格式遵守 JavaScript 中的严格标准。
其他格式不太明确,可能是浏览器特定的。
JavaScript 日期输出
无论输入格式如何,JavaScript 默认将输出全文本字符串格式:
Mon Feb 19 2018 06:00:00 GMT+0800 (中国标准时间)
JavaScript ISO 日期
ISO 8601 是表现日期和时间的国际标准。
ISO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式:
实例(完整日期)
var d = new Date("2018-02-19");
亲自试一试
计算的日期相对于您的时区。
根据您的时区,上面的结果将在 2 月 18 日至 2 月 19 日之间变化。
ISO 日期(年和月)
写日期也可以不规定具体某日 (YYYY-MM):
var d = new Date(“2015-03”);
亲自试一试
时区会对结果在 2 月 28 日至 3 月 1 日之间产生变化。
ISO 日期(只有年)
写日期也可以不规定具体的月和日 (YYYY):
var d = new Date("2018");
亲自试一试
时区会对结果在 2017 年 12 月 31 日至 2018 年 1 月 1 日之间产生变化。
ISO 日期(完整的日期加时、分和秒)
写日期也可以添加时、分和秒 (YYYY-MM-DDTHH:MM:SS):
var d = new Date("2018-02-19T12:00:00");
亲自试一试
日期和时间通过大写字母 T 来分隔。
UTC 时间通过大写字母 Z 来定义。
如果您希望修改相对于 UTC 的时间,请删除 Z 并用 +HH:MM 或 -HH:MM 代替:
实例
var d = new Date("2018-02-19T12:00:00-08:30");
亲自试一试
UTC(Universal Time Coordinated)等同于 GMT(格林威治时间)。
注释:UTC,协调世界时,又称世界统一时间,世界标准时间,国际协调时间。
在日期-时间字符串中省略 T 或 Z,在不同浏览器中会产生不同结果。
时区
在设置日期时,如果不规定时区,则 JavaScript 会使用浏览器的时区。
当获取日期时,如果不规定时区,则结果会被转换为浏览器时区。
换句话说,假如日期/时间以 GMT(格林威治标准时间)创建,该日期/时间将被转换为 CST(中国标准时间),如果用户从中国进行浏览。
JavaScript 短日期
短日期通常使用 “MM/DD/YYYY” 这样的语法:
实例
var d = new Date("02/19/2018");
亲自试一试
警告
在某些浏览器中,不带前导零的月或其会产生错误:
var d = new Date(“2018-2-19”);
“YYYY / MM / DD”的行为未定义。
有些浏览器会尝试猜测格式。有些会返回 NaN。
var d = new Date(“2018/02/19”);
“DD-MM-YYYY”的行为也是未定义的。
有些浏览器会尝试猜测格式。有些会返回 NaN。
var d = new Date("19-02-2018");
JavaScript 长日期
长日期通常以 “MMM DD YYYY” 这样的语法来写:
实例
var d = new Date("Feb 19 2018");
亲自试一试
月和天能够以任意顺序出现:
实例
var d = new Date("19 Feb 2018");
亲自试一试
并且,月能够以全称 (January) 或缩写 (Jan) 来写:
实例
var d = new Date("February 19 2018");
亲自试一试
实例
var d = new Date("Feb 19 2018");
亲自试一试
逗号会被忽略,且对大小写不敏感:
实例
var d = new Date("FEBRUARY, 25, 2015");
亲自试一试
JavaScript 完整日期
JavaScript 接受“完整 JavaScript 格式”的日期字符串:
实例
var d = new Date("Mon Feb 19 2018 06:55:23 GMT+0100 (W. Europe Standard Time)");
亲自试一试
JavaScript 会忽略日期名称和时间括号中的错误:
实例
var d = new Date("Fri Mar 26 2018 09:56:24 GMT+0100 (Tokyo Time)");
24、JavaScript 获取日期方法
日期方法允许您获取并设置日期值(年、月、日、时、分、秒、毫秒)
日期获取方法
获取方法用于获取日期的某个部分(来自日期对象的信息)。下面是最常用的方法(以字母顺序排序):
getTime() 方法
getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
亲自试一试
getFullYear() 方法
getFullYear() 方法以四位数字形式返回日期年份:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
亲自试一试
getMonth() 方法
getMonth() 以数字(0-11)返回日期的月份:
实例
var d = new Date();
document.getElementById(“demo”).innerHTML = d.getMonth();
在 JavaScript 中,第一个月(1 月)是月号 0,因此 12 月返回月号 11。
您可以使用名称数组,并使用 getMonth() 将月份作为名称返回:
实例
var d = new Date();
var months =
[
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
document.getElementById("demo").innerHTML = months[d.getMonth()];
亲自试一试
getDate() 方法
getDate() 方法以数字(1-31)返回日期的日:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
亲自试一试
getHours() 方法
getHours() 方法以数字(0-23)返回日期的小时数:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getHours();
亲自试一试
getMinutes() 方法
getMinutes() 方法以数字(0-59)返回日期的分钟数:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();
亲自试一试
getSeconds() 方法
getSeconds() 方法以数字(0-59)返回日期的秒数:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();
亲自试一试
getMilliseconds() 方法
getMilliseconds() 方法以数字(0-999)返回日期的毫秒数:
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getMilliseconds();
亲自试一试
getDay() 方法
getDay() 方法以数字(0-6)返回日期的星期名(weekday):
实例
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
亲自试一试
在 JavaScript 中,一周的第一天(0)表示“星期日”,即使世界上的一些国家认为周的第一天是“星期一”。
您可以使用名称数组,并使用 getDay() 将星期名作为名称返回:
实例
var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
亲自试一试
UTC 日期方法
UTC 日期方法用于处理 UTC 日期(通用时区日期,Univeral Time Zone dates):
25、JavaScript 设置日期方法
使用“设置日期”方法可以设置日期对象的日期值(年、月、日、小时、分钟、秒、毫秒)。
日期设置方法
设置方法用于设置日期的某个部分。下面是最常用的方法(按照字母顺序排序):
setFullYear() 方法
setFullYear() 方法设置日期对象的年份。这个例子设置为 2020 年:
实例
<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>
setFullYear() 方法可以选择设置月和日:
实例
<script>
var d = new Date();
d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
</script>
setMonth() 方法
setMonth() 方法设置日期对象的月份(0-11):
实例
<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>
setDate() 方法
setDate() 方法设置日期对象的日(1-31):
实例
<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setDate() 方法也可用于将天数添加到日期:
实例
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
如果添加天数,切换月份或年份,则更改将由 Date 对象自动处理。
setHours() 方法
setHours() 方法设置日期对象的小时(0-23):
实例
<script>
var d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setMinutes() 方法
setMinutes() 方法设置日期对象的分钟(0-59):
实例
<script>
var d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setSeconds() 方法
setSeconds() 方法设置日期对象的秒数(0-59):
实例
<script>
var d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
比较日期
日期可以很容易地进行比较。
下面的例子把今日与 2049 年 1 月 16 日进行比较:
实例
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2049, 0, 16);
if (someday > today) {
text = "今天在 2049 年 1 月 16 日之前";
} else {
text = "今天在 2049 年 1 月 16 日之后";
}
document.getElementById("demo").innerHTML = text;
亲自试一试
JavaScript 从 0 到 11 计数月份。1 月是 0。12 月是 11。