遍历方式

一般,我们常用for in遍历对象,使用for (var i = 0; i < len; i++) {}的方式来遍历数组,这是最常用的两种方式,但是优缺点呢?

1、for (var i = 0; i < len; i++){}

  这种方式在遍历数组来说是最快的,一般遍历数组也都是使用这种方法。

2、for...in

  这种方式在遍历对象的属性时也会常常用到,但是这种方式的效率很低,因为for...in有一些特殊的要求,包括:

  1. 遍历所有的属性,不仅仅是own propertites的,也有原型链上的。
  2. 必须按照特定顺序遍历,先遍历所有的数字键,然后再按照创建属性的顺序遍历其他的
    var obj = {
name: 'wayne',
: ,
age: ,
: ,
: ,
toString: function () {
console.log('foo');
}
}
for (var key in obj) {
console.log(key);
}

  即如上所示的对象,最终的结果为:

  即确实是先输出所有的数字,并且数字进行了排序,然后再输出所有的其他类型,并且类型是按照创建顺序。

  且记住:用for遍历是比for-in快的,所以数组绝对不要使用for-in来遍历。

3、for...of

  for...of是es6中的遍历语法,它可以遍历数组、字符串、arguments等。

  

推荐网站:https://jsperf.com/  用于测试性能。即JavaScript performance的意思。

数组方法

注意: 下面的1 - 4的方法中传入的函数都接受三个参数 --- value, index,array

1. forEach

forEach 就是对于每一个的意思。 所以其中接受的函数没有返回值,只是对数组的每一个元素做一些事情而已。

接受三个参数:第一个是value, 第二个是index, 第三个是数组本身。

如下:

      var arr = [,,,];
arr.forEach(function (value, index, arr) {
console.log(value, index, arr);
});

输出为:

下面是数组去重的一个应用:

function unique(str) {
var tmpObj = {};
var uniqueStr = '';
str.split('').forEach(function(item) {
if(!tmpObj[item]) {
tmpObj[item] = ;
uniqueStr += item;
}
});
return uniqueStr;
}

2. map

map 就是映射的意思, 即对于数组,做了某件事情之后, 成了另外一个映射出来的数组。

      var arr = [,,,];
var anotherArr = arr.map(function (value) {
return value * ;
});
console.log(anotherArr); //[90, 156, 178, 112]

显然,由于是映射,所以不会改变原来数组,而是return一个新的数组。

3. filter

显然就是过滤的意思了,最后返回过滤后的数组。

      var arr = [,,,];
var anotherArr = arr.filter(function (value, index) {
return index > ;
});
console.log(anotherArr); //[56]

4. every() 和 some()

这两者最后返回一个布尔值。 对于前者必须全部满足才会为true, 后者只要有一个满足就会返回true。

      var arr = [,,,];
var bool = arr.every(function (value, index) {
return index >= ;
});
console.log(bool); //true
var anotherBool = arr.some(function (value, index) {
return value > ;
});
console.log(anotherBool); //true

5. reduce() 和 reduceRight()

reduce有归纳的意思,它一般接受两个参数,第一个参数是就之前我们所说的唯一的函数, 第二个参数是一个初始值。

      var anotherSum = arr.reduce(function (prev, current) {
console.log("prev为%d, current为%d", prev, current);
return prev + current;
}, );
console.log(anotherSum);

从这个例子中,我们可以看出, 如果接受了第二个参数, 那么第二个参数就是作为prev的初始值,current从第一个元素开始计算。

如果没有第二个参数呢?

         var anotherSum = arr.reduce(function (prev, current) {
console.log("prev为%d, current为%d", prev, current);
return prev + current;
});
console.log(anotherSum);

可以看到prev就成了数组的第一个元素, 而current是从第二个元素开始的。

注意: reduce里函数接受四个参数, prev, currentValue, currentIndex, array

6. slice和splice方法

这两个方法名十分相似,但是作用是不一样的, 我们比较常用的是slice,即截取一段,接受两个参数,第一个为开始的index, 第二个为结束的index + 1

      var arr = [,,,];
console.log(arr.slice(,)); // [78, 89]

而splice方法更为强大一些, 它接受三个参数,第一个是开始的位置,第二个是从开始的位置要删除的元素个数,第三个是添加的元素 。

      var arr = [,,,];
arr.splice(,,);
console.log(arr); //[45, 888, 89, 56]
arr.splice(,,,,);
console.log(arr); //[45, 456, 789, 123, 56]

7. join()、reverse()、sort()、concat()

这几个方法都比较常用,应当熟练掌握。

8. push()、pop()、shift()、 unshift()

这几个方法是添加和删除元素的,也应该熟练掌握。

9. toString() 和 toLocaleString()

即转化为字符串。

10. indexOf() 和 lastIndexOf()

这两个方法可以返回某一个元素的index。

      var arr = [,,,];
console.log(arr.indexOf()); //

11. Array.isArray() 和 Object.prototype.toString.call();

这两个方法可以判断是否是数组,当然也可以使用splice等方法看看某个变量是否具有这些方法来判断他们是否是数组。

12、 includes()

这个方法是ES7中的方法,用于判断数组中是否包含某个元素。

算法

1、数组去重

(1)使用includes方法实现,这种方法非常简单,直接先建立一个数组,然后arr.forEach() ,数组能用forEach就用forEach(函数式编程),最后,我们再通过是否包含(includes)来确定是否push到res数组中。  

    function quchong(arr) {
var res = [];
arr.forEach(function (item) {
if (!res.includes(item)) {
res.push(item);
}
});
return res;
}

 

(2)、 使用对象key来去重。

    function quchong(arr) {
var res = [];
var obj = {};
arr.forEach(function (item) {
if (!obj[item]) {
obj[item] = ;
res.push(item);
}
});
return res;
}

这种方式还是比较套路的,即给一个对象,把我们希望去重的元素设置为对象的属性,开始 obj[元素] 一定是undefinded,然后,我们就给他赋值,这样就相当于已经标记了它的存在,后面就不需要了。

遍历方式 && 数组方法 && 算法的更多相关文章

  1. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  2. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  3. 大数据学习day13------第三阶段----scala01-----函数式编程。scala以及IDEA的安装,变量的定义,条件表达式,for循环(守卫模式,推导式,可变参数以及三种遍历方式),方法定义,数组以及集合(可变和非可变),数组中常用的方法

    具体见第三阶段scala-day01中的文档(scala编程基础---基础语法)  1. 函数式编程(https://www.cnblogs.com/wchukai/p/5651185.html): ...

  4. Collection、Map、数组 遍历方式

    结论:无论是数组还是Collection for each 都是一个非常好的选择 一.for each底层实现 对于Collection,for each是隐式调用Iterator实现的,效率比显示调 ...

  5. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  6. 遍历php数组的几种方法

    第一.foreach() foreach()是一个用来遍历数组中数据的最简单有效的方法. <?php $urls= array('aaa','bbb','ccc','ddd'); foreach ...

  7. JS 中的数组遍历方式效率比较

    JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...

  8. Java 中数组的遍历方式

    数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java 语言中提供的数组是用来存储固定大小的同类型元素. 今天我们就来说一下在java中遍历数组都有哪几 ...

  9. JS几种数组遍历方式总结

    JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...

随机推荐

  1. quartz 使用配置文件配置线程数

    quartz默认的线程数是10个,如果我们要修改这个线程数需要做一个配置文件,在配置文件内修改线程. 一共需要2个操作: 1.找到quartz的XML配置文件,设置加载配置文件(配置文件存放在weba ...

  2. Visual Studio 2013 新增功能:“Browser Link”

    今天新装了 Visual Studio 2013, 使用 VS2013 打开一个现有的 WEB 网站, 在调试网站的时候出现在了脚本错误,一个文件名叫 "browserLink", ...

  3. 七月小说网 Python + GraphQL (三)

    概述 后台数据库几个基本表基本搭建完毕,看了下Github Develop的V4 Api抛弃了RESTful,采用GraphQL,感觉很有意思,一看文档,竟然有Python的开源实现 Graphene ...

  4. 执行存储过程比即时SQL执行慢的解决方案

    发生过这样一件事, 写了一个SQL,查询数据大概5秒,但是放到存储过程里面去了过后,查了5分钟也没给出结果,后来网上找解决方案,终于找到一个解决方案. 在存储过程的参数那里对参数进行一个传递.反正他们 ...

  5. SurfaceView和SurfaceHolder的基本用法

    仅做记录使用,新手也可以来看看,怎么得到一个surfaceholder. 1.在xml文件中增加一个surfaceView控件. <SurfaceView android:layout_widt ...

  6. super() 的入门使用

    在类的继承中,如果重定义某个方法,该方法会覆盖父类的同名方法,但有时,我们希望能同时实现父类的功能,这时,我们就需要调用父类的方法了,可通过使用 super 来实现,比如:     1 2 3 4 5 ...

  7. Weekly Contest 118

    970. Powerful Integers Given two non-negative integers x and y, an integer is powerful if it is equa ...

  8. 在CentOS-6.3环境下,利用grub工具手工制作Linux U盘安装盘

    注:此文是本人亲自操作实现后写的心得,同时也是对自己操作的记录. 制作的全过程概况 准备工作: U盘重新分区: 格式化U盘: 安装grub文件到U盘特定的分区: 拷贝镜像中的相关文件到U盘: 安装时设 ...

  9. 【bzoj4036】[HAOI2015]按位或 fmt+期望

    Description 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行或(c++,c的|,pascal 的or)操作.选择数字i的概率是p[i].保证0&l ...

  10. loj #6201. 「YNOI2016」掉进兔子洞

    #6201. 「YNOI2016」掉进兔子洞 您正在打galgame,然后突然发现您今天太颓了,于是想写个数据结构题练练手: 给出一个长为 nnn 的序列 aaa. 有 mmm 个询问,每次询问三个区 ...