JS基础(五)

一.对象

 对象是一组属性和方法的集合

 一部手机的属性有颜色、品牌、CPU、内存... 方法有打电话、发短信、看视频、听音乐、玩游戏...

 一个杯子的属性有颜色、容量、材质...  方法有喝水、... 

 万物皆对象

 1.JS中的对象

   自定义对象，程序员自己创建的对象

   内置对象，JS提供好的对象

   宿主对象，根据不同的环境划分

 2.创建自定义对象 —— 对象字面量

   { 属性名1: 属性值1, ‘属性名2’: 属性值2,... }

   属性名的引号可以省略，如果含有特殊字符必须添加

  练习：创建一个员工对象，包含的属性有编号、姓名、性别、部门编号

 3.属性的访问

   对象.属性名

   对象[‘属性名’]

   如果属性不存在，获取的属性值为undefined

 4.创建自定义对象 —— 内置构造函数

  new Object()    创建一个空对象，需要单独的往对象中添加属性

字面量的底层写法（2实际上就是这样）

 5.遍历属性

  通过循环的方式依次访问对象中的每个属性

for(var  k in    对象){     k  每次获取的属性名     对象[k]   属性名对应的属性值     }

二.模板字符串

`  反引号之间的内容就是模板字符串  ${JS表达式} `

反引号在键盘上的“1”键位

  模板字符串简化了字符串的拼接

三.检测属性是否存在

•   对象.属性名 === undefined     false -> 存在  true -> 不存在

•   对象.hasOwnProperty(‘属性名’)   true -> 存在  false -> 不存在

•   ‘属性名’ in  对象    true -> 存在  false -> 不存在

  

四.对象中的方法--method

  方法本质上就是一个函数

var  p = {       play:   function(){         this    指向调用方法的对象     }     }     p.play()  //调用方法

五.数据的存储

  原始类型：直接将数据存储在栈内存中

  引用类型：将数据存储在堆内存中，会自动生成一个地址（对象、函数、数组）

  栈内存：每次开辟的空间是固定大小

  堆内存：每次开辟的空间是动态变化，属性多空间大，属性少空间小

                                               

  null：空地址，不指向任何堆内存中的数据

  引用类型数据如果要销毁，只需要赋值为null，不再让任何地址所引用即可。

六.数组

 数组是一组数据的集合，每个数据称作元素

 1.创建数组 —— 数组字面量

   [ 元素1, 元素2, ... ]

  练习：创建数组，包含一组成绩

  练习：创建数组，包含一组手机的品牌名称

 2.数组元素的访问

  下标：数组自动为每个元素添加的编号，是一个>=0的整数

  数组[下标]    如果下标不存在返回的值是undefined

  练习：创建数组，包含一组城市的名称，修改数组中存储的值，在末尾添加若干个城市。

 3.数组长度属性--length

  数组.length   获取数组中元素的个数

  在数组的末尾添加新的元素   数组[ 数组.length ] = 值

数组.length = 0    清空数组元素

 4.创建数组 —— 构造函数

  new Array(元素1, 元素2,...)

  new Array(3)   创建数组，初始化长度值，可以添加更多个元素

  练习：创建数组，包含若干个国家的名称

  练习：创建数组，初始化长度为4，添加4门课程名称

 5.数组的分类

  关联数组：以字符串作为下标，只能单独添加元素

  索引数组：以>=0的整数作为下标

 6.对比数组和对象

  两者都可以存储一组数据，数组通过元素，对象是通过属性

  对象中的一组数据是无序排列，不分先后顺序，例如：姓名属性和性别属性没有关联

  数组中的一组数据是有序排列，有先后之分，例如：对成绩进行排序..

  练习：创建数组，包含一组新闻数据，每一条新闻数据是一个对象，包含的属性有标题、发布时间。

 7.遍历数组元素

   依次访问数组中的每个元素

for-in循环     for(var  k  in    数组){          k  下标         数组[k]   元素     }

for循环     for(var  i=0;i<数组.length;i++){          i  下标        数组[i]   元素     }

  

 8.API

  应用程序编程接口，表示JS中预定义的函数或者方法

预定义：提前准备好的

   parseInt/parseFloat/isNaN...  hasOwnProperty

   数组API指的是数组提供好的方法，可以直接调用

   toString()   将数组转为字符串，元素之间用逗号分隔

   join(‘/’)    将数组转为字符串，默认是用逗号分隔，可以指定其它的字符分隔

如何学习API: 作用、参数有哪些、返回值     数组的API还需要查看：原数组是否会发生变化

  concat(数组1, 数组2,...)    拼接多个数组，返回的是拼接后的数组，原数组不会发生变化

  slice(start, end)  截取数组元素，start开始的下标，end结束的下标，不包括end本身，end为空会截取到最后，如果下标为负数表示倒数，返回的是截取的元素，原数组不会发生变化

  练习：创建数组包含a~h，每个字母是一个元素，分别截取出bc  ef，最后把截取的两部分拼接成一个大数组。

  reverse()   翻转数组元素，返回的翻转后的数组，原数组发生变化

  sort()   对数组进行排序，默认是按照编码排列，返回排序后的数组，原数组发生变化

sort(function(a,b){       return a-b     //按照数字从小到大排列       //return b-a   //按照数字从大到小排列     })

  splice(start, count, v1,v2,...)   删除数组元素，start开始的下标，count删除的长度，count为空会删除到最后，v1,v2表示删除后要补充的元素，返回删除的元素，原数组会发生变化

  练习：创建数组包含a~h，每个字母是一个元素，删除cd，替换f为m，在下标为1的位置插入z

  push()   在数组末尾添加元素，返回数组的长度，原数组会发生变化

  pop()   删除数组末尾的一个元素，返回删除的元素，原数组会发生变化

  unshift()   在数组开头添加元素，返回数组的长度，原数组会发生变化

  shift()    删除数组开头的一个元素，返回删除的元素，原数组会发生变化

  indexOf()   查找数组中是否含有某个元素，返回的是下标，找不到返回-1

  练习：创建数组，包含爱国福、和谐福两个元素，如果不含有敬业福，则把敬业福添加到数组中。

其它数组API:     JavaScript 数组方法     https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

 9.二维数组

  数组中的元素还是数组，用于对数据进行分类

  [ [ ], [ ], [ ] ]

七.字符串对象

 包装对象：目的是为了让原始类型的数据像引用类型数据，具有属性和方法；JS中提供了三种包装对象，分别是字符串对象、数字对象、布尔对象

  new String()   将一个字符串包装为对象

  String()   将一个值转换为字符串

 1.转义字符 —— \

  \’   将一个具有特殊意义的引号转义为普通引号 

  \n   将字符n转义为换行符

  \t   将字符t转义为制表符，tab键效果，产生多个连续空格

  练习：打印输出以下效果

     C:\Users\web

 2.API

  length   获取字符串的长度

  charAt()    通过下标获取对应的字符，也可以使用数组的格式  字符串[下标]

  练习：遍历字符串’javascript’，统计出字符a出现的次数。

  indexOf()    查找字符串中是否含有某个字符(串)，返回的满足条件的第一个的下标，找不到返回-1

  lastIndexOf()   查找字符串中是否含有某个字符(串)，返回的满足条件的最后一个的下标，找不到返回-1

  练习：声明变量保存用户输入的邮箱，如果用户名中不含有@，打印’非法的邮箱’

所有的字符串API都不会影响到原来的字符串，会生成一组新的字符串

  toUpperCase()   英文字母转大写

  toLowerCase()   英文字母转小写

  slice(start, end)  截取字符串，start开始的下标，end结束的下标，end为空会截取到最后，不包含end本身，如果下标为负数表示倒数。

  

 八.Math对象

  提供了一组关于数学运算相关的API，是一种特殊的对象，不需要通过new来创建，就可以直接调用API

  PI   获取圆周率

  abs()   获取绝对值

  ceil()   向上取整

  floor()   向下取整

  round()  四舍五入整取

  pow(x,y)   计算x的y次方，也可以使用 x**y

  max()   获取一组数字的最大值

  min()   获取一组数字的最小值

  random()   获取随机数，范围0~1    >=0   <1

 双色球

 红球：随机获取1~33之间的6个数字，不能重复，进行从小到大的排列

 蓝球：随机获取1~16之间的1个数字，可以和红球重复 

  将获取的两种颜色的球放入到一个新数组

九.Date对象

 用于对日期时间的存储和计算

 1.创建

  new Date(‘2022/11/8 11:43:30’)

  new Date(2022,10,8,11,43,30)    第2个参数月份的值0~11 对应1~12月 

  new Date()   存储的是当前操作系统的时间

  new Date(1670000000000)  存储的值是时间戳

时间戳：距离计算机元年(1970-1-1 0:0:0)的毫秒数     1秒=1000毫秒

 2.转为本地字符串

  toLocaleString()     存在兼容性问题，只能用于开发调试阶段

 3.获取存储的值

  getFullYear()/getMonth()/getDate()

               月份：范围时0~11

  getHours() / getMinutes() /getSeconds() / getMilliseconds()

                                                毫秒

  getDay()  获取星期二，范围0~6之间，对应的是日~六

  getTime()   获取时间戳

Date.now()   获取当前时间的时间戳

  练习：创建Date对象，存储当前操作系统的时间，获取存储的值，最后显示以下格式      '今天是xxxx年xx月xx日  xx:xx:xx   星期x'

4.设置存储的值

  setFullYear()/setMonth()/setDate()

  setHours()/setMinutes()/setSeconds()/setMilliseconds()  毫秒

  setTime()  设置时间戳，产生一个新的日期时间，所有的日期时间会受到影响

  注意事项：星期不能设置

5.拷贝Date对象 

  在创建一个新对象的同时，把要拷贝的对象作为参数传递即可

    new Date( Date对象 )

  练习：创建Date对象，保存一个员工的入职时间（2023/3/1），合同期为3年，计算出到期时间；在合同到期前1个月，要进行续签合同，计算出续签时间；

  最后打印输出以下日期时间

    入职时间：xxxx/xx/xx ..

到期时间：xxxx/xx/xx ..

续签时间：xxxx/xx/xx ..

十.Number对象

  new Number()  将一个数字包装为对象

  Number()   将一个值转换为数字

  toFixed(n)   保留小数点后n位

十一.Boolean对象

  new Boolean()    将一个布尔值包装为对象

  Boolean()   将一个值转为布尔型 

  !!值    将一个值转为布尔型

十二.错误处理

 1.常见的错误

   语法错误(SyntaxError)：代码书写不符合语法规范，例如：缺少半块括号..

   引用错误(ReferenceError)：使用了未声明的变量

   类型错误(TypeError)：当前调用的值不是一个函数类型

   范围错误(RangeError)：超出了JS规定的最大范围

   自定义错误：程序员自己指定的错误

               throw  错误内容

 2.错误处理

  即使出现了错误，还可以继续往后执行

try{       尝试执行，可能出现错误，即使出错也不再影响后续代码执行     }catch(err){       一旦try中出现错误，会捕获错误，将错误收集到err中     }