类数组和Array.from()

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量149 收藏
点赞数
分类专栏： javaScript 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52140964/article/details/127261016
版权

1.1 类数组的定义

类数组：是一种相似数组的对象，并提供了一种用于访问原始二进制数据的机制，但不是真正的数组。js 中类数组对象有不少，例如arguments、 NodeList、 HTMLCollection、 jQuery等

也就是类数组本质是对象，只是长得像数组，而且需要具备一些条件。

1.2 类数组属性

1.2.1 length

const a = document.getElementsByTagName("div")
a.length

1.2.2 能够数字下标

a[0]

1.2.3 不具备数组方法，但能够转化为数组

请添加图片描述

<body>
  <div></div>
  <script>
    let obj = document.getElementsByTagName("div")[0]
   let a= Array.prototype.splice.call(obj, 0);
   let b = obj.splice(0)
  console.log(a,obj)
  //arg0:(0) []
  //arg1:div
  // console.log(b,obj)    会报错，因为不是数组，不存在splice方法
  </script>  
</body>

参考文章

2.1 Array.from可以将类数组或者 可遍历对象 转化为数组

类数组转化这里不赘述

2.1.1 将Set结构转化为数组

    let a = new Set()
    a.add("ba")
    a.add("ga")
    let b = Array.from(a);
    console.log(b)
    // ['ba', 'ga']

2.1.2 将String转化为数组

    let a = "baga"
    let b = Array.from(a);
    console.log(b)
    //['b', 'a', 'g', 'a']
水果前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实例分析Array.from(arr)与[…arr]到底有何不同
01-19
在正文开始之前我们先说明一下类数组(估计大家一定不会陌生) 类数组的特点 1.有索引 2.有长度 3.是个对象 4.能被迭代 特点说明：对于类数组的特点前三个我就不做说明了哈，主要就是最后一个，能被迭代需要具备...
JS Array.from()将伪数组转换成数组的方法示例
11-21
Array.from 方法用于将两类对象转换为真正的数组： 1、类似数组的对象，可以理解为“伪数组” 2、可遍历对象（比如字符串） 什么是伪数组？ 伪数组都有一个基本的特点：必须有 length 属性。 let arrayLike = { ...
浅理解 ES6 新增的数组方法Array.of() 和 Array.from()
黛琳ghz的博客，期待你的关注。
04-22 939
在前端开发的面试过程中， ES6 新增是一个很常见的考点，比如说箭头函数、模板字符串、let 和 const 关键字、解构赋值、扩展运算符（…）、类、模块化、生成器、Promise、Map 和 Set 等特性。这篇文章我们一起来浅浅学习和理解下 ES6 新增的数组方法 Array.of() 和 Array.from() ，如二者的区别和用法。
使用 Array.from 快速生成数组
半夏_2021的博客
07-11 1291
使用 Array.from 快速生成数组
Array.from和Array.of 方法创建数组(ES6)
weixin_44028879的博客
01-14 1262
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
深入浅出Array.from()和Array.of()
前端笔记——放弃很容易,但坚持一定很酷
06-09 1266
Array.from 方法用于将两类对象转为真正的数组：1.类似数组的对象；2.可遍历对象（包括ES6新增的数据结构Set和Map）。下面是一个类似数组的对象，Array.from将它转为真正的数组。实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from()都可以将它们转为真正的数组。// NodeList对象。
new set 数组去重和Array.from用法
张火火
05-15 3716
new Set()，用来去重数组。 let arr = [1, 2, 2, 3]; let set = new Set(arr); let newArr = Array.from(set); console.log(newArr); // [1, 2, 3]
ES6之Array.from()方法（类数组转为数组）
前端的路上
01-05 857
要将一个类数组对象转换为一个真正的数组，必须具备以下条件： 　　1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。 　　2、该类数组对象的属性名必须为数值型或字符串型的数字 　　ps: 该类数组对象的属性名可以加引号，也可以不加引号 const foo = document.querySelectorAll('.foo'); // good const nodes = Array.from(foo); // best c...
ES6之Array.from()方法 -- 数组去重
QYDUAN的博客
03-01 1734
Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。 console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], (x) => x + x)); // expected output: Array [2, 4, 6] 语法 Array.from(arrayLike[,mapFn[,th...
Array数组ES6方法Array.isArray、Array.of、Array.from；find、findIndex方法
zyz00000000的博客
04-27 1252
Array构造函数上的三个方法 Array.isArray Array.isArray()用于确定传递的值是否是一个数组。如果是数组，则返回true，否则为false。 // 鲜为人知的事实：其实 Array.prototype 也是一个数组。 Array.isArray(Array.prototype); 为什么数组原型是一个数组，还可以有属性方法呢？ 通过Object.defineProperty实现在数组上添加方法和属性。就像数组的length属性一样。 var ar.
数组Array.from的五种不同方法
tkf6102的博客
09-03 995
JavaScript 中有一个这样的函数: Array.from：允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。 介绍 在开始之前，我们先回想一下 Array.from() 的作用。语法: Array.from(arrayLike[, mapFunction[, thisArg]]) arrayLike：必传参数，...
深入浅出ES6中Array.from()方法
林木木的博客
04-09 2124
文章目录 前言 一、类数组是啥？ 二、Array.from() 1.语法 2.浅拷贝 3.从类数组结构生成数组 4.从可迭代对象生成数组 5.增强新数组 总结 前言 Array构造函数中有两个ES6新增的创建数组的静态方法from() from()用于将类数组结构或可迭代对象转换为数组实例 一、类数组是啥？ 顾名思义，就是类似于数组，但又不完全是数组，我们亲切的称它为和数组有相同结构的对象，注意再强调一遍它是对象！ ...
ES6入门教程之Array.from()方法
12-11
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 1、将类数组对象转换为真正数组： let ...
数组dct变换.py
09-10
python实现DCT变换例子，需要自己安装需要的包 import cv2 import numpy as np from scipy import array
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 324
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 501
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
前端性能优化：提升网站加载速度的终极指南
喔的嘛呀的博客
06-07 1061
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
自制植物大战僵尸：HTML5与JavaScript实现的简单游戏
m0_73367097的博客
06-08 1921
自制植物大战僵尸
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1212
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
ES6数组方法Array.from Array.of的区别
07-27
ES6中的`Array.from`和`Array.of`都是用于处理数组的方法，但它们有不同的功能和用途。 `Array.from`方法用于将类似数组或可迭代对象转换为新的数组实例。它接受两个参数：第一个参数是要转换的类似数组或可迭代对象，第二个参数是一个可选的映射函数，用于对每个元素进行处理。它返回一个新的数组，其中包含传入参数的所有元素。例如： ```javascript const str = 'hello'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o'] ``` `Array.of`方法用于创建一个包含任意数量参数的新数组实例。它接受任意数量的参数，并将它们作为数组的元素。与`Array`构造函数不同，`Array.of`不会根据参数的数量来确定数组的长度。例如： ```javascript const arr1 = Array.of(1, 2, 3); console.log(arr1); // [1, 2, 3] const arr2 = Array.of(3); console.log(arr2); // [3]，而不是长度为3的空数组 ``` 总结来说，`Array.from`用于将类似数组或可迭代对象转换为数组，而`Array.of`用于创建包含任意数量参数的新数组实例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值