JavaScript面向对象（面向对象、面向过程、类与对象、对象的遍历、js内置对象）_javascript 类名遍历类对象

前言

两大编程思想（重要）

（1）面向过程
（2）面向对象

面向过程

面向过程就是分析出解决问题所需要的步骤，然后把这些步骤一步一步实现，使用的时候再一个一个依次调用。

即按照我们分析好的步骤，按照步骤解决问题。（更注重过程实现）

面向对象

面向对象就是把事务分解成为一个个对象，然后由对象之间分工合作。

面向对象是以对象功能来划分问题，而不是步骤。（关注对象的功能）

两大编程思想对比

（1）面向过程：

优点：性能比面向对象高，适合跟硬件联系很紧密的东西。

缺点：没有面向对象易维护、易复用、易拓展。
（2）面向对象：

优点：由于面向对象有封装、继承、多态性的特征，可以设计出低耦合的系统，使系统更加灵活，易于维护。

缺点：性能比面向过程低。

拓展：
在系统编程的过程中，应该尽量做到高内聚，低耦合。
内聚：模块内部结合的紧密程度
耦合：模块之间结合的紧密程度

面向对象

面向对象的特征

面向对象是一种思想，不是一种技术。

（1）封装性：对象是属性和行为的结合体。

（2）多态性：同一个消息被不同的对象接收后，产生的效果不一样。

（3）继承性：子类可以继承父类已有的属性或方法（函数）。父类中有的有的信息，子类就可以不用定义，直接继承过来。

类

什么是类？

类抽象了对象的公共部分，泛指某一大类；

它是具有相同属性和行为的对象的集合。

类的创建

（1）构造函数法（ES5语法规范）

function 构造函数([参数]){
    函数体语句
}
//"构造函数名"就是类名，即构造函数名与类名相同，构造函数只能通过new运算符调用。
1
2
3
4

例如：

function Person(name,age){
    this.name=name;
    this.age=age;
}
//调用
var p1=new Person("小文",18)
console.log("姓名："+p1.name)      //姓名：小文
console.log("年龄："+p1.age)       //年龄：18
1
2
3
4
5
6
7
8

（2）class关键字（ES6语法规范）

class 类名{          //定义类
    constructor([参数]){     //构造函数
        语句
    }
}
1
2
3
4
5

"类名"是一个用户标识符，建议首字母大写。

构造函数：在ES6中使用constructor（）来定义构造函数，作用是初始化对象的属性（成员变量）

例如：

class Person{          //定义类
    constructor(name,age){
        this.name=name
        this.age=age
    }
}
//调用
var p1=new Person("小文",18)
console.log("姓名："+p1.name)
1
2
3
4
5
6
7
8
9

对象

什么是对象？

对象特指某一个，通过类实例化一个具体的对象；

它是类的实例。

对象的创建

（1）空对象

var 对象名={}
1

var 对象名=new Object()
1

（2）非空对象

var 对象名={
    属性
    行为（函数）
}
1
2
3
4

例如：

var p1={            //非空对象
    color:'黑色',    //属性
    weight:'188g',    //g为特殊字符，表示的时候可以用字符串
    screenSize:6.5,
    call:function(name){     //方法
        console.log("打电话给："+name)
    },
    playMusic:function(){
        console.log("播放音乐")
    }
}

//调用
console.log("手机颜色："+p1.color)    
p1.call('小文')
p1.playMusic()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

（3）使用构造函数创建对象
例如：

//构造函数创建对象，使用非常灵活
function Student(name,sex,age){   
    this.name=name
    this.sex=sex
    this.age=age
    
    this.show=function(){
        console.log("姓名："+this.name)
        console.log("性别："+this.sex)
        console.log("年龄："+this.age)
    }
}

var s1=new Student('小文','女',18)   
s1.show()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

遍历对象

遍历对象的属性和方法：使用for…in循环

in 运算符：判断成员属性属性是否存在，存在返回true,不存在false

for(var 变量名 in 对象名){
    循环语句
}
1
2
3

例如：

function Student(name,sex,age){   
    this.name=name
    this.sex=sex
    this.age=age
    
    this.show=function(){
        console.log("姓名："+this.name)
        console.log("性别："+this.sex)
        console.log("年龄："+this.age)
    }
}

var s1=new Student('小文','女',18)   
for(var k in s1){
    console.log(k)
}

 console.log('age' in s1)     //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

JavaScript内置对象

Math对象

在编程过程中，可直接使用JavaScript内置对象，让代码更简便。

（1）Math.PI:算术常量π

（2）Math.abs(x)：返回x的绝对值

（3）Math.max(a,b,c…):返回所有参数中的最大值

（4）Math.min(a,b,c…):返回所有参数中的最小值

（5）Math.pow(x,y)：返回x的y次方

（6）Math.sqrt(x)：返回x的算术平方根

（7）Math.random()：返回0.0到1.0之间的随机数

（8）Math.round(x)：返回最接近x的整数

（9）Math.floor(x)：返回一个小于等于x,并且与它最接近的整数

（10）Math.ceil(x)：返回一个大于等于x,并且与它最接近的整数

例如：

console.log(Math.PI)     //输出π
console.log(Math.abs(-15))      //绝对值
console.log(Math.max(12,5))  //返回所有参数中的最大值(不能找数组中的最大值)
console.log(Math.min(12,3,5))    //返回最小值
console.log(Math.pow(2,10))    //Math.pow(x,y)  返回x的y次方
console.log(Math.sqrt(2))       //Math.sqrt(x)   返回x的算术平方根
console.log(Math.random())  // Math.random()  返回0.0-1.0的随机数
console.log(Math.round(Math.random()))    //Math.round()   返回最接近x的整数
console.log(Math.floor(Math.random()*8))    //Math.floor()  返回一个小于等于x,并与他最接近的整数
console.log(Math.ceil(Math.random()*8))     //Math.ceil()  返回一个大于等于x，并且与它最接近的整数
1
2
3
4
5
6
7
8
9
10

日期对象

（1）getYear()：指定Date对象date的年份字段减去1900

（2）getFullYear()：获取Date对象的年份

（3）getMonth( )：获取Date对象的月份(返回值在0(一月)到11(十二月)之间。)

（4）getDate( )：获取Date对象的日期(一月中的某一天(1-31之间的整数))

（5）getDay()：获取一周中的某一天(星期几)

（6）getHours( )：获取Date对象的小时数(0~23之间的整数)

（7）getMinutes( )：获取Date对象的分钟数

（8）getSeconds( )：获取Date对象的秒钟数

（9）getTime( )：表示Date对象距离1970年1月1日午夜(GMT时间)之间的毫秒数

（10）toLocaleDateString( )：将Date对象转换成本地的日期格式

（11）toLocaleString( )：将Date对象转换成本地的日期时间格式

例如：

//创建一个Date对象，没有参数
var date1=new Date()
console.log(date1)
console.log(date1.getTime())        //输出结果为毫秒数
console.log(date1.toLocaleDateString())
console.log(date1.toLocaleString())

//传入年、月、日、时分秒，创建一个指定日期世界的Date对象，月份数字是0-11
var date2 = new Date(2021,4,22,10,17,45)
console.log(date2)

//传入日期和时间字符串，创建一个Date对象
var date3=new Date("2021-6-8")
console.log(date3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

数组对象

（1）判断数组对象的方法

• isArray(对象名)

• instanceof：对象名 instanceof Array

var arr = []     //数组
var obj = {}     //对象
console.log(Array.isArray(arr))
console.log(Array.isArray(obj))    //obj不是数组，所以输出false

console.log(arr instanceof Array)
console.log(obj instanceof Array)
1
2
3
4
5
6
7

（2）数组添加或删除数据

例如：

arr.push(12)
arr.push(22)
arr.push(33,44,55)
console.log(arr)

arr.unshift(200)   //添加元素
console.log(arr)

arr.pop()     //删除最后一个元素
console.log(arr)

arr.shift()     //删除第一个元素
console.log(arr)
1
2
3
4
5
6
7
8
9
10
11
12
13

（4）数组元素排序

（5）数组索引

例如：

var arr=[12,5,23,12,15,5,15]
console.log(arr.indexOf(12))      //0

console.log(arr.lastIndexOf(12))    //3
1
2
3
4

（6）数组转为字符串

例如：

var arr=[100,12,5,33,8,4]
console.log(arr.toString())

var str=''
str=arr.join('-')
console.log(str)
1
2
3
4
5
6

（7）其他方法

字符串对象

（1）根据字符返回位置

注：可以利用该用法判断字符串是否存在。

具体方法：如果 indexOf(字符串)!==-1 那么字符串存在。

例如：

要求用户输入3~7位数的账户名，并且不能出现admit的任何大小写形式，否则违规输入。

var str=prompt("请输入你的账户：")
if(str.length<3||str.length>7){
    console.log("请输入3~7位数的账户")
}else{
    if(str.toLowerCase().indexOf('admit')!==-1){
        console.log("违规输入")
    }else{
        console.log("输入正确")
    }
}
1
2
3
4
5
6
7
8
9
10

（2）根据位置返回字符

var str=new String('ABCDE')
console.log(str.charCodeAt(0))    //65

console.log(str.charAt(0))    //A

console.log(str[0])     //A

1
2
3
4
5
6
7

（3）字符串操作方法

补充：
String.fromCharCode():将ASCII码值转化为字母

String.charCodeAt()：将字母转化为ASCII码值

更多面向对象知识，敬请期待下一期精彩内容。