遍历方式

一般,我们常用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. JQuery.validator插件使用

    首先给变量validator赋值 var validator =$('#test').validate({validate构造 }); 接着调用 $('#test').valid() 会使用上面的验证 ...

  2. Django中使用后台网站模板

    背景: 一直想自己开发一个网站,但是前端知识又不多,好在有模板可以使用,下载地址:https://download.csdn.net/download/wjgccsdn/10843808 开干:   ...

  3. VSCode调试设置

    tasks.json { "version": "0.1.0", "isShellCommand": true, "args&qu ...

  4. F - ACboy needs your help again! (模拟)

    ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image how dark th ...

  5. ASP Session 对象

    http://www.w3school.com.cn/asp/asp_sessions.asp

  6. CentOS6 系统下升级python后yum命令使用时报错

    CentOS6 系统下升级python后yum命令使用时报错,如下: [root@xxxxxxx]#yumFile"/usr/bin/yum",line30exceptKeyboa ...

  7. loj #6013. 「网络流 24 题」负载平衡

    #6013. 「网络流 24 题」负载平衡 题目描述 G 公司有 n nn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 n nn 个仓库的库存数量相同.搬运货物时 ...

  8. 基于Solr的多表join查询加速方法

    前言 DT时代对平台或商家来说最有价值的就是数据了,在大数据时代数据呈现出数据量大,数据的维度多的特点,用户会使用多维度随意组合条件快速召回数据.数据处理业务场景需要实时性,需要能够快速精准的获得到需 ...

  9. Linux 意外操作后如何进行数据抢救

    Linux 意外操作后如何进行数据抢救 在 GUI 中使用  shift + delete  组合键或是 CLI 下使用 rm -rf 删除选项,这个文件并没有从硬盘(或是其它存储设备)上彻底销毁.当 ...

  10. linux防火墙(四)—— SNET和DNET原理及应用

    图(1) 一.SNAT策略 应用环境:局域网主机共享单个公网IP地址接入Internet,简单的说就是企业内部局域网想访问外部服务器时,网关型防火墙需要开启的SNAT应用策略. SNAT策略原理:网关 ...