内置构造函数（二）

(一）Object：内置构造函数，用于创建普通对象

//通过构造函数创建普通对象
const user = new Object({name:'小明',age:15})

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

1.三个静态方法（静态方法就是只有构造函数Object可以调用）

(1)获取对象里面的属性和方法

const o = {name:'佩奇',age:6}
console.log(o.name) 
console.log(o.age)

//以上方法只能依次将属性拿出来，想要一次性拿出来需看以下方法
for(let k in o) {
  console.log(k) //属性 name  age
  console.log(o[k]) //值 佩奇 6
}

现在 利用静态方法获取

作用：Object.keys静态方法获取对象中所有属性（键，值）

语法：

const o = {name:'佩奇'，age:6}

//获取对象所有键，并且返回是一个数组
const arr = Object.keys(o)
console.log(arr) //['name','age']

//获取对象所有的值
const va = Object.values(o)
console.log(va) //['佩奇',6]

注：返回的是一个数组

（2）Object.assign 静态方法进行对象拷贝

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

const o = {name:'佩奇',age:6}
const oo = {}
Object.assign(oo,o)  //被拷贝的对象放在后面
console.log(oo)

const o = {name:'佩奇',age:6}
Object.assign(o,{gender:'女'}) //向对象o中添加属性gender
console.log(o)

（二）Array :内置构造函数，用于创建数组

const arr = new Array(3,5)
console.log(arr) //[3,5]

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

1.数组常见实例方法-核心方法

(1)forEach ：遍历数组：不返回数组，常用于查找遍历数组元素

（2）filter：过滤数组：返回新数组，返回的是海选满足条件的数组元素

（3）map：迭代数组：返回新数组，返回的是处理之后数组元素

（4）reduce：累计器：返回累计处理的结果，常用于求和

基本语法:

const arr = [1,2,3,4]
arr.reduce(function(上一次值，当前值）{},初始值）

再次分为两种情况：有初始值 & 没有初始值

没有初始值：

const arr = [1,5,8]
const total = arr.reduce(function(prev,current)
  return prev + current
})
console.log(total)

有初始值：

const total = arr.reduce(function(prev,current){
  return prev + current
},10)
console.log(total)

//箭头函数写法
//const total = arr.reduce((prev,current) => prev + current,10)

2.reduce计算薪资案例

const arr = [
    {
      name:'张三',
      salary:10000,
    },
    {
      name:'李四',
      salary:10000,
    },
    {
      name:'王五',
      salary:10000
    }
  ]

  const total = arr.reduce((prev,current) =>{
    return prev + current.salary //对象数组，要用到对象里的属性
  },0) //对象数组时，不能省略初始值，必须设置为0
  console.log(total)

3.Array数组常见方法-其他方法

mdn查找这些方法使用教程

(1) join：数组元素拼接为字符串

(2) find：查找元素，返回符合测试条件的第一个数组元素值，若没有符合的则返回undefined

(3) every:检测数组所有元素是否都符合条件，若所有元素都通过检测返回True，否则返回False

(4) some：如果数组中有元素满足条件返回True，否则返回False

(5) concat :合并两个数组，返回新数组

(6) sort：对原数组单元值排序

(7) splice：删除或者替换原数组单元

(8) reverse :反转数组

(9) findIndex：查找元素索引值

（10）find方法使用：

const arr = ['red','blue','green']
const re arr.find(function(item) { //find中是回调函数，参数是数组值
  return item ==='blue'
})
console.log(re)

find常见使用场景：筛选对象

const arr = [
{
  name:'小米',
  price:1999
},
{
  name:'华为',
  price:3999
},
]

//找小米这个对象，并且返回这个对象
const mi = arr.find(function(item) {
  return item.name === '小米'
})
console.log(mi)
//最后返回的是包含小米这个对象的对象

（11）every使用方法(some类似）：

const arr1 = [10,20,30]
//const flag = arr1.every(item => item >=10) 箭头函数写法
const flag = arr1.every(function(item) {
  return item >= 10
})
console.log(flag)

4.用Array里的方法将如下内容显示在网页中

  <div class="div"></div>
  <script>
    const spec = { size: '40cm*40cm', color: '黑色' }
    //1所有属性值获取过来
    // Objectvalues(spec)
    //2转换为字符串 join根据分隔符转换为字符串
    // console.log(Object.values(spec).join('/'))
    document.querySelector('div').innerHTML = Object.values(spec).join('/')
  </script>

5.Array数组常见方法-伪数组转换为真数组

静态方法Array.form

const lis = document.querySelectorAll('ul li') //运用querySelectorAll方法获取所有ul下li的元素，返回一个类数组，类数组有数组特性，例如通过索引访问节点，使用length得出节点数量但是不具有数组的方法和属性，例如push，pop
//  lis.pop() 报错
const liss = Array.form(lis) //用form方法将伪数组转换为真数组，那么就可以使用数组的属性和方法了
liss.pop() //删除数组最后一个元素