• JS基础


    JS基础

    一、JS语言介绍

    1、概念

    • 浏览器脚本语言
    • 可以编写运行在浏览器上的代码程序
    • 属于解释性、弱语言类型编程语言

    2、组成

    • ES语法:ECMAScript、主要版本ES5和ES6
    • DOM:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。
    • BOM:浏览器对象模型(Browser Object Model),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;且由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

    二、三种存在位置

    1、行间式:存在于行间事件中

    <body id="body" onload="body.style.backgroundColor='#0ff'">
        
    </body>
    

    2、内联式:存在于页面script标签中

    <body id="body">
        <script type="text/javascript">
    		body.style.backgroundColor='#0ff'
    	</script>
    </body>
    

    3、外联式:存在于外部JS文件,通过script标签src属性链接

    index.js文件
    body.style.backgroundColor='#0ff'
    
    index.html文件
    <script src="./js/index.js"></script>
    

    三、解释性语言特性决定JS代码位置

    • 出现在head标签底部:依赖型JS库
    • 出现在body标签底部:功能型JS脚本

    四、JS语法规范

    • 注释
    // 单行注释
    /* 
    多行注释
    */
    
    • 以分号作为语句结尾(允许省略)

    五、变量的定义

    1、ES5定义变量

    var num = 10;  // 无块级作用域变量
    num = 10;  // 全局变量
    

    2、ES6定义变量

    let num = 10;  // 局部变量
    const NUM = 10;  // 常量
    

    3、变量(标识符)的命名规范

    • 由字母,数字,_,$组成,不能以数字开头(可以包含中文字符)
    • 区分大小写
    • 不能出现关键字及保留字
    abstract arguments boolean break byte
    case catch char class* const
    continue debugger default delete do
    double else enum* eval export*
    extends* false final finally float
    for function goto if implements
    import* in instanceof int interface
    let long native new null
    package private protected public return
    short static super* switch synchronized
    this throw throws transient true
    try typeof var void volatile
    while with yield

    六、三种弹出框

    • alert:普通弹出框
    • confirm:确认框
    • prompt:输入框

    七、四种调试方式

    • alert()
    • console.log()
    • document.write()
    • 浏览器断点调试

    八、数据类型

    1、值类型

    • number:数字类型
    var a = 10;
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'number')
    
    • string:字符串类型
    var a = '10';
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'string')
    
    • boolean:布尔类型
    var a = true;
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'boolean')
    
    • undefined:未定义类型
    var a = undefined;
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'undefined')
    console.log(a == undefined)
    

    2、引用类型

    • function:函数类型
    var a = function(){};
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'function')
    
    • object:对象类型
    var a = {};
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'object')
    console.log(a instanceof Object)
    

    3、具体的对象类型

    • null:空对象
    var a = null;
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'object')
    console.log(a == null)
    
    • Array:数组对象
    var a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'object')
    console.log(a instanceof Object)
    console.log(a instanceof Array)
    
    • Date:时间对象
    var a = new Date();
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'object')
    console.log(a instanceof Object)
    console.log(a instanceof Date)
    
    • RegExp:正则对象
    var a = new RegExp();
    console.log(a, typeof a)
    // 判断方式
    console.log(typeof a == 'object')
    console.log(a instanceof Object)
    console.log(a instanceof RegExp)
    

    4、类型转换

    • 数字|布尔 转换为 字符串
    var a = 10 or true
    
    String(a)
    
    a.toString()
    
    • 布尔|字符串 转换为 数字
    var a = true or '10'
    
    Number(a)
    
    + a
    
    parseFloat()
    parseInt()
    
    • 字符串|数字 转换为 布尔
    var a = 10 or '10'
    Boolean(a)
    
    • 自动转换
    5 + null  // 5
    "5" + null  // "5null"
    "5" + 1  // "51"
    "5" - 1  // 4
    
    • 特殊产物
    // NaN: 非数字类型
    // 不与任何数相等,包含自己
    // 利用isNaN()进行判断
    

    九、运算符

    1、算数运算符

    前提:n = 5

    运算符 描述 例子 x结果 n结果
    + 加法 x=n+2 7 5
    - 减法 x=n-2 3 5
    * 乘法 x=n*2 10 5
    / 除法 x=n/2 2.5 5
    % 驱魔(余数) x=n/2 1 5
    ++ 自增 x=++n 6 6
    x=n++ 5 6
    -- 自减 x=--n 4 4
    x=n-- 5 4

    2、赋值运算符

    前提:x=5,y=5

    运算符 例子 等同于 运算结果
    = x=y 5
    += x+=y x=x+y 10
    -= x-=y x=x-y 0
    *= x*=y x=x*y 25
    /= x/=y x=x/y 1
    %= x%=y x=x%y 0

    3、比较运算符

    前提:x=5

    运算符 描述 比较 结果
    == 等于 x=="5" true
    === 绝对等于 x==="5" false
    != 不等于 x!="5" fales
    !== 不绝对等于 x!=="5" true
    > 大于 x>5 false
    < 小于 x<5 false
    >= 大于等于 x>=5 true
    <= 小于等于 x<=5 true

    4、逻辑运算符

    前提:n=5

    运算符 描述 例子 结果
    && x=n>10&&++n x=false,n=5(短路)
    || x=n<10||n-- x=true,n=5(短路)
    ! x=!n x=false,x=5

    5、ES6语法解构赋值

    • 数组的解构赋值
    let [a, b, c] = [1, 2, 3]
    // a=1,b=2,c=3
    let [a, ...b] = [1, 2, 3]
    // a=1,b=[2,3]
    
    • 对象的解构赋值
    let {key: a} = {key: 10}
    // a=10
    
    • 字符串解构赋值
    let [a,b,c] = 'xyz'
    // a='x',b='y',c='z'
    
  • 相关阅读:
    css 中 overflow: hidden清楚浮动的真正原因
    Get、Post请求中文乱码问题有效解决方法
    安装PostgreSQL和卸载PostgreSQL
    PostgresSql日期字段比较大小
    关于多线程编程的一点思考
    Python 虚拟环境 pyenv、venv(pyvenv)、virtualenv之间的区别
    python常用命令
    python中各种文件打开模式a w r
    python-安装
    day1-安装配置
  • 原文地址:https://www.cnblogs.com/layerluo/p/9774790.html
Copyright © 2020-2023  润新知