JavaScript进阶 第二天

  • 深入对象
  • 内置构造函数

一. 深入对象

  • 创建对象三种方式
  • 构造函数
  • 实例成员&静态成员

1.1 创建对象三种方式

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

const o = {'name': '哈哈'
}

② 利用new Object 创建对象

const o = new Object({ name: '哈哈' })

③ 构造函数创建对象

1.2 构造函数

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

② 使用场景:常规的{...} 语法允许创建一个对象,可以使用构造函数快速创建多个类似的对象

③ 约定:

  • 命名以大写字母开头
  • 只能由 new 操作符来执行

④ 写法:

  • 使用new关键词调用函数的行为被称为实例化
  • 实例化构造函数没有参数时可以省略()
  • 构造函数内部无需写return,返回值即为新创建的对象
  • 构造函数内部的return返回的值无效,所以不要写return
  • new Object()  new Date() 也是实例化构造函数
function Pig (uname, age) {this.name = unamethis.age = age
}
const p = new Pig('佩奇', 6)
const q = new Pig('乔治', 3)

⑤ 实例化执行过程

  • 创建新的空对象
  • 构造函数this指向新对象
  • 执行构造函数代码,修改this, 添加新的属性
  • 返回新对象

 1.3 实例成员&静态成员

 ① 实例成员

  • 通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员
  • 为构造函数传入参数,创建结构相同但值不同的对象
  • 构造函数创建的实例对象彼此独立互不影响
function Pig (name) {this.name = name
}
const peiqi = new Pig('佩奇')
// 1.实例对象上的属性和方法称为实例成员
peiqi.sayHi = () => {console.log('hi')
}
console.log(peiqi)

② 静态成员

  • 构造函数的属性和方法被称为静态成员(静态属性和静态方法)
  • 静态成员只能构造函数来访问
  • 静态方法中的this指向构造函数
Pig.eyes = 2
console.log(Pig.eyes)Pig.sayHi = function () {console.log(this)
}
// 静态成员调用
Pig.sayHi()

二.内置构造函数

  • Object
  • Array
  • String
  • Number

 ① 基本数据类型:字符串,数值,布尔,undefined, null

 ②  引用类型:对象

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

 ④ 引用类型:Object, Array, RegExp, Date等

 ⑤ 包装类型:String, Number, Boolean 等

2.1 Object

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

const o = new Object({ name: '哈哈' })

② 三个静态方法

(1)获取所有属性名:Object.keys, 返回的是一个数组

const o = {uname:'pink', age: 18}
// 1.获取所有属性名
console.log(Object.keys(o))

(2)获取所有的属性值:Object.values

console.log(Object.values(o))

(3)拷贝对象: Object.assign(目标,拷贝对象)

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

const oo = {}
Object.assign(oo, o)
console.log(oo)// 追加一个新的属性
Object.assign(o, {gender: '女'})

 2.2 Array

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

1. 实例方法

  •  reduce 返回累计处理的结果,经常用于求和
  • 基本语法
arr.reduce(function(){}, 起始值)
arr.reduce(function(上一次值, 当前值){}, 初始值)
  • 参数

     ① 没有初始值

const total = arr.reduce(function (pre, current) {return pre + current
})

     ②  有初始值

const total = arr.reduce(function (pre, current) {return pre + current
}, 10)

    ③ 箭头函数写法

const total = arr.reduce((pre, current) => pre + current, 10)
console.log(total)

   ④ reduce的执行过程

  • 如果没有初始值,则上一次值是数组的第一个元素
  • 每一次循环,把返回值给作为下一次循环的上一次值
  • 如果有起始值,则起始值作为上一次值 

2.其他方法

编号方法含义
1join数组元素拼接为字符串,返回字符串
2find查找元素,返回符合测试条件的第一个数组值,如果没有符合条件的就返回undefined
3every检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回true, 否则返回false
4some检测数组中的元素是否满足指定条件,如果数组中有元素满足条件返回true
5concat合并两个数组,返回生成新数组
6sort对原数组单元值排序
7splice删除或替换原数组单元
8reverse反转数组
9findIndex查找元素的索引值

  • find方法使用举例:
const arr = ['red', 'blue', 'green']
const re = arr.find(function (item) {return item === 'blue'
})
console.log(re)const arr = [
{name: '小米',price: 1999
},
{name: '华为',price: 3999
}
]const re = arr.find(item => item.name === '小米')
console.log(re)
  •  every方法:每一个是否都符合条件,如果都符合,返回true, 如果有一个不符合,返回false
const arr1 = [10, 20, 30]
const flag = arr1.every(item => item >= 20)
console.log(flag)
  • some方法
const arr1 = [10, 20, 30]
const flag = arr1.some(item => item >= 40)
console.log(flag)

3.数组静态方法

  • 把伪数组转换为真数组
const lis = document.querySelectorAll('ul li')
// lis.pop()   // 伪数组无法使用数组的方法
const liss = Array.from(lis)
liss.pop()
console.log(liss)

2.3 String

编号方法含义
1length实例属性,用来获取字符串的长度
2split(’分隔符‘)用来将字符串拆分成数组
3substring(需要截取的第一个字符的索引,[, 结束的索引号)用于字符串截取
4startswith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头
5includes(搜索的字符串[, 检测位置索引号])判断一个字符串是否包含在另一个字符串中,根据情况返回true或false
6toUpperCase 将字母转换成大写
7toLowerCase用于将字母转换成小写
8indexOf检测是否包含某字符
9endsWith检测是否以某字符结尾
10replace用于替换字符串,支持正则匹配
11match用于查找字符串,支持正则匹配

// 1.split 字符串转换为数组和join相反
const str = 'pink,red'
const arr = str.split(',')
console.log(arr)// 2.字符串截取
const str = 'hello'
// 不包含结束的索引号
console.log(str.substring(2, 3))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/38736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索规律:Python地图数据可视化艺术

文章目录 一 基础地图使用二 国内疫情可视化图表2.1 实现步骤2.2 完整代码2.3 运行结果 一 基础地图使用 使用 Pyecharts 构建地图可视化也是很简单的。Pyecharts 支持多种地图类型,包括普通地图、热力图、散点地图等。以下是一个构建简单地图的示例,以…

认识Transformer:入门知识

视频链接: https://www.youtube.com/watch?vugWDIIOHtPA&listPLJV_el3uVTsOK_ZK5L0Iv_EQoL1JefRL4&index60 文章目录 Self-Attention layerMulti-head self-attentionPositional encodingSeq2Seq with AttentionTransformerUniversal Transformer Seq2Seq …

浅谈 EMP-SSL + 代码解读:自监督对比学习的一种极简主义风

论文链接:https://arxiv.org/pdf/2304.03977.pdf 代码:https://github.com/tsb0601/EMP-SSL 其他学习链接:突破自监督学习效率极限!马毅、LeCun联合发布EMP-SSL:无需花哨trick,30个epoch即可实现SOTA 主要…

资讯速递 | ArkUI-X 预览版已正式开源!

OpenHarmony项目群技术指导委员会(以下简称“TSC”)-跨平台应用开发框架TSG所孵化项目 —— ArkUI-X,近期已正式开源 ,开发者基于一套主代码,就可以将在OpenHarmony上开发的精美、高性能应用同时运行在Android、iOS等其…

LNMP环境搭建wordpress以及跳转后台报404解决

基于上文配置好的LNMP环境继续搭建wordpress 目录 一.到官网下载tar.gz包,并上传到Linux上,也可以通过复制链接地址进行下载 二. 将wordpress中的所有文件移动到你nginx.conf中指定目录中 三.为wordpress配置数据库 四.到浏览器进行注册 1.刚开始…

好用的安卓手机投屏到mac分享

工具推荐:scrcpy github地址:https://github.com/Genymobile/scrcpy/tree/master mac使用方式 安装环境,打开terminal,执行以下命令,没有brew的先安装brew brew install scrcpy brew install android-platform-too…

学习 Iterator 迭代器

今天看到一个面试题, 让下面解构赋值成立。 let [a,b] {a:1,b:2} 如果我们直接在浏览器输出这行代码,会直接报错,说是 {a:1,b:2} 不能迭代。 看了es6文档后,具有迭代器的就一下几种类型,没有Object类型,…

404. 左叶子之和

给定二叉树的根节点 root ,返回所有左叶子之和。 示例 1: 输入: root [3,9,20,null,null,15,7] 输出: 24 解释: 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24示例 2: 输入: root [1] 输出: 0提示: 节点…

【NetCore】09-中间件

文章目录 中间件:掌控请求处理过程的关键1. 中间件1.1 中间件工作原理1.2 中间件核心对象 2.异常处理中间件:区分真异常和逻辑异常2.1 处理异常的方式2.1.1 日常错误处理--定义错误页的方法2.1.2 使用代理方法处理异常2.1.3 异常过滤器 IExceptionFilter2.1.4 特性过…

react实现对数组做增删改操作自定义hook

需求 实现对数组的增删改操作。 实现 import { useState } from react;const useArray (currList) > {const [list, setList] useState(currList);// 增const addItem (item) > {setList([...list, item]);};// 删const removeItem (idx) > {const _arr [...l…

实战指南,SpringBoot + Mybatis 如何对接多数据源

系列文章目录 MyBatis缓存原理 Mybatis plugin 的使用及原理 MyBatisSpringboot 启动到SQL执行全流程 数据库操作不再困难,MyBatis动态Sql标签解析 从零开始,手把手教你搭建Spring Boot后台工程并说明 Spring框架与SpringBoot的关联与区别 Spring监听器…

基于eBPF技术构建一种应用层网络管控解决方案

引言 随着网络应用的不断发展,在linux系统中对应用层网络管控的需求也日益增加,而传统的iptables、firewalld等工具难以针对应用层进行网络管控。因此需要一种创新的解决方案来提升网络应用的可管理性。 本文将探讨如何使用eBPF技术构建一种应用层网络…

【CSS】禁用元素鼠标事件(例如实现元素禁用效果)

文章目录 基本用法 基本用法 pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件。实际运用中可以通过对auto 和none动态控制,来动态实现元素的禁用效果。 属性描述auto与pointer-events属性未指定时的表现效果相同,对…

【笔试题心得】排序算法总结整理

排序算法汇总 常用十大排序算法_calm_G的博客-CSDN博客 以下动图参考 十大经典排序算法 Python 版实现(附动图演示) - 知乎 冒泡排序 排序过程如下图所示: 比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻…

【LeetCode-简单】剑指 Offer 29. 顺时针打印矩阵(详解)

题目 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5]示例 2: 输入:matrix [[1,2,3,4],[5,6,7,8],[9,10,1…

互联网发展历程:速度与效率,交换机的登场

互联网的演进就像一场追求速度与效率的竞赛,每一次的技术升级都为我们带来更快、更高效的网络体验。然而,在网络的初期阶段,人们面临着数据传输速度不够快的问题。一项关键的技术应运而生,那就是“交换机”。 速度不足的困境&…

规划性和可扩展性,助力企业全面预算管理的推进

对于当今社会经济市场的不稳定状况和不断变化的消费者行为,企业业务也从未像今天这样不可预测过。面对变化和变革,企业需要具备规划性的预测能力,才能使得自身在竞争中保持领先地位。那些具备前瞻性的企业都尝试在现阶段通过更好的规划不断提…

基于Mysqlrouter+MHA+keepalived实现高可用半同步 MySQL Cluster项目

目录 项目名称: 基于Mysqlrouter MHA keepalived实现半同步主从复制MySQL Cluster MySQL Cluster: 项目架构图: 项目环境: 项目环境安装包: 项目描述: 项目IP地址规划: 项目步骤: 一…

windows11下配置vscode中c/c++环境

本文默认已经下载且安装好vscode,主要是解决环境变量配置以及编译task、launch文件的问题。 自己尝试过许多博客,最后还是通过这种方法配置成功了。 Linux(ubuntu 20.04)配置vscode可以直接跳转到配置task、launch文件,不需要下载mingw与配…

localhost:8080 is already in use

报错原因:本机的8080端口号已经被占用。因为机器的空闲端口号是随机分配的,而idea默认启动的端口号是8080,所以是存在这种情况。 对于这个问题,我们只需要重启idea或者修改项目的启动端口号即可。 更推荐第二种。对于修改项目启动端口号&…