JS高阶 - day02

一、 对象进阶

1.1 创建对象三种方式

1. 利用对象字面量创建对象

    const o = {
        name:'佩奇'
    }

2. 利用 new Object 创建对象

const o = new Object({name:'佩奇'})

3. 利用构造函数创建对象 

    function Pig(name,age,gender){
        this.name = name // 前面是属性，后面是形参，属性名和形参名并不需要完全一样
        this.age = age
        this.gender = gender
    }
    // new就是创建一个新对象
   const FP = new Pig('猪爸爸',33,'男')
    const MP = new Pig('猪妈妈',32,'女')

1.2 构造函数

约定：

        它们的命名以大写字母开头。

        它们只能由"new" 操作符来执行。（实例化）

    function Pig(name,age,gender){
        this.name = name // 前面是属性，后面是形参，属性名和形参名并不需要完全一样
        this.age = age
        this.gender = gender
    }
    // new就是创建一个新对象
   const FP = new Pig('猪爸爸',33,'男')
    const MP = new Pig('猪妈妈',32,'女')
    console.log(FP,MP)

    //实例化构造函数时没有参数时可以省略()
    const P = new Pig
    console.log(P)

实例化执行过程

        1. 创建新对象

        2. 构造函数this指向新对象

        3. 执行构造函数代码，修改this，添加新的属性

        4. 返回新对象

注：

        使用new关键字调用函数的行为被称为实例化

        实例化构造函数时没有参数时可以省略()

        构造函数内部无需写return，返回值即为新创建的对象

        构造函数内部的return返回的值无效

        比如之前的new Object（） ，new Date（）也是实例化构造函数

1.3 实例成员&静态成员

1.3.1 实例成员

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

  function Pig(name,age,gender){
    // 通过构造函数创建的对象称为实例对象，实例对象上的属性和方法属于实例成员
    this.name = name
    this.age = age
    this.gender = gender
  }
  // new就是创建一个新对象
  const FP = new Pig('猪爸爸',33,'男')
  FP.name = '小猪爸爸'
  FP.sayHi = () =>{
    console.log('hi~~~')
  }
  const MP = new Pig('猪妈妈',32,'女')
  console.log(FP)
  console.log(MP)

注：

        为构造函数传入参数，动态创建结构相同但值不同的对象

        构造函数创建的实例对象彼此独立互不影响。

1.3.2 静态成员

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

   function Pig(name,age,gender){
    this.name = name
    this.age = age
    this.gender = gender
  }
  // 静态成员 构造函数上的属性和方法称为静态成员
  Pig.eyes = 2
  Pig.sayHi = function (){
    console.log(this)
  }
  //静态成员只能通过构造函数来访问
  console.log(Pig.eyes)
  Pig.sayHi()

注：

        一般公共特征的属性或方法静态成员设置为静态成员

        静态成员方法中的this 指向构造函数本身

二、内置构造函数

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。JS中几乎所有的数据都可以基于构成函数创建。

引用类型：

Obejct, Array,RegExp,Date等

包装类型：

String，Number,Boolean

2.1 Object

Object是内置的构造函数，用于创建普通对象，推荐字面量创建(便捷)。

Object的三个常用静态方法：

        1.Object.keys静态方法获取对象中所有属性（键），返回的是一个数组。

  const o = {uname: '温小仙', age:18}
  const obj = {}
  //Object.keys() 获取对象中所有属性 返回的是数组
  console.log(Object.keys(o));

        2.Object.values 静态方法获取对象中所有属性值，返回的是一个数组。

  const o = {uname: '温小仙', age:18}
  const obj = {}
  // Object.values() 获得所有的值  返回的是数组
  console.log(Object.values(o))

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

  const o = {uname: '温小仙', age:18}
  const obj = {}  
  // 拷贝对象的值，第一个参数是需要拷贝的，第二个参数是拷贝源
  Object.assign(obj,o)
  // 经常使用的场景是给对象添加属性
  Object.assign(obj,{gender:'男'})
  console.log(obj);

2.2 Array

Array 是内置的构造函数，用于创建数组，同样推荐使用字面量创建

Array的8个常用的实例方法

方法	说明
forEach	遍历数组 经常用于查找遍历数组元素 不返回数组
filter	过滤数组，返回新数组，返回的是筛选满足条件的数组元素
map	迭代数组，返回的是处理之后的数组元素
reduce	累计器 返回累计处理的结果，经常用来求和
join	将数组转化为字符串，参数是数组变成字符串时你想在元素直接插入的字符
find	找到并返回符合需求的值（或者索引等）
every	测试一个数组内所有的元素是否都满足测试条件，返回是布尔值
some	测试一个数组内元素是否有满足测试条件的元素，返回是布尔值

Array常见的一个静态方法 Array.from() 伪数组转换为真数组

2.2.1 reduce

  const  arr = [1,2,5,8,9]
  // prev 是上一次计算出来的值，没有初始值就是数组的第一个元素
  // current 是当前的要和prev 进行计算的值
  // 没有初始值会比有初始值少循环一次
  // 没有初始值 // 循环四次 数组长度减一
/*  arr.reduce(function (previousValue,currentValue){
      return previousValue + currentValue
  })*/
  // 写出箭头函数
  const total1 = arr.reduce((prev, current) => prev + current);
  // 有初始值 循环次数就是数组长度  如果是对象数组的形式，初始值不能省
/*  arr.reduce(function (prev,current){
      return prev + current
  },5)*/
  // 箭头函数形式
  const total2 = arr.reduce((prev, current) => prev + current, 5);
  console.log(total1,total2)

2.2.2 find

  //Array的实例方法find  找到并返回需求的值（或者索引等）  查找find
  const item = arr.find(item => item === 2);
  console.log(item)
  // 使用场景
  const phone = [
      {
          name:'小米',
          price:1999
      },
      {
          name:'华为',
          price:3999
      }
  ]
  //找到小米，并返回其所在对象
  // 返回数组中第一个满足所提供测试函数的元素的值，否则返回undefined
  const xiaomi = phone.find(item => item.name === '小米'); // 返回符合的item
  console.log(xiaomi)

2.2.3 every和some

  //Array的实例方法  every  some
  // every测试一个数组内所有的元素是否都满足测试条件，返回是布尔值
  // some测试一个数组内元素是否有满足测试条件的元素，返回是布尔值
  console.log(arr.every(item => item >= 0));
  console.log(arr.some(item => item >=9))

 2.2.4 from

  // Array的静态成员 from 伪数组转换成真数组
  const lis = document.querySelectorAll('ul li')
  const liss = Array.from(lis);
  liss.pop()
  console.log(liss);

2.3 String

String是JavaScript底层使用Object构造函数“包装”来的被称为包装类型.

方法	作用
split	将字符串转化为数组
substring	字符串截取 (substr 已经被废弃) 传入的是开始索引号和截取的长度 结束没传，默认到字符串结尾
startWith	检测字符串是否已某一指定字符开头 ,可指定检查开头的索引号，返回布尔值
includes	判断一个字符串是否包含另一个字符串 可提供从哪个索引号开始

2.3.1 split

  const str = 'pink,red,男'

  const human = str.split(',') // 参数是以什么符号来分割字符串
  console.log(human);

2.3.2 substring

  const str = 'pink,red,男'

  // substring 字符串截取 (substr 已经被废弃) 传入的是开始索引号和结束的索引号，以该数字为索引的字符不包含在截取的字符串内)。
  // 结束没传，默认到字符串结尾
  console.log(str.substring(5, 8));//  indexStart和indexEnd谁小谁就是开始的索引号，结束索引号，不包含传进去的索引号参数
  // 如果是 5，1 就是ink,意思就是 从一索引开始 捡取5-1 = 4个长度
  // 如果是 5.8 就是red意思就是 从五索引处开始 捡取 8 - 5 = 3 个长度
  // indexStart和indexEnd谁小谁就是开始的索引号
  // indexStart = indexEnd 返回一个空字符串
  // 任一参数< 0 或为NaN 则该参数视为 0
  console.log(str.substring(0))

2.3.3 startWith

   const str = 'pink,red,男'
  // startWith 检测字符串是否已某一指定字符开头 可知道检查开头的索引号，返回布尔值
  console.log(str.startsWith('pink')); // true
  console.log(str.startsWith('pi')); // true
  console.log(str.startsWith('red')); // false
  console.log(str.startsWith('red',5)); //true

2.3.4  includes

  const str = 'pink,red,男'
  // includes 判断一个字符串是否包含另一个字符串 可提供从哪个索引号开始
  str.includes('pink')// true
  str.includes('pink',1) //false

2.4 Number

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

常用的实例方法：toFixed() 设置保留小数位的长度

  // toFixed()  保留小数的，参数传几就是保留几位小数，不传就是整数，并进行四舍五入
  const num = 10.516
  console.log(num.toFixed(2));
  // 整数也可以使用
  const num1 = 10
  console.log(num1.toFixed(2));//10.00