es6 数组操作个人总结

news2024/11/24 13:02:41

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.coloradmin.cn/o/749397.html

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

相关文章

【c++修行之路】智能指针

文章目录 前言为什么用智能指针智能指针简单实现unique_ptrshared_ptr 循环引用和weak_ptr的引入循环引用weak_ptr 定制删除器 前言 大家好久不见&#xff0c;今天来学习有关智能指针的内容~ 为什么用智能指针 假如我们有如下场景&#xff1a; double Div() {int x, y;cin …

Clion 配置Mingw64的 c++开发环境

1、Mingw64的安装与环境变量的配置 Mingw64文件下载 Mingw64下载地址&#xff1a;https://sourceforge.net/projects/mingw-w64/files/ posix相比win32拥有C 11多线程特性&#xff0c;sjlj和seh对应异常处理特性&#xff0c;sjlj较为古老&#xff0c;所以选择seh 配置环境变…

MongoDB踩过的坑

目录 启动MongoDB服务 可视化工具&#xff1a;MongoDB Compass 由于目标计算机积极拒绝&#xff0c;无法连接 BSONObj size: xxxx is invalid. Size must be between 0 and 16793600 (16MB) 启动MongoDB服务 1. 打开CMD 2. 进入安装MongoDB文件夹中的bin目录 3. mongod -…

mapBox 绘制多边形无法设置 边框宽度 解决方法

目录 一、问题 二、解决方法 三、总结 tips:如嫌繁琐&#xff0c;直接看有颜色的文字即可&#xff01; 一、问题 1.使用mapBox在地图上绘制点、线、面。绘制多边形的时候发现 直接用 zh(一家提供地图引擎的公司),提供的绘制多边形的方法无法设置边框颜色和边框宽度。很是离…

龙蜥社区 6 月技术委员会会议召开!欢迎 5 位开放原子 TOC 导师加入

2023 年 6 月 16 日上午 10 点召开了龙蜥社区 6 月技术委员会线上会议&#xff0c;共计 38 人参会。本次会议由联通肖微主持&#xff0c;会议也荣幸的邀请到了开放原子 TOC 导师线上参会&#xff0c;技术委员们来自阿里云、统信、飞腾、中科方德、红旗、万里红、Intel、Arm、龙…

入门篇:从零上手GitOps

文章目录 GitOps 介绍如何将业务代码构建为容器镜像&#xff1f;如何将容器镜像部署到K8s&#xff1f;K8s如何实现自动扩容和自愈&#xff1f;1.传统的扩容和自愈2.k8s自愈机制3.k8s弹性扩容 如何借助GitOps实现应用秒级自动发布和回滚&#xff1f;1.传统 K8s 应用发布流程2.从…

高级细腻的家居照明,欧瑞博智能无主灯是怎么实现的?

作者 | 辰纹 来源 | 洞见新研社 如今的现代生活&#xff0c;人类对光的需求已超越简单照明&#xff0c;而是希望在不同场景下能有专属的细腻用光体验&#xff0c;智能照明应运而生&#xff0c;并成为上升趋势。现阶段&#xff0c;精细化家居需求要求智能照明不仅要巧妙融合美学…

二叉树进阶(AVLTree)

目录 1.AVLTree概念 2.AVLTree模拟实现 2.1 AVLTree节点 2.2 插入实现基本框架 2.3 左单旋 2.4 右单旋 2.5 LR双旋 2.6 RL双旋 2.7 AVLTree树验证 1.AVLTree概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#…

怎么从电影中截取动图?试试这个工具

图片、视频等都是当代流行的表达情感、传递信息的一种方式。其中&#xff0c;当属gif动图最受大众的欢迎&#xff0c;它比普通的静态图片画面丰富&#xff0c;又比视频的体积小。那么&#xff0c;如何从视频中截取动图呢&#xff1f;使用GIF中文网的视频转gif&#xff08;https…

通过platform实现阻塞IO来驱动按键控制LED灯的亮灭

通过platform阻塞IO来驱动按键控制LED灯的亮灭 a .应用程序通过阻塞的io模型来读取number变量的值 b.number是内核驱动中的一个变量 c .number的值随着按键按下而改变&#xff08;按键中断)例如number0按下按键number1 ,再次按下按键number0 d .在按下按键的时候需要同时将…

【Leetcode】42.接雨水(困难)

一、题目 1、题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 示例1: 输入:height = [0,1,0,2,1,0,1,3,2,1,2,1] 输出:6 解释:上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况下,可以接 6…

雪花算法 — 集群高并发情况下如何保证分布式唯一全局ID生成?

雪花算法 问题 为什么需要分布式全局唯一ID以及分布式ID的业务需求 在复杂分布式系统中&#xff0c;往往需要对大量的数据和消息进行唯一标识&#xff1a; 如在美团点评的金融、支付、餐饮、酒店猫眼电影等产品的系统中数据逐渐增长&#xff0c;对数据库分库分表后需要有一…

接口测试辅助,Fiddler抓取安卓手机https请求(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Fiddler 是一款免…

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

目录 一、基础概念 二、UML类图 三、角色设计 四、案例分析 五、总结 一、基础概念 迭代器模式是一种常用的设计模式&#xff0c;它主要用于遍历集合对象&#xff0c;提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而又不暴露该对象的内部表示。 举个简单的…

第二章:Cyber RT通信机制解析与实践

Cyber RT解析与实践 第二章&#xff1a;Cyber RT通信机制解析与实践 Cyber RT解析与实践 Cyber RT解析与实践一、Cyber RT 通讯机制简介1. 话题2. 服务3. 参数 二、数据通信基础Protobuf1. Protobuf 简介2. Protobuf 创建3. Protobuf 编译4. Protobuf 案例实战 三、Cyber RT 话…

CPU性能指标简览

作为计算机的运算核心和控制核心&#xff0c;CPU&#xff08;Central Processing Unit&#xff09;由运算器、控制器、寄存器和实现其之间联系的数据、控制及状态的总线构成&#xff0c;决定着计算机运算性能强弱。作为信息技术产业的核心基础元器件&#xff0c;CPU的运作可分为…

3-40V输入,2.7V启动,20A电流,PWM\模拟信号调光

应用说明&#xff1a; Hi600X 是一系列外围电路简洁的宽调光比升压恒流驱动器&#xff0c;适用于 3-40V 输入电压范围的 LED 照明领域。 Hi600X 系列芯片&#xff0c;2.7V 启动电压&#xff0c;工作电压范围 5-40V&#xff0c;VIFB反馈电压 0.2V&#xff0c;提高整体转换效率。…

JVM的类加载机制和垃圾回收机制

目录 类加载机制类加载机制的步骤加载验证准备解析初始化 双亲委派模型工作原理双亲委派模型的优点 垃圾回收机制死亡对象的判断可达性分析算法可达性分析算法的缺点引用计数算法循环引用问题 垃圾回收算法标记-清除算法复制算法标记-整理算法分代算法 类加载机制 对于任意一个…

使用 vector + 递归 解决问题

class Solution {const char* To[10] { "","", "abc", "def", "ghi","jkl", "mno", "pqrs","tuv", "wxyz" };//常量字符串初始化string 注意此非定义(缺省值)--实例化…

收好这5个SVG编辑器,轻松实现高效创作

随着设计工作的不断发展&#xff0c;对SVG图形的需求也逐渐增加&#xff0c;SVG编辑器就随之诞生。可市面上的SVG编辑质量参差不齐&#xff0c;设计师无法第一时间找到适合自己的&#xff0c;于是本文就收集整理了5款相对来说比较好用的SVG编辑器为设计师们推荐&#xff0c;一起…