JS进阶 2——构造函数、数据常用函数

JS进阶 2——构造函数、数据常用函数

1.深入对象

• 创建对象三种方式

  • 通过对象字面量创建：对象名 = { }
  • 通过new Object创建：对象名 = new Object()
  • 使用构造函数实例化多个相似对象：
    • 命名都以大写字母开头
    • 由"new"操作符执行

   function Pig(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
      }
      //创建小小怪对象
      const Xxg = new Pig('小小怪', '18', '女')
      //创建大大怪对象
      const Ddg = new Pig('大大怪', '20', '男')  
  

2.内置构造函数

• 基本包装类型：为什么基本数据类型例如string类型有length属性，因为JS底层将简单数据类型包装成了引用数据类型。

• Object：常用的三个静态方法(只有构造函数Object可以调用)

  • object.keys(对象名)：获取对象所有的键(属性名)
  • object.values(对象名)：获取对象所有属性值
  • object.assgin( ， )

   const o = { name: '小小', age: '18' }
     //1.获取所有属性名
   const re = Object.keys(o)
   console.log(re) //['name','age']
     //2.获取所有属性值
   console.log(Object.values(o)) //['小小','18']
     //3.拷贝对象 
   const oo = {}
   Object.assign(oo, o)
   console.log(oo)
      //拷贝应用  给对象添加属性
   Object.assign(o, { gender: '女' })
   console.log(o)
  

• Array：

  • 常用实例方法（去mdn查看具体用法）

  方法	作用	说明
  forEach	遍历数组	不返回数组，用于查找遍历数组元素
  filter	过滤数组	返回新数组，返回的是满足条件的数组元素
  map	迭代数组	返回新数组，返回的是处理之后的数组元素
  reduce	累计器	返回累计处理的结果，经常用于求和
  join	数组转字符串	返回字符串，返回的是数组元素以特定方式拼接而成的字符串
  find	查找元素	返回符合测试条件的第一个数组元素
  every	检测元素是否都符合指定条件	若都符合返回true，反之返回false
  some	检测是否铀元素满足指定条件	若有元素满足条件返回true，反之返回false
  concat	合并数组	返回新数组
  sort	对原数组单元值排序
  splice	替换数组单元
  reverse	反转数组
  findIndex	查找元素的索引值

  • reduce基本语法：

   arr.reduce(function () { }, 起始值)
   arr.reduce(function (上一次值, 当前值) { }, 初始值)
  

   const arr = [1, 5, 8]
      //1.没有初始值
      const total = arr.reduce(function (prev, current) {
        return prev + current
      })
      console.log(total) //14
      //2.有初始值
      const total1 = arr.reduce(function (prev, current) {
        return prev + current
      }, 10)
      console.log(total1) //24
  

  • 常用静态方法：Array.from()：伪数组转换为真数组(伪数组没有数组的pop，push等方法)

   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script>
      const lis = document.querySelectorAll('ul li')
      const liss = Array.from(lis)
      liss.pop()
      console.log(liss);
    </script>
  

• String

  • 实例属性或方法

  实例属性或方法	说明
  length	获取字符串长度
  split(‘分隔符’)	用来将字符串拆分为数组
  substring(截取第一个字符串的索引，结束的索引号)	用于字符串截取
  startsWith(检测字符串，检测位置索引号)	检测是否以某字符开头
  includes(检测的字符串，检测位置索引号)	判断字符串是否包含在另一个字符串中
  toUpperCase	将字母换成大写
  toLowerCase	将字母换成小写
  indexOf	检测是否包含某字符
  endsWith	检测是否以某字符结尾
  replace	用于替换字符，支持正则匹配
  match	用于查找字符，支持正则匹配

 // 1.字符串转为数组
    const str = 'pink,red'
    const arr = str.split(',')
    console.log(arr)
    // 2.字符串截取
    const str1 = '我今天很开心'
    console.log(str1.substring(4, 6)); //开心
    //3.startWith：检测字符串开头
    const str2 = '今天是星期'
    console.log(str2.startsWith('星期', 3)) //true
    //4.includes ：检测字符串是否包含
    const str3 = '大大怪将军，我是小小怪，你在哪里呀'
    console.log(str3.includes('小小怪'))

• Number

  • toFixed保留小数位的长度

  const price =23.128789
  console.log(price.toFixed(2)) //23.13