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<arr.length;i++){for(let j=0;j<arr[i].length;j++){arr[i][j] = Math.floor(Math.random()*10)}
}
console.log(arr)
for(let i=0;i<arr.length;i++){let max = Math.max(...arr[i])
console.log("数组arr中的最大值:"+max)
}练习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(函数,间隔时间)：每间隔多少时间调用一次给定的函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/521.3.js"></script>
</head>
<body onload="showTime()"><div id="tt"></div>
</body>
</html>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 : dlet h = parseInt(times/1000/60/60%24)//转换小时h = h < 10 ? '0'+h : hlet m = parseInt(times/1000/60%60)//转换分钟m = m < 10 ? '0'+m : mlet s = parseInt(times/1000%60)//转换秒s = s < 10 ? '0'+s : slet str='端午节倒计时'+d+'天'+h+'小时'+m+'分钟'+s+'秒'document.getElementById('tt').innerHTML = strwindow.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 - t2let d = parseInt(times/1000/60/60/24)k = d % 5if(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 = namethis.gender = genderthis.age = 18this.address = nullthis.phone = null}showInfo() {let info = '姓名：'+this.name+'\n'+'性别：'+this.gender+'\n'+'年龄：'+this.age+'\n'+'地址：'+this.address+'\n'+'电话：'+this.phoneconsole.log(info)}
}var s1 = new Student('郭靖','男')s1.age = 24s1.address = '桃花岛's1.phone = '13578945612's1.showInfo()练习2：创建一个电脑类(Computer)
有颜色(color)、重量(weight)、品牌(brand)、型号(type)属性， 有看电影(watch)、听音乐(listen)、打游戏(play)和敲代码(coding)方法。 创建对象,在调方法时分别打印 "我在 看电影/听音乐/打游戏/敲代码"
class Computer{constructor(){this.color = nullthis.weight = 0this.brand = nullthis.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.colorconsole.log(info)}
}var c1 = new Computer()c1.brand = '联想'c1.type = 'ThinkPad T50'c1.weight = 2.5c1.color = '黑色'c1.show()c1.watch()c1.listen()c1.play()c1.coding()练习3：创建类Temperature
包含成员变量degree(表示温度)以及成员方法
ToFahrenheit(摄氏温度转为华氏温度)和ToCelsius(华氏温度转摄氏温度)
其中:
摄氏度= (华氏温度-32)*5/9
华氏度= 摄氏度*9/5+32
创建对象,显示转换结果
<script>class Temperature{constructor(degree){this.degree = degree}ToFahrenheit(){ //将摄氏温度转为华氏温度let t = this.degree*9/5+32return t}ToCelsius(){ //将华氏温度转为摄氏温度let t = (this.degree-32)*5/9return t.toFixed(2) //保留小数点后2位,从第三位开始自动进行四舍五入}}let d = prompt('请输入一个数值')let t = new Temperature(d)console.log('摄氏温度转华氏温度为：'+t.ToFahrenheit())console.log('华氏温度转摄氏温度为：'+t.ToCelsius())
</script>JavaScript的对象、属性与方法相关推荐
- JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
- JavaScript原生对象属性和方法详解——String对象
length length 属性可返回字符串中的字符数目. length 是根据字符串的UTF-16编码来获取长度的,空字符串长度为0.length 不可修改. charAt() charAt() 方 ...
- JavaScript的对象属性和方法和点击事件
JavaScript的Event对象用来描述JavaScript事件,Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一旦事件发生,便会生成Event对象.主要属性和方法: ...
- javascript Navigator对象属性和方法
Navigator对象 Navigator 对象包含的属性描述了正在使用的浏览器.可以使用这些属性进行平台专用的配置.虽然这个对象的名称显而易见 的是 Netscape 的 Navigator 的浏览 ...
- JavaScript原生对象属性和方法详解——Array对象
原文地址:http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array l ...
- JavaScript原生对象属性和方法详解——Date对象
创建 Date 对象的语法: //Date 对象会自动把当前日期和时间保存为其初始值. new Date();//value-毫秒:代表自世界协调时1970年1月1日00:00:00开始的数值. ne ...
- javaScript删除对象属性总结方法
一.删除js中对象中属性 1.使用delete运算符 例: 1) 使用点属性访问器删除: delete object.property; 在属性访问器上应用delete运算符时,运算符会从对象中删除相 ...
- JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)
一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用 ...
- JavaScript对象属性及方法
JavaScript对象属性及方法 1.对象属性 JavaScript对象时属性变量的容器,以键值对name:value的形式存在,访问方式为 name.value name[value] 2.对象方 ...
- javascript数组的属性、方法和清空-最全！！！(必看)
今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...
最新文章
- zoj-3228 Searching the String AC自动机
- 2020下半年新机最新消息_2020年下半年即将发布的手机，你们期待吗
- Spring Boot连接多个Redis库配置方案及代码示例
- 解决Apache/PHP无法启动的问题
- docker下载安装，命令大全
- 验证手机号 身份证 中文名称
- 静态库和动态库的分析
- [Leetcode][第112题][JAVA][路径总和][递归][队列]
- select switch语句总是搞混，总结如下
- 两个异常：a circular reference was detected while serializing及 Maximum length exceeded
- 去360总部参加网络信息安全会议经历
- celery-分布式任务队列-原理
- java json data_java中json数据格式的处理
- 软件测试技术路线怎么走
- android18lazuli,Free 18 Japan for you on AliExpress.
- 基于聚合数据的移动联通基站API接口的php完整代码实例
- 利用PlaySound函数播放音频文件
- QTcpServer和QTcpSocket使用详解
- 含有n个元素的整型数组，将这个n个元素重新组合，求出最小的数，如{321,3,32}，最小的数为321323...
- 2021年N1叉车司机考试总结及N1叉车司机操作证考试