JS进阶(二)：构造函数&数据常用函数

---

一、构造函数

1. 深入对象

1.1 创建对象的三种方式

 <script>
   // 1. 利用对象字面量创建对象
   const o = {name:'佩奇'}
   
   // 2. 利用new object创建对象
   const o = new Object({name:'佩奇'})
   console.log(o) // {name:'佩奇'}
   
   // 3. 利用构造函数创建对象
   // 构造函数: 1.命名以大写字母开头  2.只能由'new'操作符来执行
   function Student(uname,age){
     this.name = uname
     this.age = age
   }
   const a1 = new Student('张三',18) //new关键字调用函数被称为实例化
   console.log(a1) //{age: 18,name: "张三"}
</script>

1.2 构造函数

  <script>
    实例化执行过程：
	    1.创建新空对象
		2.构造函数this指向新对象
		3.执行构造函数代码，修改this，添加新的属性
		4.返回新对象
    function Goods(name,price,count){
      this.name = name
      this.price = price
      this.count = count
    }
    const m1 = new Goods('家电1',1999,20)
    const m2 = new Goods('家电2',3999,59)
    const m3 = new Goods('家电3',1888,100)
    console.log(m1)
  </script>

1.3 实例成员&静态成员

实例成员：通过构造函数创建的对象为实例对象，实例对象上的属性和方法属于实例成员

  <script>
    // 1. 实例成员
    function Student(name){
      this.name = name
    }
    const s1 = new Student('student1')
    const s2 = new Student('student2')
    // 构造函数创建的实例对象 彼此独立互不影响(s1修改name属性/添加方法，不会影响s2)
    s1.name = '张三'     // 实例属性
    s1.sayHi = () => {  // 实例方法
      console.log('hi')
    }
  </script>

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

  <script>
    // 2. 静态成员：构造函数上的属性和方法称为静态成员
    function Student(){
    }
    Student.age = '18'           // 静态属性
    Student.sayHi = function(){  // 静态方法
      console.log(this) // this指向构造函数Student
    }
  </script>

2. 内置构造函数

2.1 Object

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

  <script>
    const o = {uname:'student',age:18}
    // 1.获取所有的属性名
    console.log(Object.keys(o))  //返回数组['uname', 'age']
    // 2.获取所有的属性值
    console.log(Object.values(o))  //返回数组['student', 18]
    // 3.Object.assign静态方法常用于对象拷贝
    const obj = {}
    Object.assign(obj,o)
    console.log(obj) //  {uname: 'student', age: 18}

    // 可以理解为: 添加新的属性/合并
    Object.assign(o,{Gender: '女'})
    console.log(o) //  {uname: 'student', age: 18, Gender: '女'}
  </script>

2.2 Array

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

2.2.1 reduce

  <script>
      // 数组reduce方法
      // arr.reduce(function(上一次值,当前值){},初始值)
      const arr = [1,5,7]

      // 1. 没有初始值
      const total = arr.reduce(function(prev,current){
        return prev+current
      })
      console.log(total)  //13

      // 2. 有初始值
      const total1 = arr.reduce(function(prev,current){
        return prev + current
      },10)
      console.log(total1)  //23

      // 3.箭头函数的写法
      const total2 = arr.reduce((prev,current) => prev + current, 10)
      console.log(total2)  //23
  </script>

2.2.2 find

  <script>
    // 数组find方法
    // 类似于筛选,主要是查找元素
    const arr = [
      {
        name: '品牌一',
        price: '1999'
      },
      {
        name: '品牌二',
        price: '3999'
      }
    ]
    const s = arr.find(item => item.name == '品牌一')
    console.log(s) //  {name: '品牌一',price: '1999}
  </script>

2.2.3 其他

Array.from() 把伪数组转为真数组
find every findIndex some splice join sort等可查文档了解学习
文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

2.3 String

方法	说明
length	用来获取字符串的长度
split('分隔符')	用来将字符串拆分成数组
substring(需要截取的第一个字符的索引[,结束的索引号])	用于字符串截取
startsWith(检测字符串[,检测位置索引号])	检测是否以某字符开头
includes(搜索的字符串[,检测位置索引号])	判断一个字符串是否包含在另一个字符串中，根据情况返回true或false

---