1-js基础

JavaScript 使用

一般使用外部脚本。如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：

<script src="myScript.js"></script>

JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

window.alert()

<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
	window.alert(5 + 6);
</script>

JavaScript语句

关键词	用途
var	声明变量
function	声明函数
try…catch	对语句块实现错误处理

双斜杠 // 或/*与 */*之间的代码被视为注释。（ 注释块常用于官方声明 ）

变量命名规则：在 JavaScript 中，变量首字符必须是字母、下划线（-）或美元符号（$）。 数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。一般更倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity

Js对大小写敏感。

JavaScript 使用 Unicode 字符集。

运算：与c语言相同（except：**表示幂， x ** y 产生的结果与 Math.pow(x,y) 相同 ）

优先级：

值	运算符	描述	实例
20	( )	表达式分组	(3 + 4)
19	.	成员	person.name
19	[]	成员	person[“name”]
19	()	函数调用	myFunction()
19	new	创建	new Date()
17	++	后缀递增	i++
17	–	后缀递减	i–
16	++	前缀递增	++i
16	–	前缀递减	–i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x
15	**	求幂 (ES7)	10 ** 2
14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5
13	+	加	10 + 5
13	-	减	10 - 5
12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2
11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	“PI” in Math
11	instanceof	对象的实例	instanceof Array
10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y
9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	|	按位或	x | y
6	&&	逻辑与	x && y
5	||	逻辑否	x || y
4	? :	条件	? “Yes” : “No”
3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	|=	赋值	x |= y
2	yield	暂停函数	yield x
1	,	逗号	7 , 8

JavaScript 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

当数值和字符串相加时，JavaScript 将把数值视作字符串。

var x = 911 + 7 + "Porsche";	//918Porsche
var x = "Porsche" + 911 + 7;	//Porsche9117

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：

var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：

var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

科学计数法表示数：

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

布尔值：

var x = true;
var y = false;

typeof

可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：

document.getElementById('demo').innerHTML = 
            typeof "" + "<br>" +
            typeof 1.00 + "<br>" +
            typeof dict;	//string number object
// 在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined
// 注意 null 的数据类型是对象(object)。 

Undefined 与 null 的值相等，但类型不相等：

null === undefined            // false
null == undefined             // true

对于复杂数据：

typeof运算符把对象、数组或 null 返回 object。 把函数返回 function 。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

JavaScript字符串

内建属性 length 可返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

字符串换行

document.getElementById("demo").innerHTML = "Hello \
Kitty!";
// 对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：
document.getElementById("demo").innerHTML = "Hello" + 
"Kitty!";

不要把字符串创建为对象。它会拖慢执行速度。

var x = "Bill";		// typeof x 将返回 string
var y = new String("Bill");		// typeof y 将返回 object
// (x == y) 为 true，因为 x 和 y 的值相等
// 当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。

var x = new String("Bill");             
var y = new String("Bill");
// (x == y) 为 false，因为 x 和 y 是不同的对象

查找字符串

indexOf()方法返回字符串中指定文本首次出现的索引（位置） 。lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
var pos = str.indexOf("China", 18);		//第二个参数是检索的起始位置

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

• search() 方法无法设置第二个开始位置参数。
• indexOf() 方法无法设置更强大的搜索值（正则表达式）。

提取部分字符串

• slice(start, end)

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);	// Banana
// 如果省略第二个参数，则该方法将裁剪字符串的剩余部分

• substring(start, end)

类似于slice()，只是无法接受负数索引。

• substr(start, length)

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);	//Banana
// 如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

替换字符串内容

str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");	//默认地，replace() 只替换首个匹配

replace() 对大小写敏感。 如需执行大小写不敏感的替换，使用正则表达式 /i（大小写不敏感） ：

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

//如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）
var n = str.replace(/Microsoft/g, "W3School");

转换为大写和小写

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1
var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1

连接字符串

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");	//两者等效

删除字符串两端的空白符

var str = "       Hello World!        ";
alert(str.trim());

返回字符串中指定下标（位置）的字符串

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

把字符串转换为数组

var txt = "Hello";       	// 字符串
var arr = txt.split("");    // 分隔为字符

var txt = "a,b,c,d,e";   	// 字符串
txt.split(",");          	// 用逗号分隔,返回的数组是['a','b',...]

JavaScript数字

JavaScript 数值始终以双精度浮点数来存储，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

值(aka Fraction/Mantissa)	指数	符号
52 bits(0 - 51)	11 bits (52 - 62)	1 bit (63)

精度

整数（不使用指数或科学计数法）会被精确到 15 位。

var x = 999999999999999;   // x 将是 999999999999999
var y = 9999999999999999;  // y 将是 10000000000000000

小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准：

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

// 使用乘除法有助于解决上面的问题
var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

在所有数字运算中，JavaScript 会尝试将字符串转换为数字：

var x = "100";
var y = "10";
var z = x / y;       // z 将是 10 (number)

可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：

var x = 100 / "Apple";
isNaN(x);               // 返回 true，因为 x 不是数

假如在数学运算中使用了 NaN，则结果也将是 NaN

typeof NaN;             // 返回 "number"
var x = NaN;
var y = "5";
var z = x + y;         // z 将是 NaN5

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

while (myNumber != Infinity) {          // 执行直到 Infinity
    myNumber = myNumber * myNumber;
}
var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity
typeof Infinity;        // 返回 "number"

进制

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

var x = 0xFF;             // x 将是 255 (8个1)

使用 toString() 方法把数输出为不同的进制：

myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

数值不要使用new()

toExponential() 方法

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：( 该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。)

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

toFixed()方法

toFixed()返回字符串值，它包含了指定位数小数的数字：

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66

toPrecision() 方法

toPrecision() 返回字符串值，它包含了指定长度的数字：

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7

全局方法

方法	描述
Number()	返回数字，由其参数转换而来。如果无法转换数字，则返回 NaN。
parseFloat()	解析其参数并返回浮点数。允许空格。只返回首个数字
parseInt()	解析其参数并返回整数。允许空格。只返回首个数字

Number(new Date("2019-04-15"));    // 返回 1506729600000 (1970 年 1 月 1 日至今的毫秒数。)

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

JavaScript 数组

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];	// 空格和折行并不重要。声明可横跨多行

可通过引用数组名来访问完整数组：

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars; 	//Audi,BMW,porsche
// 自动把数组转换为字符串，相当于document.getElementById("demo").innerHTML = cars.toString(); 

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。

因此，数组中可以存放不同类型的变量。可以在数组中保持对象、保存函数、保存数组。

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

数组属性和方法

数组长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4

添加数组元素 && 删除元素

fruits.pop();              			// 从 fruits 删除最后一个元素（"Mango"）
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)，返回新数组的长度
fruits.shift();            			// 从 fruits 删除第一个元素 "Banana"
fruits.unshift("Lemon");   	 		// 向 fruits 头部添加新元素 "Lemon"，返回新数组的长度
delete fruits[0];          			// 把 fruits 中的首个元素改为 undefined

在 JavaScript 中，数组使用数字索引。对象使用命名索引。

• 如果希望元素名为字符串（文本）则应该使用对象。
• 如果希望元素名为数字则应该使用数组。

拼接数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");	//返回 Banana,Orange,Lemon,Kiwi
// 第一个参数（2）定义了应添加新元素的位置（拼接）。第二个参数（0）定义应删除多少元素。其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

concat()方法通过合并（连接）现有数组来创建一个新数组

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

slice()方法用数组的某个片段切出新数组 ( slice() 方法创建新数组。它不会从源数组中删除任何元素。 )

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 	//Orange,Lemon
var citrus = fruits.slice(2); 		//Lemon,Apple,Mango

鉴别数组

Array.isArray(fruits);     // 如果是数组，返回 true

把数组转换为字符串

方法toString()把数组转换为数组值（逗号分隔）的字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
// Banana,Orange,Apple,Mango

join()方法也可将所有数组元素结合为一个字符串，还可以规定分隔符。

document.getElementById("demo").innerHTML = fruits.join(" * "); 
// Banana * Orange * Apple * Mango

数组排序

默认地，sort() 函数按照字符串顺序对值进行排序

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

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
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;
});		//比较字符串属性

反转数组

fruits.reverse();         // 反转元素顺序

数组迭代

Array.forEach() 该方法为每个数组元素调用一次函数（回调函数）。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Array.map()

• map() 方法通过对每个数组元素执行函数来创建新数组。

• map() 方法不会对没有值的数组元素执行函数。

• map() 方法不会更改原始数组。

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value/*, index, array*/) {	//当回调函数仅使用 value 参数时，可以省略索引和数组参数
  return value * 2;
}

Array.filter() 创建一个包含通过测试的数组元素的新数组

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value/*, index, array*/) {
  return value > 18;
}

Array.indexOf() 在数组中搜索元素值并返回其位置( 第一个项目的位置是 0 )

// array.indexOf(item, start),未找到返回-1
var a = fruits.indexOf("Apple");

Array.lastIndexOf()是从数组结尾开始搜索

array.lastIndexOf(item, start) //start可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

Array.find() 返回通过测试函数的第一个数组元素的值

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Array.findIndex() 返回通过测试函数的第一个数组元素的索引。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}		// 查找大于 18 的第一个元素的索引

JavaScript 函数

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

myFunction 引用的是函数对象，而myFunction()引用的是函数结果。

在函数内部声明的变量，是函数的局部变量。

JavaScript对象

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

能够以两种方式访问属性：

objectName.propertyName
objectName["propertyName"]
objectName.methodName()		//访问对象方法

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

JavaScript 事件

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

JavaScript 循环

for/in 语句

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

JavaScript 标签

如需标记 JavaScript 语句，请将标签名和冒号置于语句之前：

label:
statements

break 和 continue 语句是仅有的可“跳出”代码块的 JavaScript 语句。

break labelname;	// 如果有标签引用，则 break 语句可用于跳出任意代码块

continue labelname;

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