【ES6】—数组的扩展

在这里插入图片描述

一、类数组/ 伪数组

1. 类/伪数组: 并不是真正意义的数组,有长度的属性,但无法使用Array原型上的方法

let divs = document.getElementsByTagName('div')
console.log(divs)
// HTMLCollection []let divs2 = document.getElementsByClassName("xxx")
console.log(divs2)
// HTMLCollection []let div3 = document.querySelectorAll('.xx')
console.log(div3)
// NodeList []

2. 判断是否是数组的方法, 检测是否是Array的实例

let div3 = document.querySelectorAll('.xx')
console.log(div3 instanceof Array)
// false
div3.push(123)
// Uncaught TypeError: div3.push is not a function
因为div3 不是 真正的数组

3. 如何把伪数组转换为真正的数组

  1. ES5 的 slice 方法
let div3 = document.querySelectorAll('.xx')
// 伪数组转换为真正数组
let arr = Array.prototype.slice.call(div3)
console.log(arr)
// []
  1. arguments
    是一个对应于传递给函数的参数的类/伪数组对象
function foo() {console.log(arguments)// 检测是否为真正数组console.log(arguments instanceof Array)
} 
foo(1, 'imooc', true)
// Arguments(3) [1, 'imooc', true, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// false
  1. ES6的Array.from()方法
let arrayLike = {0: 'es6',1: 'es7',2: 'es8',length: 3
}
let arr = Array.from(arrayLike)
arr.push('es9')
console.log(arr)
// (4) ['es6', 'es7', 'es8', 'es9']

二、创建数组实例

1. new Array 参数个数不同,所表达含义不同

let arr = new Array(1,2)
console.log(arr)
// (2) [1, 2]
let arr1 = new Array(3)
console.log(arr1)
// (3) [空属性 × 3]

PS: 通过new Array的时候,参数为多个时,参数表示的是数组的值;参数为一个时,参数表示是数组的长度

2. Array of 所传入的参数就是数组的值

let arr = Array.of(123,'123',null, [1,2], {name: 'xiao'})
console.log(arr)
// (5) [123, '123', null, Array(2), {…}]
console.log(Array.of(1))
// [1]

三、替换数组的值

1. copyWithin() 复制替换数组里面的内容

参数:copyWithin(target, start, end)
target: 从哪个索引开始替换
strat: 元素复制的起始位置, 包含
end: 停止复制的索引位置, 不包含

let arr =  [1,2,3, 4, 5]
console.log(arr.copyWithin(0, 2,3))
// 第一步复制数组中索引2 - 3(不包含)之间的数字, [3]
// 把[3] 从 索引 0 开始替换 [1,2,3,4,5]  => [3,2,3,4,5]
let arr =  [1,2,3, 4, 5]
console.log(arr.copyWithin(0, 1))
// 第一步从索引1开始复制,直到结束  [2,3,4,5]
// 把[2,3,4,5] 从 0 开始替换 [1,2,3,4,5] => [2,3,4,5,5]

2. fill() 传值替换数组的值

参数:
value:必需。填充的值
strat: 可选。开始填充位置, 包含
end: 可选。停止填充位置 (默认为 array.length) , 不包含

let arr = new Array(3).fill(7)
console.log(arr)
// (3) [7, 7, 7]
// 当strat和end 不传时,填充数组的每一个值
let arr = [1,2,3,4,5]
arr.fill('xiaoxiao', 0, 2)
console.log(arr)
// ['xiaoxiao', 'xiaoxiao', 3, 4, 5]
// 把索引0- 2(不包含)的值,替换成"xiaoxiao"

四、 查找数组中的值是否存在

  1. ES5 indexOf 无法找到NaN 的值, ES6 includes 可以
let arr = [1,2,3, NaN]
console.log(arr.indexOf(NaN))
console.log(NaN == NaN)
console.log(arr.includes(NaN))
// -1
// false
// true

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

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

相关文章

Git gui教程---第七篇 Git gui的使用 返回上一次提交

1. 查看历史,打开gitk程序 2. 选中需要返回的版本,右键,然后点击Rest master branch to here 3.出现弹窗 每个选项我们都试一下,从Hard开始 返回的选项 HardMixedSoft Hard 会丢失所有的修改【此处的…

从0开始做yolov5模型剪枝

文章目录 从0开始做yolov5模型剪枝 ****1 前言2 GitHub取源码3 原理3.1 原理3.2 network slimming过程 4 具体实施步骤4.1 安装虚拟环境4.2 配置参数4.2.1 数据集参数4.2.2 模型结构参数4.2.3 train.py中的参数 4.3 正常训练4.3.1 准备4.3.2 训练及问题解决 4.4 稀疏化训练4.4.…

VbScript脚本Request获取RFID读卡器以HTTP提交的访问文件中的参数Response回应驱动读卡器显示、播报语音

本示例使用的设备&#xff1a;RFID网络WIFI无线TCP/UDP/HTTP可编程二次开发读卡器POE供电语音-淘宝网 (taobao.com) <%LANGUAGE"VBSCRIPT" CODEPAGE"65001"%><% Function bin2str(bindata)Dim rsStream, strlsSet rsStream Server.CreateObject…

今天不想学习

【深基16.例1】淘汰赛 - 洛谷 根据队列知识&#xff0c;和巧用题目信息&#xff0c;代码都很简单哈哈哈&#xff0c;因为我会的不多 #include<iostream> #include<queue> #include<map> using namespace std; #define int long long int n,num1; signed ma…

Leetcode 2235.两整数相加

一、两整数相加 给你两个整数 num1 和 num2&#xff0c;返回这两个整数的和。 示例 1&#xff1a; 输入&#xff1a;num1 12, num2 5 输出&#xff1a;17 解释&#xff1a;num1 是 12&#xff0c;num2 是 5 &#xff0c;它们的和是 12 5 17 &#xff0c;因此返回 17 。示例…

数据库管理

SQL语言分类&#xff1a; DDL&#xff1a;数据定义语言&#xff0c;用于创建数据库对象&#xff0c;如库、表、索引等 DML&#xff1a;数据操纵语言&#xff0c;用于对表中的数据进行管理 DQL&#xff1a;数据查询语言&#xff0c;用于从数据表中查找符合条件的数据记录 DCL&am…

渗透测试方法论

文章目录 渗透测试方法论1. 渗透测试种类黑盒测试白盒测试脆弱性评估 2. 安全测试方法论2.1 OWASP TOP 102.3 CWE2.4 CVE 3. 渗透测试流程3.1 通用渗透测试框架3.1.1 范围界定3.1.2 信息搜集3.1.3 目标识别3.1.4 服务枚举3.1.5 漏洞映射3.1.6 社会工程学3.1.7 漏洞利用3.1.8 权…

[LitCTF 2023]Flag点击就送!

进入环境后是一个输入框&#xff0c;可以提交名字 然后就可以点击获取flag&#xff0c;结果回显提示&#xff0c;需要获取管理员 可以尝试将名字改为admin 触发报错&#xff0c;说明可能存在其他的验证是否为管理员的方式 通过抓包后&#xff0c;在cookie字段发现了 特殊的东西…

嵌入式系统入门实战:探索基本概念和应用领域

嵌入式系统是一种专用的计算机系统,它是为了满足特定任务而设计的。这些系统通常具有较低的硬件资源(如处理器速度、内存容量和存储容量),但具有较高的可靠性和实时性。嵌入式系统广泛应用于各种领域,如家用电器、汽车、工业控制、医疗设备等。 嵌入式系统的基本概念 微控…

Springboot整合liquIbase组件

liquIbase方式 1、添加依赖 <!-- Liquibase 依赖 --> <dependency><groupId>org.liquibase</groupId><artifactId>liquibase-core</artifactId> </dependency>2、添加配置项 spring:# datasource 数据源配置内容&#xff0c;对应…

实战项目 在线学院springcloud调用篇3(nacos,feging,hystrix,gateway)

一 springcloud与springboot的关系 1.1 关系 1.2 版本关系 1.3 list转json串 public class Test {public static void main(String[] args) {List<String> dataListnew ArrayList<String>();dataList.add("12");dataList.add("45");dataLi…

java8的reduce方法

在 Java 8 中&#xff0c;reduce 是一个流操作方法&#xff0c;用于将流中的元素按照指定的操作进行归约&#xff08;reduce&#xff09;操作&#xff0c;最终得到一个结果。 reduce 方法有三种重载形式&#xff1a; T reduce(T identity, BinaryOperator<T> accumulato…

Debezium系列之:Debezium Server Offset编辑器

Debezium系列之:Debezium Server Offset编辑器 一、认识Offset编辑器二、Offset编辑器目录结构三、Offset编辑器系统环境要求四、pom.xml五、Main.java六、CommandLineInterface.java七、OffsetFileController.java八、OffsetEditorApp.java九、编译项目十、启动Offset编辑器一…

2023国赛数学建模思路 - 案例:退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…

深入剖析Kubernetes之控制器模式的实现-Deployment

文章目录 Deployment Deployment Deployment 实现了 Kubernetes 项目中一个非常重要的功能&#xff1a;Pod 的“水平扩展 / 收缩”&#xff08;horizontal scaling out/in&#xff09;。这个功能&#xff0c;是从 PaaS 时代开始&#xff0c;一个平台级项目就必须具备的编排能力…

oCPC实践录 | oCPC转化的设计、选择、归因与成本设置(1)

如前文所言&#xff0c;在CPC情况下&#xff0c;广告主根据经验通过选定媒体、关键词、人群定向等方法筛选流量&#xff0c;然后给出相对应的点击出价采买流量。在oCPC下&#xff0c;广告主通过转化目标和相对应的转化出价采买流量。 经常有人说相比CPC&#xff0c;在oCPC下&a…

Idea配置Remote Host

一、打开RemoteHost窗口 双击shift打开全局搜索 搜索Tools→Deployment→Browse Remote Host或 idea项目顶部Tools→Deployment→Browse Remote Host 二、添加服务 右侧边栏打开RemoteHost&#xff0c;点击三个点&#xff0c;起个名字&#xff0c;选择type为SFTP&#xff…

使用Nacos与Spring Boot实现配置管理

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

C++文件操作介绍

C文件操作介绍 文件是指存储在计算机文件系统中的数据集合。文件可以包含各种类型的信息&#xff0c;例如文本、图像、音频视频等。在 C中&#xff0c;文件是一种数据流&#xff0c;可以用于读取或写入数据。C提供了一系列的文件操作函数&#xff0c;用于实现对文件的读取、写入…

直击成都国际车展:远航汽车多款车型登陆车展,打造完美驾乘体验

随着市场渗透率日益高涨&#xff0c;新能源汽车成为今年成都国际车展的关注焦点。在本届车展上&#xff0c;新能源品牌占比再创新高&#xff0c;覆盖两个展馆&#xff0c;印证了当下新能源汽车市场的火爆。作为大运集团重磅打造的高端品牌&#xff0c;远航汽车深度洞察高端智能…