ES6中新增Array.from()函数的用法详解

目录

Map对象的转换

Set对象的转换

字符串的转换

类数组对象的转换

Array.from可以接受三个参数


ES6为Array增加了from函数用来将其他对象转换成数组。当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组。

1、部署了Iterator接口的对象,比如:Set,Map,Array。

PS:一文彻底搞清楚 Iterator(遍历器)概念及用法

2、类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length,转出来的就是空数组。

PS:类数组对象: 长的像数组的对象
 

a. 像数组: 1). 下标,  2). length   3). 遍历
 

b. 和数组的区别: 本质区别:类型不同

  1). 数组是Array家的孩子,可以使用数组家的函数
 

  2). 类数组对象是Object家的孩子,不能使用数组家的函数。

Map对象的转换

将Map对象的键值对转换成一个一维数组。

实际上转换出来的数组元素的序列是key1,value1,key2,value2,key3,value3.....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(map1);
console.log(Array.from(map1)) //  [['k1', 1],['k2', 2],['k3', 3]]
console.log('%s', Array.from(map1)) // k1,1,k2,2,k3,3

输出结果:

Set对象的转换

将Set对象的元素转换成一个数组。

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log(set1);
console.log(Array.from(set1)) // [1,2,3]
console.log('%s', Array.from(set1)) // 1,2,3

输出结果:

字符串的转换

可以吧ascii的字符串拆解成一个数据,也可以准确的将unicode字符串拆解成数组.

console.log(Array.from('hello world'));
console.log('%s', Array.from('hello world'));
console.log(Array.from('\u767d\u8272\u7684\u6d77'));
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'));

输出结果:

类数组对象的转换

一个类数组对象必须要有length,他们的元素属性名必须是数值或者可以转换成数值的字符。

注意:属性名代表了数组的索引号,如果没有这个索引号,转出来的数组中对应的元素就为空。

console.log(Array.from({0: '0',1: '1',3: '3',length:4
}));console.log('%s', Array.from({0: '0',1: '1',3: '3',length:4
}));

输出结果:

如果对象不带length属性,那么转出来就是空数组。

console.log(Array.from({0: 0,1: 1
}));
console.log('%s', Array.from({0: 0,1: 1
}));

输出结果就是空数组:

对象的属性名不能转换成索引号时,转出来的结果也是空数组。

console.log(Array.from({a: '1',b: '2',length:2
}));
console.log('%s', Array.from({a: '1',b: '2',length:2
}));

输出结果也是空数组:

Array.from可以接受三个参数

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set Map)。

我们看定义:

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike:被转换的的对象。

mapFn:map函数。

thisArg:map函数中this指向的对象。

第一个参数,被转换的的对象

第二个参数,map函数

用来对转换中,每一个元素进行加工,并将加工后的结果作为结果数组的元素值。

console.log(Array.from([1, 2, 3, 4, 5], (n) => n + 1))
console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

输出结果:

上面的map函数实际上是给数组中的每个数值加了1。

第三个参数,map函数中this指向的对象

该参数是非常有用的,我们可以将被处理的数据和处理对象分离,将各种不同的处理数据的方法封装到不同的的对象中去,处理方法采用相同的名字。

在调用Array.from对数据对象进行转换时,可以将不同的处理对象按实际情况进行注入,以得到不同的结果,适合解耦。

这种做法是模板设计模式的应用,有点类似于依赖注入。

let diObj = {handle: function(n){return n + 2}
}console.log(Array.from([1, 2, 3, 4, 5], function (x){return this.handle(x)}, diObj));// [3, 4, 5, 6, 7]console.log('%s', Array.from([1, 2, 3, 4, 5], function (x){return this.handle(x)}, diObj));// 3,4,5,6,7

输出结果:

参考资料:

JavaScript中Array.from()的用法总结 | Array.from()将伪数组转换成数组的方法示例

Array.from() - JavaScript | MDN | Array.from() 五个超好用的用途 - 哔哩哔哩 | ES6之Array.from()方法

Array.from() 超全用法详解-脚本之家 | Array.from ()方法详解-CSDN博客

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

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

相关文章

代码安全审计经验集(下)

对HTTP加密请求参数的测试 对于HTTP请求体加密,如果直接使用明文的请求参数,是无法进行正常的安全测试的。但通常还是有办法分析出加解密的策略,如果能把加解密算法还原,就可以先将安全测试的payload添加到原始明文参数&#xff0…

SpringBoot统一功能处理,拦截器,统一数据格式,捕捉异常

目录 拦截器:是Spring框架提供的核心功能之一,主要用来拦截用户的请求,在指定方法前后,根据业务需要执行预先设定的代码: 自定义拦截器 统一数据格式,要包含状态码,错误信息​编辑 出现针对String类型的错误​​​…

【Linux C | 网络编程】netstat 命令图文详解 | 查看网络连接、查看路由表、查看统计数据

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

【AI数字人-论文】Geneface论文

文章目录 前言pipelineaudio-to-motionMotion domain adaptation可视化 Motion-to-imageHead-NeRFTorso-NeRF 结果对比 前言 语音驱动的说话人视频合成旨在根据一段输入的语音,合成对应的目标人脸说话视频。高质量的说话人视频需要满足两个目标: &#…

ele-h5项目使用vue3+vite开发:第二节、search 搜索框组件开发

如何设计一个组件 需求分析 布局 content left-iconbodyinput-controlright-iconaction 功能 使用 defineEmits 定义组件的事件 在组件的script setup 里如何定义事件 使用defineEmits&#xff08;&#xff09;定义先声明事件接口 <script setup lang"ts"> int…

儿童护眼台灯怎么选择?一文教你如何选择儿童护眼台灯

护眼台灯是家长最常为孩子购买的用品之一&#xff0c;但是大部分人对它的了解并不多&#xff0c;很多人购买之后反而会觉得眼睛更容易疲劳&#xff0c;有不适的情况&#xff01;最主要的原因是因为挑选的台灯不够专业&#xff0c;次要原因则是使用方法不正确。所以今天跟大家讲…

Android.bp入门指南之浅析Android.bp文件

文章目录 Android.bp文件是什么&#xff1f;Android.bp的主要作用模块定义依赖关系构建规则模块属性插件支持模块的可配置性 为什么会引入Android.bp语法例子 Android.bp文件是什么&#xff1f; Android.bp 文件是 Android 构建系统&#xff08;Android Build System&#xff…

JavaScript基础五对象 内置对象 Math.random()

内置对象-生成任意范围随机数 Math.random() 随机数函数&#xff0c; 返回一个0 - 1之间&#xff0c;并且包括0不包括1的随机小数 [0, 1&#xff09; 如何生成0-10的随机数呢&#xff1f; Math.floor(Math.random() * (10 1)) 放大11倍再向下取整 如何生成5-10的随机数&…

element-ui icon 组件源码分享

今日简单分享 element-ui 源码中的 icon 组件&#xff0c;主要从以下两个方面来分享&#xff1a; 一、源码中 icon 设计思想是什么呢&#xff1f;主要从页面结构、数据、 icon 样式三个方面来分享。 1.1 源码中 icon 组件的页面结构&#xff0c;可以在 package 目录下找到 ico…

python爬虫实战——获取酷我音乐数据

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 开发环境: 版 本&#xff1a; python 3.8 编辑器&#xff1a;pycharm 2022.3.2 模块使用: requests >>> pip install requests 如何安装python第三方模块: win R 输入 cmd 点击确定, 输入安装命令 pip install…

k8s kubeadm部署安装详解

目录 kubeadm部署流程简述 环境准备 步骤简述 关闭 防火墙规则、selinux、swap交换 修改主机名 配置节点之间的主机名解析 调整内核参数 所有节点安装docker 安装依赖组件 配置Docker 所有节点安装kubeadm&#xff0c;kubelet和kubectl 定义kubernetes源并指定版本…

【Java】【SSE】【VUE】实现调用千帆大模型,实现打字效果

没有废话。只有演示、和源码地址 效果演示 源码地址 qianfan-sse-demo: 基于https://gitee.com/codinginn/chatgpg-sse-demo-springboot-vue改动

QT SQL

QT SQL模块提供数据库编程的支持&#xff0c;支持多种常见的数据库&#xff1a;MySQL\Oracle\MS SQL Server\SQLite等。SQL模块包含多个类&#xff0c;可以实现&#xff1a;数据库连接、SQL语句执行、数据获取与界面显示 等功能。数据 与 界面间用Model\View架构。 一、 二、Q…

FullStack之Django(2)模型和后台

FullStack之Django(2)模型和后台 author: Once Day date:2022年2月13日/2024年1月31日 漫漫长路&#xff0c;才刚刚开始… 全系列文档请查看专栏: FullStack开发_Once_day的博客-CSDN博客Django开发_Once_day的博客-CSDN博客 参考文档: 编写你的第一个 Django 应用&#…

docker安装定制gocd-agent

一、定制gocd-agent FROM gocd/gocd-agent-alpine-3.12:v21.1.0 MAINTAINER xxx "xxx163.com" # 切换到 root 用户 USER root # 安装 expect、jdk、docker RUN apk update && apk add expect && apk add openjdk8 && apk add docker &&…

Vue3的 组件事件

目录 介绍 触发与监听事件 事件参数 声明触发的事件 事件校验 总结 介绍 Vue3是Vue框架的最新版本&#xff0c;其中对组件事件进行了一些改进和优化。组件事件是Vue中一种常用的通信机制&#xff0c;用于在组件之间传递数据或触发动作。 Vue3中的组件事件主要有两种类型…

Spring Bean 定义常见错误

Spring 的核心是围绕 Bean 进行的。不管是 Spring Boot 还是 Spring Cloud&#xff0c;只要名称中带有 Spring 关键字的技术都脱离不了 Bean&#xff0c;而要使用一个 Bean 少不了要先定义出来&#xff0c;所以定义一个 Bean 就变得格外重要了。 当然&#xff0c;对于这么重要…

2024人工智能可以报考的证书有哪些

人工智能&#xff08;AI&#xff09;是致力于解决通常与人类智能相关联的认知性问题的计算机科学领域&#xff0c;这些问题包括学习、创造和图像识别等。 关键的人工智能技术有哪些&#xff1f; 深度学习神经网络构成了人工智能技术的核心。神经网络反映了人脑中发生的过程。大…

JOSEF约瑟 HRTH-Y-2H2D跳位合位 电源监视继电器 导轨安装

HRTH-Y-2H2D跳位合位 电源监视继电器&#xff1a; HRTH-Y-2H2D-X-T&#xff1b;HRTH-Y-2Z-X-T&#xff1b;HRTH-Y-2H-X-T&#xff1b; HRTH-J-2H2D-X-T&#xff1b;HRTH-J-2Z-X-T;HRTH-J -2H-X-T&#xff1b; HRTH-Y-2H2D&#xff1b;HRTH-Y-2Z&#xff1b;HRTH-Y-2H&#xff1…

遇到ubuntu设置交叉编译环境的问题

今天交叉编译器一直没安装成功&#xff0c;环境变量也配置了还是不对&#xff0c;最后发现Ubuntu是64位的要装 然后就好了 另外在进行嵌入式Linux开发的时候&#xff0c;要把主机、虚拟机、以及开发板设置在同一网段下&#xff0c;虚拟机一般设成临时的就可以&#xff0c;但是…