Array.from()方法之什么是类数组对象

这篇具有很好参考价值的文章主要介绍了Array.from()方法之什么是类数组对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。

1、将类数组对象转换为真正数组:

    let arrayLike = {
        0: 'tom', 
        1: '65',
        2: '男',
        3: ['jane','john','Mary'],
        'length': 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr) // ['tom','65','男',['jane','john','Mary']]

那么,如果将上面代码中length属性去掉呢?实践证明,答案会是一个长度为0的空数组。

这里将代码再改一下,就是具有length属性,但是对象的属性名不再是数字类型的,而是其他字符串型的,代码如下:

    let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr)  // [ undefined, undefined, undefined, undefined ]

会发现结果是长度为4,元素均为undefined的数组

由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

2、该类数组对象的属性名必须为数值型或字符串型的数字

ps: 该类数组对象的属性名可以加引号,也可以不加引号

2、将Set结构的数据转换为真正的数组:

    let arr = [12,45,97,9797,564,134,45642]
    let set = new Set(arr)
    console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。如下:

    let arr = [12,45,97,9797,564,134,45642]
    let set = new Set(arr)
    console.log(Array.from(set, item => item + 1)) 
    // [ 13, 46, 98, 9798, 565, 135, 45643 ]

3、将字符串转换为数组:

    let  str = 'hello world!';
    console.log(Array.from(str)) 
    // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

4、Array.from参数是一个真正的数组:

    console.log(Array.from([12,45,47,56,213,4654,154]))

像这种情况,Array.from会返回一个一模一样的新数组文章来源地址https://www.toymoban.com/news/detail-620088.html

到了这里,关于Array.from()方法之什么是类数组对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript判断数组对象是否含有某个值的方法(6种)

    文章内容 文章链接 vue3 antd table表格的增删改查(一) input输入框根据搜索【后台管理系统纯前端filter过滤】 https://blog.csdn.net/XSL_HR/article/details/128072584?spm=1001.2014.3001.5501 vue3 antd table表格的增删改查(二) input输入框根据搜索【后台管理系统 请求后端接口 前后端

    2024年02月06日
    浏览(63)
  • JavaScript中手动实现Array.prototype.map方法

    在前端开发中,我们经常需要对数组进行操作和处理。在JavaScript中,数组是常用的数据类型之一。而数组的map方法可以将一个数组中的每个元素都进行某种操作,并返回一个新的数组。今天,我们就来手动实现JavaScript中数组原型的map方法。 首先,让我们回顾一下map方法的基

    2024年02月21日
    浏览(41)
  • 4 JavaScript数组和对象

    4 数组和对象 在JS中创建数组非常简单. 直接[ ]即可. 也可以用正规军的new Array(). 不过效果都是一样的. 数组的常用操作: 在JS中创建一个对象非常容易. 和python中的字典几乎一样{ }: 使用对象 从上述内容中几乎可以看到. JS对象的使用几乎是没有门槛的. 十分灵活 代码的效果图如

    2024年02月12日
    浏览(34)
  • JavaScript如何从数组(数组对象)中删除特定数据

    如果数组中有重复的两个元素,我们只想删除一个元素,我们必须使用另一种方法。

    2024年02月12日
    浏览(72)
  • 检查Javascript对象数组中是否存在对象值,如果没有向数组添加新对象

    需求: 如果我有以下对象数组: 有没有办法循环遍历数组,以检查特定的用户名值是否已经存在,如果它什么都不做,但是如果它没有用所述用户名(和新的ID)将新对象添加到数组? 解决 方法 一: 我假设id s在这里是独一无二的。 some是检查数组中事物存在的一个很好的函数

    2024年02月11日
    浏览(43)
  • 如何在 JavaScript 中将数组转为对象

    首先,我们需要明白对象具有键和值。 如果我们想把某个东西转换成一个 对象 ,我们需要传递具有这两个要求的东西:键和值。 满足这些要求的参数有两种类型: 具有嵌套键值对的数组 Map 对象 这是一个带有键值对的嵌套数组 当我们应用它时,我们可以使用 Object.fromEnt

    2024年02月01日
    浏览(56)
  • javascript二维数组(20)JSON对象

    在JavaScript中,JSON对象是一种数据格式,用于存储和传输数据。JSON,全称JavaScript Object Notation,是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。 JSON对象由键值对组成,其中键是字符串,值可以是字符串、数字、布尔值、null、数组或另一个J

    2024年02月07日
    浏览(48)
  • 【C++】类和对象---什么是类?

    我们可以用类来定义新的类型,井且操纵这些新的类型可以像内置类型一样容易。通过创建新的类型来描述问题域,C++使程序员能够编写出更易于理解的应用程序。类设施使得程序员能够将新类型的底层实现相关细节(只有新类型的实现者才关心这些),同该类型的接口和操

    2024年02月01日
    浏览(32)
  • JavaScript对象数组根据某个属性值筛选分类

    🤵 作者 : coderYYY 🧑 个人简介 :前端程序媛,目前主攻 web前端 ,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!) 👉 个人专栏推荐 :《前端项目教程以及代码》 在开发中,这种需求还是挺常见的,常用于处理后端返回的数据

    2024年02月06日
    浏览(49)
  • 从 JavaScript 中的数组中删除空对象

    从数组中删除空对象: 使用 Array.filter() 方法遍历数组。 将每个对象传递给 Object.keys() 方法并检查键的长度是否不等于 0。 filter 方法将返回一个不包含空对象的新数组。 我们传递给 Array.filter 方法的函数被数组中的每个元素(对象)调用。 如果函数返回真值,则 filter 方法将

    2024年02月01日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包