JS 中的 操作符、分支循环语句、三元表达式、严格模式

一、注意细节

1. JS区分大小写
2. JS中字符串可以用单引号，也可以用双引号,效果相同
3. 每一行代码结束后要加分号

二、玩转script标签

• script 标签属性

  • 属性 src = "" 具有跨域请求能力 ，等同于image的src属性，可指向 外部域（当前html所在域之外的某个域）的url
  • 属性 type = "text/javascript" 默认属性，可忽略
  • 属性 defer = "defer" 脚本被立即下载，但被延迟到整个页面全部解析完成 再解析、执行这个脚本（按照defer的顺序：解析、执行）。仅适用于引入外部 js 文件。值可以忽略defer
  • 属性 async = "async" 异步执行脚本，被立即下载、解析、执行（并行进行，没有先后顺序）。仅适用于引入外部 js 文件。值可以忽略 async
  • 属性defer 和 async的区别：在于脚本加载完成之后何时执行？defer：加载完最后执行；async：加载完立刻执行

• script 标签 位置

  • 一般把script标签放在 body标签中的最后，先记载页面内容，在加载执行脚本
  • 避开把script放到header标签中，这样会导致加载 js 时，页面空白

• js 代码最好作为外部资源文件引入：模块化便于代码维护、浏览器缓存

三、基本概念

1. 注释

• 单行注释: //
• 多行注释: /**/

2. 严格模式 --- ES5中新增的运行模式 严格模式详解

• 用法：
  • 整个JS文件的第一行 "use strict";
  • 一个函数体内第一行 "use strict";
  • 不在第一行声明严格模式，则不生效
• 严格模式的主要目的：
  • 减少JS的不规范行为
  • 消除代码运行的不安全之处，安全性提高
  • 提高编译效率
  • 为更新版本的JS做铺垫，平滑过渡

3. 标识符：变量、函数、参数、属性的名字

• 标识符第一个字符：字母、下划线、美元$

4. 操作符 / 运算符：一组操作数据值的符号

• 一元操作符：

  • 递增操作符：age++、++age本身的值总是加，被赋值遵循先加就加、后加不加；递减操作符等同
  • 一元加号操作符：表正数；一元减号操作符：表负数

• 布尔操作符

  • 逻辑非 !
  • 逻辑与 && 判断：先转为布尔值，遇到true就继续，遇到false，就停止并返回这个值；若一直是true则返回最后一个值
  • 逻辑或 || 判断：先转为布尔值，遇到false就继续，遇到true，就停止并返回这个值；若一直是false则返回最后一个值
  • 注意：逻辑与、逻辑非 不是返回布尔值，是返回当前值；在 if 判断中是被转为布尔值做的判断

• 乘性操作符

  • 操作值不是数值，则默认调用 Number() 转为数值
  • 乘法：特殊情况（Infinity * 0 值为NaN；Infinity * Infinity 值是 Infinity）
  • 除法：特殊情况（0 / 0 值是 NaN；Infinity / Infinity 值是 NaN）
  • 取余：特殊情况（Infinity % 2 值为 NaN；有限大的值 % 0 值为 NaN；Infinity % Infinity 值是 NaN）

• 加性操作符 ---> 重点：涉及到字符串拼接

  • 加法：遇到非数值情况，是字符串拼接，复杂数据类型调用toString()方法转换；特殊情况（Infinity + -Infinity 值为NaN；只要有一个操作值为字符串，值为字符串拼接）
  • 减法：遇到非数值情况，先转成数值，再做减法，复杂数据类型调用valueOf()方法转换；特殊情况（Infinity - Infinity 值为NaN；-Infinity - -Infinity 值为NaN；）

• 关系操作符

  • > 、 >= 、 < 、 <=
  • 遵循：如果有一个值是数值，则都转为数值作比较；如果两个值都是字符串，则比较两个字符串对应的编码值

• 相等操作符

  • == 、!= 、 === 、 !==

  • == !=：会发生隐式类型转化； （先隐士转化，再比较值）

    • 特殊情况（null == undefined 值为 true； null == 0 值为false； undefined == 0 值为 false； 如果一个值是字符串，一个是数值，则将字符串转为数值再比较） ； 比较 == 之前，null、undefined不能转为任意值

  • === !==：不会发生隐式类型转化；（先比较类型 再比较值）

• 赋值操作符：

  • = /= %= += -=

i -= 2; // 每次递减2
i += 1; // 每次递增1

四、 三元表达式

• 三元表达式一般用于给变量赋值

判断条件 ? 结果1 : 结果2;

五、JS 语句

1. if 条件判断语句

• 判断条件会被默认调用 Boolean()方法

<script>
    if () {
    
    } else if () {
    
    } else {
    
    }
</script>

2. while 循环语句

• 先判断临界条件，再循环

<script>
    var i = 10;
    while (i > 0) {
        i--;
        console.log(i);
    }
</script>

3. do-while 循环语句

• 先循环一次，在判断临界条件

<script>
    var i = 10;
    do {
        console.log(i);
        i -= 2;
    } while (i > 0);
</script>

4. for 循环语句

• for () 中：声明并初始化变量；设置变量临界值；定义变量变化趋势

<script>
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
</script>

5. for-in 循环语句：遍历 数组 或 对象 的属性

• 直接取key值，value值需要间接取值

<script>
    var obj = {
        name: 'zhangxin',
        age: 22
    };

    for (key in obj) {
        console.log(key);
        console.log(obj[key]);
    }
</script>

6. switch 条件语句

• 变量可以使任意数据类型；在其他语言中变量只能是数值
• 当 case中的变量值，等于 switch 中定义变量时，执行 case中的代码块

<script>
    switch (变量) {
        case 可能的变量值: 当执行逻辑的代码块;

            break;
        default: 执行逻辑的代码块;
    }
</script>

• 变量也可以是：表达式

<script>
    switch (true) {
        case num < 0: 执行逻辑的代码块;

            break;
        case num > 0: 执行逻辑的代码块;

            break;
        default: 执行逻辑的代码块;
    }
</script>

7. break 结束当前循环

break;

8. continue 结束本次循环

continue;

<script>
    for (var i = 0; i < 10; i++) {
        if(i === 5) {
            continue;
        }
        console.log(i);
    }
</script>

9. with 语句 ---> 将代码块的作用域设定到一个对象中（严格模式下 不允许使用width语句）

// 普通语句
var hostName = location.hostname;
var url = location.href;


// 使用with语句
with(location) {
    var hostName = hostname;
    var url = href;
}

六、逻辑中断 与 赋值

逻辑中断：逻辑或 ||； 由第一个对的值决定；两个值都不对，则返回最后一个错的值

逻辑中断：逻辑与 &&； 由第一个错的值决定；两个值都对，则返回最后一个对的值

赋值等于 = ：等号右边的值决定

连续赋值 = = = ：最右边等号 右边的值决定

<script>
    console.log(window.jquery = window.$ = 'jquery');  // jquery
</script>