【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.rhkb.cn/news/104118.html

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

相关文章

【业务功能篇73】分布式ID解决方案

业界实现方案 1. 基于UUID2. 基于DB数据库多种模式(自增主键、segment)3. 基于Redis4. 基于ZK、ETCD5. 基于SnowFlake6. 美团Leaf(DB-Segment、zkSnowFlake)7. 百度uid-generator() 1.基于UUID生成唯一ID UUID:UUID长度128bit,32个16进制字符,占用存储空…

Kdab QML (part9)自由缩放时钟

文章目录 Kdab QML (part9)自由缩放时钟代码详细解释运行截图 Kdab QML (part9)自由缩放时钟 代码 import QtQuick 2.15 import QtQuick.Window 2.15Window {id: rootwidth: 500height: 500visible: truecolor: "lightgrey"title: qsTr("Hello World")It…

springboot2+redis 订阅发布,解决接收消息累计线程到内存溢出,使用自定义线程池接收消息

pom 添加redis <!-- redis 缓存操作 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 发布消息 import lombok.extern.slf4j.Slf4j; import o…

【一】ubuntu20.04上搭建containerd版( 1.2.4 以上)k8s及kuboard V3

k8s 部署全程在超级用户下进行 sudo su本文请根据大纲顺序阅读&#xff01; 一、配置基础环境&#xff08;在全部节点执行&#xff09; 1、安装docker 使用apt安装containerd 新版k8s已经弃用docker转为containerd&#xff0c;如果要将docker改为containerd详见&#xff1a…

21.1 CSS 文字样式

1. 字体倾斜 font-style属性: 为文本设置字体样式.常用取值: normal: 正常显示文本. 快捷键: fstab. italic: 显示斜体文本. 快捷键: fsntab.<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>fo…

MySQL高级篇——MySQL架构篇3(用户与权限管理)

目录 1 用户管理1.1 登录MySQL服务器1.2 创建用户1.3 修改用户1.4 删除用户1.5 设置当前用户密码1.6 修改其它用户密码1.7 MySQL8密码管理(了解) 2 权限管理2.1 权限列表2.2 授予权限的原则2.3 授予权限2.4 查看权限2.5 收回权限 3 权限表3.1 user表3.2 db表3.3 tables_priv表和…

实现外网访问本地服务

最近开发需要其他项目组的人访问我本地服务测试,但又不在同一个地方,不能使用内网访问,所以需要外网访问本地服务功能. 条件: 1.需要一台具备公网IP的服务器 我用的服务器是windows,电脑也是Windows系统 2.下载frp 软件,只需要下载一份就可以了,分别放到服务器上和本地目录既…

Python - 面向对象的属性,类方法,静态方法,实例方法的区别及用法详解

一. 前言 在Python的面向对象编程中&#xff0c;类属性和实例属性是两个不同的概念&#xff0c;它们在作用域和使用方式上有所区别。在Python中的面向对象编程中有三种方法&#xff1a;实例方法、类方法和静态方法&#xff0c;它们之间的差异主要体现在参数传递和调用方式上。…

BDA初级分析——可视化基础

一、可视化的作用 数据可视化——利用各种图形方式更加直观地呈现数据的过程 可视化的作用 1、更快地理解数据&#xff0c;找出数据的规律和异常 2、讲出数据背后的故事&#xff0c;辅助做出业务决策 3、给非专业人士提供数据探索的能力 数据分析问题如何通过可视化呈现&am…

基于前端技术原生HTML、JS、CSS 电子病历编辑器源码

电子病历系统采取结构化与自由式录入的新模式&#xff0c;自由书写&#xff0c;轻松录入。实现病人医疗记录&#xff08;包含有首页、病程记录、检查检验结果、医嘱、手术记录、护理记录等等。&#xff09;的保存、管理、传输和重现&#xff0c;取代手写纸张病历。不仅实现了纸…

混币器——隐私交易的天堂,还是洗钱犯罪的聚集地?

据美国财政部官网&#xff0c;Tornado Cash 联创 Roman Storm 已被 FBI 和国税局逮捕&#xff0c;罪名是串谋洗钱、串谋经营未经许可的资金传输业务以及串谋违反制裁规定&#xff0c;另一创始人 Roman Semenov仍然在逃。 FBI局长Christopher A. Wray说&#xff1a;“今天的公告…

音视频FAQ(二)视频直播延时高

摘要 延时高是实时互动技术中常见的问题之一&#xff0c;解决延时高问题需要综合考虑网络、设备、编解码算法等多个因素。解决方案包括优化设备端延时、优化网络传输延时和使用UDP进行音视频传输等。在选择音视频传输协议时&#xff0c;需要综合考虑实际需求和网络条件&#x…

MyBatis进阶:告别SQL注入!MyBatis分页与特殊字符的正确使用方式

目录 引言 一、使用正确的方式实现分页 1.1.什么是分页 1.2.MyBatis中的分页实现方式 1.3.避免SQL注入的技巧 二、特殊字符的正确使用方式 2.1.什么是特殊字符 2.2.特殊字符在SQL查询中的作用 2.3.如何避免特殊字符引起的问题 2.3.1.使用CDATA区段 2.3.2.使用实体引…

Docker容器与虚拟化技术:Dockerfile部署LNMP

目录 一、理论 1.LNMP架构 2.背景 3.Dockerfile部署LNMP 3.构建Nginx镜像 4.构建MySQL容器 5.构建PHP镜像 6.启动 wordpress 服务 二、实验 1.环境准备 2.构建Nginx镜像 3.构建MySQL容器 4.构建PHP镜像 5.启动 wordpress 服务 三、问题 1.构建nginx镜像报错 …

“解放 Arweave“优惠:4EVERLAND的无缝上传教程

为了进一步展示 Arweave 的能力&#xff0c;4EVERLAND 骄傲地推出了“解放 Arweave”活动。我们认识到 Arweave 在数据完整性、抗审查性以及长期保存方面的无与伦比的优势&#xff0c;因此我们与这个去中心化的存储巨头建立了强大的集成。 克服了过去与加密货币支付逻辑相关的…

常见的数据库备份方法,常用的数据库备份方法有哪三种

数据库作为存储和管理这些信息的核心&#xff0c;其安全性和稳定性尤为重要。因此&#xff0c;定期进行数据库备份是保护数据完整性的重要途径。下面我们就详细介绍几种常见的数据库备份方法。 1.全量备份 全备份是指备份数据库中的所有数据和元数据。这种方法通常用于开发或测…

如何获取旧版本的谷歌浏览器

1、明确自己要的版本号 2、访问Chromium History Versions Download ↓ 3、选择系统&#xff0c;选择版本号 4、下载安装

防火墙组建双击热备后老是主备自动切换怎么处理?

环境: 2台主备防火墙 8.0.75 AF-2000-FH2130B-SC 核心交换机 H3C S6520-26Q-SI version 7.1.070, Release 6326 问题描述: 防火墙组建双击热备后老是主备自动切换怎么处理? 查看切换日志,本地故障值小于对端,经常自动切换导致eth3接口业务老是自动断开,切换频率,…

Visual Studio中Linux开发头文件intellisense问题的解决办法

文章目录 前言个人环境 SSH到WSL复制文件后记 前言 最近在用我心爱的Visual Studio配合WSL2做一些Linux开发&#xff0c;但是有一个问题&#xff0c;就是当我#include <sys/socket.h>&#xff0c;会提示找不到文件 我尝试了各种姿势&#xff0c;包括修改CMakeSettings.…

1.分布式电源接入对配电网影响分析

分布式电源接入对配电网影响分析 MATLAB代码&#xff1a;分布式电源接入对配电网影响分析 关键词&#xff1a;分布式电源 配电网 评估 参考文档&#xff1a;《自写文档&#xff0c;联系我看》参考选址定容模型部分&#xff1b; 仿真平台&#xff1a;MATLAB 主要内容&a…