JavaScript中改进的数组功能

ES6标准为数组添加了很多新功能,例如,创建数组的新方法,创建定型数组(Typed Array)的能力等。

1、创建数组

在ES6以前,创建数组的方式主要有两种,一种是调用Array构造函数,另一种是用数组字面量语法,这两种方法均需列举数组中的元素,功能非常受限。

为了进一步简化数组的创建过程,ES6新增了Array.of()和Array.from()两个方法。

1.1 Array构造函数创建数组

//1、传入一个数值,认为是length值
let items1 = new Array(2);
console.log(items1.length);//2
console.log(items1[0]);//undefined
console.log(items1[1]);//undefined//2、传入非数值类型,目标数组唯一项
let items2 = new Array("2");
console.log(items2.length);//1
console.log(items2[0]);//"2"//3、传入多个值,数组的元素
let items3 = new Array(2, 3);
console.log(items3.length);//2
console.log(items3[0]);//2
console.log(items3[1]);//3//4、传入多个值,数组的元素
let items4 = new Array(2, "3");
console.log(items4.length);//2
console.log(items4[0]);//2
console.log(items4[1]);//"3"

如果给Array构造函数,

  • 传入一个数值型的值,则数组的length属性会被设为该值。
  • 传入一个非数值型的值,那这个值会成为目标数据的唯一项。
  • 如果传入多个值,无论值类型,都会变为数组的元素。

这个特性容易引发错误,因为你不可能总是注意传入数据的类型。

1.2 Array.of()方法

无论参数是什么类型,Array.of()方法总会创建一个包含所有参数的数组。要用Array.of()方法创建数组,只需传入你希望在数组中包含的值即可。

//1、传入一个数值,认为是length值
let items1 = Array.of(1, 2);
console.log(items1.length);//2
console.log(items1[0]);//1
console.log(items1[1]);//2//2、传入非数值类型,目标数组唯一项
let items2 = Array.of(2);
console.log(items2.length);//1
console.log(items2[0]);//"2"//3、传入多个值,数组的元素
let items3 = Array.of("2, 3");
console.log(items3.length);//2
console.log(items3[0]);//2,3

1.3 Array.from()方法

1.3.1 非数组对象转为数组对象

1、JavaScript不支持直接将非数组对象转换为真实数组,arguments就是一种类数组对象,如果要把它当作数组使用则必须先转换该对象的类型。例如:

function makeArray(arrayLike) {var result = [];for (let i = 0, len = arrayLike.length; i < len; i++) {result.push(arrayLike[i]);}return result;
}
function doSomething(){var args = makeArray(arguments);//args是一个数组,可以使用args
}

上述方法,先是手动创建一个result数组,再将arguments对象里的每一个元素复制到新数组中。

2、下面是一种比较简单的方法,调用数组原生的slice()方法可以将非数组对象转换为数组。

function makeArray(arrayLike) {return Array.prototype.slice.call(arrayLike);
}
function doSomething() {var args = makeArray(arguments);//args是一个数组,可以使用args
}
//即
var args = Array.prototype.slice.call(arguments);//args即为数组

3、更直接的方法

ES6新添加了一个语义清晰、语法简洁的新方法Array.from()来将对象转化为数组。Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数,最终返回一个数组

function doSomething(){var args = Array.from(arguments);
}

Array.from()方法调用会基于arguments对象中的元素创建一个新数组,args是Array的一个实例,包含arguments对象中同位置的相同值。

1.3.2 映射转换

如果想要进一步转化数组,可以提供一个映射函数作为Array.from()的第二个参数。

function translate() {return Array.from(arguments, (value) => value + 1);
}let numbers = translate(1, 2, 3);
console.log(numbers);//2,3,4
1.3.3 用Array.from()转换可迭代对象

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

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

相关文章

VMware Workstation Pro 17虚拟机超级详细搭建(含redis,nacos,docker)(一)

今天从零搭建一下虚拟机的环境&#xff0c;把nacos&#xff0c;redis等微服务组件还有数据库搭建到里面&#xff0c;首先看到的是我们最开始下载VMware Workstation Pro 17 之后的样子&#xff0c;总共一起应该有三部分因为篇幅太长了 下载地址 : VMware - Delivering a Digit…

Vue动态设置控制表格列表展现列

最近遇到一个需求,表格列表默认不展示某一列,当我设置后可以展示该列,也可以展示和隐藏别的列,起到可以对整个表格列展示隐藏控制的效果,如下示例,默认不展示“单位名称”这一列,在我点击设置齿轮后可以看到,有“单位名称”这一列,但未打钩: 当我勾中“单位名称”,…

第2讲-Memory(5)外存

磁盘存储器 组成 记录原理 性能指标 (磁盘存取时间的计算) 磁盘地址 工作过程 优点 ①存储容量大,位价格低; ②记录介质可重复使用; ③记录信息可长期保存而不丢失,甚至可脱机存档; ④非破坏性读出,读出时不需要再生。 缺点 存取速度慢,机械结构复杂,对工作环境…

在wps的word中如何引用正确引用参考文献

目录 插入参考文献编号把插入的编号置于右上角最终效果 插入参考文献编号 把插入的编号置于右上角 最终效果

面试算法-88-反转链表

题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 解 class Solution {public ListNode reverseList(ListNode head) {if(head null || hea…

大数据技术在工厂生产数字转型中的应用与价值

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 随着大数据技术的快速发展&#xff0c;越来越多的企业开始关注并应用大数据技术&#x…

HCIP-Datacom(H12-821)新题

最新 HCIP-Datacom&#xff08;H12-821&#xff09;完整题库请扫描上方二维码访问&#xff0c;持续更新中。 以下关于OSPF的描述&#xff0c;哪些项是正确的&#xff1f; A. 第二类外部路由的开销值只是AS外部开销值&#xff0c;忽略AS内部开销值 B. AS-External-LSA描述的是…

prettier + eslint 配置

vue-cli 新建项目选择 ESLint Prettier 会自动下载相关包 settings.json {"editor.formatOnSave": true, // 开启保存文件自动格式化代码"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具// "prettier.r…

应用日志集成到ElasticSearch

1、阿里云sls平台集成日志 阿里sls集成日志步骤 2、filebeat 收集到指定es 安装docker容器 Docker安装 拉取镜像&#xff1a; docker pull elastic/filebeat:7.5.1启动&#xff1a; docker run -d --namefilebeat elastic/filebeat:7.5.1拷贝容器中的数据文件到宿主机&a…

【C++航海王:追寻罗杰的编程之路】stack

目录 1 -> stack的介绍和使用 1.1 -> stack的介绍 1.2 -> stack的使用 1.3 -> stack的模拟实现 1 -> stack的介绍和使用 1.1 -> stack的介绍 stack的文档介绍 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c…

零基础机器学习(5)之线性回归模型的性能评估

文章目录 线性回归模型的性能评估1.举例1-单一特征2.举例2-多特征 线性回归模型的性能评估 评估线性回归模型时&#xff0c;首先要建立评估的测试数据集&#xff08;测试集不能与训练集相同&#xff09;&#xff0c;然后选择合适的评估方法&#xff0c;实现对线性回归模型的评…

设计模式——模板方法模式封装.net Core读取不同类型的文件

1、模板方法模式 模板方法模式&#xff1a;定义一个操作中的算法骨架&#xff0c;而将一些步骤延迟到子类中&#xff0c;模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 特点&#xff1a;通过把不变的行为搬移到超类&#xff0c;去除子类中重复的代…

css的transition详解

CSS的transition属性是一个简写属性&#xff0c;用于设置四个过渡效果属性&#xff0c;以在元素的状态改变时创建平滑的动画效果。这四个属性分别是&#xff1a; transition-property&#xff1a; 定义应用过渡效果的CSS属性名称。当指定的CSS属性改变时&#xff0c;过渡效果将…

【保姆级讲解Linux常见命令】

&#x1f308;&#x1f308;&#x1f308;&#x1f308;欢迎 &#x1f308;&#x1f308;&#x1f308; &#x1f389;&#x1f44d;点赞⭐评论⭐收藏&#x1f389; &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让…

力扣---零钱兑换---动态规划

思路&#xff1a; 这是一道典型的动态规划问题&#xff08;希望下次不用提示&#xff0c;能直接认出来&#xff09;&#xff1a;我将g[i]定义为总金币为i所需的最少硬币个数。所以递推公式可以表示为&#xff1a;g[i]min(g[i-1],g[i-2],g[i-5])1&#xff0c;也就是g[i]min(g[i-…

类似于 FastAdmin的快速后台开发框架都有哪些

类似于FastAdmin&#xff0c;能够根据数据表直接生成程序、语言包和界面的框架&#xff0c;确实存在一些其他的选项。以下是一些推荐&#xff1a; ThinkPHP框架的扩展与工具&#xff1a;除了FastAdmin&#xff0c;ThinkPHP作为一个流行的PHP框架&#xff0c;有很多扩展和工具可…

【算法】棋盘(模板题)

小蓝拥有 nn 大小的棋盘&#xff0c;一开始棋盘上全都是白子。 小蓝进行了 m 次操作&#xff0c;每次操作会将棋盘上某个范围内的所有棋子的颜色取反(也就是白色棋子变为黑色&#xff0c;黑色棋子变为白色)。 请输出所有操作做完后棋盘上每个棋子的颜色。 输入格式 输入的第…

【Python音视频技术】玩AI视频创作引发写Python音视频技术系列文章1---视频添加字幕

最近对视频创作感兴趣&#xff0c; 详情见之前写的几篇文章。 【AI应用】模仿爆款视频二次创作短视频操作步骤 【人工智能】AI数字人视频演示 【人工智能】AI视频二次创作演示 作为程序员出身的我&#xff0c;看到一些功能, 我都有猎奇的习惯&#xff0c; 想着自己用什么技…

js数据流详细讲解

文章目录 单向数据流单向数据流示例: 双向数据流双向数据流示例: 延伸和扩展状态管理Redux 示例&#xff1a; 异步数据流异步操作示例&#xff08;使用 async/await&#xff09;&#xff1a; 数据转换和处理数据处理示例&#xff08;使用 lodash&#xff09;&#xff1a; 实时数…

【软件测试】探索和学习在模型中的软件测试

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-JIGESSc1ecUpVUnH {font-family:"trebuchet ms",verdana,arial,sans-serif;f…