【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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《操作系统真象还原》学习笔记:第七章 中断

由于 CPU 获知了计算机中发生的某些事,CPU 暂停正在执行的程序,转而去执行处理该事件的程序,当这段程序执行完毕后,CPU 继续执行刚才的程序。整个过程称为中断处理,也称为中断。 把中断按事件来源分类,来自…

食品制造行业云MES系统解决方案

食品饮料行业大致可以分为初级产品加工、二次加工、食品制造、食品分装、调味品和饲料加工等几大类。由于处于产业链不同的位置,其管理存在一定的差异,那么食品行业的MES应该怎么建设呢? 食品饮料行业生产管理特点: 食品饮料行业…

leetcode 122. 买卖股票的最佳时机 II

2023.8.21 和买卖股票的最佳时机相比&#xff0c;本题的股票可以买卖多次了&#xff0c;直接用贪心解决&#xff0c;计算所有涨价的股票相加。代码如下&#xff1a; 贪心&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {int ans 0;for…

Ubuntu18.04 交叉编译curl-7.61.0

下载 官方网址是&#xff1a;curl 安装依赖库 如果需要curl支持https协议&#xff0c;需要先交叉编译 openssl,编译流程如下&#xff1a; Ubuntu18.04 交叉编译openssl-1.1.1_我是谁&#xff1f;&#xff1f;的博客-CSDN博客 解压 # 解压&#xff1a; $tar -xzvf curl-7.61.…

村口的人家排放污水,污水浸染了整个村子,怎么办

从前有一个很不错的村子里&#xff0c;村子里有很多户人家&#xff0c;随着生活水平越来越好&#xff0c;房子也修起来了&#xff0c;柏油马路也宽敞了&#xff0c;大家进出村子&#xff0c;都要走那条马路&#xff0c;要不就出不去。 目录 1. 修厕所 2. 村口的日家 3. 告诉…

Android 系统桌面 App —— Launcher 开发(1)

Android 系统桌面 App —— Launcher 开发&#xff08;1&#xff09; Launcher简介 Launcher就是Android系统的桌面&#xff0c;俗称“HomeScreen”也就是我们开机后看到的第一个App。launcher其实就是一个app&#xff0c;它的作用是显示和管理手机上其他App。目前市场上有很…

商城的TPS与并发用户数是如何换算的?

商城的TPS与并发用户数的换算关系可以通过以下公式计算&#xff1a; TPS 并发用户数 / 平均事务响应时间 其中&#xff0c;平均事务响应时间是指系统处理一个事务所需的平均时间。 下面是商城性能测试的一些用例示例&#xff1a; 用户登录&#xff1a; 目标&#xff1a;测…

【路由器】小米 WR30U 解锁并刷机

文章目录 解锁 ssh环境准备解锁过程 刷入 mt798x uboot简介刷入流程 刷入 ImmortalWrt简介刷入流程 刷为原厂固件参考资料 本文主要记录个人对小米 WR30U 路由器的解锁和刷机过程&#xff0c;整体步骤与 一般安装流程 类似&#xff0c;但是由于 WR30U 的解锁 ssh 和刷机的过程中…

关于档案馆建设的一些标准性文件说明

第一章 总则 第一条 本条阐明了本标准的编制目的。 中国是一个历史悠久的文明古国&#xff0c;档案事业的发展源远流长。档案是人类活动的真实记录&#xff0c;是人们认识和把握客观规律的重要依据。借助档案&#xff0c;我们能够更好地了解过去、把握现在、预见未来。档案工…

使用easyExcel导入导出Date类型的转换问题

起因&#xff1a;在业务需求上需要将Excel表中的日期导入&#xff0c;存储到数据库中&#xff0c;但是entity中的日期类型使用Date来接收&#xff0c;这样导致时间精确到秒。这时&#xff0c;即使使用DateTimeFormat("yyyy-MM-dd")也无法成功转换&#xff0c;会报如下…

微信开发之一键发布群公告的技术实现

简要描述&#xff1a; 设置群公告 请求URL&#xff1a; http://域名地址/setChatRoomAnnouncement 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必…

linux+c+qt杂记

虚拟机网络选择&#xff1b; 桥接模式&#xff1a;设置window宿主机的IP/dns,把虚拟机设置为桥接即可。 切换到终端&#xff1a;我的是 ctrlaltFnF1&#xff1f; 问题解决&#xff1a; Ubuntu系统下载&#xff08;清华大学开源软件镜像站&#xff09;&#xff08;ubuntu-20.…

Java实现一个简单的图书管理系统(内有源码)

简介 哈喽哈喽大家好啊&#xff0c;之前作者也是讲了Java不少的知识点了&#xff0c;为了巩固之前的知识点再为了让我们深入Java面向对象这一基本特性&#xff0c;就让我们完成一个图书管理系统的小项目吧。 项目简介&#xff1a;通过管理员和普通用户的两种操作界面&#xff0…

机器学习之概率论

最近&#xff0c;在了解机器学习相关的数学知识&#xff0c;包括线性代数和概率论的知识&#xff0c;今天&#xff0c;回顾了概率论的知识&#xff0c;贴上几张其他博客的关于概率论的图片&#xff0c;记录学习过程。

视频云存储/安防监控EasyCVR视频汇聚平台如何通过角色权限自行分配功能模块?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

redis实战-缓存三剑客穿透击穿雪崩解决方案

缓存穿透 定义 缓存穿透 &#xff1a;缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库&#xff0c;造成数据库压力&#xff0c;也让缓存没有发挥出应有的作用 解决方案 缓存空对象 当我们客户端…

(6)(6.3) 自动任务中的相机控制

文章目录 前言 6.3.1 概述 6.3.2 自动任务类型 6.3.3 创建合成图像 前言 本文介绍 ArduPilot 的相机和云台命令&#xff0c;并说明如何在 Mission Planner 中使用这些命令来定义相机勘测任务。这些说明假定已经连接并配置了相机触发器和云台(camera trigger and gimbal ha…

opencv简单使用

cv2库安装&#xff0c; conda install opencv-python注意cv2使用时&#xff0c;路径不能有中文。&#xff08;不然会一直’None’ _ update # 处理中文路径问题 def cv_imread(file_path): #使用之前需要导入numpy、cv2库&#xff0c;file_path为包含中文的路径return cv2.imd…

IP库新增经过实践的Verilog 库

网上严重缺乏实用的 Verilog 设计。Project F 库是尝试让 FPGA 初学者变得更好部分。 设计包括 Clock- 时钟生成 (PLL) 和域交叉Display - 显示时序、帧缓冲区、DVI/HDMI 输出Essential- 适用于多种设计的便捷模块Graphics- 绘制线条和形状Maths- 除法、LFSR、平方根、正弦....…

Excel/PowerPoint条形图改变顺序

条形图是从下往上排的&#xff0c;很多时候不是我们想要的效果 解决方案 选择坐标轴&#xff0c;双击&#xff0c;按下图顺序点击 效果