• 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)      返回角的正切。
  • 相关阅读:
    co模块总结
    Promise总结
    webpack错误Chunk.entry was removed. Use hasRuntime()
    jquery validate用法总结
    node命令行开发
    animation总结
    formData使用总结
    vue-resource发送multipart/form-data数据
    keil中使用Astyle格式化你的代码的方法-keil4 keil5通用
    tcpip入门的网络教程汇总
  • 原文地址:https://www.cnblogs.com/caoyu080202201/p/12900850.html
Copyright © 2020-2023  润新知