JS内置构造函数

本节目标

熟练使用内置构造函数

• 数据类型
• 数据包装
• Object
• Array
• String
• Number

数据类型

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

基本数据类型

字符串(String), 数值(Number), 布尔(Boolean), undefiend, null

引用数据类型

对象(Object), 数组(Array), 函数(Function)

数据包装

为什么基本数据类型也可以调用属性和方法?

<script>
    //普通字符串
    const str = 'andy'
    console.log(str.length) // 4
    // 普通数值
    const count = 2
    console.log(count.toFixed(2)) // 2.00
</script>

字符串, 数值, 布尔等基本类型都有专门的构造函数, 称为包装类型

js中几乎所有的数据都可以基于构造函数创建

<script>
    // 正常代码
    const str = 'andy'

    // 数据包装
    // JS底层自动把基本类型的数据包装成了引用数据类型
    const str = new String('andy')

    // 所以基本类型的数据也可以使用属性和方法
    console.log(str.length) // 4

</script>

Object

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

1. 但是我们推荐使用字面量的方式声明对象
2. 所以在开发中, Object构造函数最大的作用是给我们提供了一些好用的静态方法
3. 静态方法就是只能通过构造函数Object调用

对象常用静态方法

场景1: 获取对象的属性和值

for in

作用: 遍历对象

<script>
    const obj = { name: '佩奇', age: 5 }
    // for in
    for (const k in obj) {
      console.log(k) // 对象属性 name age
      console.log(obj[k]) // 属性值 佩奇 5
    }

  </script>

Object.keys / Object.Values

作用: 获取对象中的所有属性/属性值

注意: 返回的是一个数组

<script>
    const obj = { name: '佩奇', age: 5 }
    // 获取对象的所有键值
    const keys = Object.keys(obj)
    console.log(keys) // ['name','age']
</script>

<script>
    const obj = { name: '佩奇', age: 5 }
    // 获取对象的所有属性值
    const values = Object.values(obj)
    console.log(values) // ['佩奇', 5]
</script>

场景2: 对象的浅拷贝

Object.assign()

作用: 对象浅拷贝

语法: Object.assign(新对象, 被拷贝对象)

<script>
    const obj1 = { name: '佩奇', age: 5 }
    const obj2 = {}
    // 对象的浅拷贝 
    Object.assign(obj2, obj1)
    console.log(obj2);
</script>

场景3: 给对象添加属性

单个添加

<script>
    const obj = { name: '佩奇', age: 5 }
    obj.gender = '女'
    console.log(obj)
  </script>

合并对象

语法: Object.assign(对象, 被合并的对象)

场景: 给对象批量的添加属性

<script>
    const obj = { name: '佩奇', age: 5 }
    Object.assign(obj, { gender: '女', height: 120 })
    console.log(obj);
  </script>

Array

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

1. 但是我们推荐使用字面量的方式声明数组
2. 所以在开发中, Array构造函数最大的作用是给我们提供了一些好用的实例方法
3. 实例方法就是只能通过实例对象调用

数组常用实例方法

forEach()

定义

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

语法

示例

<script>
    const arr = ['1', '2', '3']
    arr.forEach((item, index) => {
      console.log(item) // 数组元素 1 2 3
      console.log(index) // 索引
    })
</script>

小结

1. 主要使用场景: 遍历数组的每个元素, 特别适合遍历数组对象
2. 当前数组元素(item) 是必填的, 索引号(index)是选填的
3. 一旦开始循环, 无法中断.
4. 遍历元素, 不影响原数组

filter()

定义

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

语法

示例

<script>
    const arr = [10, 50, 3, 20, 21]
    const newArr = arr.filter(item => {
      return item > 20
    })
    console.log(newArr);
</script>

小结

1. 主要使用场景: 筛选数组中符合条件的元素, 并返回筛选之后元素的新数组
2. 当前数组元素(currentValue) 是必填的, 索引号(index)是选填的
3. 返回新数组, 不会影响原数组

reduce()

定义

freduce()方法 返回累计处理的结果, 经常用于求和等

语法

1. 如果有起始值, 则把起始值累加到结果中
2. 如果省略省略起始值, 会把数组的第一个元素作为起始值

示例

<script>
    const arr = [1, 2, 3]
    const total = arr.reduce((prev, curremnt) => {
      return prev + curremnt
    }, 6)
    console.log(total) // 12

    // 上一次值    当前值   返回值   (第一次循环)
    //   6          1        7
    // 上一次值    当前值   返回值   (第二次循环)
    //   7          2        9
    // 上一次值    当前值   返回值   (第二次循环)
    //   9          3        12 

</script>

执行流程

1. 如果没有起始值, 则上一次值是数组的第一个元素
2. 每次循环, 把返回值给作为参数给下一次循环使用
3. 循环结束, 返回prve值
4. 有起始值, 把起始值作为prev参数参与运算
5. 不建议省略起始值, 因为遍历数组对象时可能会导致undefind参与运算

find()

定义

用于查找元素, 返回符合条件的第一个数组元素, 没有则返回undefiend

示例

 <script>
    const arr = [{ name: '小米', price: 1999 }, { name: '华为', price: 3999 }]
    // 查找小米这个对象, 并返回
    const item = arr.find(item => item.name === '小米')
    console.log(item)
</script>

some()

定义

检测数组中的元素是否满足指定条件, 有则返回true, 没有则返回false

示例

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

every()

定义

检测数组中的所有元素是否满足指定条件, 满足条件返回true, 否则返回false

示例

<script>
    const arr = [10, 20, 30]
    const flag = arr.every(item => item >= 20)
    console.log(flag) // false
</script>

join()

定义

把数组以指定的分割符转成字符串

示例

<script>
    const spec = { size: '40cm*40cm', color: '白色' }
    // 数据格式转换 => '40cm*40cm/白色'
    const str = Object.values(spec).join('/')
    console.log(str) // '40cm*40cm/白色'
</script>

数组常用静态方法

Array.from()

定义

把伪数组转成真数组

示例

</body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    // 得到伪数组
    const lis = document.querySelectorAll('li')
    // 伪数组转真数组
    const liss = Array.from(lis)
    // 使用数组方法
    liss.pop()
    console.log(liss);
  </script>
</body>

String

Sgtring是内置的构造函数, 用于创建字符串,

在javaScript中字符串具有对象的使用特性, 如属性和方法

字符串常用实例方法

split()

定义

把字符串转成数组

示例

<script>
    const str = 'pink,red'
    const arr = str.split(',')
    console.log(arr) // ['pink','red']
</script>

substring()

定义

字符串截取

示例

<script>
    const str = '今天又要做核酸了'
    const str1 = str.substring(5,7)
    console.log(str1) // 核酸
</script>

• 语法: substring(开始索引 [, 结束索引])
• 如果省略结束索引, 默认取到最后
• 结束的索引不包含想要截取的部分
• 返回一个新的字符串

startsWith()

定义

用来判断当前字符串是否以 某个字符串开头, 是返回true, 否返回false

示例

<script>
    const str = 'pink在上课'
    const flag = str.startsWith('pink')
    console.log(flag) // true
</script>

• 该方法区分大小写

endsWith()

定义:

用来判断当前字符串是否以 某个字符串结尾, 是返回true, 否返回false

includes()

定义

判断字符串中是不是包含一个字符串

示例

<script>
    const str = '我是pink老师'
    const flag = str.includes('pink')
    console.log(flag) // true
</script>

字符串常用静态方法

String()

定义

把其他类型的数据转成字符串类型

示例

<script>
    const num = 10
    String(num) // '10'
</script>

Number

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

数值常用实例方法

toFixed()

定义

设置保留小数位的长度, 不传参数默认保证整数

示例

<script>
    const price = 12.235
    price.toFixed() // 12, 四舍五入
    price.toFixed(2) //12.12
  </script>

toString()

定义

把数值类型的数据转成字符串类型

示例

<script>
    const num = 10
    num.toString() // '10'
</script>