数组方法

喝燕麦粥的王哈哈
1,171 阅读6分钟

一、创建数组

  • 数组的每一项可以保存任何类型的数据，数组的大小可以动态调整，随着数据的添加自动增长以容纳新增数据。
  • 使用Array构造函数创建数组
var arr = new Array();
<!--给构造函数传递数值，该数组会自动变成数组length属性的值-->
<!--创建length值为20的数组-->
var arr = new Array(20)
  • 使用字面量创建数组。 与对象一样，在使用字面量表示法时，不会调用Array构造函数
<!--数组字面量由一对包含数组项的方括号表示，多个项之间以逗号隔开-->
var arr =[1,2,3];
var names = []; //创建一个空数组

二、数组值的读取与设置

var num = [1,2,3,4];
alert(num[0]) //显示第一项--> 1
num[2] = 'red'; //修改第三项 
num[4] = 5;  //新增第四项

方括号中索引表示需要访问的值

  • 设置索引小于数组中项数，则返回对应项值。
  • 修改值则会替换指定位置的值。
  • 设置索引大于数组中项数，数组自动增加到索引值的长度，添加新项。 可以通过数组的length属性向数组末尾移除项或者添加新项
<!--移除-->
var colors=['red','yellow','blue'];
colors.length = 2;
alert(colors[2]) //undefined
alert(colors) // ['red','yellow']
<!--添加-->
var num = [1,2,3,4];
num.length = 5;
alert(num[4]) //undefined

三、转换方法

toString()

  • 调用数组的toString()方法会返回数组中每个值以逗号分隔的字符串
var num = [1,2,3,4];
alert(num.toString()) //'1,2,3,4'

join()

  • join()方法可以使用不同的分隔符来构建字符串。
  • join()方法只接收一个参数，用作分隔符的字符串。不传值默认使用逗号分隔
var colors=['red','blue','green'];
alert(colors.join()) //'red,blue,green'
alert(colors.join('||')) //'red||blue||green'
如果数组中某项时null或undefined，那么该值在join()、toString()、toLocaleString()、valueOf()方法中返回的结果中以空字符串表示。

四、数组方法

  • push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾,并返回修改后的数组长度。
var num =[];
var num1 = num.push(1,2)
alert(num) // [1,2]
alert(num1) //2
  • pop()方法从数组末尾移除最后一项，减少数组的length值，返回移除的项。
var num = [1,2,3,4];
var num1 = num.pop()
alert(num)  // [1,2,3]
alert(num1) // 4
  • shift()方法移除数组的第一项并返回改项，同时数组长度减一。
var num=[1,2,3,4];
var num1 = num.shift()
alert(num) //[2,3,4]
alert(num1) // 1
  • unshift()方法可以在数组前端添加任意个项并返回新的数组长度。
var num = [1,2,3,4];
var num1 = num.unshift(5,6);
alert(num) // [1,2,3,4,5,6]
alert(num1) //6
  • reverse()方法会翻转数组项的顺序，返回排序后的数组。
var num = [1,2,3,4];
num.reverse() // [4,3,2,1]
  • sort() 方法默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。
语法：arrayObject.sort(sortby);
参数sortby 可选，用来规定排序的顺序，但必须是函数。
<!--按字母排序-->
var arr = ['tom','ani','love','dav'];
arr.sort() // ['ani','dav','love','tom']
<!-- 数值排序-->
var num = [0,1,5,10,15];
num.sort() // [0,1,10,15,5]
<!--升序排列-->
var num = [0,1,5,10,15];
var snum = num.sort(function(a,b){
    return a-b;
})
alert(snum) // [0,1,5,10,15]
<!--降序排列-->
var num = [0,1,5,10,15];
var snum = num.sort(function(a,b){
    return b-a;
})
alert(snum) // [15,10,5,1,0]
  • concat()方法先拷贝一个当前数组,将接收到的参数添加到拷贝的数组末尾,返回新构建的数组
var num = [1,2,3];
var num2 = num.concat('red',[4,5])
alert(num) // [1,2,3]
alert(num2) // [1,2,3,'red',4,5]
  • slice()方法基于当前数组中的一个或多个项创建一个新数组.该方法接收两个参数,即返回项的起始和结束位置.
只有一个参数的情况下,slice()方法返回从开始位置到数组末尾的所有项.
如果有两个参数,slice()方法返回起始和结束位置之间的项,不包括结束位置的项.
slice()方法不会影响原数组
如果slice()方法中有负数,则用数组长度加上该负数来确定相应位置
如果结束的位置小于起始位置,则返回空数组
var num=[1,2,3,4,5];
var num1 = num.slice(1) //[2,3,4,5]
var num2 = num.slice(1,4) // [2,3,4]
var num3 = num.slice(-4,-1) // [2,3,4]
var num4 = num.slice(2,1) // []
  • splice()方法 始终返回删除的项,没有删除项则返回空数组
  1. 删除: 可以删除任意数量的项,指定2个参数:要删除的第一项位置和要删除项的个数
var num = [1,2,3,4];
var remove = splice(1,2) //[2,3]
alert(num) // [1,4]
  1. 插入: 可以向指定位置插入任意数量的项,指定三个参数:起始位置,0(要删除的项数),要插入的项
var num = [1,2,3,4];
var num2 = num.splice(1,0,5,6) // []
alert(num) // [1,5,6,2,3,4]
  1. 替换 : 可以向指定位置替换任意项,指定三个参数:起始位置,要删除的项数,要插入的项.插入的项可以不与删除的项相同.
var num = [1,2,3,4];
var num2 = num.splice(1,2,5,6,7) // [2,3]
alert(num) //[1,5,6,7,3,4]
  • indexOf()和lastIndexOf() 这两个方法都接收两个参数:要查找的项和(可选)查找起点的索引,indexOf()从开头往后找第一次出现的位置,lastIndexOf()从后往前找.没有找到返回-1,找到返回当前项在数组中的索引
var num = [1,2,3,4,5,4,3,2,1];
num.indexOf(4); // 3
num.lastIndexOf(4) // 5
num.indexOf(4,4) // 5
num.lastIndexOf(4,4) // 3
num.indexOf(0) // -1

ES5方法

  • every() 和 some() 用于查询数组中的项是否满足某个条件
  1. every() 传入的函数必须对每一项返回true,every()才返回true,否则返回false
  2. some() 传入的函数只要其中某一项返回true ,some()就返回true.
var num =[1,2,3,4,5,4,3,2,1];
var num1 = num.every(function(item,index,array){
    return item > 2;
})
alert(num1) // false
var num2 = num.some(function(item,index,array){
    return item > 2;
})
alert(num2) // true
  • filter() 筛选出符合条件的项构建成新数组.
var num = [1,2,3,4,5,4,3,2,1];
var num2= num.filter(function(item,index,array){
    return item > 2
})
alert(num2) // [3,4,5,4,3]
  • map() 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
var num = [1,2,3,4,5,4,3,2,1];
var num2 = num.map(function(item,index,array){
    return item * 2
})
alert(num2) // [2,4,6,8,10,8,6,4,2]
  • forEach() 与for循环一样遍历数组
  • reduce()和reduceRight() 都会迭代数组所有项,最后返回一个最终值.reduce()从第一项开始遍历,reduceRight() 从最后一项开始遍历.接收4个参数:前一个值,当前值,项的索引,数组对象. 第一次迭代发生在数组的第二项上,所以第一个参数是数组第一项,第二个参数是数组第二项.
 var num = [1,2,3,4,5];
 var sum = num.reduce(function(prev,cur,index,array){
     return prev + cur;
 });
 alert(sum) // 15
avatar
文章
阅读
粉丝