JavaScript基础总结（二）

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

注意：

1. JS 中不要直接用浮点数之间进行运算，会产生精度误差。
2. 不要直接拿两个浮点数进行比较！

表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合 简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给我们，我们成为返回值

递增递减运算符

递增和递减运算符概述

如果需要反复给数字变量添加或减去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的能力。初学者不要觉得调试代码麻烦就不去调试，
• 知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
• 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。