11 数组迭代
forEach() 方法为每个数组元素调用一次函数（回调函数）。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value(值), index(索引), array(本身)) {
txt = txt + value + "<br>";
}
结果为:45 4 9 16 25
11.1 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;
}
结果为99
reduce() 方法能够接受一个初始值： var numbers1 = [45, 4, 9, 16, 25]; var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) { return total + value; }
结果为199
12 创建 Date 对象
Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象：
new Date() new Date(year(年), month(月), day(日), hours(小时), minutes(分钟), seconds(秒), milliseconds(毫秒)) new Date(milliseconds) new Date(date string)
5个数字指定年、月、日、小时和分钟(以此类推)：
var d = new Date(2018, 11, 24, 10, 33);
12.1 显示日期
JavaScript（默认情况下）将以全文本字符串格式输出日期：
d = new Date();
document.getElementById("demo").innerHTML = d;
会显示当前中国标准时间
toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
结果为 Wed, 14 Apr 2021 08:20:45 GMT
toDateString() 方法将日期转换为更易读的格式：
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
结果为Wed Apr 14 2021
13 数学
Math.pow(x, y) 的返回值是 x 的 y 次幂：
Math.pow(8, 2); // 返回 64
Math.sqrt(x) 返回 x 的平方根：
Math.sqrt(64); // 返回 8
Math.abs(x) 返回 x 的绝对（正）值：
Math.abs(-4.7); // 返回 4.7
Math.ceil(x) 的返回值是 x 上舍入最接近的整数：
Math.ceil(6.4); // 返回 7
Math.floor(x) 的返回值是 x 下舍入最接近的整数：
Math.floor(2.7); // 返回 2
14 随机
Math.random( )
Math.random( ) 返回 0（包括） 至 1（不包括） 之间的随机数：
JavaScript 随机整数 Math.random() 与 Math.floor() 一起使用用于返回随机整数。
Math.floor(Math.random() * 10); //返回 0 至 9 之间的数
Math.floor(Math.random() * 11); // 返回 0 至 10 之间的数
Math.floor(Math.random() * 100); // 返回 0 至 99 之间的数
Math.floor(Math.random() * 10) + 1; // 返回 1 至 10 之间的数
一个适当的随机函数 正如你从上面的例子看到的，创建一个随机函数用于生成所有随机整数是一个好主意。
这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
这个 JavaScript 函数始终返回介于 min 和 max（都包括）之间的随机数：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
15 逻辑
JavaScript 布尔（逻辑）代表两个值之一：true 或 false。
不要创建布尔对象。它会拖慢执行速度。
new 关键词会使代码复杂化，并产生某些意想不到的结果:
当使用 == 运算符时，相等的布尔是相等的
16 条件(三元)运算符
variablename(变量名称) = (condition(条件)) ? value1(值1):value2(值2)
如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。
17 条件
if语句 (语义:如果...就..)
if (条件) {
如果条件为 true 时执行的代码
}
if (hour < 18) {
greeting = "Good day";
}
else语句(如果不..那么就..)
if (条件) {
条件为 true 时执行的代码块
} else {
条件为 false 时执行的代码块
}
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
else if 语句(如果不....那么就...)有一个满足就行
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
if (time < 10) {
greeting = "Good morning";
} else if (time < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
switch语句:选择多个需被执行的代码块之一。(相当于从中筛选多个,选择一个为ture)
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
switch (new Date().getDay()) {
case 0:
day = "星期天";
break;
case 1:
day = "星期一";
break;
case 2:
day = "星期二";
break;
case 3:
day = "星期三";
break;
case 4:
day = "星期四";
break;
case 5:
day = "星期五";
break;
case 6:
day = "星期六";
}
17.1 关键字
break 关键词 如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。
此举将停止代码块中更多代码的执行以及 case 测试。
如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。
break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
default 关键词:default 关键词规定不存在 case 匹配时所运行的代码：
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
text 的结果是：
期待周末~
Switching 的细节
如果多种 case 匹配一个 case 值，则选择第一个 case。
如果未找到匹配的 case，程序将继续使用默认 label。
如果未找到默认 label，程序将继续 switch 后的语句。
18 循环
JavaScript 支持不同类型的循环：
for - 多次遍历代码块
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
for/in - 遍历对象属性
var person = {fname:"Bill", lname:"Gates", age:62};
var text = "";
var x;
for (x in person) {
text += person[x];
}
while - 当指定条件为 true 时循环一段代码块(只要条件为 true，循环能够一直执行代码块。)
如果忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。
while (条件) {
要执行的代码块
}
while (i < 10) {
text += "数字是 " + i;
i++;
}
do/while - 当指定条件为 true 时循环一段代码块
do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。
do {
要执行的代码块
}
while (条件)
do {
text += "The number is " + i;
i++;
}
while (i < 10);
19 JavaScript Break 和 Continue
break 语句“跳出”循环。
continue 语句“跳过”循环中的一个迭代
break 语句会中断循环，并继续执行循环之后的代码（如果有）：
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "数字是 " + i + "<br>";
}
continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。
本例跳过值 3 ：
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "数字是 " + i + "<br>";
}
continue 语句（不论有无标签引用）只能用于跳过一个迭代。
break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。
如果有标签引用，则 break 语句可用于跳出任意代码块：
var cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
break list;
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
}
结果为
BMW
Volvo
20 let
重新声明变量 使用 var 关键字重新声明变量会带来问题。
在块中重新声明变量也将重新声明块外的变量：
var x = 10;
// 此处 x 为 10
{
var x = 6;
// 此处 x 为 6
}
// 此处 x 为 6
使用let(块域)关键字重新声明变量可以解决这个问题。
在块中重新声明变量不会重新声明块外的变量：
var x = 10;
// 此处 x 为 10
{
let x = 6;
// 此处 x 为 6
}
// 此处 x 为 10
const(块域)但是您无法重新为常量数组赋值：
const PI = 3.141592653589793;
PI = 3.14; // 会出错
PI = PI + 10; // 也会出错
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性：
car.color = "White";
// 您可以添加属性：
car.owner = "Bill";
21 表单验证
自动 HTML 表单验证
HTML 表单验证能够被浏览器自动执行：
如果表单字段（fname）是空的，required 属性防止表单被提交：
<form action="/action_page_post.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
验证API
checkValidity() 方法
如果输入字段包含无效的数据，显示一条消息：
<input id="id1" type="number" min="100" max="300" required(防止空表单提交)>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity()返回ture,则有效 == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
22 函数补充
22.1 JavaScript call() 方法
call() 方法是预定义的 JavaScript 方法。
它可以用来调用所有者对象作为参数的方法。
通过 call()，您能够使用属于另一个对象的方法。
本例调用 person 的 fullName 方法，并用于 person1：
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
firstName:"Steve",
lastName: "Jobs",
}
person.fullName.call(person1); // 将返回 "Bill Gates"
call() 方法可接受参数：
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");
22.2 apply
在本例中，person 的 fullName 方法被应用到 person1：
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName: "Bill",
lastName: "Gates",
}
person.fullName.apply(person1); // 将返回 "Bill Gates"
call() 和 apply() 之间的区别 不同之处是：
call() 方法分别接受参数。
apply() 方法接受数组形式的参数。
如果要使用数组而不是参数列表，则 apply() 方法非常方便。
apply() 方法接受数组中的参数：
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
22.3 在数组上模拟 max 方法
您可以使用 Math.max() 方法找到（数字列表中的）最大数字：
Math.max(1,2,3); // 会返回 3
由于 JavaScript 数组没有 max() 方法，因此您可以应用 Math.max() 方法。
Math.max.apply(null, [1,2,3]); // 也会返回 3
注意
JavaScript 严格模式
在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。在“非严格”模式下，它成为全局对象。
22.4 闭包
JavaScript 变量属于本地或全局作用域。
全局变量能够通过闭包实现局部（私有）。
变量的生命周期
全局变量活得和您的应用程序（窗口、网页）一样久。
局部变量活得不长。它们在函数调用时创建，在函数完成后被删除。
JavaScript 嵌套函数
所有函数都有权访问全局作用域。
事实上，在 JavaScript 中，所有函数都有权访问它们“上面”的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问其上的作用域。
在本例中，内部函数 plus() 可以访问父函数中的 counter 计数器变量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
23.作用域和全局变量，局部变量
23.1.作用域
1.javaScript作用域：就是代码名字（变量）在某个范围内起的作用和效果。
目的时为了提高程序的可靠性，更重要的时减少命名冲突
2.js的作用域（es6）之前：全局作用域 局部作用域
3.全局作用域：整个Script标签 或者是一个单独的JS文件
4.局部作用域（函数作用域）在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
23.2 全局变量和局部变量
根据作用域的不同，变量分两种
全局变量
1.在全局作用域下声明的变量叫做全局变量（函数外部定义的变量）
2.全局变量在代码的任何位置都可以使用
3.在全局作用域下var声明的变量时全局变量
4.特殊情况下，在函数内不使用var声明的的变量也是全局变量
局部变量
1.在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
2.局部变量只能在该函数内部使用
3.在函数内部var声明的变量是局部变量
4.函数的形参实际上就是局部变量
** 作用域链**
内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构称为作用域链 就近原则
var num=10;
function(){
var num=20;
function(){
console.log(num);
}
fn();
}
fn();
结果为20；
24 预备解析 声明变量提升 函数提升
// //1.案例一
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
// // // 预解析：
var num;//声明变量提升
function fun() {
var num;//声明变量提升
console.log(num);
num = 20;
}//函数提升
num = 10;
fn();
// //结果为undefined
// // //2.案例二
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fun();
// // //预解析
var num;//声明变量提升
function fn() {
var num;//声明变量提升
console.log(num);
num = 20;
console.log(num);
}//函数提升
num = 10;
fun()
// // 结果都为undefined 20
// // //3,案例三
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = "123";
}
// // //域解析
var b;//声明变量提升
function f1() {
var b;//声明变量提升
var a//声明变量提升
b = 9;
console.log(a);
console.log(b);
a = "123"
}//函数提升
nun = 18;
f1();
//undefined 9
// // 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;//相当于var a=9;b=9;c=9;
console.log(a);
console.log(b);
console.log(c);
}
//域解析
function f1() {
var a;//声明变量提升
a = 9;
b = 9;
c = 9;
console.log(a);
console.log(b);
console.log(c);
};//函数提升
f1();
console.log(c);
console.log(b);
console.log(a)//无法访问局部变量
// 结果为 9 9 9 9 9 undefined
