javaScript基础总结(二)
前言
pink的文档
JS运算符
运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript常用的运算符有:
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
算数运算符
+
-
*
/
%
浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
var result =0.1+0.2; //结果不是0.3,而是: 0.30000000000000004
console.log(0.07 * 100); //结果不是7, 而是: 7.000000000000001Copy to clipboardErrorCopied
注意:
- JS 中不要直接用浮点数之间进行运算,会产生精度误差。
- 不要直接拿两个浮点数进行比较!
表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合 简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们成为返回值
递增递减运算符
递增和递减运算符概述
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(-- )运算符来完成。 在JavaScript 中,递增(++)和递减(-- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,
我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。
- 后置递增运算符
i++
- 前置递增运算符
++i
- 后置递减运算符
i--
- 前置递减运算符
--i
前置递增和后置递增小结
- 前置递增和后置递增运算符可以简化代码的编写,让变量的值+ 1 比以前写法更简单
- 单独使用时,运行结果相同
- 与其他代码联用时,执行结果会不同
- 后置:先原值运算,后自加(先人后己)
- 前置:先自加,后运算(先已后人)
- 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者num–;
比较运算符
概述
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值 (true / false)作为比较运算的结果。
比较运算符 | 说明 |
---|---|
< | 小于 |
> | 大于 |
>= | 大于或等于 |
<= | 小于或等于 |
== | 判等于 |
!= | 判不等 |
=== | 全等于。要求值和数据类型均一致,则返回 true |
!== | 全不等于。要求值和数据类型至少一个不一致,则返回 true |
关于和=
区别
需要注意的是 ==
和 ===
的区别。
==
比较的时候只判断值,因为会进行隐式转换。值相等则返回true
===
比较判断的时同时需要值相等和类型相同,两者均满足则返回true
规律
结合以下例子体会。
''
、0
、false
之间(或'1'
、1
、true
之间)进行==
比较的结果为true
NaN
与其他任何数据类型之间==
比较结果为false
null
只有在和自身以及undefined
之间==
比较时结果为true
undefined
只有在和自身以及null
之间==
比较时结果为true
- 数字和数字字符串的值相等,则
==
比较的结果为true
- 以上这些例子在全等比较
===
下的结果均为false
console.log('18' == 18); // true
console.log('' == false); // truw
console.log('' == 0); // truw
console.log(0 == false); // true
console.log('1' == 1 == true); // true
console.log('NaN与其他值比较:');
console.log(NaN == 0); // false
console.log(NaN == ''); // false
console.log(NaN == NaN); // false
console.log(NaN == null); // false
console.log(NaN == false); // false
console.log(NaN == undefined); // false
console.log('null与其他值:');
console.log(null == null); // true
console.log(null == undefined); // true
console.log(null == 0); // false
console.log(null == ''); // false
console.log(null == NaN); // false
console.log(null == false); // false
console.log('undefined与其他值比较:');
console.log(undefined == null); // true
console.log(undefined == undefined); // true
console.log(undefined == 0); // false
console.log(undefined == ''); // false
console.log(undefined == NaN); // false
console.log(undefined == false); // false
逻辑运算符
概述
- 逻辑与
&&
- 逻辑或
||
- 逻辑非
!
逻辑中断
逻辑与 &&
原理:多个表达式进行逻辑运算,当左边的表达式值可以确定最终结果时,不再继续运算右边其余的表达式。
- 语法:
expr1 && expr2 && ...
- 若
expr1
为真,则返回expr2
- 若
expr1
为假,则返回expr1
console.log(123 && 456); // 456
console.log(false && 123); // false
console.log(1 && 2 && 3); // 3
console.log(1 && 1 && false && 2); // false
逻辑或 ||
- 语法:
expr1 || expr2 || ...
- 若
expr1
为假,则返回expr2
- 若
expr1
为真,则返回expr1
console.log(0 || 12); // 12
console.log(true || false || 2); // true
console.log(0 || false || true || -2); // true
赋值运算符
+=
-=
*=
/=
特殊运算符
单目运算符
单目运算符 +
作用于数字无效,结果不变。但是可以用来转化非数字类型为数字,等效于 Number()
。
let x = false;
let y = "";
let z = "123.4";
console.log(+x); // 0
console.log(+y); // 0
console.log(+z); // 123.4Copy to clipboardErrorCopied
用于非数字型之间的数学运算,很简洁:
let a = "12";
let b = "24";
console.log(+a + +b); // 36
逗号运算符
逗号运算符能让我们处理多个语句,使用 ,
将它们分开。每个语句都运行了,但是只有最后的语句的结果会被返回。
let a = (3 + 4, 5 + 6);
console.log(a); // 11
布尔运算符
两个相邻的非逻辑运算符组成的 !!
,可以将一个值转换为对应的布尔值。等效于 Boolean()
。
console.log(!!"0"); // true
console.log(!!0); // false
console.log(!!undefined); //false
console.log(!!"aaa"); // true
空值合并运算符
我们将值既不是 null
也不是 undefined
的表达式定义为已定义的值(defined)。即:??
。
a ?? b
结果为:
- 若
a
已定义,则结果为a
- 若
a
不是已定义的,则结果为b
等价于:
(a !== null && a !== undefined) ? a : b;
流程控制
- 顺序结构
- 选择分支结构
- 循环结构
顺序结构
选择结构
if-else
if-else if-else
switch-case
if-else
语法
if (condition)
statement1
[else
statement2]
if-else if-else
语法
if (condition1)
statement1
else if (condition2)
statement2
else if (condition3)
statement3
...
else
statementN
switch-case
语法
switch (expression) {
case value1:
//Statements executed when the
//result of expression matches value1
[break;]
case value2:
//Statements executed when the
//result of expression matches value2
[break;]
...
case valueN:
//Statements executed when the
//result of expression matches valueN
[break;]
[default:
//Statements executed when none of
//the values match the value of the expression
[break;]]
}
循环
概述
for
while
do...while
label
for...in
for...of
for循环
语法
for ([initExpr]; [condExpr]; [incExpr])
statement
- initExpr: 变量初始化
- condExpr: 循环条件
- incExpr:增量表达式
例子
for (let step = 0; step < 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
while循环
语法
while (condition)
statement
例子
let n = 0;
let x = 0;
while (n < 3) {
n++;
x += n;
}
do…while
语法
do
statement
while (condition);Copy to clipboardErrorCopied
例子
let n = 5
do {
console.log('hello');
} while (--n)
label
语法:
label:
statement
label
: 任何不属于保留关键字的 JavaScript 标识符。statement
: JS 语句。
说明:
可使用一个标签来唯一标记一个循环,然后使用 break 或 continue 语句来指示程序是否中断循环或继续执行。
需要注意的是,JavaScript 没有 goto 语句,标记只能和 break 或 continue 一起使用。
在严格模式中,你不能使用 “let” 作为标签名称。它会抛出一个 SyntaxError(因为 let 是一个保留的标识符)。
例子:
var str = ''
aLoop:
for (let i = 0; i < 5; i++) {
if (i == 2) {
continue aLoop;
}
str += i;
}
console.log(str); // 0134
break与continue
break
:跳出当前循环,不再进行当前循环。continue
:跳过本轮循环,进行当前循环的下一轮。break
与continue
均可配合label
语句使用来跳转循环。
for…in
语法:
for (variable in object) {
//statements
}
说明:
for...in
语句用于对数组或者对象的属性进行循环操作。for ... in
循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
var arr = new Array(1,2,3,4,5);
for (let i in arr) {
console.log(i+'.');
}
for…of
语法:
for (variable of iterable) {
//statements
}
例子:
let iterable = [10, 20, 30];
for (let value of iterable) {
value += 1;
console.log(value);
}
chrom代码调试
- 断点调试:断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
- 断点调试可以帮我们观察程序的运行过程
- 浏览器中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
- Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
- F11: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
- 代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,
- 知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
- 今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。