内容 | 网址 |
---|---|
JavaScript个人学习笔记总结 - 快速入门 | https://blog.csdn.net/weixin_50594210/article/details/115112096 |
JavaScript个人学习笔记总结 - 函数 | https://blog.csdn.net/weixin_50594210/article/details/115113081 |
JavaScript个人学习笔记总结 - 标准对象 | https://blog.csdn.net/weixin_50594210/article/details/115112683 |
JavaScript个人学习笔记总结 - 面向对象编程 | https://blog.csdn.net/weixin_50594210/article/details/115113024 |
JavaScript个人学习笔记总结 - 浏览器 | https://blog.csdn.net/weixin_50594210/article/details/115113131 |
JavaScript个人学习笔记总结 - jQuery | https://blog.csdn.net/weixin_50594210/article/details/115113299 |
JavaScript个人学习笔记总结 - 错误处理 | https://blog.csdn.net/weixin_50594210/article/details/115113442 |
JavaScript个人学习笔记总结 - underscore | https://blog.csdn.net/weixin_50594210/article/details/115113498 |
文章目录
JavaScript简介
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
快速入门
1、基本语法
每个语句以;
结束,语句块用{...}
。但是,JavaScript并不强制要求在每个语句的结尾加;
,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;
。
1.1 注释
- 单行注释
// 注释的内容
- 多行注释
/*注释的内容 */
1.2 输入输出语句
<script>
//输入框
prompt("我是一个");
//警告框
alert("大帅哥");
//控制台输出
console.log("大实话");
//页面输出
document.write("你说的太对了!!!");
</script>
1.3 输入输出语句
JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型。
- 定义局部变量 let 变量名 = 值;
<script>
//1.定义局部变量
let name = "大帅哥";
let age = 23;
document.write(name + "," + age +"<br>");
</script>
- 定义全局变量 变量名 = 值;
<script>
//2.定义全局变量
{
let l1 = "aa";
l2 = "bb";
// var x = 1; var y = 2; 不建议一行写多个语句!
}
//document.write(l1);
document.write(l2 + "<br>");
</script>
- 定义常量 const 常量名 = 值;
<script>
//3.定义常量
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);
</script>
2、数据类型和变量
2.1 原始数据类型
计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值。但是,计算机能处理的远不止数值,还可以处理文本、图形、音频、视频、网页等各种各样的数据,不同的数据,需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型:
数据类型 | 说明 |
---|---|
boolean | 布尔类型,true或false |
null | 声明null值的特殊关键字 |
undefined | 代表变量未定义 |
number | 整数或浮点数 |
string | 字符串 |
bigint | 大整数,例如:let num = 10n; |
- boolean
布尔值和布尔代数的表示完全一致。
<script>
true; // 这是一个true值
false; // 这是一个false值
3 > 1; // 这是一个true值
1 >= 3; // 这是一个false值
</script>
- null
<script>
//null
let l2 = null;
document.write(typeof(l2)+"<br/>");
</script>
- undefined
表示“未定义”,仅仅在判断函数参数是否传递的情况下有用。 - Number
JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型:
<script>
123123; // 整数123123
0.456456; // 浮点数0.456456
1.23456e3; // 科学计数法表示1.23456x1000,等同于1234.56
-999; // 负数
NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
</script>
Number可以直接做四则运算,规则和数学一致:
<script>
1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5
</script>
- string
字符串是以单引号'
或双引号"
括起来的任意文本,比如'abc'
,"xyz"
等等。请注意,''
或""
本身只是一种表示方式,不是字符串的一部分,因此,字符串'abc'
只有a
,b
,c
这3个字符。 - bigint
<script>
//bigint
let l5 = 10n;
document.write(typeof(l5));
</script>
2.2 typeof
typeof 用于判断变量的数据类型。
<script>
let age = 18;
document.write(typeof(age)); // number
</script>
2.3 运算符
- 算数运算符
运算符 | 说明 |
---|---|
+ | 加法运算 |
- | 减法运算 |
* | 乘法运算 |
/ | 除法运算 |
% | 取余数 |
++ | 自增 |
- - | 自减 |
- 赋值运算符
运算符 | 说明 |
---|---|
= | 将等号右边的值赋值给等号左边的变量 |
+= | 相加后赋值 |
- = | 相减后赋值 |
*= | 相乘后赋值 |
/= | 相除后赋值 |
%= | 取余后赋值 |
- 比较运算符
运算符 | 说明 |
---|---|
== | 判断值是否相等 |
=== | 判断数据类型和值是否相等 |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
!= | 不等于 |
- 逻辑运算符
运算符 | 说明 |
---|---|
&& | 逻辑与,并且的功能 |
丨丨 | 逻辑或,或者的功能 |
! | 取反 |
- 三元运算符
三元运算符格式:(比较表达式) ? 表达式1 : 表达式2;
执行流程:
- 如果比较表达式为true,则取表达式1;
- 如果比较表达式为false,则取表达式2;
2.4 变量
也可见1.3输入输出语句。
变量在JavaScript中就是用一个变量名表示,变量名是大小写英文、数字、$
和_
的组合,且不能用数字开头。变量名也不能是JavaScript的关键字,如if
、while
等。
<script>
let age = 10;
let name = "李志大帅哥";
name="111";
document.write(age+","+name+"<br/>");
document.write(typeof(age)+"<br/>");
{
let a1 = 1;
var a2 = 2;
}
document.write(a2+"<br/>"); //a2为全局变量
//document.write(a1); //al为局部变量出了所属的大括号就不能使用了
//定义常量
const b = 3.14;
document.write(b);
</script>
3、字符串
JavaScript的字符串就是用''
或""
括起来的字符表示。
如果’本身也是一个字符,那就可以用""
括起来,比如"I'm OK"
包含的字符是I
,'
,m
,空格,O
,K
这6个字符。如果字符串内部既包含’又包含"怎么办?可以用转义字符\来标识,比如:
'I\'m \"OK\"!';
表示的字符串内容是:I'm "OK"!
转义字符\可以转义很多字符,比如\n
表示换行,\t
表示制表符,字符\
本身也要转义,所以\\
表示的字符就是\
。
ASCII字符可以以\x##
形式的十六进制表示,例如:
'\x41'; // 完全等同于 'A'
还可以用\u####
表示一个Unicode字符:
'\u4e2d\u6587'; // 完全等同于 '中文'
多行字符串
由于多行字符串用\n
写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 * ... *
表示:
`这是一个
多行
字符串`;
4、数组
- 数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。
- 定义格式:let 数组名 = [元素1,元素2,…];
- 索引范围:从 0 开始,最大到数组长度-1
- 数组长度:数组名.length
- 数组高级运算符…
- [ ] 数组复制
- [ ] 合并数组
- [ ] 字符串转数组
<script>
//创建数组
let arr = [1,2,3];
arr[3]=4;
for(let i = 0 ; i<arr.length; i++){
document.write(arr[i]+"<br/>");
}
document.write("=============="+"<br/>");
//创建初始长度为5的数组
let arr1 = new Array(5);
document.write(arr1.length+"<br/>");
document.write("=============="+"<br/>");
//复制数组
let arr2 = [...arr];
for(let i = 0 ; i<arr2.length; i++){
document.write(arr2[i]+"<br/>");
}
document.write("=============="+"<br/>");
//合并数组
let arr3 = [5,6,7];
let arr4 = [...arr,...arr3];
for(let i = 0 ; i<arr4.length; i++){
document.write(arr4[i]+"<br/>");
}
document.write("=============="+"<br/>");
//将字符串转为数组
let arr5 = [..."hello"];
for(let i = 0 ; i<arr5.length; i++){
document.write(arr5[i]+"<br/>");
}
</script>
5、对象
<script>
var xiaoming = {
name: '大帅哥',
birthday: 1997,
height: 1.78,
weight: 75,
score: null
};
</script>
JavaScript用一个{...}
表示一个对象,键值对以xxx: xxx
形式申明,用,
隔开。注意
,最后一个键值对不需要在末尾加,
,如果加了,有的浏览器(如低版本的IE)将报错。
取值:
<script>
xiaoming.name; // '大帅哥'
xiaoming.birth; // 1997
</script>
如果属性名包含特殊字符,就必须用''
括起来:
<script>
var xiaohong = {
name: '大帅哥',
'middle-school': '清华'
};
</script>
xiaohong的属性名middle-school
不是一个有效的变量,就需要用''
括起来。访问这个属性也无法使用.
操作符,必须用['xxx']
来访问:
<script>
xiaohong['middle-school']; // '清华'
xiaohong['name']; // '大帅哥'
xiaohong.name; // '大帅哥
</script>
注意:
如果访问一个不存在的属性不报错,而是返回undefined
。
6、条件判断
- JavaScript使用
if () { ... } else { ... }
来进行条件判断。
<script>
//if语句
let month = 3;
if(month >= 3 && month <= 5) {
document.write("春季");
}else if(month >= 6 && month <= 8) {
document.write("夏季");
}else if(month >= 9 && month <= 11) {
document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
document.write("冬季");
}else {
document.write("月份有误");
}
document.write("<br>");
</script>
其中else
语句是可选的。如果语句块只包含一条语句,那么可以省略{}
(不建议省略):
<script>
var age = 20;
if (age >= 18)
alert('adult');
else
alert('teenager');
</script>
省略{}的危险之处在于,如果后来想添加一些语句,却忘了写{}
,就改变了if...else...
的语义,例如:
<script>
var age = 20;
if (age >= 18)
alert('adult');
else
console.log('age < 18'); // 添加一行日志
alert('teenager'); // <- 这行语句已经不在else的控制范围了
</script>
上述代码的else
子句实际上只负责执行console.log('age < 18');
,原有的alert('teenager');
已经不属于if...else...
的控制范围了,它每次都会执行。
相反地,有{}
的语句就不会出错:
<script>
var age = 20;
if (age >= 18) {
alert('adult');
} else {
console.log('age < 18');
alert('teenager');
}
</script>
- switch 语句
<script>
//switch语句
switch(month){
case 3:
case 4:
case 5:
document.write("春季");
break;
case 6:
case 7:
case 8:
document.write("夏季");
break;
case 9:
case 10:
case 11:
document.write("秋季");
break;
case 12:
case 1:
case 2:
document.write("冬季");
break;
default:
document.write("月份有误");
break;
}
document.write("<br>");
</script>
7、循环
- for循环
<script>
//for循环
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
</script>
- i=1 这是初始条件,将变量i置为1;
- i<=5 这是判断条件,满足时就继续循环,不满足就退出循环;
- i++ 这是每次循环后的递增条件,由于每次循环后变量i都会加1,因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。
for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环:
<script>
var x = 0;
for (;;) { // 将无限循环下去
if (x > 100) {
break; // 通过if判断来退出循环
}
x ++;
}
</script>
for循环的一个变体是for … in循环,它可以把一个对象的所有属性依次循环出来;要过滤掉对象继承的属性,用hasOwnProperty()来实现:
<script>
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}
</script>
- while 循环
<script>
//while循环
let n = 6;
while(n <= 10) {
document.write(n + "<br>");
n++;
}
</script>
在循环内部变量n不断自增,直到变为11时,不再满足while条件,循环退出。
- do … while
<script>
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
</script>
用do { ... } while()
循环要小心,循环体会至少执行1次,而for和while循环则可能一次都不执行。
8、Map和Set
JavaScript的默认对象表示方式{}
可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对。
但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。
为了解决这个问题,最新的ES6规范引入了新的数据类型Map。
- Map
Map是一组键值对的结构,具有极快的查找速度。
举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:
<script>
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
</script>
给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。
如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:
<script>
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
</script>
初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:
<script>
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
</script>
由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:
<script>
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
</script>
- Set
Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。
要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:
<script>
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
</script>
重复元素在Set中自动被过滤:
<script>
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
</script>
注意数字3
和字符串'3'
是不同的元素。
通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:
<script>
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
</script>
通过delete(key)方法可以删除元素:
<script>
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
</script>
9、iterable
遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。
具有iterable类型的集合可以通过新的for ... of
循环来遍历。
<script>
'use strict';
var a = [1, 2, 3];
for (var x of a) {
}
console.log('你的浏览器支持for ... of');
</script>
用for ... of
循环遍历集合,用法如下:
<script>
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
console.log(x);
}
for (var x of s) { // 遍历Set
console.log(x);
}
for (var x of m) { // 遍历Map
console.log(x[0] + '=' + x[1]);
}
</script>
for ... in
循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。
当我们手动给Array对象添加了额外的属性后,for ... in
循环将带来意想不到的意外效果:
<script>
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
console.log(x); // '0', '1', '2', 'name'
}
</script>
Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:
<script>
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
</script>
Map的回调函数参数依次为value、key和map本身:
<script>
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
</script>
内容 | 网址 |
---|---|
JavaScript个人学习笔记总结 - 快速入门 | https://blog.csdn.net/weixin_50594210/article/details/115112096 |
JavaScript个人学习笔记总结 - 函数 | https://blog.csdn.net/weixin_50594210/article/details/115113081 |
JavaScript个人学习笔记总结 - 标准对象 | https://blog.csdn.net/weixin_50594210/article/details/115112683 |
JavaScript个人学习笔记总结 - 面向对象编程 | https://blog.csdn.net/weixin_50594210/article/details/115113024 |
JavaScript个人学习笔记总结 - 浏览器 | https://blog.csdn.net/weixin_50594210/article/details/115113131 |
JavaScript个人学习笔记总结 - jQuery | https://blog.csdn.net/weixin_50594210/article/details/115113299 |
JavaScript个人学习笔记总结 - 错误处理 | https://blog.csdn.net/weixin_50594210/article/details/115113442 |
JavaScript个人学习笔记总结 - underscore | https://blog.csdn.net/weixin_50594210/article/details/115113498 |