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…

python学习_win32 实现模拟键盘输入或者鼠标移动的方法

1.方法一 参考文档 https://blog.csdn.net/qq_45664055/article/details/123573468ctypes 是一个 Python 库,它提供了调用 C 代码的功能。使用 ctypes 可以调用 Windows API 函数,包括鼠标和键盘的操作。 1.1模拟鼠标操作: from ctypes im…

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

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

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

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

MBP 2015安装Ubuntu 22.04.3系统后摄像头驱动问题解决

# 表示root用户, 如果更喜欢 sudo 也可以使用 sudo$ 表示普通用户 安装缺失的Ubuntu依赖以解压固件 (# apt install xz-utils curl cpio make)解压和安装固件请参考 Firmware extraction.安装依赖: (# apt-get install linux-headers-generic git kmod libssl-dev checkinsta…

【Java万花筒】选择你的武器:移动开发的多面利器大揭秘

Java移动开发全景图:从Android SDK到跨平台框架一网打尽 前言 移动应用开发正迎来飞速发展的时代,选择合适的开发库成为开发者关注的焦点。本文深入探讨了多个Java库,涵盖Android SDK、RoboVM、Codename One、Xamarin、Flutter以及React Na…

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

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

Redis简介和数据类型

简介 Redis是完全开源(BSD许可)的内存数据结构存储,是一个高性能的 key-value 数据库,用作数据库、缓存、消息代理和流式处理引擎。 Redis 提供数据结构,例如字符串、哈希、列表、集、带有范围查询的排序集、位图、超…

【INTEL(ALTERA)】内部错误:子系统:QHD,文件:/quartus/comp/qhd/qhd_design.cpp

说明 由于英特尔 Quartus Prime 专业版软件 23.2 及更早版本存在问题,在使用 GUI 对设计进行完整编译后,您可能会看到此内部错误。 此错误仅发生在 GUI 中,在命令行中不会发生。此问题也仅出现在面向 Intel Agilex 7 设备的设计中。 解决方法…

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;次要原因则是使用方法不正确。所以今天跟大家讲…

yyyy与YYYY、dd与DD、mm与MM、hh与HH的区别

yyyy与YYYY、dd与DD、mm与MM、hh与HH的区别: Date now = new Date(); // 2024-02-02 14:26:xx、Fri Feb 02 14:26:xx CST 2024小写y是指Year、大写Y是指Week year(Week year是当天所在的周属于的年份,一周从周日开始,周六结束,只要本周跨年,那么这周就算入下一年) Sys…

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的随机数&…

科普类——进行基线设计、系统测试和优化的立体视觉软件与工具(七)

科普类——进行基线设计、系统测试和优化的立体视觉软件与工具&#xff08;七&#xff09; 在立体视觉领域&#xff0c;有许多立体视觉软件和工具可以帮助工程师进行基线设计、系统测试和优化。以下是一些常用的立体视觉软件和工具&#xff1a; Meshroom&#xff1a;这是一个基…

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改动

Vue入门基础语法概要

文章目录 一、Vue框架基础语法vue文件构成 二、脚手架执行流程三、vue组件四、css样式写法其他实例以及解释&#xff0c;随便写写 一、Vue框架基础语法 el挂载点data数据对象标签 V-text 纯文本V-html 解析htmlV-on&#xff08;可替换为&#xff09; 为元素绑定事件&#xff0…