JavaScript的对象、属性与方法

目录

一、JavaScript的预解析

二 、JavaScript的对象（面向对象编程）

1.对象：是一种数据类型。是属性和方法的集合

（1）属性：是对象的静态特征

（2）方法（函数）：是对象的动态特征（行为）

2.面向对象编程

3.对象的定义

4.创建空对象

(1)通过字面量"{}"创建

(2)通过new Object()创建

三、JavaScript的内置对象

1.Math对象：数学对象

（1）常用属性

（2）常用方法

练习1：定义一个二维数组，数组元素随机生成，找出此二维数组中每行元素的最大值

练习2：求半径为5.5的圆的面积，保留小数点后三位

2.Date对象：日期对象

（1）创建Date对象

（2）Date对象的get方法

练习1：端午节倒计时

练习2：三天打鱼，两天晒网。假设2008年8月8日打鱼

3.Array对象：数组对象

（1）常用属性：length表示数组长度

（2）常用方法

数组类型检测方法

四、几种迭代语句

1.for语句

2.for ... in语句：可以枚举对象的属性

3.for ... of语句：可以遍历对象的元素

五、String对象

1.创建方式：

(1)通过字面量创建

(2)通过new String()创建

2.属性：length  表示字符串的长度

3.方法

(1)根据字符返回位置

(2)根据位置返回字符

(3)截取子串

(4)大小写转换

(5)字符串分割

(6)判断字符串的起始子串和结尾子串

(7)字符串的替换

(8)去除空格

(9)获取字符串对象的原始值

六、值类型和引用类型

1.值类型

2.引用类型

注意：

七、JavaScript面向对象编程

1.面向过程

2.面向对象

优点：  

3.面向对象的特征

4.ESMAScript6(即ES6--ESMAScript2015)的面向对象的语法

(1)类：具有相同属性和行为的对象的集合

(2)对象：是类的实例化,是类的具体体现

(4)创建对象

练习1:定义学生类(Student)

练习2：创建一个电脑类(Computer)

练习3：创建类Temperature

---

一、JavaScript的预解析

JavaScript解析器解析JavaScript代码时，会提前解析var声明的变量和function定义的函数，然后再执行其他代码。

提前解析var声明的变量：是对var变量的作用域的提升

二 、JavaScript的对象（面向对象编程）

1.对象：是一种数据类型。是属性和方法的集合

（1）属性：是对象的静态特征

对象名.属性名

（2）方法（函数）：是对象的动态特征（行为）

对象名.方法名（[参数]）

2.面向对象编程：

面向对象是一种工程的思想

3.对象的定义

通常是通过字面量“{}”进行定义，“{}”中包裹的是对象的成员（属性和方法），每个成员都是以“key：value”（键值对）方式存放，成员与成员之间用“，”分隔

var obj = {
    name : '张三',
    Sex : '男',
    Age : 24,
    call:function(name){
        console.log('给' + name + '打电话')
    },
    sendMessage:function(name){
        console.log('给' + name + '发信息')
    }
}
console.log(obj)
console.log('姓名：'+obj.name)
obj.call()
obj.sendMessage(obj.name)

4.创建空对象

(1)通过字面量"{}"创建

(2)通过new Object()创建

三、JavaScript的内置对象

1.Math对象：数学对象

进行与数学相关的运算，不需要实例比（不用new运算符创建Math对象）。可以用Math直接访问其静态方法

（1）常用属性

Math.PI	表示圆周率
Math.E	自然对数的底数(基数)

（2）常用方法

Math.abs(x)	返回x的绝对值
Math.ceil(x)	函数返回大于或等于一个给定数字的最小整数
Math.floor(x)	返回小于或等于一个给定数字的最大整数
Math.max()	返回一组数中的最大值
Math.min()	返回一组数中的最小值
Math.pow(x,y)	返回x的y次方
Math.random()	函数返回一个浮点数,  伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1）
Math.round(x)	函数返回一个数字四舍五入后最接近的整数
Math.sqrt()	函数返回一个数的平方根
Math.sign()	函数返回一个数字的符号, 指示数字是正数，负数还是零 -1：表示负数 1：表示正数 0：表示0

let arr = [12,25,2,46,33]

let max = Math.max(...arr)// ‘...’表示历遍数组中的每一个元素

练习1：定义一个二维数组，数组元素随机生成，找出此二维数组中每行元素的最大值

let arr = new Array(
    new Array(4),
    new Array(4),
    new Array(4)
)
for(let i=0;i

练习2：求半径为5.5的圆的面积，保留小数点后三位

function getArea(radius){
    return Math.PI*Math.pow(radius,2)
}
let area = getArea(5.5)
area = Math.floor(area*1000)/1000
console.log("圆面积："+area)

ps：object对象是JavaScript中所有内置对象的父对象（即内置对象是从object继承而来）

2.Date对象：日期对象

需要通过new Date()创建实例化一个对象，然后才能使用

（1）创建Date对象

new Date()	创建一个代表当前日期的对象
new Date(年,月,日,时,分,秒)	月份值在0-11之间
new Date(毫秒数)	给定毫秒数创建日期对象
new Date(日期字符串)	通过给定字符串创建一个日期对象

（2）Date对象的get方法

getFullYear()	获取日期对象的四位年份
getMonth()	获取日期对象月份（0表示一年中的第一月）
getDate()	返回一个指定的日期对象为一个月中的哪一日（从1--31）
getDay()	日期中一周的第几天，0 表示星期天
getHours()	获取日期对象的小时数
getMinutes()	获取日期对象的分钟数
getSeconds()	获取日期对象的秒数
getTime()	返回1970年1月1日0时0分0秒到指定日期对象之间的毫秒数

练习1：端午节倒计时

Window.setTimeout(函数,间隔时间)：每间隔多少时间调用一次给定的函数

function showTime(){
    //创建当前日期对象
    let curr = new Date()
    //创建2022.6.3的日期对象
    let dt = new Date('2022-06-03')
    //获取毫秒数
    let t1 = curr.getTime()
    let t2 = dt.getTime()
    //计算毫秒数之差:即当前日期与6.3之间的毫秒数之差
    let times = t2 - t1
    //将毫秒数转换成剩余X天X时X秒
    let d = parseInt(times/1000/60/60/24)//转换天
    d = d < 10 ? '0'+d : d
    let h = parseInt(times/1000/60/60%24)//转换小时
    h = h < 10 ? '0'+h : h
    let m = parseInt(times/1000/60%60)//转换分钟
    m = m < 10 ? '0'+m : m
    let s = parseInt(times/1000%60)//转换秒
    s = s < 10 ? '0'+s : s

    let str='端午节倒计时'+d+'天'+h+'小时'+m+'分钟'+s+'秒'
    document.getElementById('tt').innerHTML = str
    window.setTimeout(showTime,1000)//每间隔1s调用一次showTime函数
}

练习2：三天打鱼，两天晒网。假设2008年8月8日打鱼

function showTime(){
    let curr = new Date()

    let dt = new Date('2008-08-08')

    let t1 = curr.getTime()
    let t2 = dt.getTime()

    let times = t1 - t2
    let d = parseInt(times/1000/60/60/24)
    k = d % 5
    if(k<4){
        console.log('打鱼')
    }else{
        console.log('晒网')
    }
}
console.log(showTime())

3.Array对象：数组对象

（1）常用属性：length表示数组长度

（2）常用方法

数组类型检测方法

instanceof运算符	变量名instanceof Array
isArray()	Array.isArray(变量名)

给数组添加元素

push()	将一个或多个元素添加到数组的末尾，并返回该数组的新长度
unshift()	将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)

删除数组元素

pop()	从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度
shift()	从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

数组排序

sort()	将待排元素转换成字符串，根据字符的UTF-16编码进行排序
reverse()	将数组元素的位置进行颠倒

数组元素的索引

indexOf()	方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
lastIndexOf()	方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回-1。从数组的后面向前查找

将数组转换为字符串

toString()	把数组转换为字符串,用逗号分隔每一项
join(‘分隔符’)	将数组的所有元素连接到一个字符串中，元素之间

填充数组

fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引

过滤数组元素

filter()

将数组中元素按给定的条件进行过滤,过滤出的元素放在新数组中返回

splice(start,delecount,[item])：通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

    start：删除、添加、替换元素的起始位置(索引)

    delecount：删除、添加、替换的数量

    item：可选参数,在替换、添加元素时指定;若没有指定,表示删除

slice(begin,end)：返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin，不包括end).原数组元素不变

concat(array)：合并两个新数组。原数组不变

at(number)：接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

includes(item)：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

forEach(fn)：对数组的每个元素执行一次给定的函数(可以实现对数组的遍历)

map(fn)：返回一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

keys()：返回数组元素的索引

values()：返回数组中每个索引对应的值

四、几种迭代语句

1.for语句

2.for ... in语句：可以枚举对象的属性

3.for ... of语句：可以遍历对象的元素

五、String对象

1.创建方式：

(1)通过字面量创建

var str = ''  (在js中单引号和双引号都表示字符串)"

(2)通过new String()创建

var str = new String('abc')

2.属性：length  表示字符串的长度

3.方法

(1)根据字符返回位置

indexOf(value)	返回value在字符串中第一次出现的位置
lastIndexOf(value)	返回value在字符串中最后一次出现的位置

(2)根据位置返回字符

charAt(index)	返回index位置上的字符
charCodeAt(index)	方法返回0到65535之间的整数,表示给定索引处的UTF-16编码

(3)截取子串

substring(start,[end])	返回一个从start位置开始到end位置(不含end)结束的子字符串
substr(start,lengh)	截取从start开始的length个字符
slice(start,[end])	切片,返回start开始end(不含end)结束的子串

(4)大小写转换

toLowerCase()	将字母转换为小写
toUpperCase()	将字母转换为大写

(5)字符串分割

split('分隔符')

使用指定的分隔符将字符串分割成若干个子串.返回一个字符串数组

(6)判断字符串的起始子串和结尾子串

startsWith('子串')	来判断当前字符串是否以另外一个给定的子串开头,并根据判断结果返回 true 或 false
endsWith('子串')	来判断当前字符串是否以另外一个给定的子串结尾,并根据判断结果返回 true 或 false

(7)字符串的替换

replace('原子串','替换子串')

字符串的替换

(8)去除空格

trim()	删除字符串两端的空白字符
trimStart()	删除字符串开头的空白字符
trimRight()	删除字符串结尾的空白字符

(9)获取字符串对象的原始值

valueOf()

练习：用户名长度在3~10范围内，不能出现敏感词admin的任何大小写形式。

六、值类型和引用类型

1.值类型

JavaScript的简单数据类型(number、string、boolean、null、undefined),又称为基本数据类型

包装类型：又称为原始值包装类型

number  ----  Number

var k = 10  //k是值类型(基本类型)number

var k = new Number(10) //k是对象(object)

string  ----  String

boolean ----  Boolean

var f = true  //f是值类型boolean

var f = new Boolean(true) //f是对象(object)

2.引用类型

复杂的数据类型(对象),特点是变量中保存的是对象的一个引用地址

var obj = {
    name:'aa',
    sex: '男',
    age: 25
}

var fp = obj  //是将obj中的地址赋给了fp，fp和obj都是指向对象

注意：

1.一个对象只被一个变量引用,若这个变量又被重新赋值,则该对象变成没有任何引用的对象,此时JavaScript的垃圾回收机制会自动释放该对象所占的内存空间

2.在函数的参数传递过程中

(1)实参向形参传递的是值(值传递)：形参变了不会影响实参

(2)实参向形参传递的是引用(引用传递)：本质传递的是对象的地址,形参变了实参也会变

七、JavaScript面向对象编程

1.面向过程

核心是过程。即分析出解决问题的步骤,用函数将这些过程一一实现,然后依次调用

2.面向对象

核心是对象。将需要解决的问题分解成一个个对象,这些对象不是解决问题的步骤。对象只是描述了在解决问题的过程中行为是什么(干了哪些工作)

优点：  

(1)封装性更强,模块化更深

(2)更容易实现复杂的业务逻辑

(3)容易维护、模块的复用率高

3.面向对象的特征

(1)封装性：对象是属性和行为的结合体

(2)多态性：同一个消息被不同的对象接收后，会产生不同的效果

(3)继承性：子类继承父类的部分属性和方法,子类中可以直接使用这些属性和方法

4.ESMAScript6(即ES6--ESMAScript2015)的面向对象的语法

(1)类：具有相同属性和行为的对象的集合

(2)对象：是类的实例化,是类的具体体现

类是对象的抽象,对象是类的具体体现

(3)类的基本语法：

class 类名{
    constructor([参数]){ //构造方法:初始化类的成员变量
}
    属性(成员变量)
    行为(成员方法)
}

注意：

a、类名：首字母大写

b、成员方法名：动词开头.驼峰命名

(4)创建对象

对象名 = new 类名([参数])

练习1:定义学生类(Student)

属性有name、gender、age、address、phone,

行为(方法)有showInfo,用于显示学生信息。创建对象测试类

class Student{
    constructor(name,gender){
        this.name = name
        this.gender = gender
        this.age = 18
        this.address = null
        this.phone = null
    }
    showInfo() {
        let info =  '姓名：'+this.name+'\n'+
                    '性别：'+this.gender+'\n'+
                    '年龄：'+this.age+'\n'+
                    '地址：'+this.address+'\n'+
                    '电话：'+this.phone

        console.log(info)
    }
}

var s1 = new Student('郭靖','男')
    s1.age = 24
    s1.address = '桃花岛'
    s1.phone = '13578945612'
    s1.showInfo()

练习2：创建一个电脑类(Computer)

有颜色(color)、重量(weight)、品牌(brand)、型号(type)属性， 有看电影(watch)、听音乐(listen)、打游戏(play)和敲代码(coding)方法。 创建对象,在调方法时分别打印 "我在  看电影/听音乐/打游戏/敲代码"

class Computer{
    constructor(){
        this.color = null
        this.weight = 0
        this.brand = null
        this.type = null
    }
    watch(){
        console.log('我在看电影')
    }
    listen(){
        console.log('我在听音乐')
    }
    play(){
        console.log('我在打游戏')
    }
    coding(){
        console.log('我在敲代码')
    }
    show(){
        var info = '品牌：'+this.brand+'\n'+
               '型号：'+this.type+'\n'+
               '重量：'+this.weight+'\n'+
               '颜色：'+this.color

        console.log(info)
    }
}

var c1 = new Computer()
    c1.brand = '联想'
    c1.type = 'ThinkPad T50'
    c1.weight = 2.5
    c1.color = '黑色'

    c1.show()
    c1.watch()
    c1.listen()
    c1.play()
    c1.coding()

练习3：创建类Temperature

包含成员变量degree(表示温度)以及成员方法

ToFahrenheit(摄氏温度转为华氏温度)和ToCelsius(华氏温度转摄氏温度)

其中:  

摄氏度= (华氏温度-32)*5/9

华氏度= 摄氏度*9/5+32

创建对象,显示转换结果