javascript数组详解(js数组深度解析)【forEach(),every(),map(),filter(),reduce()】
Array 对象是一个复合类型,用于在单个的变量中存储多个值,每个值类型可以不同。
创建数组对象的方法:
new Array(); new Array(size); new Array(element0, element1, ..., elementn);
1. 当索引值为负数时,会将其看作是对象的一个属性,若为非负的数字字符串,则会隐式转换为数字索引:
var a= new Array(); a[-1.23]=true; a[1]="pomelo"; a["100"]="tt"; console.log(a); /// [1: "pomelo", 100: "tt", -1.23: true] console.log(a.length) /// 101 稀疏数组的长度为最大下标+1
其实数组对象的索引其实就是对象属性名的一种特殊形式,当试图查询任何不存在的对象属性名时,不会报错,而会显示undefined:
console.log(a["hello"]); //undefined
2. length属性可以用于置空数组或从前向后截取数组:
var array1=[1,2,3,4,5]; array1.length=3; ///[1,2,3] array1.length=0; ///[] array1.length=5; ///[] 长度为5的空数组 console.log(array1)
可以使用Object.defineProperty(对象,属性名,{设置})方法设置可读可写:
Object.defineProperty(array1,"length",{writable:false}); array1.length=10; console.log(array1.length); ///5
3.数组元素的添加和删除:
末尾:添加元素push(),删除元素pop();
首部:添加元素unshift(),删除元素shift();
var array2=[1,2,3,4,5]; array2.unshift(6); ///[6,1,2,3,4,5] array2.shift(); //[1,2,3,4,5] console.log(array2);
4.数组的遍历优化与筛选
当数组容量很大时,length不应在每次循环中都查询;
当需要过滤数组中的无效数据时,用continue跳出本次循环;
var array3=[null,1,0,undefined];
for(var i= 0,len=array3.length;i<len;i++){
if(!array3[i]) continue;
console.log(array3[i]); //1
}
或者利用ES5自带的foreach()方法:
var array4=[1,2,3,4]; var sum=0; array4.forEach(function(i){ sum+=i; }); console.log(sum); ///10
5.js不支持多维数组,但可以通过数组的数组来实现:
var array5=new Array(10); for(var i=0;i<array5.length;i++){ array5[i]=new Array(10); } for(var i=0;i<array5.length;i++){ for(var j=0;j<array5[i].length;j++){ array5[i][j]=i*j; } } console.log(array5[5][6]); //30
6.数组方法
6.1 join() 将数组转化为字符串并连接在一起
var array6=[1,2,3]; console.log(array6.join("-")); // 1*2*3 console.log(array6.join("")); // 123 console.log(array6.join()); // 1,2,3 console.log(typeof array6.join()); // String
6.2 reverse() 在原数组本身基础上将元素顺序颠倒
var array7=[1,2,3];
console.log(array7.reverse()) //[3,2,1]
6.3 sort() 数组排序
var array8=["apple","cherry","cherry"]; console.log(array8.sort()); //["apple", "cherry", "cherry"] array8.push(undefined); console.log(array8.sort()); //undefined会被放到最后 ["apple", "cherry", "cherry", undefined]
若想改变排序规则,需要传入一个比较函数:
var array9=[33,4,11,222]; console.log(array9.sort()); //11,222,33,4 默认以第一个数字比较 console.log(array9.sort(function(a,b){ //从小到大排列 return a-b; }))
字符排序默认区分大小小,以首字母ASCII编码为根据,从小到达排序:
var array10=["ant","Boy","cat","Dog"]; console.log(array10.sort()); //["Boy", "Dog", "ant", "cat"] console.log( array10.sort(function(s,t){ var a= s.toLowerCase(); var b= t.toLowerCase(); if(a<b) return -1; if(a>b) return 1; return 0; }) ); // ["ant", "Boy", "cat", "Dog"]
6.4 concat() 数组连接
var array11=[1,2,3]; console.log(array11.concat(4,5)); //[1,2,3,4,5] console.log(array11.concat([4,5])); //[1,2,3,4,5] console.log(array11.concat("4",[5,[6,[7,8]]])) //[1, 2, 3, "4", 5, Array[2]]
6.5 slice(第一个位置,第二个位置)
返回从第一个位置(包括)到第二个位置的子数组;
如果只制定一个参数,则返回从指定位置到数组结尾的所有元素组成的子数组;
若参数出现负数,则标识从后往前数的位置下标;
var array12=[1,2,3,4,5]; console.log(array12.slice(0,3)); //[1,2,3] console.log(array12.slice(3)); //[4,5] console.log(array12.slice(-1)); //[5] console.log(array12.slice(1,-1)); //[2,3,4]
6.6 splice(插入或删除的起始位置,删除元素的个数) 在数组中插入、删除或替换元素的通用方法:
var array13=[1,2,3,4,5,6,7,8]; //删除 console.log(array13.splice(4)); //[5,6,7,8] console.log(array13); //[1,2,3,4] console.log(array13.splice(1,2)); //[2,3] console.log(array13); // [1,4] //插入 array13.splice(1,0,"pomelo"); console.log(array13); //[1, "pomelo", 4] //替换 var array14=[1,2,3,4,5]; array14.splice(2,1,"pomelo"); //[1, 2, "pomelo", 4, 5] console.log(array14)
6.7 map() 将调用此函数的数组的每个元素传递给指定函数:
var array15=[1,2,3]; var array16=array15.map(function(i){ return i*i; }); console.log(array16) //[1,4,9]
6.8 filter() 返回调用此函数的数组的一个子集,传递的参数为返回布尔值的一个函数,该函数过滤并留下返回true的数组元素。
var array17=[1,2,3,4,5]; console.log( array17.filter(function(i){ return i<3 }) ); //[1,2]
6.9 forEach() 用于遍历数组
var array18=[1,2,3]; var sum=0; array18.forEach(function(i){ sum+=i*i; }); console.log(sum); //14
6.10 every(),some() 这两个函数用于对数组进行逻辑判定,返回true或false
var array19=[1,2,3,4,5]; console.log(array19.some(function(i){ return i>3; })); ///true console.log(array19.every(function(i){ return i>3; })); ///false
6.11 reduce(化简操作的函数,传递给函数的初始值)和reduceRight(化简操作的函数,传递给函数的初始值) 化简函数
var array20=[1,2,3,4,5]; var sum= array20.reduce(function(x,y){return x+y},0);// 15 函数求和 var mult=array20.reduce(function(x,y){return x*y}); //120 求积 var max=array20.reduce(function(x,y){return x>y?x:y}); //5 最大值
reduceRight()与reduce()一样,只是按照数组索引从大到小的顺序
var array21=[2,3,2]; var result=array21.reduceRight(function(x,y){return Math.pow(y,x)}); console.log(result); //512 求2^(3^2)
6.12 indexOf()和lastIndexOf()正向和反向搜索是否存在指定值,若存在返回索引下标,不存在则返回-1;
var array21=[1,2,3,"pomelo",2,4,6]; console.log(array21.indexOf(3)); //2 console.log(array21.indexOf(5)); //-1 console.log(array21.lastIndexOf(2)); //4
喜欢请点击右下角推荐,如有疑问可以留言,转载请标明出处。