• 前端开发之JavaScript


    JavaScript

      JS是一种脚本语言,浏览器执行,用于渲染HTML网页,实现网页的动画效果。

      JavaScript的引用方式:

        1,在HTML文件中script标签中写JS代码

    <script>
      // JS代码
    </script>

        2,引用外部的JS文件

    <script src="my-JavaScript.js"></script>

      JavaScript的注释和语句规范

    // 单行注释:
    // var name = "tom";
    
    /*多行注释:*/
    
    /*
    var name = "tom";
    var age = 18;
    */
    
    // 每一句代码要用分号;为结束

      JavaScript变量声明

        变量声明:var 变量名 = 数据;

    var age = 18;

        变量名命名规则:

          1,变量名使用数字,字母,下划线和$组成,但是不能以数字开头;

          2,不能使用JS的保留字;

          3,驼峰式命名,见名知意。

       JavaScript的数据类型

        1,字符串string:

          引号包裹的为字符串类型。如 var s = "tom";

          字符串拼接使用+号,其他的常用方法有:

    方法 说明
    .length 返回长度
    .trim() 移除空白
    .trimLeft() 移除左边的空白
    .trimRight() 移除右边的空白
    .charAt(n) 返回第n个字符
    .concat(value, ...) 拼接
    .indexOf(substring, start) 子序列位置
    .substring(from, to) 根据索引获取子序列
    .slice(start, end) 切片
    .toLowerCase() 小写
    .toUpperCase() 大写
    .split(delimiter, limit) 分割

        2,数字number:

          JavaScript没有整型和浮点型的区分,就是数字类型。如 var n = 2.3;

          数字还要一种比较特别的类型:NaN(Not a Number),表示不是一个是数字。当字符串和数字相加时会返回NaN。

          常用的方法:

    parseInt("123")  // 返回123
    parseInt("ABC")  // 返回NaN
    parseFloat("3.1415926")  // 返回123.456

        3,undefined:

          JavaScript中一种特殊的类型,当一个变量只声明而没有赋值时,它的类型就是undefined。还有就是函数无明确的返回值时,返回的也是undefined。

    var x;  // 此时x是undefined

        4,布尔值boolean:

          true和false。在JavaScript中,空字符串,数字0,null,undefined和NaN都是false,其他的为true。

        5,数组:

          形式类似python中列表。

    var li = [123, "ABC"];

          常用方法:

    方法 说明
    .length 数组的大小
    .push(ele) 尾部追加元素
    .pop() 获取尾部的元素
    .unshift(ele) 头部插入元素
    .shift() 头部移除元素
    .slice(start, end) 切片
    .reverse() 反转
    .join(seq) 将数组元素连接成字符串
    .concat(val, ...) 连接数组
    .sort() 排序

      JavaScript数据类型查看

        查看方式:typeof 数据。

    // 返回string
    typeof "abc" ;
    // 返回number
    typeof 12;

      JavaScript的运算符

        1,算数运算符:加+  减-  乘*  除/  取余%  自加++  自减--

        2,比较运算符:大于>  大于等于>=  小于<  小于等于<=  弱不等于!=  弱等于==  等于===  不等于!==

          弱等于只比较数值不看类型,如 1 == ''1",它返回的是true。

        3,逻辑运算符:与 &&  或||  非!

        4,赋值运算符:=将数值赋值给前面的变量  +=变量加上数值后再赋值  -=变量减去数值后再赋值  *=变量乘以数值后再赋值 /=变量除以数值后再赋值

      JavaScript流程控制

        判断

        1,if  else:单一条件

    var a = 10;
    if (a > 5){
      条件成立时执行的代码
    }else {
      条件不成立时执行的代码
    }

        2,if    else if    else:多条件 

    var a = 10;
    if (a > 5){
      条件一成立时执行的代码
    }else if (a < 5) {
      条件二成立时执行的代码
    }else {
      条件都不成立时执行的代码
    }

        3,switch:特定多条件

    var day = 2;
    switch (day) {  // 变量名
      case 0:   // 条件数值
      console.log("Sunday");  // 满足条件执行的代码
      break;  // 退出,确保不会执行下面的代码
      case 1:
      console.log("Monday");
      break;
      default: 
      console.log("...")   // 都不满足时执行的代码
    }

        循环

        1,for:

    for (var i=0;i<10;i++) {    // 声明变量i,设定条件,i自增
      console.log(i);
    }

        2,while:

    var i = 0;
    while (i < 10) {  // 满足条件进入循环
      console.log(i);
      i++;  // 自增,用于改变条件值来结束循环
    }

        3,三元运算:

    var a = 1;
    var b = 2;
    var c = a > b ? a : b  // 当a>b时,返回冒号之前的a,反之返回冒号之后的b

      JavaScript的函数

        1,函数的定义

    function 函数名() {
      函数体
    }
    
    // 可以设置参数
    function 函数名(参数1,参数2,......) {
      函数体
    }
    
    // 可以有返回值
    function 函数名() {
      函数体
      return 返回值
    }

        匿名函数

    // 通过变量来接收
    var func = function() {
      函数体
    }

        2,函数的调用

    function foo() {
      console.log('tom');
    }
    
    // 函数调用
    foo()
    
    // 立即执行函数,直接执行。
    (function(a, b){
      return a + b;
    })(1, 2);

        如果函数有参数,调用时传的参数即使和形参数量不同,也不会报错。为了避免这个问题,可以使用arguments,它会获取传的所有参数。通过判断它的长度,我们就可以确定传的参数是否满足条件。

    function add(a,b){
      console.log(a+b);
      console.log(arguments.length)
    }
    
    add(1,2,3)  // 输出3  3

        3,函数的全局变量和局部变量

          1,全局变量:在全局定义的变量,所有都可以访问它。

          2,局部变量:在函数内定义的变量,只有函数内部的能访问它。当函数运行结束后就会清楚局部的变量。

        4,函数的作用域

          函数内部在找变量时,是从内向外找,逐步找到最外层。

        5,函数的词法分析

          在JavaScript中调用函数会先进性词法分析:

    词法分析的过程:
    
    当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
    
    1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
    2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
    3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
    
    函数内部无论是使用参数还是使用局部变量都到AO上找。

      JavaScript的对象和内置方法

        在JavaScript中一切皆对象。我们也可以自定义对象。

        1,自定义对象:

    var a = {"name": "Alex", "age": 18}; // 自定义对象
    console.log(a.name);  // 取值方式一
    console.log(a["age"]);  // 取值方式二

        2,JavaScript语句创建对象:

    var person=new Object();  // 创建对象
    person.name="Alex";  // 给对象添加属性和值
    person.age=18;

        3,内置对象和方法:

          1,Date对象

    var d1 = new Date(); // 创建Date对象
    d1.getDate()  // 使用对象方法
    getDate()    从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)。
    getFullYear()    从 Date 对象以四位数字返回年份。
    getHours()    返回 Date 对象的小时 (0 ~ 23)。
    getMilliseconds()    返回 Date 对象的毫秒(0 ~ 999)。
    getMinutes()    返回 Date 对象的分钟 (0 ~ 59)。
    getMonth()    从 Date 对象返回月份 (0 ~ 11)。
    getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。
    getTime()    返回 1970 年 1 月 1 日至今的毫秒数。
    getTimezoneOffset()    返回本地时间与格林威治标准时间 (GMT) 的分钟差。
    getUTCDate()    根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
    getUTCDay()    根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
    getUTCFullYear()    根据世界时从 Date 对象返回四位数的年份。
    getUTCHours()    根据世界时返回 Date 对象的小时 (0 ~ 23)。
    getUTCMilliseconds()    根据世界时返回 Date 对象的毫秒(0 ~ 999)。
    getUTCMinutes()    根据世界时返回 Date 对象的分钟 (0 ~ 59)。
    getUTCMonth()    根据世界时从 Date 对象返回月份 (0 ~ 11)。
    getUTCSeconds()    根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
    getYear()    已废弃。 请使用 getFullYear() 方法代替。
    parse()    返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
    setDate()    设置 Date 对象中月的某一天 (1 ~ 31)。
    setFullYear()    设置 Date 对象中的年份(四位数字)。
    setHours()    设置 Date 对象中的小时 (0 ~ 23)。
    setMilliseconds()    设置 Date 对象中的毫秒 (0 ~ 999)。
    setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)。
    setMonth()    设置 Date 对象中月份 (0 ~ 11)。
    setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)。
    setTime()    setTime() 方法以毫秒设置 Date 对象。
    setUTCDate()    根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
    setUTCFullYear()    根据世界时设置 Date 对象中的年份(四位数字)。
    setUTCHours()    根据世界时设置 Date 对象中的小时 (0 ~ 23)。
    setUTCMilliseconds()    根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
    setUTCMinutes()    根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
    setUTCMonth()    根据世界时设置 Date 对象中的月份 (0 ~ 11)。
    setUTCSeconds()    setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
    setYear()    已废弃。请使用 setFullYear() 方法代替。
    toDateString()    把 Date 对象的日期部分转换为字符串。
    toGMTString()    已废弃。请使用 toUTCString() 方法代替。
    toISOString()    使用 ISO 标准返回字符串的日期格式。
    toJSON()    以 JSON 数据格式返回日期字符串。
    toLocaleDateString()    根据本地时间格式,把 Date 对象的日期部分转换为字符串。
    toLocaleTimeString()    根据本地时间格式,把 Date 对象的时间部分转换为字符串。
    toLocaleString()    据本地时间格式,把 Date 对象转换为字符串。
    toString()    把 Date 对象转换为字符串。
    toTimeString()    把 Date 对象的时间部分转换为字符串。
    toUTCString()    根据世界时,把 Date 对象转换为字符串。
    UTC()    根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
    valueOf()    返回 Date 对象的原始值。
    Date内置方法

          2,JSON对象

            var obj = JSON.parse(字符串):将字符串转换成对象;

            var str = JSON.stringify(对象):将对象转换成字符串。

          3,RegExp对象

            JavaScript中正则相关的对象。

            1,正则定义的两种方式:

    var reObj1 = new RegExp("正则语句");
    var reObj2 = /正则语句/

            2,常用的方法 :RegExp对象.test("将要被校验的字符串")

            3,正则的匹配模式:

              1,g:全局匹配

              2,i:不区分大小写

            4,注意事项:

    1. 正则表达式之间不能加空格
    2. .test()不传值相当于.test(undefined)  --> .test("undefined")
    3. 全局匹配模式注意事项
        var reObj = /abc/g;  -->按lastIndex的值进行匹配
        reObj.test("abc")    --> lastIndex属性被设置成下一位的索引3
        reObj.test("123abc") -->从索引3开始匹配,能匹配上abc所以就返回true

          4,Math对象

            数学计算相关的对象。方法有:

    abs(x)      返回数的绝对值。
    exp(x)      返回 e 的指数。
    floor(x)    对数进行下舍入。
    log(x)      返回数的自然对数(底为e)。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    random()    返回 0 ~ 1 之间的随机数。
    round(x)    把数四舍五入为最接近的整数。
    sin(x)      返回数的正弦。
    sqrt(x)     返回数的平方根。
    tan(x)      返回角的正切。
  • 相关阅读:
    Lightoj 1082【RMQ】
    hrbust1444 逃脱 【BFS】
    萌新学习笔记之哈夫曼树
    lightoj 1085【离散化+树状数组】
    CodeForces 586D【BFS】
    lightoj 1089 【离散化+线段树】
    lightoj 1088【树状数组+离散化】
    《算法导论》笔记 第6章 6.2保持堆的性质
    《算法导论》笔记 第6章 6.1堆
    【python】__all__
  • 原文地址:https://www.cnblogs.com/zxc-Weblog/p/8569658.html
Copyright © 2020-2023  润新知