ES6学习笔记（四）——构造函数&数据常用函数

一、深入对象

1.1创建对象三种方式

① 利用对象字面量创建对象

② 利用 new Object 创建对象

③ 利用构造函数创建对象

1.2 构造函数

构造函数 ： 是一种特殊的函数，主要用来初始化对象

使用场景：常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。

构造函数在技术上是常规函数。

不过有两个约定：

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

        它们只能由 "new" 操作符来执行。

构造函数语法： 大写字母开头的函数

创建构造函数：

说明：

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

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

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

        构造函数内部的 return 返回的值无效，所以不要写return

        new Object（） new Date（） 也是实例化构造函数

实例化执行过程:

        创建新对象

        构造函数this指向新对象

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

        返回新对象

1.3 实例成员&静态成员

① 实例成员：

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

说明：

        实例对象的属性和方法即为实例成员

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

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

② 静态成员：

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

说明：

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

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

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

二、内置构造函数

在 JavaScript 中 最主要 的数据类型有 6 种：

        基本数据类型：字符串、数值、布尔、undefined、null

         引用类型: 对象

但是，我们会发现有些特殊情况：

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。

JS中几乎所有的数据都可以基于构成函数创建。

引用类型

        Object，Array，RegExp，Date 等

包装类型

        String，Number，Boolean 等

2.1 Object

Object 是内置的构造函数，用于创建普通对象。

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

下面学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）

① Object.keys 

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

语法：

注意： 返回的是一个数组

② Object.values 

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

语法：

注意： 返回的是一个数组

③ Object. assign

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

语法：

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

2.2 Array

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

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

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

① forEach 遍历数组

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

主要使用场景： 遍历数组的每个元素

语法：

注意：

        forEach 主要是遍历数组

        参数当前数组元素是必须要写的，索引号可选。

② filter 筛选数组

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

主要使用场景： 筛选数组符合条件的元素 ，并返回筛选之后元素的新数组

语法：

filter() 筛选数组

返回值： 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

参数： currentValue 必须写， index 可选

因为返回新数组，所以不会影响原数组

③ map 迭代数组

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

let arr = [10, 20, 30]
    let newArr = arr.map((item, index) => {
    return item * 10
})
console.log(newArr) //[100, 200, 300]

④ reduce 累计器

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

基本语法：

参数： 起始值可以省略，如果写就作为第一次累计的起始值

累计值参数：

        如果有起始值，则以起始值为准开始累计， 累计值 = 起始值

        如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计

        后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）

使用场景：求和运算：

reduce执行过程：
    1. 如果没有起始值，则上一次值为数组的第一个元素的值
    2. 每一次循环，把返回值给做为下一次循环的上一次值
    3.如果有起始值，则起始值作为上一次值

数组 reduce 方法
arr.reduce(function(上一次值, 当前值){}, 初始值)
1. 没有初始值
const arr = [1, 2, 4, 5]
const total = arr.reduce((prev, current) => prev + current)
console.log(total)
执行过程：
上一次值         当前值        返回值（第一次循环）
  1               2           3
上一次值         当前值        返回值（第二次循环）
  3               4           7
上一次值         当前值        返回值（第三次循环）
  7               5           12

2. 有初始值
const arr = [1, 2, 4, 5]
const total = arr.reduce((prev, current) => prev + current, 10)
console.log(total)
执行过程：
上一次值         当前值        返回值（第一次循环）
   10              1            11
上一次值         当前值        返回值（第二次循环）
   11              2            13
上一次值         当前值        返回值（第三次循环）
   13              4            17
上一次值         当前值        返回值（第四次循环）
   17              5            22

3.计算薪资案例
const arr = [
    {
    name: '张三',
    salary: 10000
    }, {
    name: '李四',
    salary: 10000
    }, {
    name: '王五',
    salary: 10000
    }
]

// 初始值为 0，也就是上一次的值， 当前值为数组第一个元素，即第一个对象
const total = arr.reduce((prev, current) => {
    // console.log(prev)
    // console.log(current)
    return prev + current.salary  
}, 0)
console.log(total)

// 每个人涨薪 30%，当月支出多少薪资
const increace = arr.reduce((prev, current) => prev + current.salary * 1.3, 0)
console.log(increace)

④ find 查找

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const arr = ['red', 'blue', 'green']
let res = arr.find(function(item) {
    return item === 'blue'
})
console.log(res)  //blue

const goods = [
    {
        name: '小米',
        price: 1999
      },
      {
        name: '华为',
        price: 3999
      },
      {
        name: 'vivo',
        price: 1888
      }
]
需求：找到 华为 这个对象并且返回
const huawei = goods.find( item => item.name === '华为')
console.log(huawei) //{name: '华为', price: 3999}

⑤ every 方法

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。

const arr = [10, 20, 30]
const res = arr.every(item => item >= 10)
console.log(res)  //true

⑥ some方法

some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。

some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。

const arr = [10, 20, 30]
const flag = arr.some(item => item > 20)
console.log(flag)

⑦ 数组常见方法-其他方法

学会查阅MDN文档

⑧ 伪数组转换为真数组

静态方法 Array.from() 将一个伪数组转化为真数组

let lis = document.querySelectorAll('li')

lis是一个伪数组，没有pop、push方法
将 lis 转化为真数组

let liss = Array.from(lis)
liss.pop()
console.log(liss) //  [li, li]

2.3 String

在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法

之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为 包装类型 。

① 常见实例方法

② 重点掌握 split、substring、startsWith、includes

1. 将数组拼接为字符串
let arr = ['red', 'blue', 'green']
let str = arr.join(' ')
console.log(str)  //redbluegreen
let str2 = arr.join(',')
console.log(str2) //red,blue,green

2. 将字符串拆分为数组
let arr2 = str2.split(',')
console.log(arr2) // ['red', 'blue', 'green']

3. 字符串的截取 
String 的 substring(起始位置, 结束位置) 
该方法返回该字符串从起始索引到结束索引（不包括）的部分，
如果未提供结束索引，则返回到字符串末尾的部分。
let str3 = '今天天气真好啊'
let substr3 = str3.substring(2, 6)
console.log(substr3)

4. startWith 判断一个字符串是不是以某个字符开头
let str4 = '今天天气真好啊'
console.log(str4.startsWith('今天'))  //true

5. includes() 方法执行区分大小写的搜索，以确定是否可以在一个字符串中找到另一个字符串，
并根据情况返回 true 或 false。
let str5 = 'To be, or not to be, that is the question.'
console.log(str.includes("To be")); // true
console.log(str.includes("question")); // true
console.log(str.includes("nonexistent")); // false
console.log(str.includes("To be", 1)); // false
console.log(str.includes("TO BE")); // false
console.log(str.includes("")); // true

2.4 Number

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

① 常用方法

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

② 关于小数的计算精度问题

0.1 + 0.2 = ?

解决方案：

        我们经常转换为整数 （0.1 * 100 + 0.2 * 100）/ 100 === 0.3