JavaScript基础——05（对象）

最新推荐文章于 2023-03-22 22:45:12 发布

Galaksen

最新推荐文章于 2023-03-22 22:45:12 发布

阅读量275

点赞数

分类专栏：学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41857060/article/details/97051973

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

6.基本包装类型：string number boolean

编程思想：

面向过程：所有的事情都是亲力亲为，注重的是过程
面向对象：提出需求，找对象，对象解决，注重的是结果

面向对象的特性：封装、继承、多态

封装：就是包装，把一些重用的内容进行包装，在需要的时候，直接使用。【把一个值，存放在一个变量中；把一些重用的代码放在函数中；一些功能类似的函数(方法)放在一个对象中；一系列的属性放在一个对象中；好多相类似的对象放在一个js文件中】
继承：类与类之间的关系，js中没有类的概念。js中有构造函数的概念，是可以有继承的（基于原型）
多态：同一个行为，针对不同的对象，产生了不同的效果

JavaScript不是面向对象的语言，但是可以模拟面向对象的思想【即特性：封装、继承、多态】，是一门基于对象的语言，来模拟面向对象。

1.对象定义

对象：有特征和行为，具体特指某个事物。

JavaScript的对象是无序属性的集合，其属性值可以是任何类型：数组、函数、基本数据类型、对象。

对象是包含变量的变量，值按照name : value的形式编写

如：var person = {firstName:"Bill",lastName:"Gates", age:62, eyeColor:"blue",

fullName:function() { return this.firstName + " " + this.lastName; }

};

事物的特征在对象中用属性来表示。

事物的行为在对象中用方法来表示。

2.创建对象

2.1 调用系统的构造函数创建对象

var 变量名=new Object();【Object()是系统的构造函数】

2.2 自定义构造函数创建对象

instanceof ：判断某个变量是否是某个对象的实例，结果为boolean类型：true/false

先工厂模式创建对象为切入点：

如何一次性创建多个对象:把创建对象的代码封装在一个函数中

接下来是自定义构造函数创建对象：先自定义构造函数，然后创建对象

函数和构造函数的区别：构造函数首字母大写

当new Person("Tom",12)时：实例化一个对象的同时，对属性进行初始化

在内存中申请一块空闲的空间,存储创建的新的对象
把this设置为当前的对象
设置对象的属性及方法的值
把this这个对象返回

工厂模式和自定义构造函数的区别：

共同点:都是函数，都可以创建对象，都可以传入参数

不同点：
工厂模式:函数名是驼峰命名法，有new，有返回值（当前的对象），new之后的对象是当前的对象，直接调用函数就可以创建对象

自定义构造函数:函数名首字母大写，没有new，没有返回值，this是当前的对象，通过new的方式来创建对象

2.3 字面量的方式创建对象

缺陷：一次性的对象

除了利用点语法【对象.名字】获取、设置（修改）属性，还可以通过另一种方式：对象["名字"]

obj.name="Cindy";与obj["name"]="Cindy";等价

obj.show();与obj["show"]();等价

附：JavaScript是一门动态类型的语言:
1. 代码(变量)只有执行到的时候，才知道这个变量中到底存储的是什么，如果是对象就有对象的属性和方法，如果是变量就是变量的作用
2. 对象没有什么，通过点语法，就可以为对象添加属性或者方法

3.JSON格式的数据及遍历

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

JSON格式的数据:一般都是成对的，是键值对

JSON也是一个对象，数据都是成对的，一般JSON格式的数据无论是键还是值都是用双引号括起来的

并不是只有JSON格式的才可以遍历，只要是对象，都可以通过这种方法遍历

4.简单类型和复杂类型

1.原始的数据类型：number，string，boolean，undefined，null，object

2.基本类型(简单类型/值类型)：number，string，boolean

3.复杂类型(引用类型)：object

4.空类型：undefined，null

值类型的值在栈中存储；引用类型的值对象在堆上存储，地址（引用）在栈上存储

值类型和引用类型传递：

值类型之间传递，传递的是值；引用类型之间传递，传递的是地址(引用)

所以值类型作为函数的参数，传递的是值；引用类型作为函数的参数，传递的是地址(引用)

5.内置对象

更多请查阅：MDN Web 文档

js中三种对象:

内置对象---js系统自带的对象【Math、Date、String、Array、Object】
自定义对象---自己定义的构造函数创建的对象【比如上文的Person】
浏览器对象---BOM

实例对象：通过构造函数（系统自带的或自定义的）创建出来，实例化的对象
静态对象：不需要创建，直接就是一个对象，方法(静态方法)直接通过这个对象名字调用
实例方法：必须要通过new的方式创建的对象(实例对象)来调用的方法
静态方法：必须通过大写的对象名字调用

5.1 Math对象

Math的所有属性和方法都是静态的

Math.PI----π
Math.E----自然对数的底数（或称为基数），e，约等于 2.718
Math.abs()-----绝对值
Math.ceil()----向上取整
Math.floor()----向下取整
Math.round(x)----x 四舍五入为最接近的整数
Math.pow(x, y)----x 的 y 次幂
Math.sqrt(x)----x 的平方根
Math.random() ----介于 0（包括）与 1（不包括）之间的随机数
 Math.abs(-2);//2

 Math.abs(null);//0

//传入一个非数字形式的字符串或者 undefined/empty 变量，将返回 NaN
 Math.abs("string");//NaN 

 Math.abs(undefined);//NaN 

 Math.abs();//NaN 

 Math.ceil(12.3);//13

 Math.ceil(12.92);//13
 
 Math.random();//[0,1)浮点数

 Math.random() * 10;//[0,10)随机数

 Math.floor(Math.random() * 10);//[0,10)随机整数

 Math.floor(Math.random() * 10) + 1; //[1,11)随机整数
//案例1：自己定义一个对象,实现系统的max的方法
function MyMath() {
//添加了一个方法
this.getMax=function () {
//所有数字中的最大值
var max=arguments[0];
for(var i=0;i<arguments.length;i++){
if(max<arguments[i]){
max=arguments[i];
}
}
return max;
};
}

//实例对象
var m=new MyMath();
var result=m.getMax(10,20,30,40,100,3);
console.log(result);//100

//案例2：产生随机的十六进制颜色值

5.2 Date对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

new Date()//用当前日期和时间创建新的日期对象
new Date(year, month, day, hours, minutes, seconds, milliseconds)//用指定日期和时间创建新的日期对象;7个数字分别指定年、月、日、小时、分钟、秒、毫秒
new Date(milliseconds)//创建一个零时（January 1, 1970, 00:00:00 Universal Time）加毫秒的新日期对象
new Date(dateString)//从日期字符串创建一个新的日期对象

5.2.1 日期格式化

5.2.2 日期显示

1.无论输入格式如何，JavaScript（默认情况下）将以全文本字符串格式输出日期：Wed Mar 25 2015 08:00:00 GMT+0800 (中国标准时间)

2.在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串：

var d = new Date();

document.getElementById("demo").innerHTML = d;//Sun Jul 28 2019 23:10:33 GMT+0800 (中国标准时间)

等价于：document.getElementById("demo").innerHTML = d.toString();

3.toUTCString() 方法将日期转换为 UTC 字符串（日期显示标准）：Sun, 28 Jul 2019 15:11:56 GMT

4.toDateString() 方法将日期转换为日期字符串：Sun Jul 28 2019

5.2.3 日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）；一周的第一天是“星期日”:0
getFullYear()	以四位数字形式返回日期年份
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）；1月：0，12月：11；要获得正确的月份，+1
getSeconds()	获取秒（0-59）
getTime()	返回自 1970 年 1 月 1 日以来的毫秒数

UTC 日期方法用于处理 UTC 日期（通用时区日期，Univeral Time Zone dates：1970年1月1日0时0分0秒）：比如getUTCDate()，以此类推

5.3 String对象

在js中字符串可以使用单引号也可以使用双引号
字符串可以看成是字符组成的数组，可以通过for循环进行遍历，但是js中没有字符类型(char)
字符串特性：不可变性，字符串的值是不能改变
字符串对象的常用方法：

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

* .length：字符串的长度
* .charAt(index)：index:0~length-1；未提供index，chatAt()将使用0；返回值是指定索引位置的字符串，超出索引，结果是空字符串
* .fromCharCode(num1[, ...[, numN]])：是String的静态方法，应这样使用：String.fromCharCode()；返回的是ASCII码对应的值，是一个字符串
* .concat(字符串1,字符串2,...)：返回的是拼接之后的新的字符串
* .indexOf(要找的字符串,从某个位置开始的索引)：第2个参数没有时默认0；返回的是这个字符串的索引值，找不到则返回-1
* .lastIndexOf(要找的字符串,从某个位置开始的索引)：第2个参数没有时默认length-1；从后向前找，返回的是这个字符串的索引值，找不到则返回-1
* .replace("原来的字符串","新的字符串")：用来替换字符串的，返回替换后的字符串
* .slice(开始的索引,结束的索引)：返回裁剪的字符串【左闭右开】
* .split("要切割的字符串",切割后留下的个数)：根据"要切割的字符串"，把一个字符串分割成字符串数组
* .substr(开始的位置,长度)：长度不写时，直接到末尾；返回截取的字符串
* .substring(开始的索引,结束的索引)：返回截取的字符串【左闭右开】
* .to(Locale)LowerCase()：转小写
* .to(Locale)UpperCase()：转大写
* .trim()：去掉字符串两端的空格

    //选择方法，按住ctrl，左键，就可以查看该方法的具体信息
        var str = "hello";
        console.log(str.length);//5
        console.log(str.charAt(4));//o
        console.log(str.charCodeAt(2));//108 返回的是索引位置的字符串的Unicode码
        console.log(str.toLocaleUpperCase());//HELLO

        var str1 = String.fromCharCode(107, 108, 109);
        console.log(str1);//klm

        var str2 = "1";
        console.log(str2.concat("2", "3"));//123

        var str3 = "hello word";
        console.log(str3.indexOf("l", 3));//3
        console.log(str3.lastIndexOf("l", 2));//2
        console.log(str3.replace("h","H"));//Hello word
        console.log(str3.slice(0,5));//hello

        var str4="hello|hi|welcome|so|what";
        console.log(str4.split("|"));//["hello", "hi", "welcome", "so", "what"]
        var arr=str4.split("|",2);
        console.log(arr);//["hello", "hi"] 只留下两个
        for (var i=0;i<arr.length;i++) {
            console.log(arr[i]);//hello hi
        }
        console.log(str4.substr(1,4));//ello
        console.log(str4.substring(0,5));//hello

5.4 Array对象

详见：JavaScript基础——03（数组）

补充：Array.isArray()---用于确定传递的值是否是一个数组

//对象是不是数组类型:两种方法
var obj={};
1.instanceof
console.log(obj instanceof Array);//false
2.Array.isArray
console.log(Array.isArray(obj));//false

6.基本包装类型：string number boolean

基本包装类型：本身是基本类型，但在执行代码的过程中，如果这种类型的变量调用了属性或者是方法，那么这种类型就不再是基本类型，而是基本包装类型，这个变量也不是普通的变量了，而是基本包装类型对象。

注意：

var num=10;//基本类型

var num2=Number(10);//基本类型，没有new，只是类型转换

var num3=new Number(10);//基本包装类型

Galaksen

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——05（对象）

目录1.对象定义2.创建对象2.1 调用系统的构造函数创建对象2.2 自定义构造函数创建对象2.3 字面量的方式创建对象3.JSON格式的数据及遍历4.简单类型和复杂类型5.内置对象5.1 Math对象5.2 Date对象5.2.1 日期格式化5.2.2 日期显示5.2.3 日期获取方法5.3 String对象5.4Array对象6...
复制链接

扫一扫