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

【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.lryc.cn/news/141257.html

相关文章:

  • Android 实现资源国际化
  • uni、js——点击与禁用(不可点击)、动态样式class
  • 分布式技术
  • Consul的简介与安装
  • 微服务框架 go-zero logx 日志组件剖析
  • 基于Java+SpringBoot+Vue前后端分离图书电子商务网站设计和实现
  • C# Winfrom通过COM接口访问和控制Excel应用程序,将Excel数据导入DataGridView
  • Linux-tomcat环境搭建、jpress部署实践、nginx反向代理
  • SQLmap使用
  • 【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页
  • python爬虫的js逆向入门到进阶教程文章分享汇总~持续更新
  • 面试常问:水平居中和垂直居中的方法
  • 第七届“蓝帽杯”初赛取证题目分享
  • go语言学习之有关变量的知识
  • 算法通过村第8关【青铜】| 二叉树的经典算法题
  • Open3D 点云均值滤波
  • C语言指针入门详解
  • 软件工程(十四) 设计模式之结构型模式(二)
  • 不解压的方式直接更新jar包内部的内容
  • 软件工程(八) UML之类图与对象图
  • 【Unity3D赛车游戏】【五】Unity中汽车加速效果是如何优化的?
  • 龙智案例:某大型零售企业如何打造高速、现代化的ITSM体系
  • jdk 03.stream
  • “华为杯”研究生数学建模竞赛2018年-【华为杯】C题:对恐怖袭击事件记录数据的量化分析
  • java8的reduce方法
  • Mac发现有的软件不能上网的破解之法
  • 定时检测接口是否正常飞书告警脚本
  • 【MySQL】2、MySQL数据库的管理
  • 8086汇编test指令学习
  • 简单js逆向案例(2)