2021/01/04 JS基础 ECMASCRIPT（一）

浏览器的组成部分
渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，以及老版本的webkit
JS引擎：也叫JS解释器，用来读取网页中的JS代码，对其处理后再运行，比如chrome的V8

JS的组成部分
1 .ECMAscript，JS基础指的就是这部分，它规定了JS的编程语法和基础核心
2 .DOM，文档对象模型，是W3C组织推荐的扩展编程语言的标准编程接口
3 .BOM，浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

JS书写方式：
1 .行内式（了解就好）
2 .内嵌式，用script标签包裹的JS
3 .外联式，用script标签引入，用src属性标识路径的JS文件

JS中的输入输出语句
1 .prompt(); 弹出一个输入框
2 .alert(); 弹出一个提示信息
3 .console.log();在控制台输出信息
4 .document.write();在网页页面中输出信息

---

（1）常量与变量

       在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
1 .变量由字母、下划线、$ 或数字组成，并且第一个字母必须是“字母、下划线或$”
2 .变量不能是系统关键字和保留字(JS本身使用的变量名和将来将会使用的变量名)
3 .变量的命名严格区分大小写(驼峰命名法，第一个单词首字母小写后面的单词首字母大写)
4 .变量通过先声明(var)再赋值的方式使用，声明一个变量并赋值，成为变量的初始化

var i = 0; 	//i 就成为了一个变量

5 .js支持同时声明多个变量，变量名之间用英文逗号分隔

var a = 1, b = 2, c = 3;
//以上代码等价于以下代码
var a = 1;
var b = 2;
var c = 3;

6 .变量可以重新赋值，变量被重新赋值后，原有的值就会被覆盖

var a = 0;
a = a + 1;
console.log(a);
//输出的结果是 1

使用临时变量交换两个变量的值：

var temp;
var a = 10;
var b = 20;
console.log(a, b);
//a = 10	b = 20
temp = a;
a = b;
b = temp;
console.log(a, b);
//a = 20	b = 10

---

       在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。        在ES6阶段再深入了解常量。

---

（2）数据类型

       数据类型就是变量中值的类型，分为两种，基本数据类型和引用数据类型JS中变量的数据类型在程序执行过程中，根据变量的值才能确定。
基本数据类型有：数字、字符串、布尔值、未定义值和空值，引用数据类型包含数组和对象
1 . 数字类型，就是数学数字，JS中的数字类型是不区分整形（int）和浮点型（float）的。
2 . 字符串，简单来讲就是一串字符，用英文单引号或者双引号括起来，单引号内可以包含双引号，同样的，双引号内也可以包含单引号

var message = "'javascript'基础学习";
//注意一点，数字加上引号就不再是数字类型了，而是字符串类型
var number = "1000";

3 . 布尔型，布尔型的值只有是或者不是，也可以说对（true）或者错（false），用来进行选择结构的条件判断。
当布尔值在参与运算时，true当作数字 1 ，false当作数字 0 。

4 . 未定义值，就是空值，用undefined，比如一个变量声明了但是没有赋值，那么此变量的值就是undefined

var empty;
document.write(empty);
//结果为undefined
//注意undefined和null不同，null是一个Object类型
console.log(empty + 1);//undefined + 1 = NaN
var num = null;
console.log(num + 1);//null + 1 = 1

5 . 空值，数字、字符串等数据在定义的时候，系统都会分配一定的内存空间。在JavaScript中，空值用null表示。如果一个变量的值等于null，如“var n = null”，则表示系统没有给这个变量n分配内存空间。

获取数据类型：typeof()

var a = null;
console.log(typeof(a));
//输出为Object
//也可以写成 console.log(typeof a);

获取字符串的长度：length

var message = "字符串长度";
console.log(message.length);
//输出为5

判断是否为数字：isNaN()

var a = 10;
console.log(isNaN(a));
//结果为false

---

（3）运算符
在JavaScript中，运算符指的是“变量”或“值”进行运算操作的符号。
1 . 算数运算符，包括加(+)减(-)乘(*)除(/)，余数(%,也叫取模)，自增一(n++)，自减一(n- -)。
加法运算符需要注意三点

数字+数字=数字

var a = 0,b = 1;
document.write(a + b);
//结果为数字类型的 1

字符串+字符串=两个字符串拼接

var mes1 = "javascript";
var mes2 = "基础学习";
document.write(mes1 + mes2);
//结果为字符串类型的"javascrip基础学习"

字符串+数字=先将数字类型转换为字符串再进行拼接

var message = "今年是";
var year = 2021;
console.log(message + year);
//结果为字符串类型的"今年是2021"

2 . 自增运算符，表示在“原来的值”的基础上再加上1。i++等价于i=i+1。
自增运算分为先自增(i++)和后自增(++i)，区别是一个是先运算再加一，一个是先加一再运算。

var a = 1;
var b = a++;
//最终的结果为a = 2，b = 1,因为先运算后加一，以上代码等价于以下代码
var a = 1;
var b = a;
a = a + 1;

var a = 1;
var b = ++a;
//最终的结果为a = 2， b = 2，因为先加一后运算，等价于以下代码
var a = 1;
a = a + 1;
var b = a;

自减运算符和自增道理是一样的。

3 . 赋值运算符用于将右边表达式的值保存到左边的变量中去

a += 1;
//等价于 a = a + 1, a -= 1, a *= 1, a /= 1同理

4 . 比较运算符，包括大于、小于、大于等于、小于等于、等于(==)、不等于(!=)、 全等于(= = =)，
其中等于可以数据类型不同，如 10 = = "10"结果是true，而全等于要求值、数据类型都要相同，比较运算符的结果返回布尔值，true或者false

5 . 逻辑运算符，逻辑运算符用于执行“布尔值的运算”，它常常和比较运算符结合在一起使用。常见逻辑运算符有与(&&)、或(||)、非(!)
与(&&)，就是并且，要求两边都为真，结果才为true，只要有一个是假，那结果就为false

var a = 10, b = 20;
a > 0 && b > 0;//true
a > 0 && b > 30;
a > 30 && b > 0;
a > 30 && b > 30;//均为false

或(||),或运算用双竖杠（||）表示。如果双竖杠（||）两边的值都为false，则结果返回false；如果有一个为true或者两个都为true，则结果返回true。

非(!)，其实就是相当于取反，!true = false, !false = true

逻辑中断(短路运算)：当有多个表达式时，如果左边的表达式可以确定运算的结果，则不再进行后面的运算。
逻辑与短路：
如果第一个表达式的值为true，则返回第二个表达式的值，如果第一个表达式的值为false，则返回第一个表达式的值。

console.log(123 && 456);//返回值为456
console.log(0 && 456); //返回值为0，0表示假
console.log(null && 4.2 * 135.55 && "返回值"); //返回值为null，第一个为false，后面的就不看了，直接返回第一个

逻辑或短路：
如果第一个表达式结果为true，则返回表达式1，如果第一个为假，则返回表达式2，如果表达式2也为假，则继续往后运算，知道结果为真，并返回。如果一个真的都没有，啥都不返回。

console.log(123 || 456);//123
console.log(0 || 456);//456
console.log(null || "" || 456);//456
console.log(null || "" || 0);//没有返回值

逻辑中断影响结果的小示例：

var num = 0;
console.log(123 || num++);
console.log(num);//结果为0

6 . 条件运算符，也叫三目运算符或者三元表达式，用“？”表示
var a = 条件 ? 表达式1 : 表达式2;
当条件为true时，我们选择的是“表达式1”，也就是“var a=表达式1”；当条件为false时，我们选择的是“表达式2”，也就是“var a=表达式2”。

7 .运算符优先级

---

（4）表达式与语句

一个表达式包含“操作数”和“操作符”两部分。操作数可以是变量，也可以是常量。操作符指的就是运算符。每一个表达式都会产生一个值。简单来讲，语句就是“JavaScript的一句话”，而表达式就是“一句话的一部分”。

---

（5）类型转换

将“一种数据类型”转换为“另外一种数据类型”,我们称为类型转换。
转换分为两种，隐式转换和显式转换。隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，指的是需要我们手动用代码强制进行的类型转换。

1 . 字符串转换为数字：Number() parseInt() parseFloat()
Number()方法可以将任何数字型字符串(只含有数字的字符串)，转换为数字类型

var year = "2021";
year = Number(year);
console.log(year);
//结果为数字类型的2021

parseInt()和parseFloat()可以提取首字母为数字的任意字符串中的数字部分，注意，是首字母。
如果条件不满足，则返回结果为NaN(not a number 非数字)。
parseInt()只提取整数部分
parseFloat()连同小数部分一起提取

var mes1 = "2021年开始了";
var mes2 = "派的开头为3.14"
console.log(parseInt(mes1));//2021
console.log(parseFloat(mes2));//NaN

隐式转换为数字型：利用算数运算实现转换，即除了加号以外的运算

var a = "10";//string
console.log(a - 0);//10	number
console.log(a * 1);//10 number
console.log(a / 1);//10 number

2 .数字转换为字符串。toString()

var n = 2021;
console.log(n.toString());//"2021"
//或者使用函数String(n);

还有一种转换方式，字符串拼接。数字加上字符串，系统会将数字转换成字符串。如果想要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。用字符串拼接完成转换的方式就是隐式转换。

var n = 2021;
n = n + "";
//n = "2021"
var m1 = 10, m2 = "20";
console.log(m1 + m2);
//1020

3 . 其他类型转换为布尔型 Boolean()函数
除了代表空、否定的值会被转为false，如""、0、NaN、null、undefined，其他值转换结果都是true

Boolean(0);//false
Boolean(a);//true
Boolean("转换")//true

总结：所谓隐式转换就是，加法操作只要有一个是字符串，就是字符串拼接，除了加法以外，数字型的字符串(包括布尔型)做运算的结果就是数字型，非数字型字符串做运算的结果就是NaN

---

（6）转义字符

转义字符用" \ "表示，如\n表示换行，\t表示缩进，\b表示空格

（7）注释
单行注释

//单行注释

多行注释

/*
多行注释
多行注释
多行注释
*/

---

（8）流程控制
流程控制的方式有三种，指的是控制流程按照怎样的顺序执行。
1 . 顺序结构、代码按照从上到下、从左到右的“顺序”执行。

2 . 选择结构，选择结构指的是根据“条件判断”来决定使用哪一段代码。选择结构有3种：单向选择、双向选择以及多向选择，但是无论是哪一种，JavaScript都只会执行其中的一个分支。

单向选择：即if语句，括号内为条件判断，如果结果为true则执行下面大括号的代码，如果结果为false则跳过下面代码。

if (a > 0) {
	alert(a);
}

双向选择，即if…else语句，如果结果为true则执行下面大括号的代码，如果结果为false则执行else里面的代码，三元表达式也属于双向选择。

if (a > 0) {
	alert(a);
} else {
	alert(b);
}

多项选择，即if…else if…else语句，就是在双向选择的基础上增加n个选择分支。

if (a > 0) {
	alert(a);
} else if (a == 0) {
	alert(0);
} else {
	alert(b);
}

if语句的嵌套：在JavaScript中，if语句是可以嵌套使用的。

var a = 10, b = 20;
if (a > 0) {
	if (b > 0) {
		alert(true);
	} else {
		alert(false);
	}
} else {
	if (b < 0) {
		alert(false);
	}
}

switch结构：switch语句会根据“判断值”来判断，然后来选择使用哪一个case。如果每一个case的取值都不符合，那就执行default的语句。

/*switch(判断值)
{
    case 取值1:
        语块1;break;
    case 取值2:
        语块2;break;
    ……
    case 取值n:
        语块n;break;
    default:
        语句块n+1;
}*/

var d = 7;
var week;
switch (d) {
	case 1:
	week = "周一";
	break;
	case 2:
	week = "周二";
	break;
	case 3:
	week = "周三";
	break;
	case 4:
	week = "周四";
	break;
	case 5:
	week = "周五";
	break;
	case 6:
	week = "周六";
	break;
	default:
	week = "周日";
}
console.log("今天是" + week);

注意，如果case代码块后面缺少了break，switch结构会直接执行default代码块的语句

3 . 循环结构，指的是根据条件来判断是否重复执行某一段程序。若条件为true，则继续循环；若条件为false，则退出循环。

while循环，指的是在“满足某个条件下”循环反复地执行某些操作的语句。

如果“条件”返回为true，则会执行大括号{}内部的程序。当执行完大括号{}内部的程序后，会再次判断“条件”。如果条件依旧还是true，则会继续重复执行大括号中的程序……循环执行直到条件为false才结束整个循环，然后再接着执行下面的程序

while (条件) {
	执行语句;
}

var a = 0;
var b = 0;
while (a < 100) {
	console.log(b += 1);
	a++;
}
//打印1 - 100的整数

值得注意的是，a++是while循环的退出条件，如果缺少了a++，那么a就永远等于1，就永远小于100，循环就变成了死循环，while循环一定要写退出条件。

do…while循环结构：与while循环不同的是，do…while循环一定会至少执行一次，也就是先执行一次，再判断是否继续执行。

do {
    ……
}while (条件);

for循环：

for(初始化表达式; 条件表达式; 循环后操作) {
    ……
}

for (var i = 0; i < 100; i++) {
	console.log(i);
}
//输出0 - 99的整数

在以上for循环中，首先定义一个用于计数的变量i，其中i的初始值为0。然后定义一个判断条件i<100，只要i小于100就会执行for循环中的程序。最后定义一个循环后的表达式i++，也就是说，每次循环之后都会进行一次i++。

---