JavaScript个人学习笔记总结 - 快速入门

---

内容	网址
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;

执行流程：

1. 如果比较表达式为true，则取表达式1；
2. 如果比较表达式为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

---