javascript 数组的ES5新方法
ECMAScript5中,给数组又添加了好几个有用的方法:
以下将常用的方法列举比较了一下。
方法名 | 用法 | 返回值 | 是否 修改 原数 组 |
join | 将数组中所有元素都转化为字符串并连接在一起, 参数传连接的中间符号,如果不指定分隔符, 默认使用逗号, 相当于 [].join(',') join方法是 String.split()的逆向操作,后者是将字符串分割成若干块来创建一个数组。 |
拼接后的 字符串 |
否 |
reverse | 数组中的元素天道顺序,返回逆序的数组。它采取了替换原来的方式var a = [1,2,3]; a.reverse() => [3,2,1] a => [3,2,1] |
原数组 反转 |
是 |
sort | sort方法将数组中的元素排序并返回排序后的数组。当不带参数调用sort()时,数组元素以字母表顺序排序或者 数字的第一个数大小排序. 给函数传递一个比较函数可以自定义比较方式: 第一个参数数应该在前---比较函数应该返回一个小于0的数值。 第一个参数应该在后---函数返回一个大于0的数。 顺序无关紧要---并且假设两个值想的函数应该返回0. var a = ['banana','cherry','apple']; a.sort(); a.join(',') => //s== 'apple, banana, cherry' sort还可以接受一个排序的函数
升序 a-b 降序 b-a
|
排序 后新 数组 |
是 |
concat | 创建并返回一个新数组,返回元素包括调用concat()的原始数组元素和concat的每个参数,如果参数中的任何一个自身是数组,则数组会被拆散分开拼接。如果参数数组是二维数组则只拆散第一层。var a = [1,2,3] a.concat(4,5,6) => //[1,2,3,4,5,6] a还是= [1,2,3] var b= ['a','b','c'] b.concat(['d','f','g'],'m','n') => //['a','b','c','d','f','g','m','n'] b还是= ['a','b','c'] c=[77,88,99]; c.concat([ [11,22,33],[44,55,66]],[ [1,2,3],[4,5,6]]) => //返回 [ 77,88,99, [11,22,33], [44,55,66], [1,2,3], [4,5,6] ] |
原数 组和 参数拼接 |
否 |
slice | 返回一个数组的一个偏度或子数组。 两个参数分别制定了片段的开始和结束为止。返回的数组包含第一个位置但不包含第二个参数位置。如果只制定一个参数:返回参数开始下标到数组最后。 如果参数中出现负数,它表示相对于数组中最后一个元素的位置。例如:-1指定了最后一个元素,而-3表示倒数第三个元素。[1,2,3,4,5,6,7].slice(0,5) =>[1,2,3,4,5] [1,2,3,4,5,6,7].slice(1,-3) =>[2, 3, 4] -3为倒数第三个(如果在后面则不包含) [1,2,3,4,5,6,7].slice(-6,4) =>[2, 3, 4] [1,2,3,4,5,6,7].slice(-6,-3) =>[2, 3, 4] 原来数组并不修改。
|
截取的数组片段 | 否 |
splice | 在数组中插入或删除元素的通用方法。 该方法会修改调用的数组。 根据参数的个数不同,功能也有着很大的区别 第一个参数指定了插入和删除的起始位置、第二个参数指定了应该从数组中删除元素的个数。如果省略第二个参数,从起始点到数组结尾的所有元素都将被删除,并且返回删除的元素组成的数组。 var a=[1,2,3,4,5,6,7,8] a.splice(4) =>[5,6,7,8] 删除下标4开始的后面所有元素 a = [1,2,3,4] 剩下下标4前面的元素 var b=[1,2,3,4] b.splice(1,2)=> [2,3] 删除下标1开始后面的两个元素 b= [1,4] splice()前两个参数指定了需要删除的数组元素下标,后面的所有参数都将插入到删除元素的位置 var a= [1,2,3,4,5] a.splice(2,0,'a','b') =>[],a则为 [1,2,a','b',3,4,5] var b= [1,2,3,4,5] b.splice(2,2,[1,2],3)=> 返回删除的[3,4], b=[1,2,[1,2],3,5] |
删除的片段 | 是 |
push& pop |
push和pop方法允许将数组当做栈来使用。 push方法在数组的尾部添加一个或多个元素,并返回数组新的长度 pop方法:删除数组的最后一个元素减小数组长度,并返回删除的值。两个方法都修改原始数组。 var stack = [] stack.push(1,2) return 2 stack : [1,2] stack.push('a') return 3 stack: [1,2,'a'] stack.pop() return 'a' stack: [1,2] push元素返回最后的长度、pop元素 返回最后一个元素
|
添加 后的 长度 或删除的元素 |
是 |
ushift& shift |
前者是在数组头部插入元素、后者在数组头部删除一个元素。并且修改数组的长度。var a=[1,2,3] a.unshift(-1,0) return 5(添加后a的长度) a: [-1,0,1,2,3] a.shift() return -1(最前面删掉的元素) a:[0,1,2,3] |
添加 后的 数组 长度 或删 除的元素 |
是 |
toString& toLocaleString |
数组和其他javascript对象一样拥有toString方法。 针对数组:该方法将其每个元素转化为字符串并且输入用逗号分隔的字符串列表(输出不包括方括号或其他任何形式的包裹数组值的分隔符)
var a =[1,2,3] a.toString() return "1,2,3" var b = [[1,2,3],[4,5,6],{q:2,e:4}] return:"1,2,3,4,5,6,[object Object]" var b = [[{d:2,r:44}, 2,3],[[11,33,44],5,6],{q:[66,77],e:4}] => "[object Object],2,3, 11,33,44, 5,6, [object Object]" 每个元素也调用toString方法 所有的多层数组都会被拉平为字符串 Object对象则直接[object Object] |
||
ECMAScript 5 中新方法来遍历、映射、过滤、检测、简化、搜索数组 大多数方法的第一个参数接收一个函数,切对数组的每个元素(或一些元素)调用一次该函数,如果是稀疏数组对不存在的元素不调用传递的函数。大多数情况下调用的函数使用三个参数: 数组元素、元素索引、数组本身。通常只需要第一个参数值。这些方法都不会修改原来调用数组。当然传进来的函数可以改变数组本身。 |
|||
forEach | 从头至尾遍历数组,为每个元素调用指定的函数。 三个参数: item、index、arr forEach() 没有像for循环中使用的break语句。如果要提前终止,必须把forEach方法放在一个try块中,并抛出一个异常。如果forEach()调用的函数抛出foreach.break异常,循环会提前终止: function foreach(a,f,t){ try{ a.forEach(f,t) }catch(e){ if(e === foreach.break) return; else throw e } } foreach.break = new Error('StopIteration'); foreach(['a','b','c','d'], function(ite,ind,arr){ console.log(ite); if(ind == 2) throw foreach.break; //如果下标2了,抛出异常,终止循环 }, function(item ){ console.log(item)}) |
遍历一次 | 否 |
map | 将调用的数组的每个元素传递给指定的函数,并返回一个数组,它包含了该函数的返回值,例如:var a = [1,2,3] var b = a.map(function(item, index, arr){ return item * item; }); => b: [1, 4, 9] map返回的是新数组:它不修改调用的数组。如果是稀疏数组返回的也是稀疏数组。如果条件过滤掉某些元素未返回,则该项返回undefined,总之返回的长度不变。
|
操作的 结果数组 |
否 |
filter | 返回数组元素调用的数组的一个子集。 传递的函数是用来逻辑判定的: 该函数返回true或者false;调用判定函数返回true或能转化为true的值,那么该项将被返回。var a = [1,2,3,4,5] a.filter(function(item){ return item >3 }) //返回数组为[4,5] a.filter(function(item, index){ return index <3 && item >2 }) //下标小于3 并且值大于2 |
过滤的 结果数组 |
否 |
every&some | 两个方法是数组的逻辑判定:他们对数组元素应用指定的函数进行判定,返回true或false。 every() :当且仅当针对数组中的所有元素调用判定函数都返回true,它才返回true some():当数组中至少有一个元素调用判定函数返回true它就返回true;并且当且仅当数组中的所有调用判定函数都返回false才返回false。 var a = [1,2,3,4,5] a.every(function(item){ return item < 10})//所有元素都小于10则返回true a.every(function(item){ return x%2 === 0 })//所有元素值模2为0则返回true 这里有1,3,5不符合返回false a.some(function(item){ return item %2 === 0})//有一个模2为0返回true 2,4符合 返回true a.some(isNaN) //所有元素都不是数字才返回true 这里返回false 一旦every 和some 确认该返回什么了就会停止遍历数组。 every 有一个为false了、some有一个返回true了就都直接返回了。
[1,2,3,4,5].every(function(x){if(x<3){console.log(x); return x<3}}) 会直接打印1/2就返回了 不会遍历4和5了
|
布尔值 | 否 |
reduce & reduceRight |
这两个方法使用指定的函数将数组元素进行组合,生成单个值。var a = [1,2,3,4,5] var sum = a.reduce(function(x,y){ return x+y }, 0) sum : 1+2+3+4+5 = 15 var product = a.reduce(function(x,y){ return x*y }, 1) sum: 1*2*3*4*5 = 120 var max = a.reduce(function(x,y){ return (x>y)? x:y}) max = 5返回最大值 |
操作 的 结果 |
否 |
indexOf & lastIndexOf |
搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1 indexOf 从头至尾搜,lastIndexOf 从尾至头搜。 两个方法参数不是函数。 第一个参数是都搜索的值 ,第二个是可选的,指定数组中的一个索引从哪里开始搜索。如果省略则从头或从尾开始。 第二个参数也可以是负数,它代表相对数组末尾的偏移量。 |
元素 第一 个下标 |
否 |
Array.prototype.findall = function (ele){ var results =[]; var len = this.length; var pos = 0; while(pos < len){ pos = a.indexOf(ele,pos); if(pos === -1) break; results.push(pos); pos = pos+1; } return results } String.prototype.findall = function (subStr){ var results =[]; var len = this.length; var pos = 0; while(pos < len){ pos = this.indexOf(subStr,pos); if(pos === -1) break; results.push(pos); pos = pos+1; } return results } 两个方法都是在数组或string中查询子元素或子串的出现次数及位置,返回一个结果数组
|
内容均为原创,如果对您有用,欢迎评论交流