zoukankan      html  css  js  c++  java
  • JaveScript基础

    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、三目运算符

    // 结果 = 条件表达式 ? 结果1 : 结果2;
    ​
    // eg:
    var tq = prompt("天气(晴|雨)")
    var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
    console.log(res);

    6、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'
    

      

     

  • 相关阅读:
    Codeforces 1255B Fridge Lockers
    Codeforces 1255A Changing Volume
    Codeforces 1255A Changing Volume
    leetcode 112. 路径总和
    leetcode 129. 求根到叶子节点数字之和
    leetcode 404. 左叶子之和
    leetcode 104. 二叉树的最大深度
    leetcode 235. 二叉搜索树的最近公共祖先
    450. Delete Node in a BST
    树的c++实现--建立一棵树
  • 原文地址:https://www.cnblogs.com/zhangpang/p/9794634.html
Copyright © 2011-2022 走看看