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>
posted @ 2017-12-14 15:02  执着的程序员~  阅读(988)  评论(0)  编辑  收藏  举报