es6 数组操作个人总结

es6 数组操作个人总结

  • 动机
  • 数组
    • 数组生成
    • 可枚举对象转数组
    • 箭头函数
    • 筛选
    • 判断所有元素
    • 枚举循环
  • 小结

动机

es6 ,说白了,就是增强版本的 js 。。。。。嗯,说到底,还是原生 js 罢了,不过比原有的 js 多了一些属性、类型、指令之类的东西。

es6 面世已经有些年头了,老顾的工作由于是主做 pc 版的,而且多数用户是老年人,基本上,浏览器还大量的存在一些很老版本的情况,所以,老顾也一直没有专门去研究 es6 的新特性,新内容之类的。

知道今年开始咸鱼翻身,把摸鱼时间从看小说,换成了刷算法题,这才开始给自己充电。

因为多数题库都支持 py 和 js,所以,老顾基本上都在用这两个语言做算法答题内容。

py 就不多说了,语法糖很多。但是 es6 增强后的 js ,也不让多少。

于是,老顾就在边刷算法题,边熟悉 es6 的一些操作。嗯,主要是数组这一块。

数组

在之前版本的 js 中,数组的增删改查就不细说了,那不是 es6 的内容。

数组生成

就说说数组生成好了,以前,我们需要先定义一个变量为数组,然后往里面 push 元素,或者,直接定义一个定长的数组,然后循环修改每个元素的值。

大概就是下边这两种方式

var a = [];
for(var i=0;i<5;i++){a.push(i)
}
console.log(a);

在这里插入图片描述

var b = new Array(5);
for (var i=0;i<b.length;i++){b[i] = i ** 2;
}
console.log(b)

在这里插入图片描述
而 es6 ,则提供了新的方式,使用 map

首先执行一下 Array.from(new Array(length)),我们看看没有执行 Array.from 的结果和执行后的结果,有什么区别。

在这里插入图片描述
可以看出,一个已经是合法的,每个元素有单独内存的数组,一个是每个元素都未进行分配的数组

对于仅仅 new Array 生成的数组,是无法执行 map 指令的,所以我们用下边这个方式来操作一下

Array.from(new Array(10)).map(function(x,y){return y + 1;})

在这里插入图片描述
使用 map ,可以传递两个参数,当然,也不是必须的,不给参数也可以。

这里两个参数,第一个是当前数组中,对应元素的值,第二个参数,是当前元素,对应数组的下标。

如果不传递参数,也是合法的。

Array.from(new Array(10)).map(function(){return 1;})

在这里插入图片描述

可枚举对象转数组

在原来的 js 体系中,很多东西,都可以获取成一个集合,或者类数组,或者 collection 之类的玩意。

但是,这里也说一句但是啊。但是!这些玩意都不支持数组操作,比如 pop、shift、push 之类的玩意,与这些东西无缘。

很多时候,我们在操作的时候,我们得先做一个数组变量,然后循环枚举这些个玩意的元素,放到数组里,然后才能方便我们后续的操作。

现在可好了,刚才说到的 Array.from ,可以将所有可枚举的玩意,都转成数组类型。
在这里插入图片描述
哇哈哈哈,这还有什么好说的,直接用上数组支持的各种操作,那不比操作这些乱七八糟的对象类型方便么。

箭头函数

但如果是使用箭头函数,那么至少需要一个参数,如果多个参数,需要在参数外套个括号
在这里插入图片描述
在这里插入图片描述
说到箭头函数,突然想起来,数组排序,以前老顾也是写作一个闭包函数来实现的,现在也可以用箭头函数来代替了。比如数组完全逆序排列一下,也就是翻转一下。

Array.from(new Array(10)).map((x,y) => y + 1).sort(x => -1)

在这里插入图片描述
这和 python 的 [::-1] 不差什么了吧,嘿嘿。

筛选

有时候,我们可能对现有数组要进行一下过滤,只留下符合条件的数据,那么 filter 方法,可以简化原有操作,而不用再写一遍循环遍历,再判断数据是否合法。我们用箭头函数来搞一下看看。比如,100个数字里,既能被3整除,又能被7整除的所有数字。

Array.from(new Array(100)).map((x,y) => y + 1).filter(x => x % 3 == 0 && x % 7 == 0)

在这里插入图片描述
filter 同样可以传递两个参数,参数意义与 map 相同,既可以根据值判断,也可以根据下标索引判断。

判断所有元素

以前,我们要判断一个数组,是否所有元素都符合一定条件,还是要上循环,现在好啦,es6 数组操作,提供了一个新的方法,every,我们通过一个例子来看一下哦。判断是否所有数组中的元素,都是完全平方数。

Array.from(new Array(5)).map((x,y) => (y + 1) ** 2).every(x => x ** .5 == Math.floor(x ** .5))

在这里插入图片描述

枚举循环

曾经的曾经,我们要对数组中每一个元素进行读取,并根据这个数据,执行一些其他指令,我们只能 for 或者 while

现在,用 forEach 来代替循环吧。

Array.from(new Array(10)).forEach((x,y) => console.log(`${y+1}`))

在这里插入图片描述
这可比每次去设置一个变量,然后和数组长度进行比较方便多了啊亲。

小结

那么,在 es6 增强了 js 数组操作之后,我们再去处理一些内容,就会简单很多很多,这里用 csdn 每日一练的一个题目,来做一下示例哦。

奇偶排序,一个很简单的题目哦。

题目描述
一个数组里有奇数有偶数(乱序),调整数组顺序使奇数位于偶数前面。

var n = readline()
print(Array.from(readline().split(' ')).map(x => parseInt(x)).sort((x,y) => x % 2 ? (y % 2 ? 1 : -1) : 1).join(' '))

第一行,读取一个数字数量参数,第二行 n 个整数,我们就直接用字符串切割,得到一个数组,然后对数组中的所有元素,进行转换成整数类型,然后排序,排序完成后,直接插入一个空格,作为字符串输出。。。。

啊,这个题目现在用 es6 完成,实在是太简便了。

嗯。。。唯一的不好,就是有很多人的浏览器是老版本的,不一定能支持 es6,所以实际工作中,不能尽情偷懒,实在郁闷。

在这里插入图片描述

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

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

相关文章

光伏行业中的设备自动化系统EAP:优化生产流程的重要工具

随着清洁能源的需求不断增长&#xff0c;光伏行业作为可再生能源的重要组成部分&#xff0c;正迅速发展。为了满足日益增长的市场需求&#xff0c;光伏企业需要提高生产效率、降低成本&#xff0c;并保证产品的质量和可靠性。 图.光伏面板&#xff08;pexels&#xff09; 在这…

Python面向对象学习整理(一)

一、面向对象中的几点概念 1.1 什么是类&#xff1f; 类&#xff1a;用户定义的对象原型&#xff08;prototype&#xff09;&#xff0c;该原型定义了一组可描述该类任何对象的属性&#xff0c;属性是数据成员&#xff08;类变量 和 实例变量&#xff09;和方法&#xff0c;可…

SqlSerer数据库【进阶】

六、约束 &#xff08;1&#xff09;主键约束 1.单一主键 格式: alter table 表名 add constraint 主键名 primary key (列名) go例子: alter table t_student add constraint pk_t_student primary key (stud_id) go注意:在建表的时候主键不能为空 2.复合主键 复合主键…

[分布式] Ceph实战应用

目录 一、建 CephFS 文件系统 MDS 接口服务端操作客户端操作 二、创建 Ceph 块存储系统 RBD 接口创建 Ceph 对象存储系统 RGW 接口OSD 故障模拟与恢复 一、建 CephFS 文件系统 MDS 接口 服务端操作 1&#xff09;在管理节点创建 mds 服务 cd /etc/ceph ceph-deploy mds creat…

Java设计模式之行为型-解释器模式(UML类图+案例分析)

目录 一、基础概念 二、UML类图 三、角色设计 四、案例分析 五、总结 一、基础概念 解释器模式是指给定一个语言&#xff08;表达式&#xff09;&#xff0c;来表示它的文法&#xff0c;并定义一个解释器&#xff0c;使用该解释器来解释语言中的句子&#xff08;表达式&a…

【文末送书 - 数据分析之pandas篇④】- DataFrame数据合并

向阳花花花花 - 个人主页 迄今所有人生都大写着失败&#xff0c;但并不妨碍我继续向前 Python 数据分析专栏 正在火热更新中 &#x1f525; 文章目录 一、concat二、append三、merge3.1 没有属性相同时3.2 只有一个属性相同时1.一对一合并2.一对多合并3.多对多合并 3.3 有多个…

Ceph 应用

Ceph 应用 一、创建 CephFS 文件系统 MDS 接口 1.服务端操作 1&#xff09;在管理节点创建 mds 服务 cd /etc/ceph ceph-deploy mds create node01 node02 node032&#xff09;查看各个节点的 mds 服务 ssh rootnode01 systemctl status ceph-mdsnode01 ssh rootnode02 syst…

ELK 企业级日志分析系统(三)

ELK 一、Zookeeper理论部分zookeeper的定义与工作机制zookeeper的特点Zookeeper 数据结构Zookeeper 应用场景Zookeeper 选举机制 二、zookeeper部署实验三、Kafka消息队列为什么需要消息队列&#xff08;MQ&#xff09;使用消息队列的好处消息队列的两种模式 Kafka 定义Kafka 简…

笔试题之地区经济数据分析

数据分析通常应用于商业领域&#xff0c;但对于政府、非盈利组织等机构而言&#xff0c;在考量城市发展、监控环境质量等方面&#xff0c;也会涉及到数据分析。这时&#xff0c;就需要我们根据实际场景&#xff0c;结合数据分析的理论知识&#xff0c;发现其中的规律&#xff0…

人工智能发展前夜,基于控制论的杂谈

谢邀。 目录 《What the Frogs Eye Tells the Frogs Brain?》简介我是怎么理解这篇文章的&#xff1f;被后世频繁引用的「青蛙」从「青蛙」再重新转向控制论 《What the Frog’s Eye Tells the Frog’s Brain?》简介 帕斯克在实践和理论中&#xff0c;将人类的适应性行为引入…

怎样优雅地增删查改(八):按用户关系查询

文章目录 原理实现正向用户关系反向用户关系 使用测试 用户关系&#xff08;Relation&#xff09;是描述业务系统中人员与人员之间的关系&#xff0c;如&#xff1a;签约、关注&#xff0c;或者朋友关系。 之前我们在扩展身份管理模块的时候&#xff0c;已经实现了用户关系管理…

EC200A-CN移植

Platform: RK3588 OS: Debian11 Kernel: v5.10.160 Module &#xff1a;EC200A-CN 国内版 Linux USB 驱动架构 USB 主机控制器驱动在分层结构的最底层&#xff0c;直接与硬件交互。USB 核心是整个 USB 主机驱动的核心&#xff0c;用于管理 USB 总线、USB 总线设备和 USB 总线…