JS基础[二]

1. 运算符

1. 赋值运算符

1. 对变量进行赋值。

2. 左边必须是数据容器，也就是变量。

3. 普通赋值运算符 = 。

4. 其它赋值运算符：+=、-=、*=、/=。

5. 举例：num = num + 1 等价于 num += 1。

let num = 1;
// num = num + 1; // 普通赋值
// console.log(num); // 输出：2
num += 1;
console.log(num); // 输出：2
num = 5;
num *= 2;
console.log(num); // 输出：10

2. 一元运算符

1. 只有一个操作数为一元运算符

2. 例如：自增运算符++，自减运算符--，正号+，负号-、逻辑非!

3. ++i和i++的区别：单独使用没有区别，但参与运算时，++i的i先自增再运算，i++先运算i再自增。

let j = 1;
console.log(++j); // 输出：2
console.log(j++); // 输出：2
let i = 1;
console.log(++i + 1, 'i=' + i); // 输出：3 "i=2"
i = 1;
console.log(i++ + 1, 'i=' + i); // 输出：2 "i=2"
i = 1;
console.log(i++ + ++i +i); // 输出：7

3. 二元运算符

1. 有两个操作数为二元运算符

2. 例如：加+、减-、乘*、除/、和&&、或||

4. 三元运算符

1. 有三个操作数为三元运算符

2. 是用于判断的运算符,固定写法：变量 = 判断句 ? 判断为真的变量值 : 判断为假的变量值

let num = 1;
// 一元运算符
num = num++; // num = 2
// 二元运算符
num = 1 + 2; // num = 3
// 三元运算符
num = num > 0 ? 1 : 0; // num大于0则num = 1;num小于0则num = 0

5. 比较运算符

1. >大于、<小于、<=小于等于、>=大于等于、==值是否相等、!=值不相等、===值和类型都相等、!==值或类型不相等。

2. 比较运算符用于判断，结果为boolean布尔值。

3. 注意：=赋值号，==和===是判断符号。

4. 字符串比较，比较的是字符对应的ASCII字符代码，字符位数较多时，按位比较，如ab与cd比较，a与c比，b与d比，以此类推。

图片来自百度百科https://baike.baidu.com/item/ASCII/309296?fr=aladdin

6. 小数比较涉及精度问题，暂不详述。

console.log(1 > 2); // 输出：false
console.log(1 < 2); // 输出：true
console.log(1 >= 2); // 输出：false
console.log(1 <= 1); // 输出：true
console.log(1 == '1'); // 输出：true
console.log(1 != '1'); // 输出：false
console.log(1 === '1'); // 输出：false
console.log(1 !== '1'); // 输出：true
console.log(undefined == null); // 输出：true
console.log(undefined === null); // 输出：false
console.log(NaN == NaN); // 输出：false
console.log(NaN === NaN); // 输出：false
console.log('a' > 'b'); // 输出：false
console.log('aa' > 'ab'); // 输出：false
console.log('aa' > 'abc'); // 输出：false

6. 逻辑运算符

1. &&与，一假则假。

2. ||或，一真则真。

3. !非,真变假，假变真。

console.log(true && false); // 输出：false
console.log(false && false); // 输出：false
console.log(true && true); // 输出：true
console.log(true || false); // 输出：true
console.log(false || false); // 输出：false
console.log(true || true); // 输出：true
console.log(!false); // 输出：true
console.log(!true); // 输出：false
console.log(1 > 2 && 3>2) // false true 输出：false
console.log(1 > 2 || 3>2) // false true 输出：true

7. 运算符的优先级

1. 小括号()

2. 一元运算符：++、--、!，逻辑非!优先级很高

3. 算术运算符：先乘*、除/、余%，后加+、减-

4. 关系运算符：>、>=、<、<=

5. 相等运算符：==、!=、===、!==

6. 逻辑运算符：优先!,其次&&，后||

7. 赋值运算符：=

8. 逗号运算符：，

2. 表达式、语句

1. 表达式：是可以被求值的代码，因为可以被求值，所以是可以写在赋值号的右侧的，表达式如：3+2。

2. 语句：不一定有值，比如：prompt有值，可以写在赋值号右侧；比如：console.log('1')没有值，不能用于赋值，不可以写在赋值号右侧。

3. 流程控制语句三大结构：顺序结构、分支结构、循环结构

1. 顺序结构：代码从上往下一行一行依次执行。

2. 分支结构：按照条件选择性执行。

3. 循环结构：一段代码重复执行。

4. 分支语句if、三元运算符、switch

1. if语句：单分支、双分支、多分支（判断小括号内的内容，返回布尔类型true执行大括号代码块，否则不执行）

1. 单分支：if (判断条件) { 满足条件执行的代码 }

2. 双分支：if (判断条件) { 满足条件执行的代码 } else { 不满足条件执行的代码 }

3. 多分支：

if (判断条件1) { 满足条件执行的代码 }
else if (判断条件2){ 不满足条件1但满足条件2执行的代码 }
else if (判断条件3){ 不满足条件1不满足条件2但满足条件3执行的代码 }
......
else { 不满足条件1也不满足条件2也不满足条件3执行的代码 }

4. 注意：多分支语句else if可以有多个，判断顺序从上到下依次判断，最后的else也可以不写。

5. 小括号内的判断条件结果为true时，执行大括号内代码。

6. 小括号内的结果不是布尔类型时，会发生隐式转换为布尔型。

7. 数字类型只有0的判断结果为假，其它为真。

8. 字符串类型只有空字符串判断结果为假，其他为真。

// 单分支
if (a < b) {
    console.log('此时a<b');
}
// 双分支
if (a < b) {
    console.log('此时a<b');
} else {
    console.log('此时a>b');
}
// 多分支
if (a < b) {
    console.log('此时a<b');
} else if (a < c) {
    console.log('此时a<c');
} else if (a < d) {
    console.log('此时a<d');
} else {
    console.log('此时a>b或a>c或a>d');
}

2. 三元运算符

1. 条件 ? 满足条件执行 : 不满足条件执行。

2. 类似于if判断。用于简单的判断，写法较为简单，相当于if语句的简写，也可以用于取值。

a = 3 < 2 ? '小于' : '大于';
console.log(a);  // 输出：大于

3. switch语句

switch(数据) {
    case 值1:
        代码1;
        break;
    case 值2:
        代码2;
        break;
......
    default:
        代码n;
        break;
}

let a = 1;
switch(a){
    case 1:
        console.log("数字类型1");
        break;
    case 2:
        console.log("数字类型2");
        break;
    case '1':
        console.log("字符串类型1");
        break;
    default:
        console.log("无符合");
        break;
} // 输出：数字类型1

// 错误示范
switch(a){
    case 1:
        console.log("数字类型1");
    case 2:
        console.log("数字类型2");
    default:
        console.log("无符合");
} // 输出：数字类型1 数字类型2 无符合
a = 2;
switch(a){
    case 1:
        console.log("数字类型1");
    case 2:
        console.log("数字类型2");
    default:
        console.log("无符合");
} // 输出：数字类型2 无符合

1. 找到与小括号内的数据全等===的case值，执行对应case的代码。

2. 若没找到全等值，则执行default内的代码。

3. break：用于退出switch语句，不使用break会造成case穿透，也就是从第一个匹配的case开始执行到最后一个case或default，导致多个case内的代码同时执行。

4. if和switch的区别

1. switch通常处理的是数值较为固定的情况，if通常处理数值不固定或数值为区间的情况。

2. switch是判断匹配后直接执行，if是在一个区间内每个值判断一遍。

3. switch判断条件是全等===，且不加break会造成代码穿透。

4. 需要判断的分支较多时使用switch，需要判断的分支较少时适用于if。

5. 循环语句while、for、退出循环

1. 循环语句三要素：变量起始值、终止条件(没有终止条件程序会一直执行，变成死循环)、变量变化量（如：自增、自减）。

2. while循环

1. 在满足条件期间，一直循环执行。

while (循环条件) {
    要重复执行的代码(循环体)
}

let a = 0;
while (a<3) {
    console.log(a);
    a++;
} // 输出：0 1 2
// 计算1-100之间所有偶数和
let num = 1;
let sum = 0;
while (num<101){
    if(num % 2 === 0) {
        sum = sum + num;
    }
    num++;
}
console.log(sum) // 输出：2550

2. 退出循环

1. break结束循环，不再继续执行循环。

2. continue结束本次循环，继续下次循环，注意：continue执行后，本次循环的循环体内continue后面的代码也不会执行，所以要继续循环，要将变化量写在continue前面。

3. while(true){} 死循环。

// break
let num = 1;
while (num < 5){
    if(num === 3) {
        break;
    }
    console.log(`第${num}回打印`)
    num++;
} // 输出：第1回打印 第2回打印

// 变化量写在循环体内continue的后面时，执行continue后，continue以后的代码不会执行
num = 1;
while (num < 5){
    if(num === 3) {
        continue;
    }
    console.log(`第${num}回打印`)
    num++;
} // 输出：第1回打印 第2回打印

// 变化量写在循环体内continue的前面
num = 1;
while (num < 5){
    if(num === 3) {
        num++;
        continue;
    }
    console.log(`第${num}回打印`)
    num++;
} // 输出：第1回打印 第2回打印 第4回打印

3. for循环

1. 重复执行一段代码。

2. 语法：for(变量起始值; 终止条件; 变量变化量){ 循环体 }

3. 遍历数组：从数组第一位一直循环到最后一位。

4. 退出循环：

1. continue：退出本次循环，继续执行下次循环。

2. break：退出整个for循环，不再循环。

5. for( ; ; ){} 死循环。

for(let i = 1; i < 3; i++){
    console.log(i);
} // 输出：1 2

// 遍历数组
let array = ['赵','钱','孙','李','周'];
for(let j = 0; j < array.length; j++){
    console.log(array[j]);
} // 输出：赵 钱 孙 李 周

for(let j = 0; j < array.length; j++){
    if(j===1) {
        break;
    }
    console.log(array[j]);
} // 输出：赵

for(let j = 0; j < array.length; j++){
    if(j===1) {
        break;
    }
    console.log(array[j]);
} // 输出：赵 孙 李 周

4. for循环和while循环的区别

1. for循环中，for( ; a<b ; ){} 中的a<b是一个明确循环次数的条件。

2. while中没有明确循环次数的条件。

5. 循环嵌套

for(外部循环变量; 循环条件; 变化量) {
    for(内部循环变量; 循环条件; 变化量) {
        循环体
    }
}

// 嵌套循环实现九九乘法表
for(let i=1; i<10; i++) {
    let a = '';
    for(let j=1; j<10; j++) {
        if(j<i){
            continue;
        }
        a += `${i}*${j}=${i*j}\0`;
    }
console.log(a);
}
// 输出：
1*1=1  1*2=2  1*3=3  1*4=4  1*5=5  1*6=6  1*7=7  1*8=8  1*9=9
2*2=4  2*3=6  2*4=8  2*5=10 2*6=12 2*7=14 2*8=16 2*9=18
3*3=9  3*4=12 3*5=15 3*6=18 3*7=21 3*8=24 3*9=27
4*4=16 4*5=20 4*6=24 4*7=28 4*8=32 4*9=36
5*5=25 5*6=30 5*7=35 5*8=40 5*9=45
6*6=36 6*7=42 6*8=48 6*9=54
7*7=49 7*8=56 7*9=63
8*8=64 8*9=72
9*9=81

// 这样也行
for(let i=1; i<10; i++) {
    let a = '';
    for(let j=1; j<=i; j++) {
        a += `${j}*${i}=${i*j}\0`;
    }
console.log(a);
}
// 输出：
1*1=1
1*2=2  2*2=4
1*3=3  2*3=6  3*3=9
1*4=4  2*4=8  3*4=12 4*4=16
1*5=5  2*5=10 3*5=15 4*5=20 5*5=25
1*6=6  2*6=12 3*6=18 4*6=24 5*6=30 6*6=36
1*7=7  2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49
1*8=8  2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64
1*9=9  2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81

仅作为个人学习用，如有错误，还请指正。