JS中的内置对象 --- Math、Date、Array、String

1. 基本概念区分

  • 实例对象:通过构造函数创建出来,实例化对象。实例方法必须通过实例对象调用
  • 静态对象(内置对象): 不需要创建, 直接就是一个对象,方法(静态方法)直接通过这个对象名调用。静态方法必须通过大写的对象调用。
    比如:
		var arr=new Array(1,2,3); // 实例化一个数组
        arr.forEach(); // 通过实例对象arr来调用它的方法,  因为 Array是一个构造函数,因此可以这样使用

        var mt=new Math(); // 会报错,不可以这样实例化使用,因为 Math是一个对象但不是一个构造函数

2. 内置对象 — Math

常用方法:

  1. 绝对值方法
		console.log(Math.abs('-1'));          // 1
        console.log(Math.abs(2));            //2
        console.log(Math.abs(null));         //0
        console.log(Math.abs("string"));     //NaN
        console.log(Math.abs());             //NaN
  1. 向上取整
		console.log(Math.ceil(12.3));  //13
        console.log(Math.ceil(12.9));
        console.log(Math.ceil(12.09));
        console.log(Math.ceil(12.03));
        console.log(Math.ceil(12.92));
  1. 向下取整
		console.log(Math.floor(12.3)); //12
        console.log(Math.floor(12.9));
        console.log(Math.floor(12.03));
        console.log(Math.floor(12.09));
        console.log(Math.floor(12.92));
  1. 找一组数字中的最大值、最小值—之前是使用数组实现的,以后就可以直接用
		console.log(Math.max(12,3,56,79,0,78,3,200));
        console.log(Math.min(12,3,56,79,0,78,3,200));

注意:这两个方法的参数是元素,如果要找一组数中的最大值和最小值的时候,传入的应该是数组的元素值。
5. 求多少次幂

		console.log(Math.pow(2,2));  
		console.log(Math.pow(2,3));
		console.log(Math.pow(2,4));
  1. 开平方
		console.log(Math.sqrt(4));  //开平方
        console.log(Math.sqrt(9));
        console.log(Math.sqrt(16));
        console.log(Math.sqrt(25));
  1. 伪随机数
    Math.random() 返回一个浮点, 伪随机数在范围[0,1),也就是说,从0(包括0)往上,但是不包括1(排除1),然后可以缩放到所需的范围 。
		console.log(Math.random());   //范围[0,1)
        console.log(parseInt(Math.random()));
        console.log(parseInt(Math.random()*5));  // 产生的随机数0-5之间,包括0但是不包括5, 然后取整:0,1,2,3,4
        console.log(parseInt(Math.random()*5)+1);  //0,1,2,3,4,5
        console.log(parseInt(Math.random()*99)+1);  //0,1,2,3,4,5,...,99
        console.log(parseInt(Math.random()*100)+1);  //0,1,2,3,4,5,...,100

小案例:随机产生一个十六进制的颜色值。

		function getColor() {
            var str = "#";
            //一个十六进制的值的数组,都看成是字符串
            var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
            // console.log(parseInt(Math.random()*5));  产生随机数作为索引使用
            for (var i = 0; i < 6; i++) {
                //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
                var num = parseInt(Math.random()*16);  //十六进制的颜色: #后面是有6个值, 这6个值从arr中随机产生, 索引0-15,根据索引找到具体的值
                str += arr[num];

            }
            return str;
        }

3. 内置对象 — Date

  1. 创建实例化对象
var dt1 = new Date();  //当前时间---当前服务器
console.log(dt1);  // Fri Mar 13 2020 17:18:29 GMT+0800 (中国标准时间)
// 但是用new Date() 参与计算会自动转换为从1970.1.1开始的毫秒数  
dt1.getTime() // 返回 1970 年 1 月 1 日至今的毫秒数 

var dt2 = new Date('2019-12-01');  //传入时间
console.log(dt2); // Sun Dec 01 2019 08:00:00 GMT+0800 (中国标准时间)

var dt3 = new Date('2019/12/01'); //传入时间
console.log(dt3); // Sun Dec 01 2019 00:00:00 GMT+0800 (中国标准时间)

var dt4 = Date.now(); // 1970.1.1  至今的毫秒数   毫秒与秒之间是 1000 ,  时间戳:做计算
console.log(dt4);   // 1584091292654


  1. Date常用方法: 时间信息的获取
var dt = new Date(); 

//获取年份
console.log(dt.getFullYear()); // 2020
//获取月
console.log(dt.getMonth() + 1);   // 3 注意: 直接获取月份是比正常的显示月份小1的,  国内外表示方式不同,国外月份从0开始
//获取日期
console.log(dt.getDate()); // 13
//获取星期的第几天
console.log(dt.getDay());  // 5 星期天是第0天,  周一是第一天,后面以此类推

//获取小时
console.log(dt.getHours());  // 17
//获取分钟
console.log(dt.getMinutes()); // 26
//获取秒数
console.log(dt.getSeconds()); // 11
// 获取毫秒数
console.log(dt.getMilliseconds()); // 803

几个其他的方法: 日期的格式化方法

var d = new Date();
console.log(d.toString());  // Fri Mar 13 2020 17:28:00 GMT+0800 (中国标准时间)

console.log(d.toDateString());  //英文的日期  Fri Mar 13 2020
console.log(d.toLocaleDateString());  //日期格式的  2020/3/13

console.log(d.toTimeString()); // 17:28:00 GMT+0800 (中国标准时间)
console.log(d.toLocaleTimeString()); // 下午5:28:00

console.log(d.valueOf());  //毫秒数 1584091680620

一种特殊写法,只适用于Date这个对象。

var dd = +new Date();
console.log(dd); // 1584092172499 毫秒数

格式化日期和时间:

function getDate(dt) {
    // var dt=new Date;//创建日期对象
    //获取年
    var year=dt.getFullYear();
    //获取月
    var month=dt.getMonth()+1;
    //获取日
    var day=dt.getDate();
    //获取小时
    var hour=dt.getHours();
    //获取分钟
    var minute=dt.getMinutes();
    //获取秒
    var second=dt.getSeconds();

    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;

    return year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;
}

console.log(getDate(new Date())); // 2020年03月13日 17:39:49

4. 内置对象 — Array

主要熟悉数组的方法

  1. 判断一个对象是不是数组类型: 两种方法: instanceof 和 Array.isArray(对象)。
var obj = {};
console.log(obj instanceof Array);  //false
console.log(Array.isArray(obj));  //false
  1. concat: 合并数组,原来的数组不改变,返回一个新的数组。
var arr1 = [10, 20, 30];
var arr2 = [40, 50, 60];
var arr3 = [1, 2, 3, 4];
var arr4 = arr1.concat(arr2, arr3)
console.log(arr1); // [10, 20, 30]
console.log(arr2); // [40, 50, 60]
console.log(arr3); // [1, 2, 3, 4]
console.log(arr4); // [10, 20, 30, 40, 50, 60, 1, 2, 3, 4]
  1. 必须要记住的4个方法!!!!
  • arr.push(值)------把值追加到数组中,追加到数组的最后,返回值是追加之后的数组的长度
  • arr.pop()------删除数组中的最后一个元素, 返回值就是删除的这个值
  • arr.shift()------删除数组中的第一个元素,返回值就是删除的这个值
  • arr.unshift()------向数组的第一个元素前面插入一个新的元素,返回值是插入后的数组的长度

注意: 这4个方法都会改变原来的数组,后面一个重要的应用:轮播图的制作。

  1. slice()切片,截取数组中的一部分,不会改变原来的数组。
var arra01 = [10,20,30,40,50,60,70,80,90,100];
var newA=arra01.slice(3,5);   //包括3,不包括5
console.log(arra01); // [10,20,30,40,50,60,70,80,90,100]
console.log(newA);  // [40,50]
  1. splice(开始的位置,要删除的个数,要插入或替换的元素值)可以完成删除、替换、插入。会改变原来的数组。arr.splice()返回的是删除的元素组成的数组。
		var myFish = ["angel", "clown", "mandarin", "sturgeon"];
        var removed1 = myFish.splice(2, 0, "drum"); //在索引为2的位置插入一个元素
        console.log(myFish);// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
        console.log(removed1);// 被删除的元素: [], 没有元素被删除

        var removed2 = myFish.splice(2, 0, 'drum', 'guitar'); //在索引为2的位置插入两个元素
        console.log(myFish);// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "drum", "mandarin", "sturgeon"]
        console.log(removed2);// 被删除的元素: [], 没有元素被删除

        var myFish3 = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
        var removed3 = myFish3.splice(3, 1);  //从第 3 位开始删除 1 个元素
        console.log(myFish3);// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
        console.log(removed3);// 被删除的元素: ["mandarin"]

        var myFish4 = ['angel', 'clown', 'drum', 'sturgeon'];
        var removed4 = myFish4.splice(2, 1, "trumpet"); //从第 2 位开始删除 1 个元素,插入“trumpet”
        console.log(myFish4);// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
        console.log(removed4);// 被删除的元素: ["drum"]

        var myFish5 = ['angel', 'clown', 'trumpet', 'sturgeon'];
        var removed5 = myFish5.splice(0, 2, 'parrot', 'anemone', 'blue');  //从第 0 位开始删除 2 个元素,插入"parrot"、"anemone"和"blue"
        console.log(myFish5);// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
        console.log(removed5);// 被删除的元素: ["angel", "clown"]

        var myFish6 = ['angel', 'clown', 'mandarin', 'sturgeon'];
        var removed6 = myFish6.splice(-2, 1);  //从倒数第 2 位开始删除 1 个元素
        console.log(myFish6);// 运算后的 myFish: ["angel", "clown", "sturgeon"]
        console.log(removed6);// 被删除的元素: ["mandarin"]

        var myFish7 = ['angel', 'clown', 'mandarin', 'sturgeon'];
        var removed7 = myFish7.splice(2); //从第 2 位开始删除所有元素
        console.log(myFish7);// 运算后的 myFish: ["angel", "clown"]
        console.log(removed7);// 被删除的元素: ["mandarin", "sturgeon"]
  1. reverse()反转: 之前实现数组的反转的方式是使用循环,以后可以直接使用数组对象的方法来实现了。
var arra=[1,2,3,4,5];
arra.reverse();
console.log(arra);  // [5, 4, 3, 2, 1]
  1. indexOf(元素值): 返回的是这个元素值在数组中第一次出现时的索引, 没有就返回-1。lastIndexOf(元素值): 返回这个元素在数组中从右往左找到的第一个值在数组中的索引,没有就返回-1。
var arra = [1,2,3,4,5,1,2,3,4,5];
var index = arra.indexOf(3);
console.log(index);  // 2

var ind = arra.lastIndexOf(3);  
console.log(ind);  // 7
  1. join(’|’)方法,将数组中的元素通过竖线|连接成一个字符串。
var arra = [1,2,3,4,5,1,2,3,4,5];
var str = arra.join("|");
console.log(str); // '1|2|3|4|5|1|2|3|4|5'
  1. sort()排序, 注意: 直接在数组中使用sort函数不稳定,可能达不到想要的结果, 要写上 固定的格式。
var ar=[1,3,4,9,2,3,5];
ar.sort(function (a,b) {
   if (a > b) {
   		return 1;
   }else if (a == b) {
        return 0;
   }else {
        return -1;
   }
});
console.log(ar);   // [1, 2, 3, 3, 4, 5, 9]
  1. forEach(callback) 方法,可以遍历数组中的元素,它的参数是一个回调函数,这个回调函数主要用到的参数有两个:第一个参数是数组中的元素值,第二个参数是元素值对应的索引。
var arra = [1,2,3,4,5];
arra.forEach(function (ele, index) {
    console.log(ele + "-----" + index);
});

// 结果:
1-----0
2-----1
3-----2
4-----3
5-----4
  1. filter(callback): 返回满足函数测试的新数组,即返回的是数组中每一个符合条件的元素组成的新数组。
var arr00 = [10, 20, 30, 40, 50, 60, 70, 80, 90];
var newArray = arr00.filter(function (ele, index) {
    return ele > 40;
});
console.log(newArray); // [50, 60, 70, 80, 90]
  1. every(callback): 里面传入的是回调函数, 测试数组的所有元素是否都通过了指定函数的测试。这个函数中可以传入3个参数:
    • 第一个参数表示数组元素的值
    • 第二个参数表示数组中元素的索引的值
    • 第三个表示的调用every这个方法的数组的名字,一般情况下没用
      调用这个方法的返回值是 布尔类型 的。(前面两个方法的callback参数也是一样的含义。)
var arr = [1000, 2000, 3000];
var flag = arr.every(function (a, b, c) {
     return a > 2000;  // 只有数组中的所有元素的值都满足大于2000的条件时,才会返回true,否则就会返回false  .
});
console.log(flag); // false
  1. map(函数或者一个方法): 数组中的每个元素都要执行这个函数或者方法,把执行后的结果重新全部放在一个新的数组中返回。
var num=[1,4,9];
var roots=num.map(Math.sqrt);
console.log(roots); // [1, 2, 3]

5. 内置对象 — String

String---->字符串类型-------引用类型
string---->字符串类型-------基本类型

  1. 字符串的特性: 不可变性----字符串的值不能改变
var str0="李易峰是小蓝人";
str0="李易峰是小黄人";   //重新赋值
console.log(str0);  // 输出  李易峰是小黄人   。  指向发生改变

var str00="hello";
str00[1]='w';  //,字符串可以通过索引访问字符串中的某个值(某个字符),但是!!  只可以访问----只读, 不能更改
console.log(str00); // hello
  1. 字符类型: 单个的。 JS中没有字符类型。
    字符串类型: JS中无论是单引号还是双引号都是字符串, 字符串可以看成是一个字符数组。

    		var str="hello";
            for (var i=0;i<str.length;i++){
                console.log(str[i]);
            }
    
  2. 字符串常用方法

    1. String.charAt(索引); 返回字符串中某个索引处的字符,超出索引返回空。
    		var str1 = "asdfghjjklqwertyuiopzxcvbnm,.,x,mn";
            var result = str1.charAt(2);
            console.log(result); // d
    
    1. String.fromCharCode(数字值,…) 静态方法: 返回的是ASCII码对应的值
    		var str2 = String.fromCharCode(65,108,109);   //ASCII码表
            console.log(str2); // Alm
    
            var str3 = String.fromCharCode(83,79,83);
            console.log(str3); // SOS
    
    1. str.concat() :字符串拼接
    		var str4 = "xiaosu";
            console.log(str4.concat('喜欢','凤姐')); // xiaosu喜欢凤姐
            console.log(str4);  // xiaosu ,拼接产生一个新的字符串,原字符串是不会变的。
    
    1. str.indexOf() : 重要!!!!
    		var str5 = "李易峰真的是超级帅啊!";
            var index = str5.indexOf("帅");
            console.log(index);   // 8  返回的是要找的字符在原来的字符串中的索引位置
    
            var index2 = str5.indexOf("真的帅");
            console.log(index2);  //-1, 没找到
    
            var index3 = str5.indexOf("真的");
            console.log(index3);  // 3 返回第一个字符所在的索引
    
            var index4 = str5.indexOf("超级帅",3);   //从 index=3 的地方开始寻找
            console.log(index4); // 6
    
    1. str.lastIndexOf() 从后往前找,找不到返回-1。
    		var str6 = "hello amen";
            var index5 = str6.lastIndexOf("e");
            console.log(index5);  //8,  从后往前找,找到的是第一次找到的那个e,  但是这个e的索引还是从前往后排的
    
    1. str.replace()替换
    		var str7 = "小苏好帅哦,真的好勇敢哦";
            if (str7.indexOf("小苏") != -1){
                str7 = str7.replace("小苏","小样");   //重新赋值
            }else{
                console.log("不存在");
            }
            console.log(str7); // 小样好帅哦,真的好勇敢哦
    
    1. str.split(“用来分隔的字符串”,字符串切割后剩下的个数) 返回的是切割字符串数组
    		var str9 = "穆柔|乔峰|凤姐|梅超风|小苏|大蛇丸";
            var arr1 = str9.split("|");  //数组
            console.log(arr1); //  ["穆柔", "乔峰", "凤姐", "梅超风", "小苏", "大蛇丸"] 
            for (var i = 0; i < arr1.length; i++){
                console.log(arr1[i]);
            }
    
            var arr2 = str9.split("|",4);  //  返回4个
            console.log(arr2); // ["穆柔", "乔峰", "凤姐", "梅超风"]
            for (var j = 0; j < arr2.length; j++){
                console.log(arr2[j]);
            }
    
    1. str.substr(开始,长度) : 返回一个字符串中从指定位置开始到指定字符数的字符
    		var str10 = "哈哈,真的是没话说了";
            str10 = str10.substr(3);  //从索引为3的位置开始一直到最后
            console.log(str10);  //真的是没话说
            str10 = str10.substr(3,3);  // 从索引为3的位置开始,返回3个字符
            console.log(str10);  //没话说
    
    1. str.substring(开始,结束)
    		var str11 = "李易峰1987了";
            str11 = str11.substring(2,4);   //从2开始到4结束,但是不包括4的位置
            console.log(str11); // 峰1
    
    1. str.slice(开始的索引,结束的索引) : 前闭后开的 不包括结束的索引位置处的字符串。
    		var str8 = "假如生活欺骗了你,不要伤心,不要着急";
            stri = str8.slice(5,10);
            console.log(stri); // 骗了你,不
    
    1. str.toLocaleLowerCase()------英文字母转小写----str.toLowerCase()
    		var str12 = "HELLO";
            console.log(str12.toLowerCase()); // hello
            console.log(str12.toLocaleLowerCase()); // hello
    
    1. str.toLocaleUpperCase()------英文字母转大写----str.toUpperCase()
    		var str13 = "Hello";
            console.log(str13.toLocaleUpperCase()); // HELLO
    
    1. str.trim() : 去掉字符串首尾的空格, 中间的不能去掉, 其他的还有去掉左边的 有右边的等等方法,自己去查。
    		var str14 = "      李易峰真的是绝了    帅爆!     ";
            str14 = str14.trim();
            console.log("------"+str14+"-------"); // ------李易峰真的是绝了    帅爆!-------
    

注意区分截取字符串的三种方法: substr(开始索引,截取长度)、substring(开始索引,结束索引)、slice(开始索引,结束索引)。

  • substr()、slice()开始索引若是负的,要先加上字符串的长度然后再截取,如果加上字符串的长度后还是负数,则从0开始截取。若第一个参数大于字符串的长度或者第一个参数的值大于第二个参数的值,返回空字符串。
  • substring()第一个参数为负的,就从0开始。
  • str.substring(1, 10) == str.substring(10, 1)
    案例参考:https://www.cnblogs.com/wangyulue/p/7718532.html
    上面的这些内置对象的方法非常重要!!!一定要理解会写!!!公司面试手写代码经常会涉及到!!!
    字符串案例:
//案例1:从一个字符串中找到指定的字符并返回
        var str0 = "我的生物钟很奇怪,只要前一天晚上没喝酒或者过度疲劳,我都会在闹钟响铃前的五分钟自动醒来。";
        var key0 = "闹钟";  //或者可以使用prompt提醒用户输入需要截取的字符串
        var index0 = str0.indexOf(key0); // 先找到闹钟在字符串中的位置
        str0 = str0.substr(index0,2);   //  从找到的index位置开始,提取2个字符
        console.log(str0);
//案例2: 找到这个字符串中所有 o 出现的位置  :
        // indexOf  只能找到第一个,  应该是不停的找,直到把所有的o都找出来, ,找出来一个,应该从这个位置的下一个位置开始继续寻找下一个,需要用到循环
        var str1 = "hello wod odd ott fbo nhyo";
        var key1 = "o";  //要找的字符串
        var index1 = 0;  //开始的位置

        //要查找的字符串的长度可能是未知的,用while循环
        while((index1 = str1.indexOf(key1, index1)) != -1){  // 得到的这个索引值如果不是-1 就说明找到了。
            indexarr.push(index1);
            index1 += key1.length;  //这个地方如果要找的字符串是2个的时候,下次查找就应该是从这次找到的后面2个位置开始查找,即: 根据需要找到的字符串的长度的不同来设置
        }
        console.log(indexarr); // [4, 7, 10, 14, 20, 25]

//案例3: 找到一个字符串中每个字母出现了多少次,不区分大小写。
        //思路:   创建空对象-----使用键值对:  字母是键,次数是值----添加到对象中----遍历
        //补充:  判断一个对象中有没有这个属性的方法:   if(obj['属性名']){ 有这个属性 } else{ 没有没有这个属性 }
        var str2 = "whatOareYyouYnoYshaHleiHoHmyHgod";
        str2 = str2.toLocaleLowerCase();  // 第一步:  把所有的字母都变成小写
        var obj = {};  //第二步:创建一个新的空对象,  没有属性也没有方法  目的是:字母为键, 次数为值
        for (var i = 0; i < str2.length; i++){  // 第三步: 遍历字符串,  获取每个字母
            //判断obj这个对象中有没有这个字母
            var key=str2[i];  //每个字母
            if (obj[key]){  //obj中有这个键
                obj[key]++;
            }else {//obj中没有这个键也就是第一次出现,那就将这个键加到对象中,并且给他赋值为1,
                obj[key] = 1;
            }
        }
        //第四步:遍历对象,显示每个字母的个数
        for (var key in obj){
            console.log(key + "这个字母出现了" + obj[key]+"次");
        }

最后,说明一下基本包装类型

  • 普通变量不能直接调用属性或者方法,对象可以直接调用属性和方法。
  • 基本包装类型: 本身是基本类型,但是执行代码的过程中,如果这个类型的变量调用了属性或者方法,那么这种类型就不再是基本类型, 而是基本包装类型,这个变量也不是普通的变量了,而是基本包装类型对象。
  • string number boolean 基本类型,基本包装类型
    比如:
		var str = "hello";  //字符串类型
        str = str.replace('ll', 'hh');  //调用方法了,变成了基本包装类型
        console.log(str);

        var num = 10;  //数字类型
        console.log(num.toString());  //调用方法,将数字转换成了字符串,  变成了基本包装类型

再一个就是注意:
对象 && true------true
true && 对象------对象

		var flag = new Boolean(false);  // false是基本类型, 变成了基本包装类型
        var result = flag && true;  //前面是对象,  对象&&true  最终的结果就是后面的true,   但是实际上  false&&true的结果应该是false
        console.log(result);  //true

区分基本类型与基本包装类型:

        var num1 = 10;  //基本类型
        var num2 = Number("10");  // 注意: 这个只是数字类型的转换,  没有new  , 所以是基本类型
        var num3 = new Number("10");   //基本包装类型
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值