个人心得

 我们在没有接触Es6方法之前,做一些算法之类的事情是就比较麻烦,在做的过程中也要考虑很多的问题,比较麻烦,而Es6的方法正是来方便我们在平常运用时能够将问题简便化,大大的减少我们的日常代码量,比如我们在平时需要做一些比较繁琐的算法时,需要使用非常多的方法和循环去进行解决,如果将这些问题使用Es6进行解决的话就不会显得那么的繁琐了,并且也会大大的减少时间复杂度,大大地提升我们代码的运行速度,总而言之的来说,Es6真的是值得我们学习前端的小伙伴去花时间在上面去进行研究、探索的!!!

  1.扩展运算符


  含义

扩展运算符是三个点( ...),可以将一个数组转化为用逗号分隔的参数序列

    

  2.扁平化数组


 多维数组转换为一维数组一直都是一个比较头疼的问题无论从代码量上还是代码逻辑上来说都是比较麻烦的,Es6新增了数组扁平化的flat()方法可以将多维数组转换为自己所想要的多维数组、二维数 组、一维数组,代码如下

   

 这个是不使用Es6新增的方法所写的,代码量非常的多,代码逻辑也是有点复杂,所考虑的问题也是一个麻烦,要思考如何避免全局污染,我们看下下面使用Es6所写的

  

  Es6新增的flat()方法默认是扁平化一层数组,如果原数组有空位的话,就会跳过空位,如果想要扁平化数组多层的话可以在flat()方法中写入参数只能为数字,如果为2的话就扁平化两层,以此类推:

  还有就是flat()方法支持 Infinity,意思为无论多少层的数组全部转化为一维数组

    

  3.Object.keys


  Es6新增的这个方法也是比较简单易学的,我们之前所想要获取对象中的key值得话就要使用for...in去进行获取,或者是一些其他的一些方法,循环使用过多的话就会增加执行效率的时间,使用了Object.keys之后就不会在想在使用for循环之类来获取对象中的keys值了,话不多说上代码:

  首先来看使用简单的for...in进行获取对象中的key值方法

  

  然后我们在看Es6的Object.keys()方法

  

  我们可以看到明显的区别使用for...in方法获取的key值会一个一个的输出, 而使用Object.keys获取的会形成一个数组输出,并且两者的代码量也是不同的,同时时间复杂度也是不用的,for...in使用了循环,我们都知道在js中只要使用循环就会产生时间复杂度,会降低我们的代码运行效率,所以看到这篇文章的小伙伴以后还是使用Es6的方法吧,比较方便也比较好用

  4.Object.values


  看到了上面Es6求对象中的key值方法,肯定有点疑惑,求对象中key值都这么方便的那求对象中的value值呢?我们就不用像上面那样接着说一些前言了,直接上代码,还是为了方便阅读先上for...in的代码

  

  我们最终的到的结果就是 小明 男 18 接下来看Es6的方法

  

  同样的也是形成一个数组输出

     5.数组中的find()和findindex()方法


  我们经常性的会做一些查找的功能,那么这两个方法,但是唯一的缺点就是只能查找到第一个符合条件的数组元素,非常的可惜,下面我们来看一看代码是如何写的

  

  其中的value参数就是代表的数组中每一个元素,而index则代表的是下标,arr就是代表这个数组,刚才也说过了就是我们Es6的find方法有一个弊端就是所有满足条件的成员中只能返回第一个符合条件的数组元素,接下来让我们看一看findindex方法:

   

  findIndex方法和find方法极其的相似有木有,但是二者返回的却是截然不同,find方法返回的是数组成员,而findindex则与其恰恰相反返回的是第一个符合条件的数组成员的位置,也就是下标,如果所有成员都满足的话也只能返回第一个符合条件的数组成员位置,看上图所展示的就是这样,数组元素中大于9的就是10和15,其中10和15的下标分别为2和3,由于10是第一个满足条件的数组元素,所以findindex返回的下标是2


讲了这么多,肯定有很多的小伙伴已经跃跃欲试的想要实际操作了吧,我们在学习的过程中千万不要总是看,我们一定要上手实际的去进行操作,否则的话我们只是凭着自己的第一印象去理解代码,我们并不知道自己所看到的是否会出现BUG,会报错,这一点是非常致命的,最后:祝所有看过我文章的小伙伴们前程似锦、前途无量

javaScript Es6数组与对象的实例方法的更多相关文章

  1. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  2. ES6 数组、对象的扩展

    8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...

  3. Javascript 排序数组或对象

    分享一个用于数组或者对象的排序的函数.该函数可以以任意深度的数组或者对象的值作为排序基数对数组或的元素进行排序. 代码如下: /** * 排序数组或者对象 * by Jinko * date 2015 ...

  4. 整理JavaScript循环数组和对象的方法

    众所周知,常用的循环语句有for.while.do-while.for-in,forEach以及jQuery中提供的循环的方法:以及ES6中提供的很多用来循环对象的方法如map, 在 Javascri ...

  5. ES6数组内对象去重

    这个数组去重转自https://www.cnblogs.com/caideyipi/p/7679681.html, 就当笔记记录: 去重Set const arr = ['张三','张三','三张三' ...

  6. JavaScript中数组和对象的使用例程

    JavaScript数组 下面的代码创建名为 cars 的数组: //方式一: var cars = new Array(); cars[0] = "Volvo"; cars[1] ...

  7. ES6数组及对象遍历的新增方法 entries(),keys() 和 values()

    ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组.它们都返回一个遍历器对象(详见<Iterator>一章),可以用for...of循环进行遍历 ...

  8. 浅谈ES6数组及对象的解构

    一.数组的解构,ES6的新特性,主要是方便操作数组,节省不必要的代码,提高代码质量. 上图例子中, example1: 之前想要获取数组中的值,只能挨个获取下标,然后取值 example2:ES6新特 ...

  9. ES6 - Note3:数组、对象与函数的扩展

    一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...

随机推荐

  1. 微信小程序——选择某个区间的数字

    很久没有更新文章啦~~记录下今天弄的一个小功能. 先上图: 需求很简单: 第1列改变的时候,第2列也随着改变,并且比第1列大1k. 这里用到了微信的picker 组件,对于不太熟练这个组件的小伙伴可以 ...

  2. c++实用语法

    数组的快捷初始化 int inq[110] memset(inq, 0, sizeof(inq)); string到char数组的转换: string str ("Please split ...

  3. springcloud(二)

    springcloud路由网关 一.什么是网关 Zuul的主要功能是路由转发和过滤器.路由功能是微服务的一部分,比如/api/user转发到到user服务,/api/shop转发到到shop服务.zu ...

  4. dbt 0.13.0 新添加特性sources 试用

    dbt 0.13 添加了一个新的功能sources 我呢可以用来做以下事情 从基础模型的源表中进行数据选择 测试对于源数据的假设 计算源数据的freshness source 操作 定义source ...

  5. vue on-change 如果有循环的timer 则无限自动执行

    <div class="contract-class"> <Checkbox v-model="smallChecked" :on-chang ...

  6. 公司不用 Spring Boot,果断离职了!

    面试问到离职原因,我想这是很多面试者的痛,包括我自己,曾经也被离职原因所坑过. 面试回答离职原因简直特么就是巨坑,我也因此在微信公众号 "Java技术栈" 写了这篇文章<过了 ...

  7. ThreadLocal是什么

    早在JDK 1.2的版本中就提供Java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序. 当使 ...

  8. assert(0)的作用

    捕捉逻辑错误.可以在程序逻辑必须为真的条件上设置断言.除非发生逻辑错误,否则断言对程序无任何影响.即预防性的错误检查,在认为不可能的执行到的情况下加一句ASSERT(0),如果运行到此,代码逻辑或条件 ...

  9. 动态BGP与静态BGP

    在阿里云上选择ECS的时候,发现有动态BGP和静态BGP区分,静态的要便宜些,搜了下区别如下: 静态BGP路由是指由网络运营商手动配置的路由信息.当网络的拓扑结构或链路的状态发生变化时,运营商需要手动 ...

  10. 运维笔记--postgresql占用CPU问题定位

    运维笔记--postgresql占用CPU问题定位 场景描述: 业务系统访问变慢,登陆服务器查看系统负载并不高,然后查看占用CPU较高的进程,发现是连接数据库的几个进程占用系统资源较多. 处理方式: ...