慕课网前端工程师JavaScript学习笔记

本文主要是介绍慕课网前端工程师JavaScript学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

附加学习：
https://www.w3school.com.cn/js/index.asp

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

更多关于数据类型转换的文章：

https://www.w3school.com.cn/js/js_type_conversion.asp

JavaScript 类型转换表

数据类型 - 复杂类型

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

数组举例

[1,2,3]

对象举例

{ a : 1, b : 2}

函数举例

function (){
  
}

表达式与操作符

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

算术表达式：

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

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

关系表达式：

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

例子：

/* 相等和全等 */
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

综合表达式：

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

switch

三元运算

for语句的用法

这篇关于慕课网前端工程师JavaScript学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！