1.创建对象三种方式

1.1 利用对象字面量创建对象
const o ={
          name:'张三'
}

2. 利用 new Object 创建对象
 const o = new Object({name:'张三'})
  console.log(o);// {name:'张三'}
  
3.利用构造函数创建对象
   function Goods(name, price, count) {
  this.name = name//左边的name表示属性 右边的name表示形参
  this.price = price
  this.count = count
}
const Peppa = new Goods('张三', 100, 12)
console.log(Peppa);

1.1 工厂函数

工厂函数 : 用于创建对象的函数

  /* 需求 :  需要创建很多个对象 （姓名、年龄、性别） */
  function createPerson(name,age,sex){
        //1.创建对象
        let p = {}
        //2.给对象赋值
        p.name = name
        p.age = age
        p.sex = sex
        //3. 返回对象
        return p
    }

    let p1 = createPerson('张三',20,'男')
    let p2 = createPerson('李四',22,'女')
    console.log(p1,p2)
    

2. 构造函数

    2.构造函数 :  使用new调用一个函数
        构造函数作用与工厂函数一致，都是用来创建对象的。但是代码更加简洁。
    3.构造函数new工作原理
        (1)创建空对象
        (2)this指向这个对象
        (3)对象赋值
        (4)返回这个对象
    4.构造函数new在使用时需要注意的地方
    4.1 构造函数首字母一般大写, 为了提醒调用者不要忘记new关键字,只能由 "new" 操作符来执行
    4.2 果在构造函数内部 手动return
            return 值类型  ： 无效,还是返回new创建的对象
            return 引用类型  ： 有效，会覆盖new创建的对象
    */

    function Person(name,age,sex){
        //(1)创建空对象   {}
        //(2)this指向这个对象  this = {}
        //(3)对象赋值
        this.name = name
        this.age = age
        this.sex = sex
        //(4)返回这个对象 return this
    }

    let p1 = new Person('张三',20,'男')
    console.log(p1)
    

构造函数注意点:

3.实例成员&静态成员

实例成员：

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

静态成员：

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

 function Person() {
  this.age = 20;
  this.gender = '男';
  this.say = function () {
    console.log('hello');
  }
}
//对于以上代码Person是一个构造函数
//通过new Person得到一个对象就是实例对象
let obj = new Person();
Person.eyes = 2
console.log(obj);
console.dir(Person);
//成员:对象里面只有属性和方法,属性和方法统称为成员
//实例成员:实例对象上的成员与方法
//静态成员:就是构造函数这个对象上的成员

4.内置构造函数

字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型
  const str = 'pink'
  console.log(str.length) //4
  const num = 12
  console.log(num.toFixed(2)) // 12.00
//const str = 'pink'
//js 底层完成， 把简单数据类型包装为了引用数据类型
const str = new String('pink')

5.Object三个常用静态方法

Object.keys 静态方法获取对象中所有属性（键）

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

语法：

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

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

const o = { uname: 'pink', age: 18 }
 1.获得所有的属性名
console.log(Object.keys(o))  //返回数组['uname', 'age']
 2. 获得所有的属性值
console.log(Object.values(o))  //  ['pink', 18]
 3. 对象的拷贝
   const oo = {}
   Object.assign(oo, o)
   console.log(oo) //{ uname: 'pink', age: 18 }
 4.添加属性
const o = { uname: 'pink', age: 18 }
Object.assign(o, { gender: '女' })
console.log(o)//{ uname: 'pink', age: 18 , gender: '女' }

6.Array

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

reduce 返回函数累计处理的结果，经常用于求和等

语法：

 累计值参数：
1. 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）

 arr.reduce(function(累计值, 当前元素){}, 起始值)
 arr.reduce(function (prev, item) {
 console.log(11)
 console.log(prev)
   return prev + item
  }, 0)
  arr.reduce(function (prev, item) {
   console.log(11)
   console.log(prev)
   return prev + item
 })

const arr = [1, 2, 3]
const re = arr.reduce((prev, item) => prev + item)
console.log(re) // 6

案例: 员工涨薪计算成本

①：给员工每人涨薪 30%
②：然后计算需要支出的费用
    const arr = [{
  name: '张三',
  salary: 10000
}, {
  name: '李四',
  salary: 10000
}, {
  name: '王五',
  salary: 20000
},
]
// 涨薪的钱数  10000 * 0.3 
// const money = arr.reduce(function (prev, item) {
//   return prev + item.salary * 0.3
// }, 0)
const money = arr.reduce((prev, item) => prev + item.salary * 0.3, 0)
console.log(money)

7.Arry数组常见方法-其他方法

    //声明数组
    let arr = [10,20,30,40,50]// new Array(10,20,30,40,50)

    //(1) arr.concat(数组)   ： 把两个数组连接成一个数组
    //应用场景： 一般用于长列表(下一页),不断往后面拼接数组
    let newArr = arr.concat([60,70,80,90])
    console.log(newArr)

    //(2) arr.reverse()   : 翻转数组
    //应用场景： 价格从低到高 切换成 从高到低， 只需要翻转数组即可
    arr.reverse()
    console.log( arr )

    //(3) arr.join('分隔符') : 把数组每一个元素拼接成字符串
    let arr1 = [80,90,55,60]
    //应用场景 :  有些歌曲是多个人合唱，服务器会给我们一个数组。 
    这个时候就需要将数组元素通过join拼接起来然后再页面显示
    let str = arr1.join('&')
    console.log( str )//80&90&55&60

    //(4) arr.sort( function(a,b){return a-b} ) : 排序
    let arr2 = [80,90,50,20,77,88]
    arr2.sort( function(a,b){
        // return a-b //从小到大
        return b-a //从大到小
    } )
    console.log(arr2)

 const arr = [
  {
    name: '小米',
    price: 1999
  },
  {
    name: '华为',
    price: 3999
  },
]
// 找小米 这个对象，并且返回这个对象
// const mi = arr.find(function (item) {
//   // console.log(item)  //
//   // console.log(item.name)  //
//   console.log(111)
//   return item.name === '华为'
// })
// 1. find 查找
// const mi = arr.find(item => item.name === '小米')
// console.log(mi)
// 2. every 每一个是否都符合条件，如果都符合返回 true ，否则返回false
const arr1 = [10, 20, 30]
const flag = arr1.every(item => item >= 20)
console.log(flag)

案例:

请将const spec = { size: '40cm*40cm' , color: '黑色'} 里面的值写到div标签里面
 <body>
    <div></div>
<script>
   const spec = {
          size: '40cm*40cm',
          color: '黑色'
      }
1. 所有的属性值获取过来  数组
console.log(Object.values(spec))
 2. 转换为字符串   数组join('/') 把数组根据分隔符转换为字符串
console.log(Object.values(spec).join('/'))

document.querySelector('div').innerHTML = Object.values(spec).join('/')

8. 把伪数组转换为真数组

 <body>
 <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>
<script>
//  Array.from(lis) 把伪数组转换为真数组
const lis = document.querySelectorAll('ul li')
// console.log(lis)
// lis.pop() 报错
const liss = Array.from(lis)
liss.pop()
console.log(liss)
</script>
</body>

9.String常见实例方法

<script>
//1. split 把字符串 转换为 数组  和 join() 相反
// const str = 'pink,red'
// const arr = str.split(',')
// console.log(arr) //['pink','red']
// const str1 = '2022-4-8'
// const arr1 = str1.split('-')
// console.log(arr1)  // ['2022','4','8']
// 2. 字符串的截取   substring(开始的索引号[， 结束的索引号])
// 2.1 如果省略 结束的索引号，默认取到最后
// 2.2 结束的索引号不包含想要截取的部分
// const str = '今天又要做核酸了'
// console.log(str.substring(5, 7)) // 核酸
// 3. startsWith 判断是不是以某个字符开头
// const str = 'pink老师上课中'
// console.log(str.startsWith('pink')) // true
// 4. includes 判断某个字符是不是包含在一个字符串里面
const str = '我是pink老师'
console.log(str.includes('pink')) // true
</script>

案例示例

    let str = '黑马程序员武汉大前端女神节快乐!'    
    //1. 字符串类似于数组，也有长度和下标
    console.log( str.length )//16
    console.log( str[5] )//武
    
    //2. str.indexOf('字符串')   获取 ‘字符串’ 在str中的首字母下标
    // 如果字符串存在则返回首字母下标， 如果字符串不存在则返回固定值 -1
    // 应用场景： 一般用户判断 str中是否有某个字符串  如果没有则返回-1,不是-1说明有

    let index1 = str.indexOf('大前端')
    console.log( index1 )//7
    let index2 = str.indexOf('大女神')
    console.log( index2 )//-1

    //3. str.split('分隔符')   用分隔符切割字符串，得到切割之后的数组
    // 应用场景 : 一般用户解析 网址
    let url = 'http://www.baidu.com?name=张三&age=20'
    console.log( url.split('|') )//['http://www.baidu.com?name=张三&age=20']
    console.log( url.split('?') )//['http://www.baidu.com', 'name=张三&age=20']
    console.log( url.split('=') )//['http://www.baidu.com?name', '张三&age', '20']

    //4. str.substr(起始下标,截取长度)     截取字符串
    // 应用场景 ： 一般后台返回的数据 不会和前端完全匹配。 有时候需要自己截取一部分
    //例如： 商品价格后台返回 :价格58元  但是前端只需要显示58元，就需要截取
    console.log( str.substr(2,5) )//从2下标开始，往后截取5个字 程序员武汉

    //5.大小写转换 （中文没有大小写）
    //应用场景： 字母验证码不区分大小写 （一般无论你输入什么，都会转成大写或小写保持格式统一）

    console.log('dsSFJSGDJHsdfs'.toLocaleLowerCase() )//小写 dssfjsgdjhsdfs
    console.log('dsSFJSGDJHsdfs'.toLocaleUpperCase() )//大写 DSSFJSGDJHSDFS 
    

10.案例:显示赠品练习

<body>
   <div></div>
 <script>
const gift = '50g的茶叶,清洗球'
// 1. 把字符串拆分为数组
// console.log(gift.split(',')) [,]
// 2. 根据数组元素的个数，生成 对应 span标签
// const str = gift.split(',').map(function (item) {
//   return `<span>【赠品】 ${item}</span> <br>`
// }).join('')

// // console.log(str)
// document.querySelector('div').innerHTML = str
document.querySelector('div').innerHTML = gift.split(',').map(item => `<span>【赠品】    ${item}</span> <br>`).join('')
 </script>
</body>

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

12.转换成字符串

const num = 10
console.log(String(num)) // 10
console.log(num.toString()) // 10

数组添加属性