当前位置: 首页 > article >正文

JavaScript(JS进阶)

目录

00闭包

01函数进阶

02解构赋值

03通过forEach方法遍历数组

04深入对象

05内置构造函数

06原型


00闭包
<!-- 闭包 --><html><body><script>// 定义:闭包=内层函数(匿名函数)+外层函数的变量(s)// 作用:封闭数据,提供操作,外部可以访问函数内部变量function fun() {let s = 'Hello World'return function () {document.write(s)}}let f = fun()f()</script>
</body></html>
01函数进阶

1>函数参数

        1.动态参数

                arguments是函数内置的伪数组,包含传入的所有实参(函数声明时形参列表为空)

        2.剩余参数

                将不定数量的剩余参数表示为数组

                形参列表形如(形参列表 , ...剩余参数数组名)

        3.展开运算符(...)

<!-- 展开运算符 --><html><body><script>let arr = [1, 2, 3]console.log(...arr) // 1 2 3// 不改变原数组</script>
</body></html>

2>箭头函数

        1.基本语法:

                function(){} 等效于 () => {}

                只有一个形参,小括号可省略

                只有一行函数体,大括号可省略

        2.箭头函数参数:

                无动态参数,有剩余参数

02解构赋值
<!-- 数组解构 --><html><body><script>// 定义:将数组各值快速批量赋值给一系列变量let arr = [1, 2, 3]let [a, b, c] = arrconsole.log(a) // 1console.log(b) // 2console.log(c) // 3</script>
</body></html>
<!-- 对象解构 --><html><body><script>// 定义:将对象属性和方法快速批量赋值给一系列变量// 注意:新变量名和对应的属性名要相同let obj = { myname: 'Tian', age: 20 }let { myname, age } = objconsole.log(myname) // Tianconsole.log(age) // 20</script>
</body></html>
03通过forEach方法遍历数组
<!-- 通过forEach方法遍历数组 --><html><body><script>let arr = ['one', 'two', 'three']arr.forEach(function (item, index) {console.log(item) // 数组元素console.log(index) //索引号})// one// 0// two// 1// three// 2</script>
</body></html>
04深入对象

1>构造函数

<!-- 构造函数 --><html><body><script>function Std(uname, age) { // 约定:函数名首字母大写this.uname = unamethis.age = age}console.log(new Std('罗哲秀', 20))console.log(new Std('雷淇', 19))</script>
</body></html>

 2>实例成员&静态成员

        实例成员:实例对象的属性和方法(实例属性和实例方法)

        静态成员:构造函数的属性和方法(静态属性和静态方法)

05内置构造函数

1>Object常用静态方法

        Object.keys(obj)【返回对象obj的键(数组)】

        Object.values(obj)【返回对象obj的值(数组)】

        Object.assign(obj1,obj2)【obj2拷贝给obj1,追加不覆盖】

2>Array常用方法

<!-- reduce方法 --><html><body><script>let arr = [1, 2, 3]// reduce的参数为回调函数和初始值let ans1 = arr.reduce((pre, cur) => pre + cur) // 箭头函数为回调函数console.log(ans1) // 6let ans2 = arr.reduce((pre, cur) => pre + cur, 60) // 60为初始值console.log(ans2) // 66</script>
</body></html>
<!-- find方法 --><html><body><script>// 以对象数组为例--------------------let arr1 = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]console.log(arr1.find(array => array.age === 19))// 以字符串数组为例--------------------let arr2 = ['罗哲秀', '雷淇']console.log(arr2.find(uname => uname === '雷淇'))// 箭头函数 uname => uname === '雷淇'// 等价于// function myfind(uname) {return uname === '雷淇'}</script>
</body></html>
<!-- every和some方法 --><html><body><script>let arr = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]// every方法--------------------// 全部的元素符合条件let flag = arr.every(array => array.age >= 18)console.log(flag) // true// some方法--------------------// 存在符合条件的元素flag = arr.some(array => array.age >= 20)console.log(flag) // true</script>
</body></html>

3>String常用属性和方法

        实例属性:length

        实例方法:

                1.split(分隔符)【将字符串分割为数组】

                2.substring(indexStart[, indexEnd])【截取字符串,不包括indexEnd】

                3.startsWith(Str[, pos]【检测字符串是否以Str开头,从pos开始检测,不写默认为0】

                4.includes(Str[, pos])【检测字符串是否含有Str,从pos开始检测,不写默认为0】

06原型
<!-- 利用原型对象实现方法共享 --><html><body><script>// 构造函数function Stu(uname, age) {this.uname = unamethis.age = age}// 通过原型prototype,向构造函数添加方法共享Stu.prototype.say = function () {console.log(`我叫${this.uname},今年${this.age}岁`);};//实例化,并调用共享函数 let LQ = new Stu('雷淇', 19)let QQ = new Stu('清浅', 20)LQ.say()QQ.say()</script>
</body></html>
<!-- 原型继承 --><html><body><script>// 父亲"人"function people() {this.hair_color = '黑'this.leg_number = '两'this.say = function () {console.log(`我有${this.hair_color}色的头发和${this.leg_number}条腿`)}}// 孩子"LQ"function LQ() {this.dance = () => console.log('跳舞')}LQ.prototype = new peoplelet lq = new LQ// 孩子"QQ"function QQ() {this.sing = () => console.log('唱歌')}QQ.prototype = new peoplelet qq = new QQ// 调用共享方法和私有方法,验证原型继承lq.say() // 我有黑色的头发和两条腿lq.dance() // 跳舞qq.say() // 我有黑色的头发和两条腿qq.sing() // 唱歌</script>
</body></html>

相关文章:

JavaScript(JS进阶)

目录 00闭包 01函数进阶 02解构赋值 03通过forEach方法遍历数组 04深入对象 05内置构造函数 06原型 00闭包 <!-- 闭包 --><html><body><script>// 定义&#xff1a;闭包内层函数&#xff08;匿名函数&#xff09;外层函数的变量&#xff08;s&…...

C/C++共有的类型转换与c++特有的四种强制类型转换

前言 C 语言和 C 共有的类型转换&#xff1a; 自动类型转换&#xff08;隐式类型转换&#xff09;&#xff1a; 编译器在某些情况下会自动进行的类型转换。强制类型转换&#xff08;显示类型转换&#xff09;&#xff1a; 使用 (type)expression 或 type(expression) 语法进行…...

Nginx 负载均衡案例配置

负载均衡案例 基于 docker 进行 案例测试 1、创建三个 Nginx 实例 创建目录结构 为每个 Nginx 实例创建单独的目录&#xff0c;用于存储 HTML 文件和配置文件 mkdir -p data/nginx1/html mkdir -p data/nginx2/html mkdir -p data/nginx3/html添加自定义 HTML 文件 在每个…...

【蓝桥杯】贪心算法

1. 区间调度 1.1. 题目 给定个区间,每个区间由开始时间start和结束时间end表示。请选择最多的互不重叠的区间,返回可以选择的区间的最大数量。 输入格式: 第一行包含一个整数n,表示区间的数量 接下来n行,每行包含两个整数,分别表示区间的开始时间和结束时间 输出格式:…...

LLaMA-Factory 数据集成从入门到精通

一、框架概述 LLaMA-Factory 框架通过Alpaca/Sharegpt双格式体系实现多任务适配&#xff0c;其中Alpaca专注结构化指令微调&#xff08;含SFT/DPO/预训练&#xff09;&#xff0c;Sharegpt支持多角色对话及多模态数据集成。核心配置依托 dataset_info.json 实现数据源映射、格…...

数据库架构

常见数据库架构类型及其优势解析 1. 集中式架构&#xff08;Centralized Architecture&#xff09; 定义&#xff1a;所有数据存储在单个服务器或主机上&#xff0c;由中央处理器统一管理。核心优势&#xff1a; ✅ 数据一致性&#xff1a;单一数据源避免数据冗余和不一致。 …...

OSPF接口的网络类型和不规则区域

网络类型(数据链路层所使用的协议所构建的二层网络类型) 1、MA --- 多点接入网络 BMA --- 支持广播的多点接入网络 NBMA --- 不支持广播的多点接入网络 2、P2P --- 点到点网络 以太网 --- 以太网最主要的特点是需要基于MAC地址进行物理寻址&#xff0c;主要是因为以太网接口所连…...

MySQL SQL Mode

SQL Mode 是 MySQL 中一个重要的系统变量&#xff0c;它决定了 MySQL 应遵循的 SQL 语法规则和数据验证规则。 什么是 SQL Mode SQL Mode 定义了 MySQL 应该支持的 SQL 语法以及执行数据验证的方式。通过设置不同的 SQL Mode&#xff0c;可以让 MySQL 在不同程度上兼容其他数据…...

Mysql备忘记录

1、简介 Mysql操作经常忘记命令&#xff0c;本文将持续记录Mysql一些常用操作。 2、常见问题 2.1、忘记密码 # 1、首先停止Mysql服务 systemctl stop mysqld # windows 从任务管理器里面停 # 2、更改配置文件 my.cnf (windows是 ini文件) vim /etc/my.cnf 在[mysqld]下面添…...

idea 创建 maven-scala项目

文章目录 idea 创建 maven-scala项目1、创建普通maven项目并且配置pom.xml文件2、修改项目结构1&#xff09;创建scala目录并标记成【源目录】2&#xff09;导入scala环境3&#xff09;测试环境 idea 创建 maven-scala项目 1、创建普通maven项目并且配置pom.xml文件 maven依赖…...

ansible+docker+docker-compose快速部署4节点高可用minio集群

目录 github项目地址 示例服务器列表 安装前 修改变量文件group_vars/all.yml 修改ansible主机清单 修改setup.sh安装脚本 用法演示 安装后验证 github项目地址 https://github.com/sulibao/ansible_minio_cluster.git 示例服务器列表 安装前 修改变量文件group_var…...

使用libcurl编写爬虫程序指南

用户想知道用Curl库编写的爬虫程序是什么样的。首先&#xff0c;我需要明确Curl本身是一个命令行工具和库&#xff0c;用于传输数据&#xff0c;支持多种协议。而用户提到的“Curl库”可能指的是libcurl&#xff0c;这是一个客户端URL传输库&#xff0c;可以用在C、C等编程语言…...

K8S学习之基础七十五:istio实现灰度发布

istio实现灰度发布 上传镜像到harbor 创建两个版本的pod vi deployment-v1.yaml apiVersion: apps/v1 kind: Deployment metadata:name: appv1labels:app: v1 spec:replicas: 1selector:matchLabels:app: v1apply: canarytemplate:metadata:labels:app: v1apply: canaryspec…...

【设备连接涂鸦阿里云】

设备连接涂鸦阿里云 ■ Tuya IoT on Alibaba Cloud■ 控制台操作步骤■ 1. 创建产品■ 2. 添加设备■ 3. 添加设备■ 4. 获取设备MQTT连接参数 ■ MQTTX使用教程■ 1&#xff0c;先在 Tuya IoT on Alibaba Cloud 新建产品和设备■ 2&#xff0c;MQTTX 设置■ 3&#xff0c;MQTT…...

c语言学习16——内存函数

内存函数 一、memcpy使用和模拟实现1.1参数1.2 使用1.3 模拟实现 二、memmove使用和模拟实现2.1 参数2.2 使用2.3 模拟实现 三、memset使用3.1 参数3.2 使用 四、memcmp使用4.1 参数4.2 使用 一、memcpy使用和模拟实现 1.1参数 因为内存中不知道存的是什么类型的地址&#xff…...

渗透测试实战:使用Hydra破解MySQL弱口令(附合法授权流程+防御方案)

渗透测试实战&#xff1a;使用Hydra破解MySQL弱口令&#xff08;附合法授权流程防御方案&#xff09; 郑重声明&#xff1a;本文仅供安全学习研究&#xff0c;任何未经授权的网络攻击行为均属违法。实操需获得目标系统书面授权&#xff0c;请遵守《网络安全法》相关规定。 一、…...

一文了解亿级数据检索:RedisSearch

文章目录 1.什么是Redis Search2.为什么要使用Redis Search3.RedisSearch 的核心特性4.RedisSearch 的原理4.1 倒排索引4.2 索引创建与数据存储4.3 数据模型4.4 搜索查询处理4.5 高性能与可扩展性&#xff1a; 5.有了ES为什么还需要RedisSearch5.RedisSearch的安装6.RedisSearc…...

uniApp开发微信小程序-连接蓝牙连接打印机上岸!

历经波折三次成功上岸&#xff01; 三次经历简单絮叨一下&#xff1a;使用uniAppvue开发的微信小程序&#xff0c;使用蓝牙连接打印机&#xff0c;蓝牙所有的接口都是插件中封装的&#xff0c;用的插件市场中的这个&#xff1a; dothan-lpapi-ble &#xff1b;所以&#xff0c…...

Spring Boot 线程池配置详解

Spring Boot 线程池配置详解 一、核心配置参数及作用 基础参数核心线程数 (corePoolSize)‌ 作用‌:线程池中始终保持存活的线程数量,即使空闲也不回收‌。 建议‌:根据任务类型设定(如 I/O 密集型任务可设为 CPU 核心数 2)‌。 最大线程数 (maxPoolSize)‌ 作用‌:…...

【特权FPGA】之按键消抖

完整代码如下所示&#xff1a; timescale 1ns / 1ps// Company: // Engineer: 特权 // // Create Date: // Design Name: // Module Name: // Project Name: // Target Device: // Tool versions: // Description: // // Dependencies: // // Revision: // …...

P1331 洛谷 海战

题目描述 思路 这个题需要读懂题意&#xff0c;即“什么样的形式表示两只船相撞&#xff1f;” ----> 上下相邻或左右相邻 如果图是不和法的&#xff0c;一定存在如下结构&#xff1a; # # . # 或 # # # . 或 # . # # 或 . # # #即四个格子里有三个#&#xff0c;一个"…...

Python 实现的运筹优化系统数学建模详解(最大最小化模型)

一、引言 在数学建模的实际应用里&#xff0c;最大最小化模型是一种极为关键的优化模型。它的核心目标是找出一组决策变量&#xff0c;让多个目标函数值里的最大值尽可能小。该模型在诸多领域&#xff0c;如资源分配、选址规划等&#xff0c;都有广泛的应用。本文将深入剖析最大…...

网络安全·第二天·ARP协议安全分析

今天我们来考虑考虑计算机网络中的一类很重要的协议-------ARP协议&#xff0c;介绍他用途的同时&#xff0c;分析分析ARP协议存在的一些漏洞及其相关的协议问题。 一、物理地址与IP地址 1、举例 在计算机网络中&#xff0c;有两类地址十分关键&#xff0c;一类称为物理地址&a…...

Python设计模式:命令模式

1. 什么是命令模式&#xff1f; 命令模式是一种行为设计模式&#xff0c;它将请求封装为一个对象&#xff0c;从而使您能够使用不同的请求、队列或日志请求&#xff0c;以及支持可撤销操作。 命令模式的核心思想是将请求的发送者与请求的接收者解耦&#xff0c;使得两者之间的…...

华为手机或平板与电脑实现文件共享

1.手机或平板与电脑在同一个网络 2.打开手机或平板端&#xff0c;设置---更多连接----快分享或华为分享打开此功能-----开启共享至电脑 3.打开电脑&#xff0c;网络中就可看到手机端分享的用户名称 4. 登陆就可访问手机 5.常见问题 5.1 电脑未发现本机 5.2 修改了访问密码后再…...

幻兽帕鲁(Palworld)在线工具集:让游戏体验更轻松!

幻兽帕鲁(Palworld)在线工具集&#xff1a;让游戏体验更轻松&#xff01; &#x1f3ae; 工具介绍 为了帮助广大幻兽帕鲁玩家更好地享受游戏&#xff0c;我开发了这个全面的在线工具集。无需下载安装&#xff0c;打开网页即可使用&#xff0c;完全免费&#xff01; &#x1…...

学习51单片机Day02---实验:点亮一个LED灯

目录 1.先看原理图 2.思考一下&#xff08;sbit的使用&#xff09;&#xff1a; 3.给0是要让这个LED亮&#xff08;LED端口设置为低电平&#xff09; 4.完成的代码 1.先看原理图 比如我们要让LED3亮起来&#xff0c;对应的是P2^2。 2.思考一下&#xff08;sbit的使用&…...

【Kubernetes】Kubernetes 如何进行日志管理?Fluentd / Loki / ELK 适用于什么场景?

由于 Kubernetes 运行在容器化的环境中&#xff0c;应用程序和系统日志通常分布在多个容器和节点上&#xff0c;传统的日志管理方法&#xff08;例如直接访问每个节点的日志文件&#xff09;在 Kubernetes 中不适用。 因此&#xff0c;Kubernetes 引入了集中式日志管理方案&am…...

如何使用通义灵码学习JavaScript和DOM

如果你看到了本手册的页面数量&#xff0c;你就会发现JavaScript的API真的非常丰富&#xff0c;在MDN上专门有一大分类用于介绍JavaScript的API&#xff0c;但软件工程行业有一个著名法则叫2-8法则&#xff0c;意思是只有20%的内容会经常使用到&#xff0c;而80%的内容只在一些…...

Elasticsearch8.x集成SpringBoot3.x

Elasticsearch8.x集成SpringBoot3.x 配置项目引入依赖添加配置文件导入ca证书到项目中添加配置 实战操作创建mapping创建文档查询更新全量更新删除数据批量操作(bulk)基本搜索复杂布尔搜索嵌套(nested)搜索分页查询滚动分页查询After分页查询词条(terms)聚合日期聚合 配置项目 …...