前端JavaScript入门-day07

简介: 前端JavaScript入门-day07

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

深入对象

创建对象三种方式

1. 利用对象字面量创建对象

深入对象

创建对象三种方式

1. 利用对象字面量创建对象

构造函数

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

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

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

不过有两个约定:

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() 设置保留小数位的长度

相关文章
|
3天前
|
设计模式 前端开发 Java
【前端学java】SpringBootWeb极速入门-分层解耦(03)
【8月更文挑战第13天】SpringBootWeb极速入门-分层解耦(03)
8 2
【前端学java】SpringBootWeb极速入门-分层解耦(03)
|
4天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
16 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
4天前
|
JSON 前端开发 Java
【前端学java】SpringBootWeb极速入门-请求参数解析(02)
【8月更文挑战第12天】SpringBootWeb极速入门-请求参数解析(02)
10 1
【前端学java】SpringBootWeb极速入门-请求参数解析(02)
|
1天前
|
前端开发 IDE Java
"揭秘前端转Java的秘径:SpringBoot Web极速入门,掌握分层解耦艺术,让你的后端代码飞起来,你敢来挑战吗?"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发,通过简化Spring应用搭建,快速实现Web应用。本文以创建“Hello World”应用为例,展示项目基本结构与运行方式。进而深入探讨三层架构(Controller、Service、DAO)下的分层解耦概念,通过员工信息管理示例,演示各层如何协作及依赖注入的使用,以此提升代码灵活性与可维护性。
|
5天前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
10天前
|
JavaScript 前端开发 NoSQL
使用Node.js进行后端开发入门
【8月更文挑战第10天】恭喜你完成了Node.js后端开发的入门之旅!这只是个开始,Node.js的世界远比这广阔。随着你对Node.js的深入学习和实践,你将能够构建更复杂、更强大的后端应用。不断探索、学习和实践,你将在Node.js的道路上越走越远。
|
11天前
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
13 4
|
11天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
5天前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
5天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互