数组遍历

之前讲了一些数组的方法,今天整理一下数组的遍历方法,有些方法不会用到,但是了解一下也是好的。

我们最常用的循环遍历方法是for循环,这个是最基础的,就不附上代码了,不过说一点,倒叙循环在性能上能优化一点点,不清楚的可以去看性能优化知识点,里面有提到。

for in,很少用到的一个遍历方法,也不推荐:

var arr = ['a', 1, 2, 3];
arr.len = 'len';
for(var i in arr){
    console.log(i + 5);
    console.log(arr[i]);
};

因为for in 会把原型上的东西也遍历出来,然后数组下标i是字符串,在进行加操作的时候会按字符串走,还有就是循环的顺序不是一定的。一般用来循环json。

forEach方法,也比较常用

var arr = ['a', 1, 2, 3];
arr.forEach(function (item, index, arr) {
  console.log(item);
  console.log(index);
  console.log(arr);
});

传入一个方法参数,这个方法有三个参数,分别是当前元素,下标和循环数组。也不推荐用来循环数组,因为基于循环的迭代性能是基于方法迭代的8倍。

map方法,这个方法会返回一个数组

var arr = ['a', 1, 2, 3];
var newArr = arr.map(function (item, index, arr) {
  console.log(item);
  console.log(index);
  console.log(arr);
  return item + 5;
});
console.log(newArr); //["a5", 6, 7, 8]

跟forEach一样,传入一个方法,这个方法有三个参数,分别是当前元素,下标和循环数组,不同的是这个方法会返回一个数组,数组的元素就是每一次循环return回去的数据,没有返回就会默认是undefined。

enery和some,很不常用的方法,我认为属性这些方法,有助于编写业务代码时候性能的优化。

var arr = [5, 7, 3, 8];
var flag = arr.some(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item > 5;
});
console.log(flag);  //true
var arr = [5, 7, 3, 8];
var flag = arr.every(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item > 5;
});
console.log(flag); //false

跟map和forEach一样,一个方法和三个参数,some只要有一个条件是true就直接返回true,之后的不会再判断执行,every则是判断只要有一个条件是false就会返回false,false之后的也不再判断执行,所有条件都为true才返回true。

filter,一个过滤的方法:

var arr = [5, 7, 3, 8];
var newArr= arr.filter(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item > 5;
});
console.log(newArr); //[7, 8]

也是传入一个方法,方法三个参数,这个方法返回一个数组,在判断为true才会返回。

reduce和reduceRight,这两个方法是真的不常用:

var arr = [5, 7, 3, 8];
var sum = arr.reduce(function (prev, cur, index, array) {
    console.log(prev);
    console.log(cur);
    console.log(index);
    console.log(array);
    return prev + cur;
});
console.log(sum); //23

两个方法一个从左开始一个从右边开始,方法参数里面有四个参数,这四个参数比较特别,因为这个循环之会执行数组长度减1,我建议可以自己看打印输出的结果。一般这两个方法用来计算总和。

for of,跟for in类似:

var arr = ['a', 1, 2, 3];
arr.len = 'len';
for(var item of arr){
    console.log(item);
};

跟for in不同的是,遍历出来的就是元素,没有下标,也不会把原型上的遍历出来,用来遍历json。

find、findIndex两个方法是forEach和some结合体,当return之后,剩下的不会再执行,只不过findIndex返回的是元素下标,find是返回元素。

Includes:
var arr = ['a', 1, 2, 3];
console.log(arr.includes(2)); //true
console.log(arr.includes(9)); //false

判断是否有这个数据,有返回true,没有返回false。

Es6新增数组去重方法:

var arr = [1, 8, 9, 7, 7, 6, 1];
var newArr1 = new Set(arr);
var newArr2 = Array.from(newArr1);
console.log(newArr1);
console.log(newArr2);

数组方法真的很多,大概我就整理这一些就很够用了,另外的就不去整理了。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript之数组

    Array在JavaScript里面很常用,讲真的,平时开发除了循环数组和push数组之外,对于数组的其他方法和属性几乎都是用到的时候百度。今天自己整理一些数组...

    wade
  • ES6之Set和Map数据结构

    ES6提供了新的数据结构Set,类似数组,元素值都是唯一的,不能重复。Set本身就是一个构造函数。

    wade
  • 简写js的积累

    写js的时候,有很多小技巧可以让我们的代码更整洁,只是我们都不注意积累,先上几个自己平时用的,以后慢慢积累。

    wade
  • 01-JavaScript之变量

    这个系列的文章主要讲解JavaScript的常见用法,适合于初中级的前端开发人员,也可以对比TypeScript的系列文章来看。 先介绍JavaScript的变...

    用户1910585
  • 第203天:js---Array对象常用方法

    半指温柔乐
  • jQuery第十篇 map方法

    用户7873631
  • 资深大佬:基于深度学习的图像边缘和轮廓提取方法介绍

    导读 边缘和轮廓的提取是一个非常棘手的工作,细节也许就会被过强的图像线条掩盖,纹理(texture)本身就是一种很弱的边缘分布模式,分级(hierarchi...

    AI算法与图像处理
  • 深入理解JavaScript系列(46):代码复用模式(推荐篇)

    同时,ECMAScript5也提供了类似的一个方法叫做Object.create用于继承对象,用法如下:

    用户4962466
  • JavaScript实现十进制转换成二进制

    HTML5学堂:平时大家在写JavaScript效果的时候,可能会比较少接触二进制、八进制,经常使用的是十进制。计算机中的二进制则是一个非常微小的开关,用“开”...

    HTML5学堂
  • Python红到发紫,Java濒临死亡?

    根据IT编程趋势,就工作数量,现有Java开发人员的数量以及IT中的总体使用情况而言,Java当前比任何其他编程语言都更为流行。

    小小科

扫码关注云+社区

领取腾讯云代金券