JavaScript学习笔记1

ScienceLi1125

已于 2023-10-12 18:12:42 修改

阅读量268

点赞数 2

分类专栏：软件开发文章标签： javascript 学习前端

于 2022-08-27 21:27:44 首次发布

本文链接：https://blog.csdn.net/m0_51976564/article/details/126273373

版权

软件开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文参考 w3school在线教程，仅供本人学习使用。同时提供 w3school在线编辑器在线编译 HTML 代码。

本文是 JavaScript 基础知识，进阶内容见 JavaScript学习笔记2 。

1. JavaScript 简介

JavaScript 是一种高级的、解释型、直译式脚本语言，具有逻辑功能。JavaScript 通过嵌入 HTML 从而控制网页的行为，实现其相应的逻辑功能。如：改变 HTML 内容、改变 HTML 属性、改变 HTML 样式、隐藏 HTML 元素、显示 HTML 元素等，演示见超链接。

JavaScript 是 web 开发必学的三种语言之一：HTML 定义网页的内容、CSS 规定网页的布局、JavaScript 对网页行为进行编程。

（1）script 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间：

<script>
	document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

（2）JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。例如，当发生事件时调用函数，比如当用户点击按钮时。

（3）内部 JavaScript

JavaScript 函数可以放置于 HTML 页面的 <head> 部分和 <body> 部分：

<!DOCTYPE html>
<html>
	<head>
		<script>
			function myFunction() {
    			document.getElementById("demo").innerHTML = "段落被更改。";
			}
		</script>
	</head>
	<body>
		<h1>一张网页</h1>
		<p id="demo">一个段落</p>
		<button type="button" onclick="myFunction()">试一试</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<body> 
		<h1>A Web Page</h1>
		<p id="demo">一个段落</p>
		<button type="button" onclick="myFunction()">试一试</button>
		<script>
			function myFunction() {
			   document.getElementById("demo").innerHTML = "段落被更改。";
			}
		</script>
	</body>
</html>

（4）外部 JavaScript

JavaScript 脚本可放置于外部 js 文件中通过 <script> 标签的 src 属性设置脚本的名称引入。

//外部文件：myScript.js
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

<!--html导入js文件-->
<script src="\static\js\myScript.js"></script>
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

2. JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数，因此使用下列方法输出元素。

innerHTML
JavaScript 使用 innerHTML 写入 HTML 元素：

<!DOCTYPE html>
<html>
  <body>
    <p>第一段</p>
    <p id="demo"></p>
    <p>第二段</p>
    <script>
    	document.getElementById("demo").innerHTML = "test";
    </script>
  </body>
</html>

document.write()
JavaScript 使用 document.write() 写入 HTML 输出，该方法仅用于测试：

<!DOCTYPE html>
<html>
  <body>
    <p>测试</p>
    <script>
    	document.write(5 + 6);
    </script>
  </body>
</html>

注意，在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML。

window.alert()
JavaScript 使用 window.alert() 弹出警告框来显示数据：

<!DOCTYPE html>
<html>
  <body>
    <p>警告弹窗测试</p>
    <script>
    	window.alert("弹窗");
    </script>
  </body>
</html>

console.log()
JavaScript 使用 console.log() 在浏览器控制台显示数据，一般也用于测试：

<!DOCTYPE html>
<html>
  <body>
    <p>控制台输出：</p>
    <script>
    	console.log(5 + 6);
    </script>
  </body>
</html>

3. 基本语法

JavaScript 语句由 值、运算符、表达式、关键词、注释 构成。

（1）JavaScript 值

JavaScript 语句定义两种类型的值：变量值和混合值。其中变量值就是变量；混合值也称为字面量，也就是变量的值。

JavaScript 中使用 var 关键词来声明任何类型的变量：

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      var x, y;
      x = 7;
      y = "测试"
      document.getElementById("demo").innerHTML = x + y;
    </script>
  </body>
</html>

（2）JavaScript 运算符

JavaScript 中算数运算符与其他语言的用法大抵相同，但是在比较运算符上略有不同，假定 x = 5 ：

运算符	功能	样例	返回值
==	值相等	x==5	true
		x==“5”	true
===	值相等且类型相等	x===5	true
		x===“5”	false
!=	值不相等	x!=5	false
		x!=“5”	false
!==	值不相等或类型不相等	x!==5	false
		x!==“5”	true

（3）JavaScript 关键词

在 ES2015 之前，JavaScript 中声明变量只有 var 一个关键词，作用域只分为全局作用域和函数作用域；ES2015 引入了 let 关键词，此后 var 变量的作用域变成了全局，let 变量拥有块作用域。

ES2015 还引入了 const 关键词，同样具有块作用域。 const 变量必须在声明时赋值，并且不能更改。

更多参考 JavaScript Let 和 JavaScript Const。

4. JavaScript 数据类型

JavaScript 数据类型分为原始类型（undefined、null、boolean、number、string）和引用类型（Object、Date、Array、function等），可以通过 typeof 运算符返回数据类型。

（1）原始数据类型

var oTemp;
alert(typeof oTemp); 	//输出 "undefined"
var bFound = true;
alert(typeof bFound);	//输出"boolean"
var iNum = 86;
alert(typeof iNum);		//输出"number"
var fNum = 5.618e7;
alert(typeof fNum);		//输出"number"
var st = "JavaScript";
alert(typeof fNum);		//输出"string"

alert(null === undefined);	// false
alert(null == undefined);   // true

注意，JavaScript 中的 Null 其实是个 bug，它作为原始值，却被赋予变量类型 object。如果函数或方法要返回的是对象却找不到该对象时，返回的通常是 null。

（2）特殊 Number 值

JavaScript 用 Number.MAX_VALUE 和 Number.MIN_VALUE 表示正无穷和负无穷，所有 ECMAScript 数都必须在这两个值之间。当计算生成的数大于 Number.MAX_VALUE 时，它将被赋予值 Number.POSITIVE_INFINITY，即 Infinity 。同样，生成的数值小于 Number.MIN_VALUE 时也会被赋予值 Number.NEGATIVE_INFINITY，即 -Infinity 。如果计算返回的是无穷大值，那么生成的结果不再有数字值，不能再用于其他计算，但仍然是 number 类型。

可以通过 isFinite() 方法判断是否是无穷大数：

var iResult = 999**999;		//Infinity
if (isFinite(iResult)) {	//true
    alert("finite");
}
else {
    alert("infinite");
}

JavaScript 中另一个特殊 Number 值是 NaN，会被赋给类型转换失败的变量，可以通过 isNaN() 方法判断是否是非数：

alert(isNaN("blue"));  	//输出 "true"
alert(isNaN("666"));  	//输出 "false"

但无论 Infinity 还是 NaN 的类型都是 number。

（3）类型转换

ECMAScript 的 boolean、Number和String类型变量值支持类型转换。

通过 toString() 方法可以将三种类型变量值转换成字符串：

var bFound = false;
alert(bFound.toString());	//输出 "false"
var iNum1 = 10;
var fNum2 = 10.0;
var fNum3 = 10.8;
alert(iNum1.toString());	//输出 "10"
alert(fNum2.toString());	//输出 "10"
alert(fNum3.toString());	//输出 "10.8"
var sColor = "red";
alert(sColor.toString());	//输出 "red"

并且 Number 类型的 toString() 方法还可以通过其基模式输出数值的不同进制表示：

var iNum = 10;
alert(iNum.toString(2));	//输出 "1010"
alert(iNum.toString(8));	//输出 "12"
alert(iNum.toString(10));	//输出 "10"
alert(iNum.toString(16));	//输出 "A"

通过 parseInt() 和 parseFloat() 方法可以将String类型变量值转换成数值。该方法从 0 位置查看字符是否是有效数字，若不是有效数字则返回 NaN，若是则继续向后判断直至无效数字或末尾处截断；并且 parseInt() 方法支持其他进制，也具有基模式：

//parseInt()默认模式转换成十进制数
var iNum1 = parseInt("12345red32");	//12345（在无效数字处截断）
var iNum1 = parseInt("0xA");		//10
var iNum1 = parseInt("56.9");		//56
var iNum1 = parseInt("red");		//NaN
var iNum1 = parseInt("010");		//8（前导零代表八进制）
//parseInt()基模式指定进制
var iNum1 = parseInt("10", 2);		//2
var iNum2 = parseInt("10", 8);		//8
var iNum3 = parseInt("10", 10);		//10
var iNum4 = parseInt("10", 16);		//16
//parseFloat()只有默认模式
var fNum1 = parseFloat("12345red");	//12345
var fNum2 = parseFloat("0xA");		//NaN（不支持其他进制）
var fNum3 = parseFloat("11.2");		//11.2
var fNum4 = parseFloat("11.22.33");	//11.22（忽略第二个及其后小数点）
var fNum5 = parseFloat("0102");		//102（只支持十进制）
var fNum6 = parseFloat("red");		//NaN

强制类型转换：Boolean()，Number()，String()：

//Boolean()非空即真、非零即真
var b1 = Boolean("");			//false
var b2 = Boolean("hello");		//true
var b3 = Boolean(50);			//true
var b4 = Boolean(null);			//false
var b5 = Boolean(0);			//false
var b6 = Boolean("0");			//true（字符串非空）
var b7 = Boolean(new object());	//true
var b8 = Boolean(undefined);	//false
var b9 = Boolean(NaN);			//false
//Number()用法同 parseInt()和 parseFloat()，但不能转换部分值
var n1 = Number(false)			//0
var n2 = Number(true)			//1
var n3 = Number(undefined)		//NaN
var n4 = Number(null)			//0
var n5 = Number("1.2")			//1.2
var n6 = Number("12")			//12
var n7 = Number("1.2.3")		//NaN
var n8 = Number(new object())	//NaN
var n9 = Number(50)				//50
//String()可把任何值转换成字符串
var s1 = String(null);			//"null"
var s2 = String(false);			//"false"

（4）引用类型

引用类型就是类，引用值就是对象。无论是 Date、Array、Boolean、Number、String构造的对象，还是自定义对象，关键字 typeof 返回的类型都是 object。

5. 字符串

JavaScript 中字符串由单引号或双引号包裹，且允许直接出现另一种引号。若想出现同一种引号，需要加转义符：

var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';
var answer = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。";
var answer = 'It\'s good to see you again';

注意，虽然 JavaScript 中字符串可以通过 var firstName = new String("Bill") 创建为对象，但是不建议使用。因为这会降低执行速度，还会在比较字符串时产生偏差。

（1）查找子串

字符串长度：str.length
查找字符串中指定字符串首次出现的位置：str.indexOf() / str.search()
查找字符串中指定字符串最后一次出现的位置：str.lastIndexOf()
判断是否包含指定子串：str.includes()

//获取字符串长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;					//26
//检索字符串中的字符串
var str = "The full name of China is the People's Republic of China.";
var pos1 = str.indexOf("China");		//17
var pos2 = str.lastIndexOf("China");	//51
var pos3 = str.indexOf("USA");			//-1
var pos4 = str.indexOf("China", 18);	//51（从18开始向后寻找）
var pos5 = str.lastIndexOf("China", 50);//17
var pos6 = str.search("locate");		//方法同indexOf()，但不支持指定初始位置
var flag = str.includes("name",10);		//false

（2）切片

提取部分字符串返回新字符串且接收负数索引：str.slice(start, end)
提取部分字符串返回新字符串但不接受负的索引：str.substring(start, end)
提取部分字符串返回新字符串：str.substr(start, length)

var str = "Apple, Banana, Mango";
var res1 = str.slice(7,13);			//Banana
var res2 = str.slice(-13,-7);		//Banana（支持负索引）
var res3 = str.slice(7);			//Banana, Mango（裁剪字符串的剩余部分）
var res4 = str.substring(7,13);		//Banana
var res5 = str.substring(7);		//Banana, Mango
var res6 = str.substr(7,6);			//Banana
var res7 = str.substr(7);			//Banana, Mango
var res8 = str.substr(-5);			//Mango

（3）整合

将字符串中首个指定的子串替换为指定字符串：str.replace()
将字符串全部转换为大写：str.toUpperCase()
将字符串全部转换为小写：str.toLowerCase()
拼接多个字符串（作用等价于 + ）：str.concat()
删除字符串两端的空白符：str.trim()

var str1 = "Please visit Microsoft!";
var res1 = str1.replace("Microsoft", "W3School");
var res2 = str1.toUpperCase();
var res3 = str1.toUpperCase();
var res4 = str1.concat("Come on!",res1);

var str2 = "       Hello World!        ";
var res5 = str2.trim());

结合上面方法可以看到，所有字符串方法都会返回一个新字符串，而不是修改原始字符串。因为字符串是不可变的：字符串不能更改，只能替换。

（4）索引

索引字符：str.charAt()
索引字符 unicode 编码： str.charCodeAt()
把字符串转换为数组：str.split()

var str1 = "HELLO WORLD";
var char = str1.charAt(0);			//H
var char_uni = str1.charCodeAt(0);  //72
var str2 = "a,b,c,d,e";
var arr1 = str2.split(",");         //["a","b","c","d","e"]
var arr2 = str2.split(" ");         //["abcde"]
var arr3 = str2.split("|");         //["abcde"]

（5）首尾字符串

判断字符串是否以指定值开头：str.startsWith(value, start)
判断字符串是否以指定值结尾：str.endsWith(value, length)

let text = "Hello world, welcome to the universe.";
var flag1 = text.includes("world");			//true
var flag2 = text.includes("world", 12);		//false
var flag3 = text.startsWith("Hello")		//true
var flag4 = text.startsWith("world",6)		//true
var flag5 = text.endsWith("universe.")		//true
var flag6 = text.endsWith("world",11)		//true（length指搜索str的长度）

（6）字符串模板

字符串模板也叫模板字面量，提供了拼接变量的功能，而且支持在模板里进行简单的计算。

字符串模板使用反引号 (``) 而不是引号 (“”/‘’) 来定义字符串，因此在字符串模板中可以同时使用单引号和双引号；
字符串模板允许多行字符串；
字符串模板可以通过 ${var_name} 将变量嵌入字符串，即字符串插值；
字符串模板可以将表达式的结果嵌入字符串；

let text1 = `He's often called "Johnny"`;
let text2 =
`The quick
brown fox
jumps over
the lazy dog`;

let firstName = "Bill";
let lastName = "Gates";
let text3 = `Welcome ${firstName}, ${lastName}!`;

let price = 10;
let VAT = 0.25;
let text4 = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

字符串模板还支持 HTML 模板；

<!DOCTYPE html>
<html>
  <body>
    <p>模板字面量示例：</p>
    <p id="demo"></p>
    <p>示例结束。</p>

    <script>
      let header = "Templates Literals";
      let tags = ["template literals", "javascript", "es6"];
      let html = `<h2>${header}</h2><ul>`;
      for (const x of tags) {
        html += `<li>${x}</li>`;
      }
      html += `</ul>`;
      document.getElementById("demo").innerHTML = html;
    </script>
  </body>
</html>

6. 数字

与 C++ 不同，JavaScript 不会定义不同类型的数，如 int、short、long、float、double等。JavaScript 中只有一种数值类型，采用 IEEE 754 标准，以双精度浮点数（64bit）来存储：

符号位	指数位	尾数位
1bit	11bit	52bit

JavaScript 数值带不带小数点均可；
JavaScript 数值可以采用科学计数法；
JavaScript 从左向右编译；
JavaScript 会尝试将字符串转换为数字进行运算，但不包括 +（字符串级联）；
JavaScript 支持二进制、八进制、十进制、十六进制等数字表示法；

var x1 = 3.14;
var y1 = 3;
var x2 = 123e5;    	//12300000
var y2 = 123e-5;   	//0.00123

var x = 10;
var y = 20;
var z = '10';
var s1 = y + z;		//"2010"
var s2 = 'The result is:' + x + y;	//"The result is:1020"
var s3 = x + y + z;	//"3010"
var num1 = x - z;	//0
var num2 = x * z;	//100

var num3 = 0b11111111;
var num4 = 0377;	//255
var num5 = 255;
var num6 = 0xFF;	//255

JavaScript 中数字可以通过 var x = new Number(123) 创建为对象，但也不建议使用。接下来介绍数字的方法。

（1）类型转换

见 4.3 JavaScript 数据类型之类型转换

（2）校准精度

指定精度科学计数：toExponential() ，返回值类型是字符串，可以四舍五入到小数点后指定位数；
四舍五入到小数点后指定位数：toFixed()，返回值类型也是字符串；
四舍五入返回指定位数的浮点数：toPrecision()，返回值类型也是字符串；

var x = 9.656;
var res1 = x.toExponential();		//"9.656e+0"
var res2 = x.toExponential(2);		//"9.66e+0"
var res3 = x.toExponential(4);     	//"9.6560e+0"
var res4 = x.toExponential(6);     	//"9.656000e+0"
var res5 = x.toFixed(0);           	//"10"
var res6 = x.toFixed(2);           	//"9.66"
var res7 = x.toFixed(4);           	//"9.6560"
var res8 = x.toFixed(6);           	//"9.656000"
var res9 = x.toPrecision();         //"9.656"
var res10 = x.toPrecision(2);       //"9.7"
var res11 = x.toPrecision(4);       //"9.656"
var res12 = x.toPrecision(6);       //"9.65600"

7. 数组

JavaScript 中的数组是一种特殊类型的对象：对数组使用 typeof 运算符会返回 “object”；但对象以键值对来描述，而数组则以下标索引。

数组可以存放不同类型元素，甚至是对象、函数；
数组通过下标索引来引用某个数组元素，并且支持修改元素；
可以创建空数组；
可以通过内建数组构造器 new Array() 创建指定大小的数组，但不会有默认值；

var cars = ["Volvo", "BMW", 1000, false, myCar, myFunction];
cars[0] = "Benz";
var myCars = [];
var hisCars = new Array(10);

下面介绍数组的方法。

（1）基本方法

数组长度：arr.length
识别数组：Array.isArray()
把数组转换为字符串：arr.toString()
把数组转换为字符串并指定分隔符：arr.join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits.length;        	//4
var flag = Array.isArray(fruits);	//true
var str1 = fruits.toString();		//"Banana,Orange,Apple,Mango"
var str2 = fruits.join(" * ");		//"Banana * Orange * Apple * Mango"

（2）修改数组

向数组末尾添加元素：arr.push()
从数组中删除最后一个元素：arr.pop()
从数组中删除第一个元素：arr.shift()
向数组开头添加元素：arr.unshift()
删除指定位置元素：delete arr[i]，但该方法会在 i 处留下 undefined 的空洞，不推荐使用；

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len1 = fruits.push("Lemon");	//5
var x = fruits.pop();      			//"Lemon"
var y = fruits.shift();				//"Banana"
var len2 = fruits.unshift("Peach");	//4
delete fruits[1];

注意，以上几个方法是在原数组上操作的，而下面的方法会返回新的数组：

向数组指定位置添加新元素：arr.splice(target, delete, args[])，其中 target 指明插入元素位置，delete 指明删除元素数量，args[] 为插入元素列表。该方法还可以用于删除指定位置元素；
合并数组：arr.concat()
裁剪数组：arr.slice()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var new_fruits1 = fruits.splice(2, 0, "Lemon", "Kiwi");	//["Banana","Orange","Lemon","Kiwi","Apple","Mango"]
var new_fruits2 = fruits.splice(2, 1, "Lemon", "Kiwi");	//["Banana","Orange","Lemon","Kiwi","Mango"]
var new_fruits3 = fruits.splice(2, 2, "Lemon", "Kiwi");	//["Banana","Orange","Lemon","Kiwi"]
var new_fruits4 = fruits.splice(2, 2);					//["Banana","Orange"]

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var Children = arr1.concat(arr2, arr3);
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus1 = fruits.slice(1);	//["Orange", "Lemon", "Apple", "Mango"]
var citrus2 = fruits.slice(1,3);//["Orange", "Lemon"]

（3）排序

对原数组排序：arr.sort()，默认按照字符串顺序对值排序，支持自定义排序方法；
将原数组逆置：arr.reverse()
查找最大 / 小元素：Math.max.apply(null, arr) / Math.min.apply(null, arr)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

var points = [40, 100, 1, 5, 25, 10];
points.sort();								//[1,10,100,25,40,5]
points.sort(function(a, b){return a - b}); 	//[1,5,10,25,40,100]

var cars = [{type:"Volvo", year:2016},{type:"Saab", year:2001},{type:"BMW", year:2010}];
cars.sort(function(a, b){return a.year - b.year});

（4）迭代

对数组中每个元素调用一次回调函数：arr.forEach(myFunction)，其中函数 myFunction 默认拥有三个参数：项目值 value、项目索引 index、数组本身 array；
对数组中每个元素调用一次执行函数并返回一个新数组：arr.map(myFunction)，对于原数组中 undefined 的值不会调用执行函数，而是同样留下一个 undefined 值；

var txt = "";
var numbers1 = [45, 4, 9, 16, 25];
numbers1.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>";
}
var numbers2 = numbers1.map(myFunction);	//[90,8,18,32,50]
function myFunction(value, index, array) {
  return value * 2;
}

（5）查找元素

搜索元素值并返回第一次出现的位置：arr.indexOf()
搜索元素值并返回最后一次出现的位置：arr.lastIndexOf()
筛选数组中满足条件的元素：arr.filter(myFunction)
判断是否数组中所有元素均满足条件：arr.every(myFunction)
判断是否数组中存在元素满足条件：arr.some(myFunction)
查找数组中满足条件的第一个元素 / 的索引：arr.find(myFunction) / arr.findIndex(myFunction)

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");			//0
var b = fruits.indexOf("Apple",1);			//2
var c = fruits.lastIndexOf("Apple");		//2
var d = fruits.lastIndexOf("Apple",1);		//0

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);	//[45,25]
var allOver18 = numbers.every(myFunction);	//false
var someOver18 = numbers.some(myFunction);	//true
var first = numbers.find(myFunction);		//45
var first_index = numbers.findIndex(myFunction);	//0
function myFunction(value, index, array) {
  return value > 18;
}

ES6 还引入了 const 关键字用来声明常量数组：

const 数组不能重新赋值；
const 数组可以修改数组内元素（增删查改）；
const 数组必须在声明时赋值；
const 数组具有块作用域

const cars = ["Saab", "Volvo", "BMW"];	//必须声明时赋值
//cars = ["Toyota", "Volvo", "Audi"];   //不能重新赋值
cars[0] = "Toyota";
cars.push("Audi");
{
  const cars = ["Volvo", "BMW"];		//块作用域可重新声明不影响块外的数组
}
{
  const cars = ["Volvo", "BMW"];
}

8. 日期

JavaScript 中 Date 对象有 4 种方法创建新的日期对象：

new Date()：构造当前日期对象
new Date(year, month, day, hours, minutes, seconds, milliseconds)：用指定日期和时间（年、月、日、小时、分钟、秒和毫秒）创建新的日期对象，可以依次省略后面的参数，最少接收两个参数。注意，月份从 0 计数，11表示十二月；
new Date(milliseconds)：根据日期字符串创建一个日期对象；
new Date(date string)：根据自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数构造日期对象；

var d1 = new Date();
var d2 = new Date(2022, 7, 27, 11, 47, 30, 10);	//Sat Aug 27 2022 11:47:30 GMT+0800 (中国标准时间)
var d3 = new Date(2022, 7);						//Mon Aug 01 2022 00:00:00 GMT+0800 (中国标准时间)
var d4 = new Date("August 27, 2022 11:47:30");	//Sat Aug 27 2022 11:47:30 GMT+0800 (中国标准时间)
var d5 = new Date(100000000000);				//Sat Mar 03 1973 17:46:40 GMT+0800 (中国标准时间)
var d6 = new Date(-100000000000);				//Mon Oct 31 1966 22:13:20 GMT+0800 (中国标准时间)

更多操作详见 JavaScript 日期。

9. 数学运算

Math 常量	数学数值
Math.E	欧拉指数 e
Math.PI	圆周率 π
Math.SQRT2	$\sqrt{2}$
Math.SQRT1_2	$\sqrt{0.5}$
Math.LN2	ln2
Math.LN10	ln10
Math.LOG2E	log₂e
Math.LOG10E	log₁₀e

Math方法	数学公式
Matth.abs(x)	x的绝对值
Math.cos(x)	cos(x)
Math.sin(x)	sin(x)
Math.tan(x)	tan(x)
Math.acos(x)	arccos(x)
Math.asin(x)	arcsin(x)
Math.atan(x)	arctan(x)
Math.atan2(y,x)	从 x 轴到点 (x,y) 的角度，即幅角
Math.ceil(x)	x 向上取整
Math.floor(x)	x 向下取整
Math.round(x)	x 四舍五入
Math.exp(x)	e^x
Math. log(x)	ln(x)
Math.pow(x,y)	x^y
Math.sqrt(x)	$\sqrt{x}$
Math.max(x,y,z,…,n)	max(x,y,z,…,n)
Math.min(x,y,z,…,n)	min(x,y,z,…,n)
Math.random()	0 ~ 1 之间的随机数

10. 随机数

前面已经介绍了 Math.random() 可以生成 0 ~ 1 之间的随机数，结合 Math.floor() 可以生成指定范围 [min, max) 的随机整数：

Math.floor(Math.random() * (max - min) ) + min;

以及 [min, max] 的随机整数：

Math.floor(Math.random() * (max - min + 1) ) + min;

11. 条件语句与循环

条件语句：

if (time < 10) {
    greeting = "Good morning";
 } else if (time < 18) {
    greeting = "Good day";
 } else {
    greeting = "Good evening";
 }

switch 语句：使用严格比较 ===，允许几个 case 值共用同一个情况，别忘了 break 和 default：

switch (new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
}

for 循环：遍历代码块；
for / in 循环：遍历对象属性；
for / of 循环：遍历数组 / 字符串；

var cars = ["BMW", "Volvo", "porsche", "Ford", "Fiat", "Audi"];
var text = "";
for (var i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
for (var x in person) {		//此处x是键，person[x]是值
    text += person[x];
}

const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
  	text += x;
}

let language = "JavaScript";
let text = "";
for (let x of language) {
  	text += x;
}

while 循环：

while (i < 10) {
    text += "数字是 " + i;
    i++;
}

do {
    text += "The number is " + i;
    i++;
}
while (i < 10);

break 和 continue：continue 语句只能用于跳转至下一次循环；break 语句在没有标签的情况下跳出当前循环或 switch，有标签的情况下可以跳出任意指定代码块：

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>"; 
}

12. 位运算

JavaScript 中位运算如下：

运算符	功能
&	与
\|	或
~	非
^	异或
<<	零填充左移
>>	含符号右移
>>>	零填充右移

JavaScript 中数字按 64 位浮点数存储，但所有位运算都以 32 位二进制数执行。在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。执行按位操作后，再结果将转换回 64 位 JavaScript 数。

例如：JavaScript 中十进制 5 的二进制表示为：

00000000000000000000000000000101

因此 ~5 = -6：

11111111111111111111111111111010 (~5 = -6)

13. JavaScript 函数

JavaScript 函数格式如下：

function myFunction(a, b) {
    return a * b;
}

注意，myFunction 引用的是函数对象，而 myFunction() 引用的是函数结果：

<!DOCTYPE html>
<html>
	<body>
		<h2>JavaScript 函数：</h2>
		<p id="demo1"></p>
        <p id="demo2"></p>
		<script>
			function myFunction(a, b) {
			    return a * b;
			}
			document.getElementById("demo1").innerHTML = myFunction;
            document.getElementById("demo2").innerHTML = myFunction(3,4);
		</script>
	</body>
</html>

14. JavaScript 事件

JavaScript 事件就是 JavaScript 应对 HTML 事件而做出的逻辑功能动作，如：HTML 按钮被点击时计数、鼠标移动到 HTML 元素上显示等。

如下示例中，通过改变自身内容（写入实时时间）响应点击事件：

<!DOCTYPE html>
<html>
	<body>
		<h1>JavaScript 事件</h1>
		<button onclick="this.innerHTML=Date()">时间是？</button>
	</body>
</html>

也可以改变其他元素的内容：

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

对于JavaScript 代码较长的情况，一般通过调用函数响应事件：

<!DOCTYPE html>
<html>
	<body>
		<h1>JavaScript 事件</h1>
		<button onclick="displayDate()">时间是？</button>
		<script>
			function displayDate() {
			    document.getElementById("demo").innerHTML = Date();
			}
		</script>
		<p id="demo"></p>
	</body>
</html>

常见的 HTML 事件有：

onchange：HTML 元素被改变
onclick：用户点击了 HTML 元素
onmouseover：用户把鼠标移动到 HTML 元素上
onmouseout：用户把鼠标移开 HTML 元素
onkeydown：用户按下键盘按键
onload：浏览器已经完成页面加载

15. JavaScript 对象

对象是包含很多值的变量，相当于一个容器，容器内的值称为属性，以键值对的形式存储。对象属性不仅可以是原始类型的值，还可以是函数，称为方法：

var person1 = {Name:"Gates", age:62, eyeColor:"blue"};
var person2 = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};