JavaScript 基础语法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mr_hermit/article/details/80317378

1. JavaScript 简介

  • JavaScript 历史演变

    • 始于1995年,前身为LiveScript,由网景公司 布兰登.艾奇 开发,主要处理 以前由服务端负责的 数据验证

    • 1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织 ECMA,希望这种语言能够成为国际标准。

    • 1997年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

    • 后更名为JavaScript, 功能演变为:前后端数据交互、页面特效、服务端开发(nodeJS)

  • 版本:

  • JavaScript 特点

    • 脚本语言:不用编译,一遍解析一遍执行

    • 解析型语言:遇到一行代码就解析一行代码

    • 弱类型语言:声明变量都用var,不受数据类型的约束

    • 动态类型的语言:对象没有属性,只需要通过 . 的方式进行添加就有了

2. JavaScript 构成

  • JavaScript 构成 (运行在浏览器环境下)

    • DOM:文档对象模型(提供访问、操作页面内容的API)

    • BOM:浏览器对象模型(提供与浏览器交互的API)

    • ECMAScript 是JS语法标准(核心)

3. 标识符

  • 概念: 标识符就是指 变量、函数、参数、属性的名字

  • 要求:

    • 第一个字符必须是 字母、_$

    • 其他字符可以是 字母、_$、数字

4. 区分大小写

  • ECMAScript 中的一切都是区分大小写的

5. 注释

  • 多行注释: /**/

  • 单行数值: //

  • 补充:

    • html 中的注释:<!-- -->

    • css 中的注释:/**/

6. 常见的操作符

  • 概念: JavaScript操作符 又名 运算符,是 JavaScript 中用于操作变量的一组符号

  • (1) 一元 操作符

    • 正/负:用在数值前面 + 表示正数;- 表示负数

    • 递增 / 递减:用在数值上

      • 前加 / 减:++age --ageage 值本身会 +1 / -1;被 age 赋值的变量值 +1 / -1;

      • 后加 / 减:age++ age--age 值本身会 +1 / -1;被 age 赋值的变量值 不变

  • (2) 乘性 操作符

    • 规则: 如果操作值不是数值,则默认调用 Number() 转为数值

    • 乘法:*,乘法运算

    • 除法:/,除法运算

    • 取余:%,取余运算,返回余数

    // 乘法
    Infinity * 0 === NaN;                   // true
    Infinity * Infinity === Infinity;       // true
    
    
    // 除法
    0 / 0 === NaN;                          // true
    Infinity / Infinity === NaN;            // true
    
    // 取余
    
    Infinity % 2 === NaN;                   // true
    Infinity % 0 === NaN;                   // true
    Infinity % Infinity === NaN;            // true
  • (3) 加性 操作符

    • 加法:+

      • 数值类型:加法运算

      • 字符串类型: 字符串拼接

      • 复杂数据类型:先自动调用 toString() 方法,再运算

    • 减法:-

      • 数值类型:减法运算

      • 非数值类型:先自动调用 valueOf() 方法,再运算

    Infinity + -Infinity === NaN;           // true
    Infinity - Infinity === NaN;            // true
    -Infinity - -Infinity === NaN;          // true
  • (4) 赋值操作符

    • 直接赋值:=;连续赋值,最终值为最后一个

    • 加赋值:+=

    • 减赋值:-=

    • 乘赋值:*=

    • 除赋值:/=

    • 取余赋值:%=

    var a = 10;
    a += 10;        // a 为20
    
    var b = 10;
    b -= 10;        // b 为0
    
    var c = 20;
    c *= 20         // c 为400
    
    var d = 200;
    d /= 10;        // d 为20
    
    var e = 120;
    e %= 25;        // e 为20
    console.log(window.jquery = window.$ = 'jquery');  // jquery
  • (5) 相等操作符

    • 用于判断变量是否相等,返回 布尔值类型

    • 弱相等:==

    • 弱不等:!=

    • 强相等: ===

    • 强不等:!==

    • 规则:

      • == !=:会使变量发生隐式类型转化,再比较值是否相等;规则 先比较值,再比较类型

      • === !==:严格比较值是否相等,不会发生隐式转换;规则 先比较类型,再比较值

      • 最佳实践:比较两个值是否相等是,尽量减少使用 == !=,隐式转换导致比较的值不准确

    null == undefined;          // true
    null === undefined;         // false
    null == 0;                  // false
    undefined == 0;             // false
    NaN === NaN;                // false
    
    // null、undefined 不能转成任意值
  • (6) 关系操作符

    • 大于:>

    • 大于等于:>=

    • 小于:<

    • 小于等于:<=

    • 比较规则:

      • 如果有一个值是数值,则都转为数值作比较

      • 如果两个值都是字符串,则 比较两个 字符串对应的编码值

7. 三元表达式

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

  • 使用: 判断条件 ? 结果1 : 结果2;

8. 逻辑中断

  • 场景: 用于 if 判断;给变量赋值(很少)

  • 规则: 判断的值,先自动将值转为布尔值进行判断;返回值 还是原来的值

  • 逻辑与: &&

    • 规则:遇到true就继续,遇到false,就停止并返回这个值;若一直是true则返回最后一个值
  • 逻辑或: ||

    • 规则:遇到false就继续,遇到true,就停止并返回这个值;若一直是false则返回最后一个值
  • 逻辑非: !,取反

9. 常用语句

  • (1) if-else 条件判断语句

    • 判断条件会被默认调用 Boolean()方法
    if () {
    
    } else if () {
    
    } else {
    
    }
  • (2) while 循环语句

    • 先判断临界条件,再循环
    var i = 10;
    while (i > 0) {
        i--;
        console.log(i);
    }
  • (3) do-while 循环语句

    • 先循环一次,在判断临界条件
    var i = 10;
    do {
        console.log(i);
        i -= 2;
    } while (i > 0);
  • (4) for 循环语句

    • for () 中:声明并初始化变量;设置变量临界值;定义变量变化趋势
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
  • (5) for-in 循环语句

    • 常用于:遍历 数组、对象

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

    var obj = {
        name: 'zhangxin',
        age: 22
    };
    
    for (key in obj) {
        console.log(key);
        console.log(obj[key]);
    }
  • (6) switch 条件语句

    • 变量可以使任意数据类型;在其他语言中变量只能是数值

    • case中的变量值,等于 switch 中定义变量时,执行 case中的代码块

    switch (变量) {
        case 可能的变量值: 当执行逻辑的代码块;
    
            break;
        default: 执行逻辑的代码块;
    }
    switch (true) {
        case num < 0: 执行逻辑的代码块;
    
            break;
        case num > 0: 执行逻辑的代码块;
    
            break;
        default: 执行逻辑的代码块;
    }
  • (7) break 结束当前循环

    for (var i = 0; i < 10; i++) {
        if(i === 5) {
            break;
        }
        console.log(i);     // 输出 0~4
    }
  • (8) continue 结束本次循环

    for (var i = 0; i < 10; i++) {
        if(i === 5) {
            continue;
        }
        console.log(i);     // 输出 0~9,不含5
    }

10. 严格模式

  • ES5 中提出: 严格模式,这种模式使得Javascript在更严格的条件下运行

  • 目的 / 为什么会有 严格模式的出现?

    • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为

    • 消除代码运行的一些不安全之处,保证代码运行的安全

    • 提高编译器效率,增加运行速度

    • 为未来新版本的Javascript做好铺垫

  • 开启严格模式

    • 语句: "use strict"

    • 限制:JS 文件 或者 代码块的 第一行、函数内第一行;否则不能开启严格模式

    • 改善:由于 JS 文件合并,可能会导致:"use strict" 不在JS 脚本第一行的位置了;所以将每一个单独的 JS 脚本 卸载自执行函数中,函数第一行 开启严格模式

  • 扩展: ES6 的模块自动采用严格模式,不管你有没有在模块头部加上 "use strict"

  • 严格模式 与 正常模式 的 语法不同:

    • 顶层的 this 指向 undefined,而不是 window

    • 严格模式下:变量 必须用 var 显式声明;否则会报错 v = 1; // 报错,v未声明

    • 创设eval作用域:正常模式下,全局作用域和函数作用域;严格模式下,创设了第三种作用域:eval作用域

    • 严格模式下:对一个只读的对象属性 赋值,会显示报错;正常模式下,只是赋值不成功不会报错

    • 严格模式下:不能使用 arguments.calleearguments.caller

    // 严格模式下:创设eval作用域
    
    "use strict";
    
    var x = 2;
    console.info(eval("var x = 5; x")); // 5
    console.info(x); // 2
  • 参考:JS 严格模式详解

11. 在 HTML 中使用 JavaScript

  • (1) 在 HTML 中使用 JavaScript,需要使用 <script> 标签内嵌 JS 或 引入 JS 文件

  • (2) JS 脚本 最好作为外部资源文件引入:模块化便于代码维护、浏览器缓存

  • (3) script 标签属性

    • 属性 src:文件路径

      • 该属性 用于加载外部脚本时,引入路径;具有跨域请求能力,等同于 <img>src 属性
    • 属性 type:表示 JS 脚本的内容类型

      • 默认值:type = "text/javascript",可忽略不写
    • 属性 defer异步加载,延后执行脚本

      • 属性简写:defer

      • 告诉浏览器加载外部脚本,但延迟到 整个页面完全被解析显示后,再执行

      • 延迟脚本 总是按照他们的顺序 执行

    • 属性 async异步加载,马上异步执行 不影响其他资源的下载

      • 属性简写:async

      • 告诉浏览器加载外部脚本,加载后立即异步执行

      • 异步脚本 不能保证按照他们在页面中出现的顺序 执行

  • (4) script 标签 执行顺序、位置

    • script 标签内嵌 JS

      • 阻塞加载并执行: 浏览器解析到 script 标签,就加载解析执行 JS 脚本,执行完再 script 中的代码,再继续解析下面的标签

      • 位置:一般放在 body 标签中 最后面,</body> 标签的前面;避免了加载执行 JS 时,页面空白

    • script 引入外部脚本(不添加 defer async

      • 阻塞加载并执行: 浏览器解析到 script 同步加载,执行 JS 脚本,执行完再继续解析下面的标签

      • 位置:一般放在 body 标签中 最后面,</body> 标签的前面;避免了加载执行 JS 时,页面空白

    • script 引入外部脚本(不添加 defer

      • 异步加载 延后按顺序执行: 浏览器解析到 script 马上异步加载 JS 脚本,不影响下面文档的渲染;等整个页面被完全渲染显示后,再 按顺序执行 JS 脚本

      • 位置:一般放在 header 标签中

    • script 引入外部脚本(不添加 async

      • 异步加载 并立即执行: 浏览器解析到 script 马上异步加载 JS 脚本,不影响下面文档的渲染;解析完立即执行,执行顺序不受位置影响

      • 位置:一般放在 header 标签中,且不依赖其他 JS 脚本 【页面优化 之一】

  • script 标签位置

    • 首先明确: <script scr=""> </script> 方式引入 JS 脚本,会中断 线程解析HTML;即 先下载 JS 脚本、解析、执行,再继续 渲染HTML

    • <script> 标签在 <head> 中:

      • 场景: 一些页面的效果的实现,是需要预先动态的加载一些js脚本,但不需要访问 DOM

      • 解决 JS脚本 中断线程方案: <script> 标签引入 deferasync 属性;这两个属性的优点不是增加JS的并发下载数量,而是做到下载时不中断 解析HTML

      • 最佳实践: 必须放在 <head> 中的多个 JS脚本;若没有先后执行顺序,<script> 加上 async 属性;若有先后执行顺序,<script> 加上 defer 属性

    • <script> 标签在 <body> 的最后:

      • 场景: 大多数 JS脚本 均放在 <body> 的最后

      • 优点: 加快了页面的加载速度(浏览器 先加载页面 渲染DOM,后加载执行 JS脚本)

阅读更多

没有更多推荐了,返回首页