JavaScript基础
1.JS简介：
（1）定义（是什么）：是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
（2）作用（做什么）：
-
网页特效（监听用户的一些行为让网页做出对应的效果）
-
表单验证（针对表单数据的合法性判断）
-
数据交互（获取后台数据，渲染到前端）
-
服务端编程（node.js）
（3）组成（有什么）：
-
JavaScript
-
ECMAScrip
-
JavaScript语言基础
-
规定：变量、分支语句、循环语句、对象等；
-
-
Web APIs
-
DOM（页面文档对象模型）操作文档，比如对页面元素进行移动、大小、添加删除等操作；
-
BOM（浏览器对象模型）操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等；
-
-
（4）书写位置：
-
内部
-
直接写在html文件里，用script标签包住
-
-
外部
-
代码写在以.js结尾的文件中
-
语法：通过script标签，引入到html页面中。
-
-
行内（了解）
（5）注释：
-
单行://
-
多行:/**/
(6)输入输出语法：
-
输出：
-
语法一：document.write（""）
-
作用：向body内输出内容,如果输出内容是标签，会被解析为网页元素；
-
-
语法二：alert("")
-
页面弹出警告对话框；
-
-
语法三：console.log("");
-
控制台输出语法，程序员调试使用；
-
-
-
输入：prompt("输入语法")；
-
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字；
-
（7）字面量：
2.变量：
（1）是什么：计算机存储数据的"容器"；
（2）怎么用：
-
变量的声明
-
语法：let 变量名
-
-
变量的赋值
-
用=
-
（3）例题：
-
输出用户名
-
交换变量值
（4）规则：
-
不能用关键字；
-
有特殊含义的字符，JavaScript内置的一些英语词汇，例如：let、var、if、for等；
-
-
只能使用下划线、字母、数字、$组成，且数字不能开头；
-
字母严格区分大小写；
（5）规范：
-
起名有意义
-
遵守小驼峰命名法
-
第一个单词首字母小写，后面每个单词首字母大写。例：userName
-
3.变量拓展-数组（存储多个值）
（1）数组（Array）——一种将一组数据存储在单个变量名下的方式；
（2）语法格式：let 数组名=[数据1，数据2，……，数据n]
（3）取值：数组名[下标]
4.常量：
（1）使用const声明的变量称为常量；
（2）使用场景：当某个变量永远不会改变时；
（3）命名规则：与变量一样；
（4）使用：
-
-
注意：常量不允许重新赋值，声明的时候必须赋值（初始化）
-
小技巧：不需要重新赋值的数据使用const
5.数据类型：
（1）Js中的数据类型总共有七种：undefined、Boolean、null、Number、String、Symbol和Object。Symbol(符号)是 ECMAScript 6 新增的let message;
（2）优先级：
-
先乘除后加减，有括号先算括号里面的
（3）重点：NaN（不是数据类型）粘性（与任何对NaN操作都是返回NaN）
（4）模版字符串：
（6）检测数据类型（typeof（x））
-
typeof运算可以返回被检测的数据类型，它支持两种语法格式
-
作为运算符：typeof x（常用）
-
函数：typeof（x）
-
（7）隐式转换
-
某些运算符被执行是，系统内部自动将数据类型进行转换，这种转换称为隐式转换；
-
规则：
-
+号两边只要有一个字符串，都会把另外一个转成字符串
-
除了+外的算术运算符，比如- * / 等都会把数据类型转成数字类型
-
-
缺点：转换类型不明确，靠经验才能总结
-
小技巧
-
+号作为正号解析可以转换成数字型
-
任何数据和字符串相加结果都是字符串
-
（8）显示转换
-
严格区分大小写
-
转换为数字类型
-
Number（数据）
-
parseInt
-
只保留整数
-
-
parseEloat
-
只保留小数
-
-
（9）数据类型详细
/*
Js中的数据类型总共有七种：undefined、Boolean、null、Number、String、Symbol和Object。Symbol(符号)是 ECMAScript 6 新增的
let message;
console.log(message);
// 布尔类型 只有2个值：ture和false
let isTure = false;
console.log(isTure);
// 字符串类型String 被单引号或者双引号包裹的值
let name = "Js";
console.log(name);
// typeof：判断数据类型（判断基本数据类型）
console.log(typeof message);
console.log(typeof(isTure));
console.log(typeof 36);
*/
// undefined
// Undefined 类型只有一个值，就是特殊值 undefined。当使用 var 或 let 声明了变量但没有初始 化时，就相当于给变量赋予了 undefined 值
// 可以直接给一个变量赋值为 undefined，但是没有必要。
// 对一个未声明的变量，只能执行一个有用的操作--typeof。
// undefined 是一个假值。因此，如果需要，可以用更简洁的方式检测它。不过要记住，也有很多 其他可能的值同样是假值。所以一定要明确自己想检测的就是 undefined 这个字面值，而不仅仅是假值。
console.log(typeof age); //undefine
// Null
// Null 类型同样只有一个值，即特殊值 null。逻辑上讲，null 值表示一个空"对象"指针
console.log(typeof null); //object
// 即使 null 和 undefined 有关系，它们的用途也是完全不一样的。
// null一般代表的是对象为‘空’，undefined一般代表着数值为‘空’
// null 是一个假值。
console.log(null == undefined); // true
// Boolean类型
// Boolean类型有两个字面值:true 和 false。 ：这两个值是区分大小写的。
let found = true;
let lost = false;
let message = 'Hello World!';
let messageAsBoolean = Boolean(message);
console.log(messageAsBoolean); //ture
// if 等流控制语句会自动执行其他类型值到布尔值的转换
if(message) {
console.log(message); //Hello World
}
message = undefined;
console.log(Boolean(message)); //false
// Number类型 Number 类型使用 IEEE 754 格式表示整数和浮点值(在某些语言中也叫双精度值)
let intNum = 55; // 整数
// 整数也可以用八进制(以 8 为基数)或十六进制(以 16 为基数)字面量表示。
// 对于八进制字面量， 第一个数字必须是零(0)，然后是相应的八进制数字(数值 0~7)。如果字面量中包含的数字超出了应 有的范围，就会忽略前缀的零，后面的数字序列会被当成十进制数
// 八进制字面量在严格模式下是无效的，会导致 JavaScript 引擎抛出语法错误。ES6中八进制通过前缀0o来表示，也适用于严格模式。
let octalNum1 = 070; //八进制56
let octalNum2 = 079; //无效的八进制值，当成79处理
let octalNum3 = 08; //无效的八进制值，当成8处理
//创建十六进制字面量，必须让真正的数值前缀 0x(区分大小写)，然后是十六进制数字(0~9 以 及 A~F)。十六进制数字中的字母大小写均可。
let hexNum1 = 0xA; //十六进制的10
let hexNum2 = 0x1f; //十六进制的31
// 浮点值
let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效，但不推荐
// 因为存储浮点值使用的内存空间是存储整数值的两倍，所以 ECMAScript 总是想方设法把值转换为 整数。在小数点后面没有数字的情况下，数值就会变成整数。类似地，如果数值本身就是整数，只是小数点后面跟着 0(如 1.0)，那它也会被转换为整数。
let floatNum4 = 1.; // 小数点后面没有数字，当成整数 1 处理
let floatNum5 = 10.0; // 小数点后面是零，当成整数 10 处理
// 科学计数法
// 对于非常大或非常小的数值，浮点值可以用科学记数法来表示。科学记数法用于表示一个应该乘以 10 的给定次幂的数值。ECMAScript 中科学记数法的格式要求是一个数值(整数或浮点数)后跟一个大 写或小写的字母 e，再加上一个要乘的 10 的多少次幂。
let floatNum6 = 3.125e7;
let floatNum7 = 3e-7;
// 浮点值的精确度最高可达 17 位小数，但在算术计算中远不如整数精确。
// let a = 0.1;
// let b = 0.2;
// let sum = a + b;
// console.log(sum);
// let a = 0.15;
// let b = 0.25;
// let sum = a + b;
// console.log(sum);
// 解决浮点数运算错误的方法可以考虑将浮点数统一乘以一个固定的倍数，将其转化成整数进行计算，计算结果再除以固定倍数转换回原来的小数。
// 值的范围
/*
由于内存的限制，ECMAScript 并不支持表示这个世界上的所有数值。ECMAScript 可以表示的最小 数值保存在 Number.MIN_VALUE 中，这个值在多数浏览器中是 5e-324;
可以表示的最大数值保存在 Number.MAX_VALUE 中，这个值在多数浏览器中是 1.797 693 134 862 315 7e+308。
如果某个计算得到的 数值结果超出了 JavaScript 可以表示的范围，那么这个数值会被自动转换为一个特殊的 Infinity(无 穷)值。
任何无法表示的负数以-Infinity(负无穷大)表示，任何无法表示的正数以 Infinity(正 无穷大)表示。
如果计算返回正 Infinity 或负 Infinity，则该值将不能再进一步用于任何计算。这是因为 Infinity 没有可用于计算的数值表示形式。
要确定一个值是不是有限大(即介于 JavaScript 能表示的 最小值和最大值之间)，可以使用 isFinite()函数。
*/
let result = Number.MAX_VALUE + Number.MAX_VALUE;
console.log(isFinite(result)); // false
// NaN
// NaN 是一个特殊值，意思是“不是数值”（Not a Number），用于表示本来要返回数值的操作失败了(而不是抛出错误)。
console.log(0/0); // NaN
console.log(-0/+0); // NaN
console.log(5/0); // Infinity
console.log(5/-0); // -Infinity
// NaN 有几个独特的属性。首先，任何涉及 NaN 的操作始终返回 NaN(如 NaN/10)，在连续多步计算 时这可能是个问题。其次，NaN 不等于包括 NaN 在内的任何值。
console.log(NaN == NaN); // false
// isNaN()函数 判断值是不是NaN
console.log(isNaN(NaN)); // true
console.log(isNaN(10)); // false，10 是数值
console.log(isNaN("10")); // false，可以转换为数值10
console.log(isNaN("blue")); // true，不可以转换为数值
console.log(isNaN(true)); // false，可以转换为数值1
// 数值转换
// 可以通过三个函数将非数值转换为数值：Number()、parseInt()和parseFlot()。
/*
Number()函数基于如下规则进行转换。
布尔值，true转换成1，false转换成0。
数值直接返回。
null，返回0。
undefined，返回NaN。
字符串，应用一下规则。
如果字符串包含数值字符，包括数值字符前面带加、减号的情况，则转换为一个十进制数值。
如果字符串包含有效的浮点值格式如"1.1"，则会转换为相应的浮点值。
如果字符串包含有效的十六进制格式如"0xf"，则会转换为与该十六进制值对应的十进制整数值。
如果是空字符串(不包含字符)，则返回 0。
如果字符串包含除上述情况之外的其他字符，则返回 NaN。
对象，调用 valueOf()方法，并按照上述规则转换返回的值。如果转换结果是 NaN，则调用 toString()方法，再按照转换字符串的规则转换。
*/
let num1 = Number('Hello World!'); //NaN
let num2 = Number(""); //0
let num3 = Number("0000111"); //111
let num4 = Number(true); //1
/*
parseInt()函数更专注于字符串是否包含数值模式。
字符串最前面的空格会被忽略，从第一个非空格字符开始转换。
如果第一个字符不是数值字符、加号或减号，parseInt()立即返回 NaN。这意味着空字符串也会返回 NaN(这一点跟 Number()不一样，它返回 0)。
如果第一个字符是数值字符、加号或减号，则继续依次检测每个字符，直到字符串末尾，或碰到非数值字符。
parseInt()函数也能识别不同的整数格式(十进制、八进制、十六进制)。
不同的数值格式很容易混淆，因此 parseInt()也接收第二个参数，用于指定底数(进制数)。
*/
let num5 = parseInt("1234blue"); // 1234
let num6 = parseInt(""); // NaN
let num7 = parseInt("0xA"); // 10, 解释为十六进制整数
let num8 = parseInt(22.5); // 22
let num9 = parseInt("70"); // 70, 解释为十进制整数
let num10 = parseInt("0xf"); // 15, 解释为十六进制整数
let num11 = parseInt("0xAF", 16); // 175
// let num11 = parseInt("AF", 16);
let num12 = parseInt("AF"); // NaN
/*
parseFloat()
parseFloat()函数的工作方式与parseInt()函数类似。
parseFloat()函数始终忽略字符串开头的零。
这个函数能识别前面讨论的所有浮点格式，以及十进制格式(开头的零始终被忽略)。
十六进制数值始终会返回0。因为 parseFloat()只解析十进制值，因此不能指定底数。
*/
let num13 = parseFloat("1234blue"); // 1234，按整数解析
let num14 = parseFloat("0xA"); // 0
let num15 = parseFloat("22.5"); // 22.5
let num16 = parseFloat("22.34.5"); // 22.34
let num17 = parseFloat("0908.5"); // 908.5
let num18 = parseFloat("3.125e7"); // 31250000
// String类型
// String(字符串)数据类型表示零或多个 16 位 Unicode 字符序列。字符串可以使用双引号(")、 单引号(')或反引号(`)标示
let firstName = 'John';
let lastName = "Jacob";
let secondName = `Jingleheimerschmidt`;
/*
\n 换行
\t 制表
\b 退格
\r 回车
\f 换页
\\ 反斜杠(\)
\' 单引号(')，在字符串以单引号标示时使用，例如'He said, \'hey.\''
\" 双引号(")，在字符串以双引号标示时使用，例如"He said, \"hey.\""
\` 反引号(`)，在字符串以反引号标示时使用，例如`He said, \`hey.\``
\xnn 以十六进制编码 nnnn 表示的 Unicode 字符(其中 n 是十六进制数字 0~F)，例如\u03a3等于希腊字符"Σ"
*/
let text = "This is the letter sigma: \u03a3.";
// 字符串的长度可以通过其 length 属性获取
console.log(text.length);
// 字符串的拼接 ‘ + ’
// 字符串 + 任意类型 = 字符串
// 加好口诀： 数字相加，字符相连
let java = 'java';
let scrpit = "scrpit";
console.log(java + scrpit);
// 转换为字符串
// 1. toString()方法。这个方法唯一的用途就是返回当前值的字符串等价物。
// toString()方法可见于数值、布尔值、对象和字符串值。(没错，字符串值也有 toString()方法， 该方法只是简单地返回自身的一个副本。)null 和 undefined 值没有 toString()方法。
let age = 11;
let ageAsString = age.toString();
let found = true;
let founAsString = found.toString();
// 在对数值调用这个方法时，toString()可以接收一个底数参数，即以什么底数来输出数值的字符串表示
let num = 10;
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(10)); // "10"
console.log(num.toString(16)); // "a"
// 2. String()方法
// 如果值有 toString()方法，则调用该方法(不传参数)并返回结果。
// 如果值是 null，返回"null"。
// 如果值是 undefined，返回"undefined"。
let value1 = 10;
let value2 = true;
let value3 = null;
let value4;
console.log(String(value1)); // "10"
console.log(String(value2)); // "true"
console.log(String(value3)); // "null"
console.log(String(value4)); // "undefined"
// 模板字面量 ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串
let myMultiLineString = 'first line\nsecond line';
let myMultiLineTemplateLiteral = `first line
second line`;
console.log(myMultiLineTemplateLiteral.length);
// 字符串插值
// 字符串插值通过在${}中使用一个 JavaScript 表达式实现（包括函数，方法）
let value = 5;
let exponent = 'second';
let interpolatedString = value + ' to the ' + exponent + ' power is ' + (value * value);
let interpolatedTemplateLiteral = `${ value } to the ${ exponent } power is ${ value * value }`;
// Object类型
// 对象其实就是一组数据和功能的集合。
let o = new Object();
console.log(o);
let user = {
"name": "",
age: 10,
}
console.log(typeof user);6.例题：
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
订单确认
7.运算符：
// 操作符包含有 数学操作符、位操作符、关系操作符、赋值操作符等。
// 1 算术运算符。 +、-、*、/、
let num1 = 100;
let num2 = 10;
// 加、减、乘、除
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
// 取余运算%
console.log(num1 % num2);
// 除了+ 以外的运算符都会把数据转成数值类型进行运算。
// 运算符进行了类型转换(隐式转换)
console.log(2 + '2');
console.log(2 - '2');
// 如果将一元加、减（+、-）应用到非数值，则会执行与使用 Number()转型函数一样的类型转换:布尔值 false 和 true 转换为 0 和 1，字符串根据特殊规则进行解析，对象会调用它们的 valueOf()和/或 toString() 方法以得到可以转换的值。
let x1 = '1';
let x2 = '1.1';
let x3 = 'Z';
let bb = false;
let ff = 1.1;
let obj = {
valueOf() {
return -1;
}
}
x1 = +x1;
x2 = +x2;
x3 = +x3;
bb = +bb;
ff = +ff;
obj = +obj;
// 自增、自减运算符 ++、-- (一元操作)
// 自增或自减运算符相当于当前值+1或者-1
let age = 18;
console.log(++age);
console.log(--age);
// 自增和自减有两种写法
// ++在前，先自增再运算，++在后，先运算再自增
console.log(age++);
console.log(age);
/*
自增、自减操作符可以作用于任何值，不限于整数--字符串、布尔值、浮点值，甚至对象都可以。
·对于字符串，如果是有效的数值形式，则转换为数值再应用改变。变量类型从字符串变成数值。
·对于字符串，如果不是有效的数值形式，则将变量的值设置为 NaN 。变量类型从字符串变成数值。
·对于布尔值，如果是 false，则转换为 0 再应用改变。变量类型从布尔值变成数值。
·对于布尔值，如果是 true，则转换为 1 再应用改变。变量类型从布尔值变成数值。
·对于浮点值，加 1 或减 1。
·如果是对象，则调用其valueOf()方法取得可以操作的值。对得到的值应用上述规则。如果是 NaN，则调用 toString()并再次应用其他规则。变量类型从对象变成数值。
*/
let s1 = "2";
let s2 = "z";
let b = false;
let f = 1.1;
let o = {
// 返回对象对应的字符串、数值或布尔值
valueOf() {
return -1;
}
};
s1++;
s2++;
b++;
f--;
o--;
// 赋值运算符 =
let point = 100;
// += x+=y => x=x+y
// -= x-=y => x=x-y
// *= x*=y => x=x*y
// /= x/=y => x=x/y
// %= x%=y => x=x%y
let x = 10;
let y = 10;
x += y;
console.log(x);
// 比较运算符（关系运算符）
// 比较运算符执行比较两个值的操作，包括（<）（>）（<=）（>=）（==）（!=）（===）（！==）
// 这几个操作符都返回的是布尔值。
/**
如果操作数都是数值，则执行数值比较。
如果操作数都是字符串，则逐个比较字符串中对应字符的编码。
如果有任一操作数是数值，则将另一个操作数转换为数值，执行数值比较。
如果有任一操作数是对象，则调用其 valueOf()方法，取得结果后再根据前面的规则执行比较。 如果没有 valueOf()操作符，则调用 toString()方法，取得结果后再根据前面的规则执行比较。
如果有任一操作数是布尔值，则将其转换为数值再执行比较。
*/
console.log(1 > 5);
console.log(2 >= 2);
// 相等和不相等操作符（==）（!=）
// 这两个操作符都会先进行类型转换(通常称为强制类型转换)再确定操作数是否相等。
// null 和 undefined 相等。
// null 和 undefined 不能转换为其他类型的值再进行比较。
// 如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true。否则，两者不相等。
console.log(2 == "2");
console.log(undefined == null);
let oc = {
valueOf() {
return -1;
}
};
let od = {
valueOf() {
return -1;
}
};
console.log(oc == od);
// 全等与不全等 （===）（!==）
// 全等和不全等操作符与相等和不相等操作符类似，只不过它们在比较相等时不转换操作数。
// 判断的是两边的值和数据类型是否完全相同。
console.log(2 === "2");
console.log(undefined === null);
// NaN不等于任何值，包括它本身。 涉及到NaN的比较都是false
console.log(NaN == NaN);
console.log(NaN === NaN);
// 尽量不是比较浮点数，因为会有精度问题
console.log(0.1+0.2 === 0.3);
// 逻辑运算符（布尔运算符）
// 逻辑与（&&）、逻辑或（||）、逻辑非（!）
console.log(false && false);
console.log(true && false);
console.log(true && true);
console.log(false && true);
// 逻辑与操作符是一种短路操作符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值。对逻辑与操作符来说，如果第一个操作数是 false，那么无论第二个操作数是什么值，结 果也不可能等于 true。
let fond = true;
let result = (found && someUndeclaredVariable);
console.log(result);
console.log(false || false);
console.log(true || false);
console.log(true || true);
console.log(false || true);
console.log(!false);
console.log(!true);
console.log(!0);
console.log(!NaN);
console.log(!undefined)
console.log(!'');
console.log(!12345)
console.log(!{});
8：JS基础语法总结框架：
