慕课网web前端工程师2021视频课程javascript学习路径&笔记分享(1)

由于个人对html、css代码较为熟悉，且为了加快学习进度，因此跨过了前4周的学习，直接从半懵懂的JavaScript开始。
所以学习笔记有跳过，还请包涵～
通过3天的学习，个人觉得这个课程的含金量还是很高的，弥补了好多基础知识点。
不～吹牛逼的说，这是我近2年以来最认真去学习的一个课程了。

比如：
水仙花数、约数、质数这些曾经学过的数学知识都已经忘记了～哈哈，估计数学老师知道了又得拿尺子打我了。

数学知识弥补
水仙花数：指一个n位数，它的每个位上的数字的n次幂之和等于它本身（例：三位数153 = 1^3 + 5^3+ 3^3 ）
约数：整数A除以整数B(B≠0)，商正好是整数而没有余数，B称为A的约数。
质数：只能被1和它本身整除的数字，最小的质数是2。
阶乘公式：n!=1×2×3×…×(n-1)×n
喇叭花数公式：abc = a!+b!+c!

01 JS语法与变量

认识输出语句

alert 弹出警告框

alert(\'aaa\');
alert(\'bbb\');
alert(\'ccc\');

会打断程序运行，从第一条依次弹出

console.log 控制台输出

console.log(\'111\');
console.log(\'222\');
console.log(\'333\');

不会打断程序运行，有多少条显示多少条

document.write() 写入 HTML 输出

document.write(\'aaa\')

会重写当前html内容

innerHTML 写入 HTML 元素

document.getElementById("demo").innerHTML = 5 + 6;

变量：变量是存储数据值的容器。

字符串，用引号扩起来的就是字符串，可以是汉字、字母+汉字、字母+汉字+数字，甚至运算符

var b = \'字符串\', b1 = \'aaa\', b2 = \'111\', b3 = \'111字符串\', b4 = \'111+aaa+字符串\';

输出字符串变量

console.log(b);
console.log(b1);
console.log(b2);
console.log(b3);
console.log(b4);

附加知识点

如果变量命名一致，将只输出相同变量命最后一个的赋值；
变量命名只能是一个词，由字母、数字、下划线、$组成，但不能以数字开头；不能使用js函数名或关键词，例如alert；大小写是不同的变量命名，a和A不相同；

输出自定义字符串，而不是变量a

console.log(\'a\');

输出变量+字符串

console.log(a + \'a\');

输出运算结果

console.log(a + a1)

常见命名错误

var error1 = 2m;
以数字开头错误

var error2 = a#3;
使用非下划线的符号错误

优秀的命名方法

下划线：

first_name, last_name, master_card, inter_city.

驼峰式大小写：

FirstName, LastName, MasterCard, InterCity.

02 数据类型与转换

数据类型 – 简单类型

五种可包含值的数据类型：

数字（number）
例如：1、2.5、1000、-1、2e3
字符串（string）
例如：\’aaa\’、\’111\’、\’字符串\’、\’aaa字符串\’、\’1111+字符串\’
布尔（boolean）
例如：true、false
对象（object）
函数（function）

有三种对象类型：

对象（Object）
日期（Date）
数组（Array）

同时有两种不能包含值的数据类型：

undefined
例如：声明变量后没有赋值、或者没有此变量，会出现undefined
null
表示是“空”对象，当需要将对象、数组销毁或删除事件监听时，通常会将他们设置为null

数据类型检测 typeof

var a = 111, b = \'字符串\', c = true, d;

console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);

注意点：

NaN 的数据类型是数值

数组的数据类型是对象

日期的数据类型是对象

null 的数据类型是对象

未定义变量的数据类型是 undefined

尚未赋值的变量的数据类型也是 undefined
无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）。

数据类型转换

其他值→数字

Number(\’\’)

将字符串、布尔值、undefined、null转换为数字类型

var n = Number(\'123\');
console.log(n);
console.log(typeof n);

例：

Number(\'123\');  // 123
Number(\'123.4\');  //123.4
Number(\'2021年\');  // NaN
Number(\'2e3\');  // 2000
Number(\'\');  // 0

Number(\'true\');  // 1
Number(\'false\');  // 0

Number(\'undefined\');  // NaN
Number(\'null\');  // 0

parseInt(\’\’);

截取非数字字符的第一个数字，并将其转化成整数(不四舍五入)。

var pi = parseInt(\'3.14\');
console.log(pi);
console.log(typeof pi);

例子：

parseInt(\'3.14\');  // 3 只获取3
parseInt(\'3.99\');  // 3 只获取3，并且不四舍五入
parseInt(\'3.14圆周率\');  // 3 所有文字、小数都被截掉
parseInt(\'圆周率3.14\');  // NaN 如果字符串不是以数字开头，则转为NaN

parseFloat(\’\’);

截取所有数字字符

var pf = parseFloat(\'3.14\');
console.log(pf);
console.log(typeof pf);

例子：

parseFloat(\'3.14\');  // 3.14
parseFloat(\'3.99\');  // 3.99
parseFloat(\'3.14圆周率\');  // 3.14 所有文字都被截掉
parseFloat(\'圆周率3.14\');  // NaN 如果字符串不是以数字开头，则转为NaN

其他值→字符串

String();

把任意类型的数字、文字、变量或表达式转换为字符串

var s = String(123);
console.log(s)
console.log(typeof s)

例：

String(123);  // \'123\'
String(123.4);  // \'123.4\'
String(2e3);  // \'2000\'
String(NaN);  // \'NaN\'
String();  // \'\'

String(true);  // \'true\'
String(false);  // \'false\'

String(undefined);  // \'undefined\'
String(null);  // \'null\'

toString()

几乎所有值都有toString()方法，只是和String()用法不同，且无法转换null和undefined。

var a =1;
var b = 123;
String(a);  // \'1\'
typeOf(a);  // String
typeOf(b);  // Number
b.toString();  // \'123\'
typeOf(b);  //String;

其他值→布尔值

Boolean();

将其他值转化成true、flase类布尔值

var bl = Boolean(123);
console.log(bl)
console.log(typeof bl)

例子：

Boolean(123);  // true 0和NaN转为false，其他数值都转为true
Boolean(0);  // false
Boolean(NaN);  // false
Boolean(Infinity);  // true
Boolean(-1);  // true

Boolean(\'\');  // false 空字符串转为false，其他字符串转为true
Boolean(\'abc\');  // true
Boolean(\'false\');  // true

Boolean(undefined);  // false
Boolean(null);  // false

JavaScript 类型转换表

数据类型 – 复杂类型

复杂类型包含：数组、对象、函数

数组举例

[1,2,3]

对象举例

{ a : 1, b : 2}

函数举例

function (){
  
}

03 表达式与操作符

表达式的种类：算数表达式、关系表达式、逻辑表达式、赋值表达式、综合表达式

算术表达式：

+  // 加
-  // 减
*  // 乘
/  // 除
%  // 取余

注意点：
运算顺序和数学一致：先运算括号内的 → 乘除 → 加减
+号有“加法”、“连字符”两个用途，若加号两边操作的都是数字则为加法运算，否则为连字符

关系表达式：

>    // 大于
<    // 小于
=    // 等于
>=   // 大于等于
<=   // 小于等于
==   // 等于
!=   // 不等于
=== // 全等于
!== // 不全等于

例子：

/* 相等和全等 */
5 == \'5\';  // true
5 === \'5\'  // false

1 == true;  // true
1 === true;  // flase

/* 特殊值的相等关系 */
null == undefined;  // true
null == 0;  // false
NaN == NaN  // false

逻辑表达式：

!  // 非，表示不，也可称为置反运算，置反的运算结果一定是布尔值
&&  // 且，表示并且，也可称为与运算，口诀：都真才真
||  // 或，表示或者，也可称为或运算，口诀：有真就真

!非使用例子&示意：

!true  // false
!false  // true
!0  // true
!!true  // true

&&且使用例子&示意：

true && true  // true
true && false  // false
false && true  // false
false && false  // false

||或使用例子&示意：

true || true  // true
true || false  // true
false || true  // true
false || false  // false

逻辑运算的优先级顺序：\’!\’非 → \’&&\’且 → \’||\’或

赋值表达式：

=  // 赋值

/* 自增自减运算 */
++  // 自增 在原来的基础上+1
--  // 自减 在原来的基础上-1

/* 快捷赋值：在原基础上进一步进行运算 */
+=  // a += 5;  等同于 a = a + 5;
-=  // a -= 5;  等同于 a = a - 5;
*=  // a *= 5;  等同于 a = a * 5;
/=  // a /= 5;  等同于 a = a / 5;
%=  // a %= 5;  等同于 a = a % 5;

自增自减运算例子：

var a = 3;
a++;  // 等同于 a = a + 1;
console.log(a);  // 4

a++ ：存储新值，用旧值（上一个值）来计算，也就是输出旧值；
++a ：存储新值，用新值（当前的值）来计算，也就是输出新值；
详细解答：https://blog.csdn.net/Lazy_Life/article/details/81214249

快捷赋值例子：

var a = 3;
a += 5;  // 等同于 a = a + 5;
console.log(a);  // 8

综合表达式：

运算顺序：非运算 → 数学运算 → 关系运算 → 逻辑运算

未完哟～还有很多笔记在下方目录里，有需要的童鞋请移步下方链接。