zoukankan      html  css  js  c++  java
  • JS(二)

    序言:

      1、JS和python一样,是秉持“一切皆对象原则”的相面对象的语言。

      2、JS和python一样,是动态型语言:一个变量名开始被赋值某数据类型后,后面可以动态更改,而非动态型语言,变量名初次赋值后类型则不可再更改。

    一、数值类型---number:

      1、在JS中,整数和小数统一归为number类型:

    var a = 1;
    typeof a;  
    // ===> "number"
    
    var b = 1.1;
    typeof b;
    // ===> "number"

      2、类型转换:整数和小数有所区别。

    var a = '1';
    parseInt(a);
    // ===> 1
    
    var b = '1.1';
    parseFloat(b);
    // ===> 1.1

      3、类型转换只匹配开头:只要开头捕捉到整数或者小数就能完成转换,并且只截取捕捉到的开头部分。

    var a = '1aaa';
    parseInt(a);
    // ===> 1
    
    var b = '1.1';
    parseInt(a);
    // ===> 1
    
    var c = 1.1;
    parseInt(c);
    // ===> 1
    
    var d = '1.1aaa';
    parseFloat(d);
    // ===> 1.1
    
    var e = 'a1';
    parseInt(e);
    // ===> NaN  // NaN 代表这是一个无法转换成数值类型的字符串类型
    
    var f = 'a1.1';
    parseFloat(f);
    // ===> NaN

      4、自加运算:

    var a = 1;
    var x = a++;  // 先赋值再自加1
    x;
    // ===> 1
    a;
    // ===> 2
    var b = 1;
    var y = ++b;  // 先自加1再赋值
    y;
    // ===> 2
    b;
    // ===> 2

      5、比较运算:

    var x = 1;
    var y = '1';
    x == y;  // 软等式,字符串和数值比较时会自动转换
    // ===> true
    x != y;
    // ===> false
    x === y;  // 硬等式,不会自动转换
    // ===> false
    x !== y;
    // ===> true

      6、赋值运算:=,+=,-=,*=,之类的,同python

    二、字符串类型---string:

      1、与python一样,单引号和双引号都可以:

    var a = 'aaa';
    typeof(a);
    // ===> "string"
    
    var b = "aaa";
    typeof(b);
    // ===> "string"

      2、模板字符串:可以多行书写,并且可以格式化字符串。

    var a = `
    aaa
    bbb
    ccc
    `;
    typeof(a);
    // ===> "string"
    
    var name = 'tom';
    var age = 18;
    var introduce = `he name is ${name} and age is ${age}`;
    typeof introduce;
    // ===> "string"
    introduce;
    // ===> "he name is tom and age is 18"

      3、字符串拼接:JS中推荐直接用+号。

    var a = 'aaa';
    var b = '111';
    var c = a + b;
    typeof c;
    // ===> "string"
    c;
    // ===> "aaa111"

    三、字符串类型的常用方法:

      1、获取字符串的长度属性:

    var a = 'abcdef';
    var l = a.length;
    l;
    // ===> 6

      2、获取移除结果:

    var a = '   abc   ';
    var x = a.trim();  // 获取字符串移除两侧空白后的结果
    x;
    // ===> "abc"
    var y = a.trimLeft();  // 获取字符串只移除左侧空白后的结果
    y;
    // ===> "abc   "
    var z = a.trimRight();  // 获取字符串只移除右侧空白后的结果
    z;
    // ===> "   abc"
    // 只能移除空白,不可以指定移除符

      3、按索引获取字符:

    var a = 'abcdef';
    var x = a.charAt(3);
    x;
    // ===> "d"
    var y = a[3]; // 也可以直接按索引取值,不支持负索引号 y; // ===> "d"

      4、获取某个字符在字符串中的位置:

    var a = 'abcdef';
    var n = a.indexOf('d');
    n;
    // ===> 3
    var n2 = a.indexOf('de');
    n2;
    // ===> 3  // 即使用多个字符去匹配,也只以首个字符为准

      5、截取字符串中的部分字符:

    var a = 'abcdef';
    var x = a.substring(1,5);  // 1号索引开始,4号索引结束
    x;
    // ===> "bcde"
    var y = a.slice(1,5);  // 与substring效果一致
    y;
    // ===> "bcde"
    var z = a.slice(2,-2);  // 2号索引开始,-3号索引结束,而string无法用负号索引
    z;
    // ===> "cd"

      6、获取转大小后的结果:

    var a = 'aBcDe';
    var x = a.toLowerCase();
    x;
    // ===> "abcde"
    var y = a.toUpperCase();
    y;
    // ===> "ABCDE"

      7、以某个字符为隔断,对字符串进行分组,获取分组后的数组:

    var a = 'aaa+bbb+ccc+ddd+eee+fff';
    var x = a.split('+');
    x;
    // ==> (6) ["aaa", "bbb", "ccc", "ddd", "eee", "fff"]
    var y = a.split('+', 3);  // 可以指定只获取分组后的前几个元素组成的数组
    y;
    // ===> (3) ["aaa", "bbb", "ccc"]

      8、获取其他字符串拼接进来后组成的新字符串:

    var a = 'adc';
    var b = 'def';
    var x = a.concat(b);
    x;
    // ===> "adcdef"
    var c = 111;  // 若用于拼接的不是字符串类型,会自动转成字符串类型再拼接,用+号的方式同理
    var y = a.concat(c);
    y;
    // ===> "adc111"

    四、布尔类型---boolean:

      1、python中True/False ===> JS中true/false

    var a = (2 > 1);
    a;
    // ===> true
    typeof a;
    // ===> "boolean"
    var b = (2 < 1);
    b;
    // ===> false
    typeof b;
    // ===> "boolean"

      2、隐式布尔值:空数据,0,null,underfined,NaN的隐式布尔值是false,其余的都是true

      3、null与underfined:

        ①null代表值为空:一般用于新建一个空数据,或者清空一个非空数据。

    var a = null;
    var b = 'abc';
    var b = null;

        ②undefined:

          a:定义了一个变量,但是没有赋值。

    var a;
    a;
    // ===> undefined

          b:没有定义返回值的函数默认的返回值也是undefined

      4、逻辑运算:&&,||,!---与,或,非,适用短路原则。

    var a = 1;
    var b = 2;
    var c = 0;
    a && b; 
    // ===> 2
    c && a;
    // ===> 0
    a || b;
    // ===> 1
    c || a;
    // ===> 1
    !a;
    // ===> false
    !c;
    // ===> true

    五、数组:类似于python中的列表。

    var l = [1, 1.1, 'aaa', true];
    typeof l;
    // ===> "object"  // JS中,数组以及其他一些类型统属于object类型
    l[2];  // 按索引取值,不支持负索引号
    // ===> "aaa"
    var ll = [l, 'bbb'];  // 可以数组中嵌套数组
    ll;
    // ===> (2) [Array(4), "bbb"]
    typeof ll;
    // ===> "object"

    六、数组的常用方法:

      1、数组的长度属性:

    var a = [1, 2, 3];
    var l = a.length;
    l;
    // ===> 3

      2、尾部添加元素:

    var a = [1, 2, 3];
    var b = 'aaa';
    a.push(b);
    a;
    // ===> (4) [1, 2, 3, "aaa"]

      3、移出尾部元素:

    var a = [1, 2, 3];
    var x = a.pop();
    x;
    // ===> 3
    a;
    // ===> (2) [1, 2]

      4、头部添加元素:

    var a = [1, 2, 3];
    var b = 'aaa';
    a.unshift(b);
    a;
    // ===> (4) ["aaa", 1, 2, 3]

      5、移出头部元素:

    var a = [1, 2, 3];
    var x = a.shift();
    x;
    // ===> 1
    a;
    // ===> (2) [2, 3]

      6、截取数组的部分元素组成新数组:机理类似于字符串的方法。

    var a = [1, 2, 3, 4, 5, 6];
    var x = a.slice(1,5);
    x;
    // ===> (4) [2, 3, 4, 5]
    var y = a.slice(2,-2);
    y;
    // ===> (2) [3, 4]

      7、获取反序数组:

    var a = [2, 3, 1];
    var x = a.reverse();
    x;
    // ===> (3) [1, 3, 2]

      8、将指定字符串插入数组每个元素之间,获取组成的字符串:

    var a = ['a', 123, 'b'];  // 数值会被转化为字符串处理
    var x = a.join('+');  // 此处语法与python正好相反---'+'.join(a)
    x;
    // ===> "a+123+b"

      9、将其他数组加入尾部,获取组合数组:

    var a = [1, 2, 3];
    var b = ['aaa', 'bbb', 'ccc'];
    var x = a.concat(b);
    x;
    // ===> (6) [1, 2, 3, "aaa", "bbb", "ccc"]

      10、排序数组:

    var a = [2, 3, 1];
    a.sort();
    a;
    // ===> (3) [1, 2, 3]

       11、forEach遍历:分别依次取出数组中每个元素的值/索引/源数组放入函数中执行,有,只拿值,拿值/索引,拿值/索引/源数组,这三种用法。

    var a = ['aaa', 'bbb', 'ccc'];
    a.forEach(
    function(value){console.log(value)}); // ==> aaa bbb ccc a.forEach(function(value, index){console.log(value, index)}); // ===> aaa 0 bbb 1 ccc 2 a.forEach(function(value, index, arr){console.log(value, index, arr)}); // ===> aaa 0 (3) ["aaa", "bbb", "ccc"] bbb 1 (3) ["aaa", "bbb", "ccc"] ccc 2 (3) ["aaa", "bbb", "ccc"]

      12、map遍历:取出数组每个元素放入函数中执行,将所有返回值组成新数组。

    var a = ['aaa', 'bbb', 'ccc'];
    var x = a.map(function(value){return value + 'sss'});
    x;
    // ===> (3) ["aaasss", "bbbsss", "cccsss"]

      13、移花接木:

    var a = [1, 2, 3, 4, 5, 6];
    var x = a.splice(1, 4);  // 移出数组某部分元素,这里是1号索引到4号索引
    x;
    // ===> (4) [2, 3, 4, 5]
    a;
    // ===> (2) [1, 6]
    var b = [1, 2, 3, 4, 5, 6];
    var c = 'aaa';
    var y = b.splice(1, 4, c);  // 移出数组某部分元素,并在移出的位置补上元素
    y;
    // ===> (4) [2, 3, 4, 5]
    b;
    // ===> (3) [1, "aaa", 6]

     七、流程控制:

      1、if判断:

    var a = 15;
    if (a < 10){
    console.log('触发事件1')
    }
    else if (a < 20){
    console.log('触发事件2')
    }
    else {
    console.log('触发事件3')
    };
    // ===> 触发事件2

      2、switch选择:预先将条件与执行代码配对。

    var a = 2;
    switch(a){
        case(1):
            console.log('触发事件1')
            break;  // 若不加break,则满足条件后会继续执行后续代码
        case(2):
            console.log('触发事件2')
            break;
        case(3):
            console.log('触发事件3')
            break;
        default:
            console.log('所有预备条件都未满足,则触发本事件')
    };
    // ===> 触发事件2

      3、for循环:

    for(var n = 1; n < 4; n++){
    console.log(n)
    };
    // ===> 
    1
    2
    3

      4、while循环:

    var a = 1;
    while (a < 4){
    console.log(a)
    a++
    };
    // ===>
    1
    2
    3

      5、三元表达式:

    var res1 = 2 > 1?'真聪明':'继续努力';
    res1;
    "真聪明"
    var res2 = 1 === 2?'真聪明':'继续努力';
    res2;
    "继续努力"

    八、函数

      1、基本格式:function 函数名(形参1,形参2,...(可无参)){函数体代码}

      2、JS之奇:

        ①实参多传不会报错,多余的实参无效。

        ②实参少了也不会报错,未传值的形参等于传了undefined

      3、函数体内arguments数据:用于收取函数收到的所有参数。

    function ShowInfo(name, age){
        var info = `my name is ${name} and my age is ${age}`;
        console.log(arguments);
        console.log(info)
    };
    ShowInfo('tom', 18);
    // ===> Arguments(2) ["tom", 18, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    // ===> my name is tom and my age is 18

      4、也可以用关键字return设置返回值。

    function func1(a, b, c){
      return a, b, c
    };
    var res1 = func1('111', '222', '333');
    res1;
    // ===> "333"  // 无法返回多个值,若声明多个,只会返回最后一个

      5、匿名函数:不给函数起名,若要使用该函数,需要用一个变量名接收一下。

    var func = function(){
        console.log('a u ok?')
    };
    func();
    // ===> a u ok?

      6、箭头函数:var 函数名 = 形参 => 返回值表达式。

    var func = (a, b) => a*b;
    var res = func(3, 5);
    res;
    // ===> 15

      7、名称空间作用域:与python查找顺序一致---由内而外。

    九、自定义对象:可以看成python中的字典,比字典使用更方便。

      1、创建自定义对象的两种方式:

    var a = {};
    a;
    // ===> {}
    typeof a;
    // ===> "object"
    var b = new Object();
    b;
    // ===> {}
    typeof b;
    // ===> "object"

      2、自定义对象添加元素和查找元素的方式:

    var a = {};
    a['name'] = 'tom';
    a.age = 18;
    a;
    // ===> {name: "tom", age: 18}
    a['name'];
    // ===> "tom"
    a.age;
    // ===> 18

    十、日期对象

      1、创建日期对象的三种方式:

    var a = new Date();
    a;
    // ===> Mon May 18 2020 13:35:12 GMT+0800 (中国标准时间)  // 获取当前时间,初始格式
    a.toLocaleString();
    // ===> "2020/5/18 下午1:35:12"  // 转化为易查看格式
    var b = new Date('1998/3/3 12:34:56');
    b;
    // ===> Tue Mar 03 1998 12:34:56 GMT+0800 (中国标准时间)
    b.toLocaleString();
    // ===> "1998/3/3 下午12:34:56"
    var c = new Date(2008, 10, 15, 12, 34, 56);  // 此法创建日期输入的月份比实际小1
    c;
    // ===> Sat Nov 15 2008 12:34:56 GMT+0800 (中国标准时间)
    c.toLocaleString();
    // ===> "2008/11/15 下午12:34:56"

      2、时间对象的常用方法:

    var a = new Date();
    a.toLocaleString();
    // ===> "2020/5/18 下午1:45:22"
    a.getDate();  // 日期号
    // ===> 18
    a.getDay();  // 星期号
    // ===> 1
    a.getMonth();  // 月份-1
    // ===> 4
    a.getFullYear();  // 年号
    // ===> 2020
    a.getHours();  // 小时
    // ===> 13
    a.getMinutes();  // 分钟
    // ===> 45
    a.getSeconds();  // 秒数    
    // ===> 22
    a.getMilliseconds();  // 毫秒
    // ===> 299
    a.getTime();  // 时间戳    
    // ===> 1589780722299

    十一、JSON对象:

    var a = {'name':'tom', 'age':18};
    var b = JSON.stringify(a);  // 序列化
    b;
    // ===> "{"name":"tom","age":18}"
    typeof b;
    // ===> "string"
    var c = JSON.parse(b);  // 反序列
    c;
    // ===> {name: "tom", age: 18}

    十二、正则对象

      1、创建正则对象的两种方式:

    var a = new RegExp('^[a-zA-Z][a-zA-Z0-9]{1,3}');
    a;
    // ===> /^[a-zA-Z][a-zA-Z0-9]{1,3}/
    var b = /^[a-zA-Z][a-zA-Z0-9]{1,3}/;
    b;
    // ===> /^[a-zA-Z][a-zA-Z0-9]{1,3}/

      2、正则对象的常用方法

    var a = /^[a-zA-Z][a-zA-Z0-9]{1,3}/;
    a.test('a123');
    // ===> true

      3、正则对象的几个注意点:

        ①全局匹配模式下有一个lastIndex属性,会导致多次匹配结果不同。

        ②匹配内容为空的时候,会把“undefined”作为内容匹配。

    十三、数学对象

    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)      返回角的正切。
  • 相关阅读:
    HDU 2544 最短路
    HDU 3367 Pseudoforest
    USACO 2001 OPEN
    HDU 3371 Connect the Cities
    HDU 1301 Jungle Roads
    HDU 1879 继续畅通工程
    HDU 1233 还是畅通工程
    HDU 1162 Eddy's picture
    HDU 5745 La Vie en rose
    HDU 5744 Keep On Movin
  • 原文地址:https://www.cnblogs.com/caoyu080202201/p/12900850.html
Copyright © 2011-2022 走看看