Java教程

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

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

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

01 JS语法与变量

认识输出语句

image

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;

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

image

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

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;
使用非下划线的符号错误

image

优秀的命名方法

下划线:

first_name, last_name, master_card, inter_city.

驼峰式大小写:

FirstName, LastName, MasterCard, InterCity.

image

02 数据类型与转换

image

数据类型 - 简单类型

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

  • 数字(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 对象是否是数组(或日期)。

image

数据类型转换

其他值→数字

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 类型转换表

image

数据类型 - 复杂类型

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

数组举例

[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
image

三元运算
image

for语句的用法
image

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