JS进阶——构造函数&数据常用函数

1、深入对象

1.1 创建对象三种方式

1.1.1 利用对象字面量创建对象

1.1.2 利用new Object创建对象

1.1.3 利用构造函数创建对象

1.2 构造函数

构造函数:是一种特殊的函数,主要用来初始化对象

使用场景:常规的{...}语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过构造函数来快速创建多个类似的对象

JS进阶——构造函数&数据常用函数_第1张图片

注意构造函数在技术上是常规函数

不过有两个约定:

  1. 它们的命名以大写字母开头
  2. 它们只能由“new”操作符来执行

1.2.1 创建构造函数

语法:大写字母开头的函数

JS进阶——构造函数&数据常用函数_第2张图片

说明:

  1. 使用new关键字调用函数的行为被称为实例化
  2. 实例化构造函数时没有参数时可以省略()
  3. 构造函数内部无需写return,返回值即为新创建的对象
  4. 构造函数内部的return返回的值无效,所以不要写return
  5. new Object() new Date() 也是实例化构造函数

1.2.2 练习 利用构造函数创建多个对象

需求:

①:写一个Goods构造函数

②:里面包含属性name商品名称 price价格 count 库存数量

③:实例化多个商品对象,并打印到控制台

    

1.2.3 实例化执行过程

说明:

  1. 创建新的空对象
  2. 构造函数this指向新对象
  3. 执行构造函数代码,修改this,添加新的属性
  4. 返回新对象

JS进阶——构造函数&数据常用函数_第3张图片

1.3 实例成员&静态成员

1.3.1 实例成员

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例方法)

JS进阶——构造函数&数据常用函数_第4张图片

说明:

  1. 为构造函数传入参数,创建结构相同但值不同的对象
  2. 构造函数创建的实例对象彼此独立互不影响

1.3.2 静态成员

构造函数的属性和方法被称为静态成员(静态属性和静态方法)

JS进阶——构造函数&数据常用函数_第5张图片

说明:

  1. 静态成员只能构造函数来访问
  2. 静态方法中的this指向构造函数

比如:Date.now()  Math.PI  Math.random()

2、内置构造函数

在JavaScript中最主要的数据类型有6种:

基本数据类型:字符串、数值、布尔、undefined、null

引用类型:对象

特殊情况:

其实字符串、数值、布尔等基本类型也都有专门的构造函数,这些被称为包装类型。

JS中几乎所有的数据都可以基于构造函数创建。

引用类型

Object,Array,RegExp,Date等

包装类型

String,Number,Boolean等

2.1 Object

Object是内置的构造函数,用于创建普通对象。

推荐使用字面量方式声明对象,而不是Object构造函数。

2.1.1 三个常用静态方法

静态方法就是只有构造函数Object可以调用的。

JS进阶——构造函数&数据常用函数_第6张图片

(1)Object.keys

作用:Object.keys静态方法获取对象中所有属性(键)

语法:JS进阶——构造函数&数据常用函数_第7张图片

注意:返回的是一个数组

(2)Object.values

作用:Object.values静态方法获取对象中所有属性值

语法:JS进阶——构造函数&数据常用函数_第8张图片

注意:返回的是一个数组 

(3)Object.assign

作用:Object.assign静态方法常用于对象拷贝

语法:JS进阶——构造函数&数据常用函数_第9张图片

使用:经常使用的场景给对象添加属性

JS进阶——构造函数&数据常用函数_第10张图片

2.2 Array

Array是内置的构造函数,用于创建数组

创建数组建议使用字面量创建,不用Array构造函数创建

2.2.1 数组常见实例方法-核心方法

方法 作用 说明
forEach 遍历数组 不返回数组,经常用于查找遍历数组元素
filter 过滤数组 返回新数组,返回的是筛选满足条件的数组元素
map 迭代数组 返回新数组,返回的是处理之后的数组元素,想要使用返回的新数组
reduce 累计器 返回累计处理的结果,经常用于求和等

作用:reduce返回累计处理的结果,经常用于求和等

基本语法:

参数:如果有起始值,则把初始值累加到里面

    

reduce执行过程:

  1. 如果没有起始值,则上一次值以数组的第一个数组元素的值
  2. 每一次循环,把返回值给做为下一次循环的上一次值
  3. 如果有起始值,则起始值做为上一次值 

JS进阶——构造函数&数据常用函数_第11张图片

JS进阶——构造函数&数据常用函数_第12张图片

2.2.2 计算薪资案例

需求:

①:根据数据计算当月支出薪资

数据:

JS进阶——构造函数&数据常用函数_第13张图片




    
    
    Document


    

 2.2.3 数组常见方法-其他方法

JS进阶——构造函数&数据常用函数_第14张图片

2.2.4 练习 

需求:

const spec = {size:‘40cm*40cm',color:'黑色'}

请将size和color里面的值拼接为字符串之后,写到div标签里面,展示内容如下:

思路:获得所有的属性值,然后拼接字符串就可以了

①:获得所有属性值是:Object.values() 返回的是数组

②:拼接数组是join('') 这样就可以转换为字符串了




    
    
    Document


    

 2.2.5 数组常见方法-伪数组转换伪真数组

静态方法 Array.from()




    
    
    Document


    
  • 1
  • 2
  • 3

2.3 String

在JavaScript中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法

JS进阶——构造函数&数据常用函数_第15张图片

之所以具有对象特征的原因是字符串、数值、布尔类型数据是JavaScript底层使用Object构造函数“包装”来的,被称为包装类型。

2.3.1 常见实例方法

JS进阶——构造函数&数据常用函数_第16张图片

2.3.2 练习

请将下面字符串渲染到准备好的p标签内部,结构必须如左下图所示,展示效果如右图所示:

const gift = '50g茶叶,清洗球'

思路:

  1. 把字符串拆分为数组,这样两个赠品就拆分开了  用split(',')
  2. 利用map遍历数组,同时把数组元素生成到span里面,并且返回
  3. 因为返回的是数组,所以需要转换为字符串,用join('')



    
    
    Document


    

2.4 Number

Number是内置的构造函数,用于创建数值

常用方法:

toFixed()设置保留小数位的长度

JS进阶——构造函数&数据常用函数_第17张图片

3、综合案例-购物车展示

需求:根据后台提供的数据,渲染购物车页面

JS进阶——构造函数&数据常用函数_第18张图片

分析业务模块:

①:渲染图片、标题、颜色、价格、赠品等数据

②:单价和小计模块

③:总价模块

把整体的结构直接生成然后渲染到大盒子.list里面

  1. 先利用map来遍历,有多少条数据,渲染多少相同商品
    1. 可以先写死的数据
    2. 注意map返回值是数组,我们需要用join转换为字符串
    3. 把返回的字符串赋值给list大盒子的innerHTML
  2. 里面更换各种数据,注意使用对象解构赋值
    1. 先更换不需要处理的数据、图片,商品名称,单价,数量
    2. 采取对象解构的方式
    3. 注意 单价要保留2位小数  489.00 toFixed(2)
      1. 更换数据-处理规格文字模块
        1. 获取每个对象里面的spec,上面对象解构添加spec
        2. 获得所有属性值是:Object.values()  返回的是数组
        3. 拼接数组是join('') 这样就可以转换位字符串了
      2. 更换数据-处理赠品 模块
        1. 获取每个对象里面的gift,上面对象解构添加gift
        2. JS进阶——构造函数&数据常用函数_第19张图片注意要判断是否有gif属性,没有的话不需要渲染,利用变成的字符串然后写到p.name里面
      3. 更换数据-处理小计模块
        1. 小计=单价*数量
        2. 小计名可以为:subTotal = price* count
        3. 注意保留2位小数JS进阶——构造函数&数据常用函数_第20张图片
      4. 计算合计模块
        1. 求和用到数组reduce方法 累计器
        2. 根据数据里面的数量和单价累加和即可
        3. 注意reduce方法有2个参数,第一个是回调函数,第二个是初始值,这里写0




  
  
  
  Document
  



  
合计:1000.00

你可能感兴趣的:(JavaScript,前端,javascript)