js中的Array.from()和Array.of()方法的用法详情

在这里插入图片描述

😁 作者简介:一名大四的学生,致力学习前端开发技术
⭐️个人主页:夜宵饽饽的主页
❔ 系列专栏:JavaScript小贴士
👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气

​🔥​前言:

本文是关于Array.from方法和Array.of方法的运用,这是一种创建数组和类型转化成数组的方法,希望可以帮助到大家,欢迎大家的补充和纠正

文章目录

    • 8.2 Array.from()
      • 8.2.1 含义
      • 8.2.3 应用
      • 8.2.4 实例
    • 8.3 Array.of()
    • 8.3 最后:

8.2 Array.from()

8.2.1 含义

Array.from方法用于将两类对象转为真正的数组

  1. 类似数组的对象,比如:DOM操作返回的NodeList集合,以及函数内部的arguments对象
  2. 可遍历(iterable)对象(包括ES6新增的数据结构Set和Map)

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

Array.from(arrayLike,x=>x*x)//等同于
Array.from(arrayLike).map(x => x*x)

⭐️ Array和扩展运算符的区别

先解释何为类似数组对象的:本质特征只有一点,即必须有 length属性

扩展运算符: 其背后调用的是遍历器接口(Symbo.iterator),如果一个对象没有部署该接口,就无法转换

Array.from(): 其是支持类似数组对象,任何有length对象,都可以通过Array.from方法转换为数组,扩展运算符是无法转换这种情况的

Array.from({ length:3 })
//[undefined,undefined,undefined]

8.2.3 应用

  1. Array.from()可以将各种值转为真正的数组,并且提供map功能。这实际上意味着,只要有一个原始数据结构,就可以先对它的值进行处理,然后转成规范的数组结构,在使用数组方法进行操作
  2. Array.from()可以将字符串转为数组,然后返回字符串的长度,因为它可以正确处理各种Unicode字符,可以避免JavaScript将大于 、uFFFF的Unicode字符算作2个字符的bug

8.2.4 实例

//传入字符串
let str='foo'
let ex1=Array.from(str)
console.log(ex1)//传入Set类型的
const set=new Set(['foo','bar','baz','foo'])
let ex2=Array.from(set)
console.log(ex2)//传入Mao类型
const mapper=new Map([[1,2],[2,4],[4,8]
])
let ex3=Array.from(mapper)
console.log(ex3)//传入类数组对象
function f(){return Array.from(arguments)
}let ex4=f(1,2,3)
console.log(ex4)

8.3 Array.of()

📑 描述: 将一组值转为数组

Array.of(3,2,6) //[3,2,6]

使用细节:

这个方法主要是用于弥补数组构造函数Array()的不足,因为参数个数不同会导致Array()的行为差异

Array(3) //[, , ,]
Array(3,11,8) //[3,11,8]

Array只有当参数个数不少于2个时,Array()才会返回有参数组成的新数组

Array.of 基本上可以用来替代Array()或 new Array()

8.3 最后:

🌼下面推荐的两篇文章可以补充和扩展文章中涉及的知识点 😃

  • JavaScript的数组的扩展
  • 【ES6的标准入门】JavaScript中Set、Map与弱引用版本:WeakSet和WeakMap优雅的数据管理技巧

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

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

相关文章

Android 12 (InputMethodManagerService) 替换默认输入法为Pinyin输入法

1.问题场景 由于系统自带的Latin输入法不支持遥控器操作,需要替换为RK的拼音输入法。 2. 替换步骤 1)将LatinIME从mk中删除,让系统编译的时候不编译该apk --- a/Android/build/make/target/product/handheld_product.mkb/Android/build/m…

VScode安装C/C++编译器步骤

一、安装C/C插件 二、安装 MinGW-w64 工具链 使用国内源 git clone https://gitee.com/cuihongxi/ubuntu2-mac.git 下载后进入到VScode文件夹下,点击msys2-x86_64-20231026.exe进行安装 完成后,确保选中“立即运行 MSYS2”框,然后选择“完…

stable diffusion工作原理

目录 序言stable diffusion能做什么扩散模型正向扩散逆向扩散 如何训练逆向扩散 Stable Diffusion模型潜在扩散模型变分自动编码器图像分辨率图像放大为什么潜在空间可能存在?在潜在空间中的逆向扩散什么是 VAE 文件? 条件化(conditioning)文本条件化&am…

深信服技术认证“SCSA-S”划重点:命令执行漏洞

为帮助大家更加系统化地学习网络安全知识,以及更高效地通过深信服安全服务认证工程师考核,深信服特别推出“SCSA-S认证备考秘笈”共十期内容,“考试重点”内容框架,帮助大家快速get重点知识~ 划重点来啦 *点击图片放大展示 深信服…

前端验收测试驱动开发

我们听说过很多关于测试驱动开发(TDD)的内容。那么什么是ATDD? ATDD代表验收测试驱动开发,这是一种定义验收标准并创建自动化测试来验证是否满足这些标准的软件开发方法。ATDD是一种协作方法,涉及客户、开发人员和测试…

Python算法例21 交错正负数

1. 问题描述 给出一个含有正整数和负整数的数组,将其重新排列成一个正负数交错的数组。 2. 问题示例 给出数组[-1,-2,-3,4,5,6],重新排序之后,变成[-1,5,-…

docker 部署kafka

随笔记录 目录 1. 安装zookeeper 2. 安装Kafka 2.1 拉取kafka image 2.2 查询本地docker images 2.3 查看本地 容器(docker container) 2.3.1 查看本地已启动的 docker container 2.3.2 查看所有容器的列表,包括已停止的容器。 2.4 …

个人财务工具、密钥管理平台、在线会计软件、稍后阅读方案 | 开源专题 No.51

gethomepage/homepage Stars: 10.1k License: GPL-3.0 这个项目是一个现代化、完全静态的、快速且安全的应用程序仪表盘,具有超过 100 种服务和多语言翻译的集成。 快速:网站在构建时以静态方式生成,加载时间飞快。安全:所有对后…

五分钟学完DBSCAN算法

基础概念 邻1个核心思想:基于密度,依据密度的连通性分析增长聚类 2个算法参数:邻域半径R和最少点数目minpoints 这两个算法参数实际可以刻画什么叫密集——当邻域半径R内的点的个数大于最少点数目minpoints时,就是密集。 3种点的…

SQL Error:1064,SQLState:42000

SQL Error 1064 是一个常见的 SQL 错误,通常表示 SQL 语句存在语法错误或不符合数据库的规范。SQLState 42000 是表示通用语法错误的 SQL 状态码。要解决 SQL Error 1064,需要检查的 SQL 语句,确保它们符合数据库管理系统的语法规则。 引起错…

油猴脚本教程案例【长按元素】- 哔哩哔哩一键三连

文章目录 1. 元数据2. 编写函数2.1 关键函数2.2 完整代码 3. 验证和调试3.1 效果演示 4. 可能遇到的问题和解决方法5. 结语 1. 元数据 在编写油猴脚本时,首先需要设置一些元数据,包括脚本的名称、命名空间、版本、描述等信息。以下是本脚本的元数据部分…

.NET core 自定义过滤器 Filter 实现webapi RestFul 统一接口数据返回格式

之前写过使用自定义返回类的方式来统一接口数据返回格式,.Net Core webapi RestFul 统一接口数据返回格式-CSDN博客 但是这存在一个问题,不是所有接口会按照定义的数据格式返回,除非每个接口都返回我们自定义的类,这种实现起来不…

7. ASP.NET Core Blazor 官网文档

官方文档地址:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/?viewaspnetcore-8.0 Blazor 是一种 .NET 前端 Web 框架,在单个编程模型中同时支持服务器端呈现和客户端交互性: 使用 C# 创建丰富的交互式 UI。共享使用 .NET 编写的…

web前端javaScript笔记——(5)原型对象和垃圾回收

原型对象 原型对象prototype 我们所创建的每一个函数,机械其都会向函数中添加一个属性prototype 这个属性对应着一个对象,这个对象就是我们所谓的原型对象 function Person(){} console.log(Person.prototype);//Object 如果函数作为普通函数调用pr…

106 uni-app 小程序之巨坑 not found path,not found methods v-for渲染出现报错

1.Component is not found in path 你是否像我一样,检查了无数遍,引入路径检查千万遍,就是没写错,小程序后台就是给你报错, 不用慌,心里默念:我不能砸电脑,我不能砸电脑&#xff0…

kitex出现:open conf/test/conf.yaml: no such file or directory

open conf/test/conf.yaml: no such file or directory https://github.com/cloudwego/cwgo/issues/120 https://github.com/cloudwego/cwgo/issues/29 在使用Kitex生成的代码中,单元测试时回报错,如标题所示。出现该错的原因是,biz/servic…

python 神经网络归纳

CNN卷积神经网络 一个卷积神经网络主要由以下5层组成: 数据输入层/ Input layer卷积计算层/ CONV layerReLU激励层 / ReLU layer池化层 / Pooling layer全连接层 / FC layer 1. 数据输入层 该层要做的处理主要是对原始图像数据进行预处理,其中包括&…

主流数据库体系结构

MySQL 我们通常所说的 MySQL 数据库服务器由一个实例(instance)以及一个数据库(database)组成。实例包括一组后台进程/线程和许多内存结构,用于管理数据库;数据库由一组磁盘文件组成,用于存储数…

基于FPGA的简易BPSK和QPSK

1、框图 2、顶层 3、m_generator M序列的生成,输出速率为500Kbps 4、S2P是串并转换模块 将1bit的m序列转换到50M时钟下的2bit M序列数据(就有4个象限); 5、my_pll是生成256M的时钟作为载波,因为sin和cos信号的…

论文阅读<MULTISCALE DOMAIN ADAPTIVE YOLO FOR CROSS-DOMAIN OBJECT DETECTION>

论文链接:https://arxiv.org/pdf/2106.01483v2.pdfhttps://arxiv.org/pdf/2106.01483v2.pdf 代码链接:GitHub - Mazin-Hnewa/MS-DAYOLO: Multiscale Domain Adaptive YOLO for Cross-Domain Object DetectionMultiscale Domain Adaptive YOLO for Cross…