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

目录
打赏
0
0
0
0
6
分享
相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
196 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
116 8
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
2190 23
菜鸟之路Day23一一JavaScript 入门
本文介绍了 JavaScript 的基础内容,包括 JS 的引入方式、基础语法、数据类型、运算符、类型转换、函数、对象(如 Array、String、自定义对象、JSON、BOM 和 DOM)、事件监听,以及 Vue 框架的初步使用。重点讲解了内部和外部脚本的引入、变量声明(var、let、const)、常见输出语句、数组与字符串的操作方法、DOM 操作及事件绑定,并通过实例展示了 Vue 的双向数据绑定和常用指令(v-bind、v-model、v-on、v-if、v-for 等)。
125 7
|
5月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
135 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
126 3
springboot解决js前端跨域问题,javascript跨域问题解决
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
268 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问