【前端学习笔记】day24:JavaScript-内置对象

390 阅读10分钟

1. 内置对象

JavaScript中的对象分为三种:自定义对象、内置对象、浏览器对象

前面两种对象是js基础内容,属于ECMAScript;第三个对象属于我们JavaScript独有的 JSAPI时学习

内置对象就是指js语言自带的一些对象,这些对象拱开发者使用,并提供了一些常用的或是最基本的而必要的功能(属性和方法) 内置对象:Math Date Array String等

2. 查文档

2.1. MDN

学习一个内置对象的使用,只要学会其常用成员的使用几个,我们可以通过查文档学习,可以通过MDN /W3C来查询

Mozilla开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括HTML、css和万维网及HTML5应用的API

2.2. 如何学习对象中的方法

(1)查阅该方法的功能

(2)查看里面参数的意义和类型

(3)查看返回值的意义和类型

(4)通过demo进行测试

3. Math对象

3.1. Math三个取整方法

// 三个取整方法
        // 向下取整   往小了取
        console.log(Math.floor(-1.1));

        // 向上取整    往大了取
        console.log(Math.ceil(-1.6));

        // 四舍五入    其他数字都是四舍五入,但是.5特殊,它往大了取
        console.log(Math.round(-1.4));    //-1
        console.log(Math.round(-1.5));    //-1
        console.log(Math.round(-2.5));    //-2
        console.log(Math.round(5.5));     //6
        console.log(Math.round(-1.6));    //-2

3.1. Math.random()

Math对象随机数方法 random()返回一个随机的小数 0=<x<1 这个方法里面不跟参数

 // 我们想要得到两个数之间的随机整数,并且包含这两个整数
        // Math.floor(Math.random()*(max-min+1))+min;
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
        console.log(getRandom(1,10));

        // 随机点名
        var arr=['张三','李四','王五','孙六','赵七'];
        console.log(arr[getRandom(0,arr.length-1)]);

4. 日期对象

4.1. 使用日期对象

Date()日期对象是一个构造函数 必须使用new来调用创建我们的日期对象

        var date=new Date();
        console.log(date);
        // 如果没有参数,返回当前系统的当前时间
        // 参数常用的写法 数字型:2019,10,01 或者是字符串型 '2019-10-1 9:8:8'
        var date1=new Date(2021,11,5);
        console.log(date1);    //返回的是十二月 Dec
        var date2=new Date('2021-11-5 11:43:34');
        console.log(date2);

4.2. 日期格式化

我们想要得到2019-8-8 8:8:8 格式的日期,该怎么办 需要获取日期指定的部分,所以我们要动手得到这种格式

(图:日期格式化)

// 格式化日期年月日

        var date = new Date();
        console.log(date.getFullYear()); //返回当前日期的年
        console.log(date.getMonth()+1);    //返回的月份小一个月   记得月份加1
        console.log(date.getDate());       //返回的是几号
        console.log(date.getDay());     //周一返回的是1,周六返回的是6   但是周日返回的是0
        //我们写一个2021年11月5日 星期五
        var year =date.getFullYear();
        var month=date.getMonth()+1;
        var dates=date.getDate();
        var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day=date.getDay();
        console.log('今天是'+year+'年'+month+'月'+dates+'日'+arr[day]);

// 要求封装一个函数返回当前的时分秒 格式:08:08:08

        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());

4.3. 获取日期的总的毫秒形式

Date对象是基于1970年1月1日(世界标准时间)起的毫秒数 我们经常利用总的毫秒数来计算时间,因为它更精确

    // 获得date的总的毫秒数(时间戳),不是当前时间的毫秒数,而是距离1970年1月1日过了多少毫秒
        // 通过valueOf()
        // 通过getTime()
        var date=new Date();
        console.log(date.valueOf());
        console.log(date.getTime());

        // 简单的写法(最常用的写法)
        var date1=+new Date();    //返回的就是总的毫秒数
        console.log(date1);

        //H5新增的获得总的毫秒数的方法
        console.log(Date.now());

5. 数组对象

5.1. 数组对象的创建

创建数组的两种方式:

  • 字面量方式
  • new Array()

// 利用字面量创建数组

        var arr=[1,2,3];
        console.log(arr[2]);

        // 利用new Array()
        var arr1=new Array();    //创建了一个空的数组
        var arr1=new Array(2);   //这个2表示数组的 长度为2,里面有2个空的数组元素
        var arr1=new Array(1,2); //等价于[1,2] 这样写表示里面有两个数组元素1,2
        console.log(arr1);       

5.2. 检测是否为数组

// 检测是否为数组
        // (1)instanceof   运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);

        // (2) Array.isArray(参数);
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

5.3. 添加删除数组元素的方法

(图:添加删除数组元素的方法)

        // 1.push() 可以在我们数组的末尾添加一个或多个数组元素 push 推
        var arr=[1,2,3];
        arr.push(4,'海绵宝宝');
        console.log(arr);
        // 注意:
        // push可以给数组追加新的元素
        // push 小括号里参数直接写数组元素就可以了
        // push完毕后,返回的结果是新数组的长度
        // 原数组也会发生变化

        // 2. unshift   可以在我们数组的开头 添加一个或多个数组元素
        arr.unshift('开头','second');
        console.log(arr);
        // 注意:
        // unshift可以在数组的前面追加新的元素
        // unshift()参数直接写数组元素就可以了
        // unshift完毕后,返回的结果是新数组的长度
        // 原数组也会发生变化

        // 3.pop()它可以删除数组的最后一个参数
        arr.pop();
        console.log(arr.pop());
        console.log(arr);
        // 注意:
        // pop是可以删除数组的最后一个元素,记住一次只能删除一个元素
        // pop()是没有参数的
        // pop()完毕之后返回的是删除的那个元素
        // 原数组也会发生变化

        // 4.shift() 它可以删除数组的第一个元素
        console.log(arr.shift());
        console.log(arr);
        // 注意:
        // pop是可以删除数组的第一个元素,记住一次只能删除一个元素
        // pop()是没有参数的
        // pop()完毕之后返回的是删除的那个元素
        // 原数组也会发生变化

5.4. 数组排序

 // 数组排序
        // 翻转数组
        var arr = [1, 2, 3];
        arr.reverse();
        console.log(arr);

        // 数组排序(冒泡排序)
        var arr1 = [3, 2, 41, 653, 28, 3, 1];
        arr1.sort(function (a, b) {
            // return a - b; //按照升序的顺序排列
            return b - a; //按照降序的顺序排列
        });
        console.log(arr1);

5.5. 数组索引方法

(图:数组索引方法)

        // 返回数组元素索引号方法:indexOf(数组元素)   作用就是返回该数组元素的索引号
        // 它只返回第一个满足条件的索引号
        // 它如果在该数组里面找不到该元素,则返回的是-1
        var arr=[1,2,34,4,6,'海绵宝宝'];
        console.log(arr.indexOf('海绵宝宝'));
        console.log(arr.indexOf('派大星'));

        // 返回数组元素索引号方法:lastIndexOf(数组元素)   作用就是从后面开始查找 返回该数组元素的索引号

        console.log(arr.lastIndexOf('海绵宝宝'));
        console.log(arr.lastIndexOf('派大星'));

5.6. 数组转化为字符串

(图:数组转换为字符串)

// 数组转换为字符串
        // toString()
        var arr=[1,2,3];
        console.log(arr.toString());   //1,2,3

        // join(分隔符)
        var arr1=['green','blue','yellow','red'];
        console.log(arr1.join());
        console.log(arr1.join('-'));
        console.log(arr1.join('&'));

6. 字符串对象

6.1. 基本包装类型

为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String、Number、Boolean

基本包装类型就是把简单数据类型包装称为复杂数据类型,这样基本数据类型就有了属性和方法

例如:

        var str='海绵宝宝';
        console.log(str.length);
        // 对象才有属性和方法 复杂数据类型才有属性和方法
        // 简单数据类型为什么会有length属性呢
        // 基本包装类型:就是把简单数据类型包装成为了复杂数据类型
        // 以上两句代码相当于:
        var temp=new String('海绵宝宝');
        str=temp;
        temp=null;

6.2. 字符串的不可变

指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中开辟了一个新的内存空间

6.3. 根据字符返回位置

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成后会返回一个新的字符串

(图:根据字符返回位置)

 // 根据字符返回位置   str.indexOf('要查找的字符',[起始的位置])
        var str='改革春风吹满地,吹吹牛皮';
        console.log(str.indexOf('吹'));     //4
        console.log(str.indexOf('吹',5));   //8

6.4. 根据位置返回字符(重点)

        // 根据位置返回字符
        // (1)charAt(index)根据位置返回字符
        var str='海绵宝宝';
        console.log(str.charAt(1));

        // 遍历所有的字符
        for (var i=0;i<str.length;i++){
            console.log(str.charAt(i));    
        }
        // (2)charCodeAt(index)   返回相应索引号的字符ASCII值 目的:判断用户按下了哪个键
        console.log(str.charCodeAt(0));

        // (3)str[index]  H5新增
        console.log(str[0]);

6.5. 字符串操作方法(重点)

(图:字符串的操作方法)

        // (1)concat('字符串1','字符串2'...)
        var str='海绵宝宝';
        console.log(str.concat('派大星'));
        // (2)substr('截取的起始位置','截取几个字符')
        var str1='改革春风吹满面';
        console.log(str1.substr(2,2));    //第一个2是索引号的2 从第几个开始 第二个2是取几个字符

6.6. 其他方法

        // (1)替换字符 replace('被替换的字符','替换为的字符')    它只会替换第一个字符
        var str='海绵宝宝派大星';
        console.log(str.replace('派大星','章鱼哥'));

        // 有一个字符串'heigognrogirtgnhgduhgiorgyhruhnvgaofjndioghgoiahigyhohgaojjgfoi',要求吧里面所有的g替换为*
        var str1='heigognrogirtgnhgduhgiorgyhruhnvgaofjndioghgoiahigyhohgaojjgfoi';
        while (str1.indexOf('g')!==-1){
            str1=str1.replace('g','*')
        }
        console.log(str1);

        // (2)字符替换为数组 split('分隔符')    前面我们学过join把数组转换为字符串
        var str2='red,blue,green,yellow,pink';
        console.log(str2.split(','));

7. 简单类型和复杂类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型

值类型:简单数据类型/基本数据类型,在存储变量中存储的是值本身,因此叫做值类型

string number boolean undefined null

引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型,通过new关键字创建的对象(系统对象、自定义对象),如Object Array Date等

8. 堆和栈

堆栈空间分配区别: 栈(操作系统):由操作系统自动分配释放存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈; 简单数据类型存放到栈里面

堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。 复杂数据类型存放到堆里面

注意:JavaScript中没有堆栈的概念,通过堆栈的方式可以更容易理解代码的执行方式

9. 简单类型的内存分配

值类型:(简单数据类型)string number boolean undefined null

值类型变量的数据直接存放在变量(栈空间)中 里面直接开辟一个空间,存放的是值

10. 简单类型传参

函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传递给函数的形参时,其实是把变量在栈里面的值复制了一份给形参,那么在方法内部对形参做任何改变,都不会影响到外部变量

function fn(a){
        a++;
        console.log(a);
}
var x=120;
fn(x);
console.log(x)
//11 10

11. 复杂类型传参

// 复杂数据类型传参
        function Person(name){     //x=p
            this.name=name;        //2.这个输出什么   刘德华
        }
        function f1(x){
            console.log(x.name);   //3.这个输出什么   张学友
            x.name='张学友';
            console.log(x.name);
        }
        var p=new Person('刘德华');
        console.log(p.name);       //1.这个输出什么   刘德华
        f1(p);
        console.log(p.name);       //4.这个输出什么   张学友

函数的形参也可以看做是一个变量,当我们把引用类型变量传递给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参实际上保存的是同一个堆地址,所以操作的是同一个对象