JS-JS基础-4
对象
介绍
在JS中, 对象Object是一组无序的相关属性和方法的集合, 所有的事物都是对象, 例如字符串, 数值, 数组, 函数等
组成:
- 属性
事物的特征, 在对象中用属性来表示- 方法
事物的行为, 在对象中用方法来表示
为什么需要对象:
保存一个值时, 可以使用变量, 保存多个值(一组值)时,, 可以使用数组.
如果要保存一个人完整的信息呢?
JS中的对象表达结构更加清晰, 强大
创建对象以及使用对象
利用字面量创建对象
创建一个空对象
var obj = {}; 创建了一个空对象
实例:
var obj = { |
注意:
- 里面的属性或者方法我们我们采取键值对的形式 属性名: 值,
- 多个属性或者方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
使用对象
- 调用对象的属性(里面的属性值)
调用对象的属性 我们采取 对象名.属性名 的形式 小点. 理解为”的” 对象的属性
console.log(obj.username);
第二种方法: 对象名[‘属性名’]
在遍历对象中的属性值会用到这个方法
console.log(obj['age']);
- 调用对象的方法
调用对象的方法/行为 sayHi 对象名.方法名() 就是函数调用(别忘记添加小括号)
obj.sayHi();
一些区别
变量与对象中的属性
变量: 单独声明并赋值 使用的时候直接写变量名 单独存在
对象中的属性: 在对象里面的不需要声明, 使用的时候必须: 对象.属性
函数与对象中的方法
函数: 单独声明 调用的 函数名() 单独存在
方法: 在对象里面 调用时 对象.方法()
利用new Object创建
创建空对象
var obj = new Object(); //创建了一个空对象
给创建的对象追加属性和方法
obj.uname = '张三丰'; //给对象obj追加一个uname属性 其值为'张三丰'; |
注意:
(1) 我们是利用等号赋值的方法 添加对象的属性和方法
(2) 每个属性和方法之间 用分号结束
利用构造函数来创建对象
因为我们前面两种创建对象的方式 一次只能创建一个具体的对象
把对象封装到函数里面: 把对象里面一些相同的属性和方法抽象出来 封装到函数里面
语法:
- 构造
function 构造函数名(形参) { |
使用(实例化这个构造函数/或者说实例化这个对象)
new 构造函数名(实参)
var 变量名 = new 构造函数名()
实例:
创建构造函数(对象模板)
function Star(uname, age, sex) { |
使用构造函数(实例化对象)
var ldh = new Star('刘德华', 18, '男'); // 调用函数 返回的是一个对象 |
注意:
- 构造函数的名字首字母要大写
- 构造函数不需要return 就可以返回结果
- 我们调用函数 必须使用 new
- 只要new Star() 调用函数就创建一个对象
- 在创建构造函数时, 我们的属性和方法前面必须加上this.
构造函数与对象的关系
构造函数将一类对象的共同属性封装在函数里面
function Stars() { this.....}
利用构造函数创建对象的过程 称为 对象的实例化
new Satrs(实参)
将实参传入构造函数 进行对象实例化
New关键词
执行过程:
- 在内存中创建一个空对象
- 让this指向这个新的对象
- 执行构造函里面的代码, 给这个新对象添加属性和方法
- 返回这个新对象(记得把这个新对象赋值给一个变量) , 所以构造函数里面不需要return
遍历对象的属性及属性值
例子
var obj = { |
方法
for…in语句用于对数组或者对象的属性进行循环操作.
for (变量(属性名) in 要遍历的对象名) { |
实例:
for (var k in obj) { |
注意:
我们使用for in 里面的变量 我们喜欢写k或者key
小结:
- 对象可这样放代码结构更清晰
- 对象是复杂数据类型object
- 本质:对象就是一组无序的相关属性和方法的集合
- 构造函数泛指某一大类, 比如苹果, 不管是青苹果还是红苹果, 都统称为苹果
- 对象实例特指一个对象 比如这个苹果
- for…in 语句用于对 对象的属性进行循环操作
内置对象
内置对象的分类
- 自定义对象
- 内置对象:
JS语言自带的一些对象 也可以实现一些常用且必要的功能, (属性和方法)
Math, Date, Array, String
- 浏览器对象
Math对象—Math.
不是一个构造函数 不需要new来调用 而是直接使用里面的属性和方法即可
案例: 封装自己的数学对象
要求:利用对象封装自己的数学对象 里面有PI 求最大值方法 求最小值方法
实例:
var myMath = { //字面量创建对象 |
Math常用对象
Math.PI 圆周率 它时一个属性, 不是一个方法 不需要加小括号
Math.floor() 向下取整
1.1—–1
1.9—-1
Math.ceil() 向上取整 往大的整数取值
1.1—-2
1.9—-2
Math.round() 四舍五入取整 就近取值
注意- 3.5 取-3
恰好在整数中间的这个数往大了取(无论正整数还是负整数)-1.5 取-1
-2.5取-2
2.5取3
Math.abs() 取绝对值
遇到字符串型的数字会隐式转换 ‘1’=1
Math.max()/Math.min() 求数字中的最大值和最小值
注意: 只能传参数, 不能传数组解决: 利用apply( 参数1, 参数2(数组) ) 先把数组转化为字符串
var arr = [1, 66, 3, 99, 4];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max,min); //99,1
Math对象—random() 随机数
注意:
返回一个随机的浮点数 范围[0,1)之间
取到0 但是娶不到1
不跟参数使用: 得到一个两数之间的随机整数,包括两个数在内
function getRandom(min, max) { //作用 得到一个两数之间的随机整数,包括两个数在内
// min = Math.ceil(min);
// max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
console.log(getRandom(1, 10)); //获得[1,10]之间的一个随机整数
//班级点名
var arr = ['张三', '李四','Angel', '网吧','或者']
console.log(arr[getRandom(0,arr.length-1)]);
案例: 猜数字游戏
要求:
程序随机生成一个 1~ 10 之间的数字,并让用户输入一个数字,
- 如果大于该数字,就提示,数字大了,继续猜;
- 如果小于该数字,就提示数字小了,继续猜;
- 如果等于该数字,就提示猜对了, 结束程序
分析:
① 随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
② 需要一直猜到正确为止,所以一直循环。
③ 用while 循环合适更简单。
④ 核心算法:使用 if else if 多分支语句来判断大于、小于、等于。
日期对象—new Date( )
介绍
是一个构造函数, 必须使用new来调用我们的日期对象
new Date( )
不使用参数:
var date= new Date(); //参数为空 返回系统当前时间 |
得到了一个非格式化的时间字符串, 浏览器不同 得到的格式也不同
所以我们需要
日期格式化
调用日期对象 并赋予date
var date = new Date();
提取单个的年, 月, 日
console.log(date); //获取当前系统的年月日时间 |
实例:
我们写一个****年**月**日 星期几 格式的结果
var date = new Date(); //调用当前日期对象 |
提取单个的 时 分 秒
var date = new Date(); |
实例:
要求封装一个函数 返回当前的时分秒 格式08:08:08
function getTimer() { |
获取日期的总的毫秒数
获取Date总的毫秒数(时间戳)(永远不会重复) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
三种方法
1.通过 valueOf() 或者 getTime()
var date = new Date();
console.log(date.valueOf()); //就是我们现在时间 距离1970年1月1号过了多少毫秒数
console.log(date.getTime());//就是我们现在时间 距离1970年1月1号过了多少毫秒数
2.简单的写法: +new Date()
var date1 = +new Date(); // +new Date() 就是返回的总毫秒数
console.log(date1);对象括号中如果输入一个时间, 格式是: 2022-2-23 18:00:00
则返回这个时间距离1970年初始时间的毫秒数
3.H5 新增的 获得总毫秒数
console.log(Date.now());
案例:倒计时
分析:
核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。
用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
1s ===1000ms
转换公式如下:
总秒数 = ms /1000
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
实施:
function countDown(time) { |
数组内置对象
- 利用数组字面量创建数组—–回顾上文
利用数组内置对象创建数组
利用new创建数组
注意Array(); A要大写
var arr = new Array(); // 利用new Array() 创建一个空数组 |
利用数组内置对象检测参数是否为数组
(1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
console.log(arr instanceof Array); //true
var obj = {} //这是对象的写法
console.log(obj instanceof Array); //false
(2)Array.isArray(参数); H5 新增的方法 ie9以上版本才支持
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
实例: 翻转数组的规范:确定传入的数据为数组才倒叙
function reverse(arr) { |
添加和删除数组元素
增加数组元素
- 在后面增加
被添加元素的数组名.push(元素1,元素2,…. ) 在数组的末尾 添加一个或者多个数组元素
var arr = [1, 2, 3]; |
注意:
//(1) .push()可以给数组追加新的元素
//(2) .push() 参数直接写数组元素就可以
//(3) .push() 无参数 则返回 数组的长度
- 在前面增加
被添加元素的数组名.unshift(元素1,元素2,…. ) 在数组的开头 添加一个或者多个数组元素;
arr.unshift('red') |
注意:
//(1) .unshift可以给数组前面追加新的元素 |
删除数组元素
- 在后面删除
被修改的数组名.pop(最后一个元素) 它可以删除数组的最后一个元素
console.log(arr.pop()); //删除arr这个数组的最后一个元素 并返回被删除的元素 |
注意:
//(1) .pop是可以删除数组的最后一个元素, 记住一次只能删除一个 |
- 在前面删除
console.log(arr.shift()); //删除数组第一的元素 并返回被删除的元素 |
案例1: 删选数组:有一个包含工资的数组[1500, 1200, 2000, 2100, 1800],要求把数组中工资超过2000的删除,剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800]; |
数组排序
.reverse( )
颠倒数组中元素的顺序,无参数
修改原来的数组,返回值为新数组
var arr = [1,2,3,4,5,6,7]; |
.sort( )
该方法会改变原来的数组, 返回新数组
- 单位数可以实现完美的从小到达排序
var arr1=[4,3,5,6,7,8,6,6,6]; |
- 双位数则不行::解决方案
var arr1=[4,33,5,6,77,88,6,6,6]; |
获取数组索引方法
.indexOf( )
说明: 数组中从前面开始查找给定元素的第一个索引
返回值: 如果存在则返回索引号, 如果不存在, 则返回 -1
可以用来查找用户
实例:
var arr = ['red','给个','你好','真棒','给个']; |
注意: 它只返回第一个查找到的元素的索引号.
.lastIndexOf( )
说明: 数组中从后面开始查找给定元素的索引—从最后一个元素开始查找, 只查找第一次
var arr = ['red', '给个', '你好', '真棒', '给个']; |
(重点)数组去重
要求:有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’],要求去除数组中重复的元素。
分析:
目标:
把就数组里面不重复的元素选出来放到新数组中, 重复的元素只保留一个, 放到新数组中去重.
核心算法:
我们遍历旧数组, 然后拿着旧数组元素去查询新数组, 如果该元素在新数组里面没有出现过, 我们即添加, 否则不添加
我们怎么知道该元素有没有存在呢?
来利用新数组indexOf(数组元素). 如果返回-1, 就说明新数组里面没有该元素
实施:
function unique(arr) { |
数组转为字符串
.toString( )
说明: 把数组转换为一条字符串, 默认逗号分隔每一项 不需要传参数
返回值: 返回一个字符串
实例:
var arr=[1,2,3]; |
.join(‘分隔符’)
说明: 方法用于把数组中的所有元素转换为一条字符串 可以自定义分隔符
返回值: 返回一个字符串
实例:
var arr1=['green', 'blue','pink']; |
拓展
被连接的第一个数组1.concat(数组2,数组3,… ) 连接两个或多个数组, 不影响原数组
var arr1 = [1, 2, 3]; |
需要被截取的数组名.slice(index begin, index end)
参数: 指定的数组的索引号开始截取, 截取到指定数组索引号之前的那一个元素
返回值: 被截取的数组
注意: 不影响原数组
var arr3 =[1, 2, 3, 4, 5, 6, 8, 8, 8, 8]; |
需要被截取删除的数组名.splice(index begin, index end)
参数: 指定的数组的索引号开始截取, 截取到指定数组索引号之前的那一个元素
返回值: 返回被删除元素 成为一个新数组,
注意: 这个会影响原数组
var arr3 =[1, 2, 3, 4, 5, 6, 8, 8, 8, 8]; |
字符串对象
基本包装类型
疑惑
var str = 'andy'; console.log(str.length); //4
按道理 只有复杂数据类型(对象)才会有属性和方法, 但是简单数据类型为什么有length属性呢?
原因
就是把简单数据类型包装成为了复杂数据类型
//把简单数据类型包装为复杂数据类型;
var temp = new String('andy');
//把临时变量给temp
str = temp;
// 销毁这个临时变量
temp = null;使得基本数据类型就有了属性和方法
为了方便操作基本数据类型, JS还提供了三个特殊的引用类型
String
Number
Boolean
字符串的不可变性
指的是里面的值不可变, 虽然看上去可以改变内容, 但是地址改变了, 内存中新开辟了一个内存空间
根据字符返回位置(经典面试)
被查找的字符串.indexOf(‘要查找的字符’, 开始查找的位置(默认为0) )
作用: 查出指定的字符在什么位置? 得到索引号
返回指定内容的原字符串中的位置(索引号), 如果找不到就返回 -1 , 开始的位置是index 索引号
被查找的字符串.lastIndexOf(‘要查找的字符’, 开始的位置(默认为0))
从后往前找, 只找第一个匹配到的
案例:返回字符的位置
要求:查找字符’abcoefoxyozzopp’中所有出现o的位置以及次数.
分析:
核心算法: 先查找出第一个o出现的位置
然后 只要indexOf()返回的不是-1就继续查找
因为indexOf只能查找到第一个, 所以后面的查找, 利用第二个参数, 即返回的索引号加1, 从而继续查找
实施:
var str = 'oabcoefoxyozzopp'; |
根据位置返回字符(重点)
.charAt(index)
说明: 返回指定位置的字符(index字符串的索引号)
作用: 查出这个位置有什么字符? 得到字符
使用: str.charAt(0)
实例:
var str ='andy'; |
遍历所有字符
//遍历所有字符 |
.charCode(index)
说明: 获取指定位置处字符的ASCII(index索引号)
var str = 'andy';
使用: str.charCodeAt(0)
实例: console.log(str.charCodeAt(0)); //97
str[index]
说明: 获取指定位置处字符
使用: html5, IE8 和charAt()等效
实例: console.log(str[0]); //a
案例: 查找字符串”abcoefoxyozzopp”中出现次数最多的字母以及打印这个次数
分析:
核心算法: 利用charAt()遍历这个字符串
把每个祖父储存给对象, 如果对象没有该属性, 就为1, 如果存在 就+1;
遍历对象, 得到最大值和该字符
实施:
var str = 'abcoefoxyozzopp'; |
字符串操作方法(重点)
concat(str1, str2, str3…)
用于链接两个或多个字符串. 拼接字符串,等效于+, +更常用
substr(start, length)
从start位置开始(索引号), length取的个数 重点记住这个
var str1 = '改革春风吹满地';
console.log(str1.substr(2,2)); //春风
slice(start, end)
从start位置开始, 截取到end位置, end取不到(他们俩都是索引号)
substring(start, end)
从start位置开始, 截取到end位置, end取不到 基本和slice相同 但是不接收负值
替换字符串
replace( ‘ 被替换的字符’, ‘替换为的字符’)
var str = 'andy'; |
!!!只会替换第一个检测到的字符
案例: 有一串字符 里面的o全部替换为*
var str2 = 'abcoefoxyozzopp'; |
字符串转换为数组
split(‘分隔符’)
var str3 = 'red,pink,blue'; // , 分隔符 |
转换为大写或小写
toUpperCase()
转换为大写
var str5 = 'red,pink,blue'; |
toLowerCase()
转换为小写
var str7 = 'red,pink,BLUE'; |
作业
7、 遍历字符串,并将遍历出的字符两头添加符号“@”
var str9 = 'abaasdffggggggggggghhjjkk22fddbbs3444343'; |
!!! 如果要去掉字符串的某些字符 可以先转换为数组, 进行操作, 在从编辑后的数组转换为字符串
JS的简单数据类型与复杂数据类型
简单数据类型与复杂数据类型
简单类型 又叫做基本数据类型或值类型
在储存时变量中存储的是值本身
string
number
boolean
undefined
null
var timer=null;
console.log(typeof timer);// object返回的是一个空的对象
如果有个变量我们以后打算存储为对象, 暂时没想好, 这个时候就给null
复杂类型 又叫做引用类型
通过关键字new创建的对象(系统对象, 自定义对象)
系统对象: Object Array Date
栈和堆
栈(操作系统)
由操作系统自动分配释放存放函数的参数值, 局部变量的值,. 其操作方式类似一数据结构中的栈
简单数据类型存放到栈里面
开辟空间 直接存储值
堆(操作系统)
存储复杂类型(对象), 一半由程序员分配释放, 若程序员不释放, 由垃圾回收机制回收
复杂数据类型存放到堆里面
首先在栈里面存放地址, 用十六进制表示
然后这个地址指向堆里面的数据