用js来实现那些数据结构02(数组篇02-数组方法)
上一篇文章简单的介绍了一下js的类型,以及数组的增删方法。这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么。由于其中有部分内容并不常用,所以我尽量缩小篇幅。在这篇文章内介绍完大部分的数组方法,加快我们实现其它数据结构的脚步。
1、concat()
合并数组,可以合并一个或多个数组。会按照参数顺序依次合并进想要合并的数组。
//concat的参数并不是只能传入数组,字符串,数字,布尔值,对象等都可以传入。
var arr = [0,1,2,3,4,5,6];
var a = "7";
var b = true;
var c = {a:1}
var d = [9,10] var newArr = arr.concat(a,b,c,"d",{b:2})
//[0, 1, 2, 3, 4, 5, 6, "7", true, {a:1}, "d", {b:2}]
需要注意的是,concat方法会生成一个新的数组,并不会改变原数组的值。那么这里还是要说一下,concat的主要作用在于合并数组!而且前面也说过,并不建议在数组中存入不同类型的参数,所以上面例子合并的参数只是为了测试可以这么做,但是不要这么做,到时候会有意想不到的乱子!
2、join()
把所有的数组元素依照分隔符(也就是参数)链接成一个字符串。如果不传入参数则以","逗号分隔。该方法同样会生成一个新的字符串结果。
var arr = ["z","a","k","i","n","g"];
var arrStr = arr.join("-");
//["z", "a", "k", "i", "n", "g"]
//z-a-k-i-n-g
3、some()和every()
some()方法,会遍历数组中的每个元素,直到返回false结束!而every()呢,与some()相反,直到返回true结束!下面简单举两个例子:
var isEven = function (val) {
return (val % 2) == 0 ? true : false;
}
var nums = [1,2,3,4,5,6,7,8,9,10];
var judgeA= nums.every(isEven)
//false
var judgeB = nums.some(isEven)
//true
解释一下,其实简单来说,some用来判断本数组中是否存在(至少有一个)符合传入函数的条件的值,而every则判断是否本数组中每一个值都符合条件。
那么在上面的例子中,some方法确定数组中存在符合条件的值,所以返回true,后面有没有符合条件的跟我没关系了。只要找到找一个符合条件的就说明我可以返回true了。如果some方法遍历了整个数组还没有找到符合条件的值,则会遗憾的返回false。
而every方法,跟some方法其实刚好相反。我只要发现一个不符合条件,我就高高兴兴的返回false,只有在遍历了整个数组元素发现都符合条件,才会可怜兮兮的返回true。
如果要记忆区分这两种方法,其实并不是很难,every(每一个),说明只有所有都对才算是true。而some(一些),说明你有一个就行啦,我就给你返回true。
4、forEach(),map()和filter()
敲黑板!这是重点!重点!
forEach():
forEach()方法,它接受一个方法(function)作为参数,该方法中可以有三个参数(item,index,arr)分别是调用forEach数组中的每一项元素,每一项元素的下标,调用forEach方法的数组。该方法会遍历数组中的每一项,为每一项执行你想做的事,不更改原数组并且没有返回值。但是我们可以自己通过数组的索引来修改原来的数组。
var nums = [1,2,3,4,5,6,7,8,9,10];
var newNumsB = [];
var newNumsA = nums.forEach(function (item,index,arr){
newNumsB.push(item + 100)
arr[index] = item + 10;
})
console.log(nums)
//[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
console.log(newNumsB)
//[101, 102, 103, 104, 105, 106, 107, 108, 109, 110]
console.log(newNumsA)
//undefined
forEach方法并不会改变原数组,如果你想要操作调用方法所修改后的值,需要把他重新赋值给一个空数组,或者,如果修改原数组是你想要的结果,那么可以通过匿名函数的第三个参数来获取到原数组从而更改他。
map():
map()方法,其实简单来说就是一个映射,但是map必须要有返回值,并且map会返回一个新数组。同样的,map也可以有三个参数,跟forEach是一样的。但是,你却无法向forEach那样来通过匿名函数的第三个参数来改变原数组,因为map需要return!
var nums = [1,2,3,4,5,6,7,8,9,10];
var newMapNums = nums.map(function (item,index,arr) {
console.log(item,index,arr);
return item * item;
})
console.log(newMapNums)
// [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
filter():
还有一个filter()方法,也就是“过滤”。filter会返回一个调用该方法数组的一个子集,什么意思呢,就是说filter的参数是一个函数,该函数是用来逻辑判断的(类似于every和some的那种判定),如果判断结果返回true或者可以作为true值返回,那么就会成为这个子集中的一个元素。简单说就是,你(调用filter方法的数组中每一个元素)是否能通过我(filter的function方法)的判定,如果可以就会成为我(返回的新数组)的一员。
var nums = [1,2,3,4,5,6,7,8,9,10];
var newNums = nums.filter(function(item,index,arr){
return item > 5
})
console.log(newNums)
//[6, 7, 8, 9, 10]
这里要注意的是,原数组仍旧是无法更改的,跟map一样。因为它有返回值,是通过返回值来组织新的数组的。
5、reduce()
英文的解释是缩减,刚好,咱们js中reduce方法差不多就是这个意思。该方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce的参数有点多,我还是这样写吧reduce(function(total,item,index,arr){},initalVal)。其中item,index,arr我就不说了,大家都知道是啥。total是啥呢?initalVal能猜到是什么么?
var nums = [1,2,3,4,5,6,7,8,9,10];
var newNums = nums.reduce(function(total,item,index,arr){
return total + item*100
},100)
console.log(newNums)
//
total其实就是指你之前所累加的值,而initalVal就是你最初的total是多少,也就是你在即将开始reduce方法时初始值是多少(从什么值开始累加),可以不传或者传为0。那我就有点小问题了,reduce只能做数值的计算么?能不能加字符串,布尔值设置数组呢?咱们来小试一下。
var strs = ["a","b","c","d","e","f"];
var newStrs = strs.reduce(function(total,item,index){
return total + item + "-"
})
console.log(newStrs)
//ab-c-d-e-f-
哎?竟然会是这样的结果,那么咱们来看看为什么。首先咱们没有传initalVal,那么就是从strs的第一项开始加,total的第一个值为字符串”a“,而后面呢我们又return了item + ”-“,也就说是从数组的第二项开始得到了我们想要的结果,最后我们给数组的最后一个元素”f“,也加上了”-“,这就是为啥会有这样的结果的原因了。所以,如果大家确实一定不得不想要做这样的操作,请你用join方法!
那么,我们可不可以在数组中加入其它元素呢?这里不再赘述,你们要自己去试试噢。
6、toString(),把数组中所有元素作为字符串输出。
toString有点类似于join,但是join是数组方法,toString却适用于几乎所有的javascript对象。这里不多说,点一下就好。
7、valueOf()
与toString和join在数组中的使用方法是一样的,也同样是返回以逗号分隔的字符串对象。
但是这里不会多说但是会强调,toString和valueOf都不仅仅只是数组的方法,他们几乎适用于所有的原生JS对象。而且依照对象的不同会有不同的展现形式!
8、indexOf()和lastIndexOf()
这两个东西不太好解释,我看看怎么简单说明一下呢~~~。
indexOf是返回与参数匹配的第一个元素的索引,lastIndexOf返回与参数匹配的最后一个元素的索引。
var nums = [0,1,2,3,4,5,6,6,7,"a",9,10,{name:"zaking"},["b","c"]];
var a = nums.indexOf(7);
var b = nums.lastIndexOf(7);
var c = nums.indexOf(6);
var d = nums.lastIndexOf(6);
var e = nums.indexOf(100);
var f = nums.lastIndexOf(100);
console.log(a,b,c,d,e,f)
//8 8 6 7 -1 -1
var x = nums.indexOf("a");
var y = nums.lastIndexOf("a");
console.log(x,y);
//9 9
var m = nums.indexOf({name:"zaking"});
var n = nums.lastIndexOf({name:"zaking"});
console.log(m,n)
//-1,-1
var i = nums.indexOf("b");
var j = nums.indexOf(["b","c"])
console.log(i,j)
//-1,-1
其实可以说indexOf是从数组的头部开始搜索,搜索到了匹配的第一个值就停止搜索并返回该值的下标。而lastIndexOf则是从尾部开始,搜索到了第一个匹配的值就停止并返回该值的下标。
这里有一个令人不容易注意但是却十分容易混乱的事情,就是,无论从头还是从尾来搜索数组,数组的下标计算方式是永远不会变的,所以,不要认为从尾部搜索就是尾部的第一个数组元素下标为0,不是这样的!
那么再说,如果搜索的参数在数组中并不存在,那么则返回-1,两个方法都是一样的。
而且我们还可以从上面的简单测试代码中发现,这两个方法的参数只适用于基本类型,如果对数组中的引用类型元素进行索引查找是不可以也通常是不会应用的!
那么这篇文章就到这里了,简单介绍了ES5数组的几乎所有的方法,其实ES6对数组进行了不错的扩展并且新增了很多方法,但是这里不会多说,因为那样的话又会多出几篇的篇幅,还有一个原因就是阮一峰大神的ES6入门已经介绍的十分详细,大家如果有兴趣可以自行查阅。下一篇文章会介绍一下多维数组(也就二维三维...)和数组的简单排序。
最后,由于本人水平有限,能力与大神仍相差甚远,若有错误或不明之处,还望大家不吝赐教指正。非常感谢!
用js来实现那些数据结构02(数组篇02-数组方法)的更多相关文章
- 用js来实现那些数据结构(数组篇02)
上一篇文章简单的介绍了一下js的类型,以及数组的增删方法.这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么.由于其中有部分内容并不常用,所以我尽量缩小篇幅.在这 ...
- js(数组篇02)
原文:http://www.cnblogs.com/zaking/p/8686676.html 上一篇文章简单的介绍了一下js的类型,以及数组的增删方法.这一篇文章,我们一起来看看数组还有哪些用法,以 ...
- Java菜鸟学习笔记--数组篇(二):数组实例&args实例
基本类型实例 //1.定义一个一维数组,先声明,在分配空间 int []number;//生命,没有初始化,number=null number=new int[5];//初始化为默认值,int默认值 ...
- 用js来实现那些数据结构—目录
首先,有一点要声明,下面所有文章的所有内容的代码,都不是我一个人独立完成的,它们来自于一本叫做<学习JavaScript数据结构和算法>(第二版),人民邮电出版社出版的这本书.github ...
- 用js来实现那些数据结构及算法—目录
首先,有一点要声明,下面所有文章的所有内容的代码,都不是我一个人独立完成的,它们来自于一本叫做<学习JavaScript数据结构和算法>(第二版),人民邮电出版社出版的这本书.github ...
- 用js来实现那些数据结构(数组篇01)
在开始正式的内容之前,不得不说说js中的数据类型和数据结构,以及一些比较容易让人混淆的概念.那么为什么要从数组说起?数组在js中是最常见的内存数据结构,数组数据结构在js中拥有很多的方法,很多初学者记 ...
- 用js来实现那些数据结构(数组篇03)
终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式.那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性.这篇文章分为 ...
- 用js来实现那些数据结构01(数组篇01-数组的增删)
在开始正式的内容之前,不得不说说js中的数据类型和数据结构,以及一些比较容易让人混淆的概念.那么为什么要从数组说起?数组在js中是最常见的内存数据结构,数组数据结构在js中拥有很多的方法,很多初学者记 ...
- 用js来实现那些数据结构03(数组篇03-排序及多维数组)
终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式.那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性.这篇文章分为 ...
随机推荐
- H - Repeats (重复最多子串的次数)
题目链接:https://cn.vjudge.net/contest/283743#problem/H 题目大意:T组数据,给你一个字符串,然后让你求这个字符串的重复最多子串的次数. 具体思路:论文题 ...
- 图片的Base64编码
Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...
- bootstrap-table插件数据加载方式
data-url 直接使用data-url在table标签中定义 使用load方法加载数据 $(“#finishingTask”).bootstrapTable(‘load’,data); //dat ...
- C++获取当前所有进程的完整路径
实现代码 #include <stdio.h> #include <windows.h> #include <tlhelp32.h> #include <st ...
- 文件&报表状态ID
def_filestatus Uploading=4 WaitingParse=6 Parsing=10 Completed=14 ParseError=1006 UploadError=1004 d ...
- saltstack文件模块的replace操作简化
代码已经过测试 import re import mmap import os import shutil old_text='test' new_text='text' path=r'C:\User ...
- nagios系列(七)nagios通过自定义脚本的方式监控mysql主从同步
nagios监控mysql主从同步 起因:nagios可能监控到mysql服务的运行情况,但确不能监控mysql的主从复制是否正常:有时候,同步已经停止,但管理人员却不知道. 登陆mysql从服务器, ...
- 怎么在Eclipse上运行静态网页
1. 前言 习惯用Eclipse开发动态网站,现在有一个静态网页(只有Html,Js,CSS代码,无后台Java代码)想跑一下,自己通过网上查询然后自己也研究捣鼓了一下,发现有三种方式可以发布静态网页 ...
- AS 中 Plugin for Gradle 和 Gradle 之间的版本对应关系
Plugin for Gradle 和 Gradle 之间的版本对应关系 来源:https://developer.android.com/studio/releases/gradle-plugin. ...
- STM32应用实例八:与多台MS5803压力传感器I2C通讯
MS5803压力传感器支持SPI和I2C总线通讯,拥有24位AD转换.能够同时获得压力值和温度值,其中压力测量范围为10-1100mbar,温度的测量范围是-40-85摄氏度.各引脚功能及参数如下: ...