JS学习笔记

发表于 2021-03-24 更新于 2021-03-29

首发于羽毛工作室官方博客——和有趣的人做尽有趣的事！

此文档记录在学习JavaScript过程中，自己掌握的知识，方便复习。

每天学习一点点，早晚有一天，我要惊艳所有人。

基础到不能再基础的知识

关于注释

1 2	单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。

Tips：在 Sublime Text 编辑器中，快捷键为 alt+？

js文件的外部引用方法

1	<script src="/min.js" type="text/javascript" charset="utf-8"></script>

Tips：一般放在 body 标签后面，上面的写法是将min.js文件放在根目录，如果是放在根目录的js文件夹下，则src中改为 js/main.js

js代码的内部引用方法

1
2
3

<script type="text/javascript">
写入代码
</script>

Tips：使用 script 标签，直接在HTML中使用js代码

变量的创建与赋值

// 创建变量的写法
var name;
// 赋值的写法
name = 0;
// 合并的写法
var name = 0;
// 创建多个变量
var name1,name2,name3=0,name4;

Tips：例子中创建的变量名为name，名字可以是任意英文（必须以字母开头，对大小写敏感）。js语法中，逗号代表分割，分号代表结束。var是创建变量的声明，可以略写，但是不好！

变量类型

JavaScript 数据类型有以下几种

l 字符串（String）

l 数字(Number)

l 布尔(Boolean)

l 数组(Array)

l 对象(Object)

l 空（Null）

l 未定义（Undefined）

JavaScript 字符串

字符串用来存储字符和文字的变量。使用单引号或双引号：

如：

var carname=”Volvo XC60”;
var carname=’Volvo XC60’;

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

如：

var answer=”It’s alright”;
var answer=”He is called ‘Johnny’”;
var answer=’He is called “Johnny”‘;

JavaScript 数字

JavaScript 数字类型只能用来保存数字：

如：

var x1=34.00; //使用小数点来写

var x2=34; //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

如：

var y=123e5; // 12300000

var z=123e-5; // 0.00123

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;

var y=false;

布尔常用于判断或者设置状态

JavaScript 数组

数组用于保存多个数据，如会员的姓名、用户名、密码、手机号等等。

下面的代码创建名为 user 的数组：

var user = new Array();

user[0]=”张三”;

user[1]=”zhang”;

user[2]=”123456”;

user[3]=”13592769132”;

或者

var user = new Array(“张三”,” zhang “,”123456”,”13592769132”);

或者

var user = [“张三”,” zhang “,”123456”,”13592769132”];

数组下标从0开始，所以第一个是 [0]，第二个是 [1]，以此类推。

JavaScript 对象

对象不仅可以保存普通数据，还可以保存代码操作功能。

以后学

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

运算符

JavaScript 算术运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法（商）	x=y/2	2.5	5
%	取模（求余数）	x=y%2	1	5
++	自增	x=++y	6	6
x=y++	5	6
–	自减	x=–y	4	4
x=y–	5	4

JavaScript 赋值运算符

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

JavaScript 比较运算符

运算符	描述	比较	返回值
==	等于（值）	x==8	false
x==5	true
===	绝对等于（值和类型均相等）	x===”5”	false
x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==”5”	true
x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

JavaScript 逻辑运算符

运算符	描述	例子
&&	And 与	(x < 10 && y > 1) 为 true
\|\|	Or 或	(x==5 \|\| y==5) 为 false
!	Not 非	!(x==y) 为 true

JavaScript 条件运算符

语法

1	Var iablename=(condition)?value1:value2

例子

如果变量 age 中的值小于 18，则向变量 voteable 赋值 “年龄太小”，否则赋值 “年龄已达到”。

1	Var teable=(age<18)?"年龄太小":"年龄已达到";

运算符优先级

值	运算符	描述	实例
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

注意：“#” 指示实验性或建议性的技术（ECMASScript 2016 或 ES7）

提示：括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。

函数的创建与使用

// 创建方法
function name(){
执行代码
}
// 使用方法
name()

Tips：function是创建函数的关键词，必须是小写的

函数参数的使用

函数名后面的括号里面写的就是参数。参数的作用就是用于函数内部和函数外部数据的传递，近似于子程序。

也就是说：可以通过参数把函数外面的数据传入函数内部，并在内部使用，而且不会改变外部数据的值。

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

// 最终结果 X = 56

Tips：当到达 return 语句（return后面空格即可），函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用者。

函数参数返回多个值

// 方法一，数组
var mValues= function(){ 
  var a ="a"; 
  var b = "b";  
  return [a, b]; 
};
var values= mValues();
var valOne= values[0];
var valTwo = values[1];

// 方法二，键值对
var mValues= function(){ 
  var a= "a";
  var b = "b";  
  return {
    'a': a,
    'b': b
  }; 
};
var values= mValues();
var valOne= values.a;
var valTwo = values.b;

对象

简单理解，对象说是被命名值的容器

// 创建对象方法一
person=new Object();
person.realname="张三";
// 此方法不便于阅读，因为键值行间可插入其他代码。
person.nickname="张大仙";
person.age=23;
// 此方法不便于阅读，因为键值行间可插入其他代码。
person.sex="男";


// 创建对象方法二（常用）
var car = {
type:"porsche", 
model:"911", 
color:"white"
};

Tips：创建对象的方法是以名称:值成对的方式来书写（名称和值由冒号分隔）键值对，并放入花括号中。空格和折行都是允许的。对象定义可横跨多行。

名称 = 属性

值 = 属性值

// 访问对象属性
objectName.propertyName // 方法1
objectName["propertyName"] // 方法2

// 访问对象中的函数（方法）
objectName.methodName()

Tips：例如如下案例

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

alert(person.fullName()) 
// 弹窗提示：Bill Gates

Tips：对象中的属性值可以写入函数。

this 关键词

在函数定义中，this 引用该函数的“拥有者”。在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

onclick属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--在onclick属性中使用函数-->
		<button onclick="name()">按钮</button>
	</body>
	<script type="text/javascript">
		//通过关键字function来创建函数，函数名后面必须跟（）
		function name(){
			var a = 1;
			var b = 2;
			var c = a + b;
			alert(c)
		}
	</script>
</html>

Tips：为按钮创建点击事件的方法，就是使用onclick=”函数名”属性。函数名为 name()

HTML DOM 方法

// 通过ID属性获取HTML元素，只能获取第一个
document.getElementById('name')

// 通过CLASS属性获取HTML元素，可以获取多个，用item(n)来获取第n个
document.getElementsByClassName('text').item(0)

// 通过标签名获取HTML元素，可以获取多个，用item(n)来获取第n个
document.getElementsByTagName('button').item(0)

// 使用“.value”来设置或者获取HTML输入框元素的值
Var val = document.getElementById('name').value;
document.getElementById('name').value = "JavaScript修改的内容";

// 使用“.innerHTML”来设置或者获取HTML双边元素内部的所有子元素和文字
Var val = document.getElementsByClassName('text').item(0).innerHTML;
document.getElementsByClassName('text').item(0).innerHTML = "<h1>你好</h1>";

// 使用“.innerText”来设置或者获取HTML双边元素内部的所有文字
Var val = document.getElementsByTagName('button').item(0).innerText;
document.getElementsByTagName('button').item(0).innerText = '搜索';

Tips：更多用法参考【JavaScript HTML DOM 文档】

innerHTML 与 innerText 用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		// 为标签设定唯一id用于声明
		<textarea id="output" value="" ></textarea>
		<br />
		<br />
		<input id="input" value="哈哈哈">
	</body>
	<!-- 引用js文件 -->
	<script type="text/javascript">
	// 获取单行输入框的值
	var text = input.value;
	// 将值传入textarea标签中
	output.innerHTML += text + "\n";
	//  \n表示换行符
	</script>
</html>

Tips：使用innerHTML或者innerText来获取和设置HTML中普通双标签元素的内容，注意大小写。Text识别为文本格式，HTML则能识别HTML标签及语法。

常用事件

// 文档加载事件
window.onload = function(){ /*里面谢代码*/ }

// 元素点击事件
document.getElementById('name').onclick = function(){ /*里面写代码*/ }

// 表单输入元素获取焦点时的事件
document.getElementById('name').onfocus = function(){ /*里面写代码*/ }

// 表单输入元素失去焦点时的事件
document.getElementById('name').onblur = function(){ /*里面写代码*/ }

Tips：当用户进入后及离开页面时，会触发 onload 和 onunload 事件。这里window.onload的用法为，解决HTML中js代码的引用顺序问题。

alert() 方法

// 显示带有一条指定消息和一个 OK 按钮的警告框。
alert() 
// 可选参数 message
alert(message)

Tips：alert(message) 在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）

If…Else 条件语句

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

// 嵌套用法示例

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

Tips：对于大小写敏感，返回值只有 true（真）或 false（假）两种。可以连续嵌套，且嵌套顺序不严格。

Switch 语句

switch(表达式) {
     case n:
        代码块
        break; // 遇到 break 关键词，它会跳出 switch 代码块。
     case n:
        代码块
        break; // 不加 break 关键词，会默认向下执行至switch结束。
     default:  // 默认值，即不符合任何case情况
        默认代码块
}

Tips：把switch表达式的值，与每个 case 的值进行对比（绝对等于）并执行相应case代码块。

循环语句

while循环

1
2
3

while (条件) {
需要执行的代码
}

Tips：条件返回布尔值，至少执行0次。

do/while 循环

1
2
3

do{
需要执行的代码
}while (条件);

Tips：相比较于while循环，此方法至少执行1次代码。

for 循环

for (语句 1; 语句 2; 语句 3) {
    被执行的代码块
}

// 语句 1: 在循环开始执行之前做的一次操作
// 语句 2:（循环的条件）判断循环条件是否满足，true：执行循环；flase：不执行
// 语句 3: 每次循环结束后，下一次循环开始前，执行的操作

Tips：相对常用的功能，可以将创建的条件变量，合并写入在for中。更加简洁。

Break 和 Continue 语句

1 2	break; // 语句用于跳出整个循环。 continue; // 用于跳过循环中的某一次。

Tips：终止符

数组

数组是一种特殊的变量，它能够一次存放一个以上的值。类似于列表或对象。

可以在数组保存对象、函数，甚在数组中保存数组。

创建数组

// 方法一，使用new关键词创建
new Array("张三","zhangshan")
var ArrayName = new Array()
// 或者
var ArrayName = new Array();
	ArrayName[0] = "张三";
	ArrayName[1] = "zhangshan";
	ArrayName[2] = "123456";
	ArrayName[3] = "13594876584";

// 方法二，使用方括号创建（常用、简洁）
var ArrayName = ["张三","zhangshan"]

Tips：不要在最后一个元素之后写逗号（比如 “BMW”,）。

访问数组元素

1	alert(ArrayName[0]); // 会弹窗输出“张三”

Tips：数组名加方括号中写入元素位置的方式，调用数组内容。0为第一个元素，1为第二个元素，以此类推。

替换数组元素

1	ArrayName[0] = "李四"; // 把数组中第1个元素的值修改为“李四”

Tips：通过替换的方法，修改数组中某位置元素。

返回数组的长度

1 2	var ArrayName = ["张三","zhangshan"] ArrayName.length; // ArrayName 的长度是 2

Tips：length属性返回的数组长度，是最后一位元素位置+1

拓展用法

// 1、访问最后一个数组元素
alert(ArrayName[ArrayName.length - 1]);  
// 会弹窗输出“zhangshan” 
// 即为
alert(ArrayName[1]);

// 2、向数组追加新元素
ArrayName[ArrayName.length] = "哈哈";
// 向 ArrayName 追加 "哈哈"

用一个固定值批量替换数组的元素

ArrayName.fill(value, start, end)
// 参数
value：必需。填充的值。
start：可选。开始填充位置。
end：可选。停止填充位置 (默认为 array.length)

Tips：用.fill(参数值) 来批量替换

数组与字符串转换

1
2
3

var ArrayName = ["张三", "李四", "王五", "哈哈"];
var test = ArrayName.toString();
alert(test);  // 会弹窗输出“张三,李四,王五,哈哈”

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

1
2
3

var ArrayName = ["张三", "李四", "王五", "哈哈"];
var test = ArrayName.join("-");
alert(test);  // 会弹窗输出“张三-李四-王五-哈哈”

Tips：join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符。

1 2	var txt = "a,b,c,d,e"; // 字符串 var ArrayName = txt.split(","); // 用逗号分隔

Tips：可以通过 split() 将字符串转换为数组，分隔符号写入属性。

拼接数组

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

var ArrayName = ["Banana", "Orange", "Apple", "Mango"];
var test = ArrayName.splice(2, 2, "Lemon", "Kiwi");
// 最终结果为：Banana,Orange,Lemon,Kiwi
alert(test);  // 会弹窗输出“Apple,Mango”

Tips：splice() 方法可以返回一个包含已删除项的数组，注意，是返回数组

1 2	var ArrayName = ["Banana", "Orange", "Apple", "Mango"]; ArrayName.splice(0, 1); // 删除 fruits 中的第一个元素

Tips：使用 splice() 在数组中不留“空洞”的情况下移除元素。

连接两个或多个数组

var ArrayName2 = ["李四","lisi"]
var ArrayName3 = ["王五","wangwu"]
result = ArrayName.concat(ArrayName2,ArrayName3);

alert(result);  // 会弹窗输出“张三,zhangshan,李四,lisi,王五,wangwu”

Tips：在某数组后加入其他数组元素，用 .concat(需要添加的数组名，逗号分隔)

数组的排序

1 2	var ArrayName = [40, 100, 1, 5, 25, 10]; ArrayName.sort(function(a, b){return 0.5 - Math.random()});

Tips：随机排序，暂时不需要理解，直接拿来用即可。

实际应用中的一些的知识

document.onkeydown 设定快捷键

// 回车键快速发送
document.onkeydown=keymain(){
	key13()
}
function key13(){
	if(event.keyCode==13){
		// if语句中加入执行代码
		var a = 1;
		var b = 2;
		var c = a + b;
		alert(c)
	}
}

Tips：给按钮加上快捷键，例如案例中，按回车即点击按键，key() 为一个储存回车键的临时变量，keymain()函数定义全局快捷键函数，也可以用 function() 匿名函数的写法，因为这是一个全局事件，此函数不会再被二次调用。13号按键代表回车

通过循环的方式遍历数组元素

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>遍历数组的最佳方法是使用标准的 for 循环：</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Tips：在数组中的每个元素执行操作，放入无序列表中。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>Array.forEach() 为每个数组元素调用函数。</p>

<p>Internet Explorer 8 以及更早的版本不支持 Array.forEach()。</p>

<p id="demo"></p>

<script>
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Tips：使用.foreach() 函数可以实现相同效果。即为每个数组元素调用一次函数（回调函数）。