前端JavaScript入门-day07

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

深入对象

创建对象三种方式

1. 利用对象字面量创建对象
2. 利用 new Object 创建对象
3. 利用构造函数创建对象

构造函数

构造函数 : 是一种特殊的函数,主要用来初始化对象
使用场景: 常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过 构造函数 快速创建多个类似的对象
构造函数在技术上是常规函数。
不过有两个约定:
1. 它们的命名以大写字母开头。
2. 它们只能由 "new" 操作符来执行。
说明:
1. 使用 new 关键字调用函数的行为被称为 实例化
2. 实例化构造函数时没有参数时可以省略 ()
3. 构造函数内部无需写return,返回值即为新创建的对象
4. 构造函数内部的 return 返回的值无效,所以不要写return
5. new Object() new Date() 也是实例化构造函数

实例成员&静态成员

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

说明:
1. 实例对象的属性和方法即为实例成员
2. 为构造函数传入参数,动态创建结构相同但值不同的对象
3. 构造函数创建的实例对象彼此独立 互不影响
静态成员:
构造函数的属性和方法被称为静态成员

说明:
1. 构造函数的属性和方法被称为静态成员
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 this 指向构造函数本身

内置构造函数  

Object

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

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

学习三个常用静态方法(静态方法就是只有构造函数Object可以调用的)  

作用:Object.keys 静态方法获取对象中所有属性(键)

语法:

 注意: 返回的是一个数组

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

语法:
注意: 返回的是一个数组
作用: Object. assign 静态方法常用于对象拷贝
语法:

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

Array  

Array 是内置的构造函数,用于创建数组
创建数组建议使用字面量创建,不用 Array构造函数创建

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

作用: reduce 返回函数累计处理的结果,经常用于求和等
基本语法:
累计值参数:
1. 如果有起始值,则以起始值为准开始累计, 累计值 = 起始值
2. 如果没有起始值, 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 (类似求和里面的 sum )
<!-- 
  需求:
  ①:给员工每人涨薪 30%
  ②:然后计算需要支出的费用
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    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)
  </script>
</body>

</html>

数组常见方法-其他方法

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

静态方法 Array.from()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<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>

</html>

String

Number

Number 是内置的构造函数,用于创建数值
常用方法:
toFixed() 设置保留小数位的长度

猜你喜欢

转载自blog.csdn.net/weixin_73295475/article/details/131701334
今日推荐