• 第7天-javascript内置对象


    数组相关方法

    concat 用来连接多个数组

     <script>
        var a = [1,2,3];
        var b = [3,4,5];
        var c = a.concat(b);
        console.log(c); // [1,2,3,3,4,5,]
     </script>
    concat

    join  把数组元素拿出来,根据指定的符号连接成一个字符串

     <script>
        var a = [1,2,3];
        var b = a.join('|');
        console.log(b);    //  1|2|3
     </script>
    join

    pop 删除数组的最后一个元素

     <script>
        var a = [1,2,3];
        var b = a.pop();
        console.log(a);  // [1, 2]
        console.log(b);  //2
     </script>
    pop

    push 在数组的末尾添加一个元素

     <script>
        var a = [1,2,3];
        a.push("python");
        console.log(a);  // [1, 2, 3, "python"]
    </script>     
    push

    revrse 反转数组

     <script>
        var a = [1,2,3];
        console.log(a.reverse());  //[3, 2, 1]
    </script>     
    revrse

    splice 可以添加或者删除元素

     <script>
        //splice只有1个参数时,表示从数组这个位置开始删除到最后
        var a1 = [1,2,3, 'python', 'java' ];
        console.log(a1.splice(1));  //[2, 3, "python", "java"]
        console.log(a1);  //[1] 
        
        //如果是两个参数,第1个参数表示从哪个位置开始删除,第二个删除几个
        var a2 = [1,2,3, 'python', 'java' ];
        console.log(a2.splice(1, 0));  //[]   我这里设置的0所以1个都没有删除
        console.log(a2);  //[1,2,3, 'python', 'java' ]
        
        // 从索引位置2开始删除1个
        var a3 = [1,2,3, 'python', 'java' ];
        console.log(a3.splice(2, 1));  //[3]  
        console.log(a3);  //[1, 2, "python", "java"]
        
        //如果超过2个参数,则后的参数添加
        var a4 = [1,2,3, 'python', 'java'];
        console.log(a4.splice(2, 1, 'c++', 99));  //[3]  
        console.log(a4);  //[1, 2, "c++", 99, "python", "java"]
        
    </script>     
    splice

    字符串处理

    使用单引号或者双引号引起来的文本或者是通过new String([字符串])就是字符串对象

    var str1 = "abcd";
    var str2 = 'abcd';
    var str3 = new String("abcd");
    var str4 = new String('abcd');
    var str5 = '';
    var str6 = ''
    
    //以上都是字符串对象

    为什么使用字符串对象?

    因为javascript中字符串对象提供了很多线程对字符串处理的方法和属性,借助于现有的 方法和属性可以对对象中的字符串进行处理,我们在工作中遇到的数据最多也是字符串类型的数据。

    var str = 'my name is heboan';
    console.log(str.length); //17
    //length是字符串属性,表示字符串的长度

    .charAt(index)返回指定位置的字符串

    有时候需要拿到某个位置的字符串做判断的时候需要用到这个方法,比如去判定是id("#div")选中器还是类选择器(".div"),就需要知道第一个字符到底是"."还是"#"

    var str = 'abcd';
    console.log(str.charAt(0)); //输出a
    console.log(str.charAt(2)); //输出c
    console.log(str.charAt(4)); //输出空字符串

    .indexOf(searchvalue, fromindex)返回某个指定的字符串值在字符串中首次出现的位置

    indexOf方法有两个参数,第一个参数是要搜索的字符串,第二个参数是从哪个位置开始搜索,它的执行过程就是拿着第一个参数里面的字符去字符串对象中搜索,看看到底有没有这个字符,有的话就返回这个字符的位置,没有的话就返回-1 。通常可以配合字符串截取函数,在字符串中截取出想要的内容,比如文件后缀名、文件名等等,还要注意的细节就是这个方法对大小写敏感,而且是从前往后找的。

    var str = "abcdefc";
    console.log(str.indexOf("c")); //2 找到第一个出现c的字符串的索引
    console.log(str.indexOf('c', 3));//6从索引3开始找,第一次出现字符串c的位置
    console.log(str.indexOf('xxxx')); //-1, 在字符串冲查询没有找到,那么就返回-1

    .lastIndexOf(searchvalue, fromindex)返回一个指定的字符串值最后出现的位置

    lastIndexOf方法和indexOf方法使用相同,只是搜索的顺序不一样而已,indexOf是从前往后搜索,lastIndexOf是从后往前搜索

    var str = "abcdefc";
    console.log(str.lastIndexOf("c")); //6

    .replace(substr, replacement)字符串中用一些字符串替换另一些字符串

    var str = 'abcdefc';
    console.log(str.replace('c', 'kkk')); //abkkkdefc
    console.log(str.replace(/c/g, 'kkk'));//abkkkdefkkk, 用模式字符串加上g替换全局

     .substr(start, length)可在字符串中抽取从start下标开始的指定数目的字符

    substr用于字符串截取,有两个参数,第一个参数,是开始截取的位置,第二个参数是截取的长度,第一个参数如果为负数,那么位置从后往前计算,第二个参数可以不写,不写的话就从开始截取的位置到字符串末尾

    var str = 'abcdefg';
    console.log(str.substr(2,2)); //cd
    console.log(str.substr(-2, 2)); //fg
    console.log(str.substr(3)); //defg

    .substring(start stop)用于提取字符串中介于两个指定下标之前的字符

    subtring方法也是用于字符串截取的,和substr不同的是,substring方法截取的是两个位置之间的字符串,有两个参数,第一个参数是开始位置,第二个参数是结束位置,截取的就是中间的一段字符串,第二个参数可以不写,默认从开始的位置截取到字符末尾

    var str = 'abcdefg';
    console.log(str.substring(2, 4)); //cd
    console.log(str.substring(2));//cdefg

    .toLowerCase()把字符串转换为小写

    var str = 'HEBOAN';
    console.log(str.toLowerCase());//heboan

    toUpperCase()把字符串转换为大写

    var str = 'heboan';
    console.log(str.toUpperCase());//HEBOAN
    <script>
        var Btn = document.getElementById('btn');
        
        Btn.onclick = function(){
            var allowExt = ['jpg', 'png', 'gif', 'jpg']
            //找到html中上传文件对象
            var file = document.getElementById('pic');
            //得到上传文件的值
            var value = file.value;  //如: D:/xxxx/yy/xxxx.jpg
            //获取文件后缀名,先找到.的位置
            var pos = value.lastIndexOf('.');
            //截取.后面的 jpg,将后缀名统一小写,因为上传的后缀名有可能是大写
            var ext = value.substr(pos+1).toLowerCase();
            //检测后缀名是否在数组中
            var tag = false;
            var len = allowExt.length;
            for(var i=0; i<len;i++){
                if(allowExt[i] == ext){
                    //只要对比上,将tag设置为true
                    tag = true;
                    break; //就没有必要继续循环了
                }
            }
            
            if(tag){
                alert(ext+'后缀名支持上传');
            }else{
                alert(ext+'后缀名不支持上传');
            }
            
        }
            
    </script>
    实例:点击上传图片按钮检测上传文件后缀是否支持指定的格式上传后缀

    Math对象 处理数学计算

    Math对象是Javascript内置的对象,用于处理数学方法的运算,Math的相关方法,可以直接拿出来用,Math对象的属性和方法属于必须掌握的内容

    Math的属性PI

    3.141592653589793

    Math.abs()返回一个数的绝对值

    var num1 = -10;
    var num2 = 20;
    console.log(Math.abs(num1)); //10
    console.log(Math.abs(num2)); //20

     Math.ceil()对一个数进行向上取整

    向上取整,如果里面的数是正数,然后去掉小数点,整数+1, 如果里面的值是小数,直接去掉小数就是最后得到的值

    var num = 66.6;
    console.log(Math.ceil(num)); //67
    
    var num = 70.1;
    console.log(Math.ceil(num)); //71
    
    var num = -88.2
    console.log(Math.ceil(num)); //-88

    Math.flloor()对一个数进行向下取整

    var num = 66.6;
    console.log(Math.floor(num)); //66
    
    var num = 70.1;
    console.log(Math.floor(num)); //70
    
    var num = -88.2
    console.log(Math.floor(num)); //-89

     Math.max()求出n个数中最大的值

    console.log(Math.max(20, 1, 100, 101, 87)); //101

    Math.min()求出n个数中的最小值

    console.log(Math.min(20, 1, 100, 101, 87)); //1

    Math.pow(x, y)求出x的y次方

    console.log(Math.pow(2, 3)); //8

    Math.random()能够得到一个0-1之间的随机数,包含0,不包括1

    //这里循环输出10次,查看每次生成的随机数
    for(var i=0;i<10;i++){
        console.log(Math.random());
    }
    
    /*
     0.8626692812123165
     0.7610543906563667
     0.8932199456840746
     0.260131104855589
     0.9728451223560686
     0.19924598760814693
     0.46703603238865044
     0.3164368945385385
     0.6201635278517501
     0.5507817583961432
     */
    </script>

    获取指定范围内的随机数

    function getRandomInt(min, max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
    
    console.log(getRandomInt(10,20));

    Date处理日期和时间

    创建Date对象

    //创建一个时间对象,用于获取当前系统时间
    var date = new Date();
    console.log(date); //Thu Nov 08 2018 22:57:44 GMT+0800 (中国标准时间)
    
    //Date对象中传入字符串来常见指定日期时间的 时间对象
    var date = new Date('2016/09/13'); //Tue Sep 13 2016 00:00:00 GMT+0800 (中国标准时间)
    console.log(date);//
    
    var date = new Date('2016/09/13 10:12:59');
    console.log(date); //Tue Sep 13 2016 10:12:59 GMT+0800 (中国标准时间)
    
    //格式new Date(year, month, date[, hours[, minutes, [, seconds[,ms]]]])
    var date = new Date(2016,8,13,10,12,59);
    console.log(date); //Tue Sep 13 2016 10:12:59 GMT+0800 (中国标准时间)
    //这里要注意的是,第二个参数,。月份取值范围是0-11

    取出时间某个部分

    var date = new Date();
    console.log(date); //Thu Nov 08 2018 23:13:40 GMT+0800 (中国标准时间)
    
    //得到一个年份
    console.log(date.getFullYear()); //2018
    
    //得到月份, 返回的数字的取值范围是0-11,也就是要在这个数字上加1才是我们当前的月份
    console.log(date.getMonth()); //10
    
    //得到具体某天
    console.log(date.getDate());//8
    
    //得到时间的小时部分
    console.log(date.getHours()); //23
    
    //得到分钟部分
    console.log(date.getMinutes());//13
    
    //得到秒部分
    console.log(date.getSeconds());//40
    
    //得到毫秒部分
    console.log(date.getMilliseconds()); //696
    
    //得到一个数表示当前日期是星期几, 返回的取值范围是0-6, 0表示周日,6表示周6
    console.log(date.getDay()); //4
    
    //得到时间戳,1970.1.1到现在的一个毫秒数
    console.log(date.getTime()); //1541690449834
    
    //把事件对象转换成字符串
    var date = new Date('2016/09/13');
    console.log(date.toLocaleString()); //2016/9/13 上午12:00:00
  • 相关阅读:
    [LeetCode]Word Break
    [LeetCode]singleNumber
    [LeetCode]Palindrome
    新浪博客无法访问
    C++基础之顺序容器
    C++基础之IO类
    [LeetCode]Restore IP Addresses
    [LeetCode]Maximal Rectangle
    [LeetCode]Reverse Linked List II
    ACM 树形数组
  • 原文地址:https://www.cnblogs.com/sellsa/p/9863551.html
Copyright © 2020-2023  润新知