javascri基础知识21~25

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。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值