前端工程师-JavaScript-Array的基本操作
1,创建数组
var arr= new Array(); //创建一个数组 var arr = new Array([size]); //创建一个数组并指定长度 var arr= new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值 //--------------------------------------------------------- //(es6)Array.of() Array.of()//[] Array.of(3)//[3] Array.of(1,2,3)//[1,2,3] //--------------------------------------------------------- //Array.prototype.slice.call() Array.prototype.slice.call("")//[] Array.prototype.slice.call("a")//["a"] Array.prototype.slice.call("123")//["1", "2", "3"]
说明:
Array.of()是为了弥补new Array()的不足,new Array(3),如果是一个数字就变成长度.
Array.prototype.slice.call()的解释,请猛戳这里,感谢这位小伙伴,在此引用你的文章,感谢
2.常见类数组
a.用document.getElementsBy.. 获取的DOM元素集合,是一个类数组。
b.$(...)获取的集合是一个类数组
c.函数的arguments对象是一个类数组
3.添加元素
push(),unshift(),splice()
var arr= new Array(); arr.push(1)//1会返回长度 arr.unshift(1,2,3)// [1, 2, 3, 1]从数组首部插新元素 arr.splice(0,0,1,2,3)//[1, 2, 3, 1, 2, 3] //第一个0指要操作的位置,第二个0指要截取的元素数目(可以说是删除),从第三个参数开始,均是要从第一个参数所参数指定的位置开始添加的参数 arr.splice(3,0,7,8,9)// [4, 5, 6, 7, 8, 9, 1, 2, 3, 1, 2, 3] arr.splice(3,2,"#")//[4, 5, 6, "#", 9, 1, 2, 3, 1, 2, 3] arr.splice(-1,2,"#")//[4, 5, 6, "#", 9, 1, 2, 3, 1, 2, "#"] //-1指数组从后一个元素,2指从最后一个元素开始截取2位,可是只有一位,所以只能截取一位
4.删除元素
pop(),shift(),splice()
var arr = [4, 5, 6, "#", 9, 1, 2, 3, 1, 2, "#"] console.log(arr.pop()),console.log(arr)
//# 会返回删除元素,从尾巴开始删除 //[4, 5, 6, "#", 9, 1, 2, 3, 1, 2]
console.log(arr.pop()),console.log(arr)
//2 //[4, 5, 6, "#", 9, 1, 2, 3, 1]
console.log(arr.pop()),console.log(arr)
//1 //[4, 5, 6, "#", 9, 1, 2, 3]
console.log(arr.unshift(2)),console.log(arr)
//9(长度) 刚上面的例子忘记说明,unshift()会返回新长度 //[2, 4, 5, 6, "#", 9, 1, 2, 3]
console.log(arr.shift()),console.log(arr)
//2 删除数组第一个元素,并返回 //[4, 5, 6, "#", 9, 1, 2, 3]
console.log(arr.shift()),console.log(arr)
//4(长度) // [5, 6, "#", 9, 1, 2, 3]
console.log(arr.splice(5,2)),console.log(arr)
//[2, 3] 返回删除的元素数组 //[5, 6, "#", 9, 1]
5.遍历
a.for循环
b.for...of 可以遍历一切被添加iterator对象的对象(IE6-8下都不兼容)
for(var elem of Object.values(a)){console.log(elem)} //5 //6 //# //9 //1 undefined for(var elem of Object.keys(a)){console.log(elem)} //0 //1 //2 //3 //4 for(var elem of Object.entries(a)){console.log(elem)} // ["0", 5] // ["1", 6] //["2", "#"] // ["3", 9] //["4", 1]
c.map(currentValue, index, arr)(IE9+)(返回新数组,不改变原素组)
d.forEach(currentValue, index, arr)(IE9+)(改变原素组,无法跳出循环)
e.for...in 关于for...in的一些问题,请戳这里-- 网海聚焦(WEB攻城狮) !
还有些补充,大家可以参考这个小伙伴写的,请戳这里。
6.其他操作
给定一个数组
var arr = [5, 6, "#", 9, 1];
a.过滤(以下方法均不会对空数组进行检测,不改变原素组,返回新数组,IE9+。)
1>filter(function(currentValue,index,arr), thisValue)
var newArr = arr.filter(function(currentValue,index,arr){ return Math.floor(currentValue) != currentValue }) console.log(newArr);console.log(arr); // ["#"] // [5, 6, "#", 9, 1]
2>every(function(currentValue,index,arr), thisValue)检测数组所有元素是否都符合指定条件
ps:如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测
var result = arr.every(function(currentValue,index,arr){ return Math.floor(currentValue) === currentValue }) console.log(result);console.log(arr); //false // [5, 6, "#", 9, 1]
3>.some(function(currentValue,index,arr),thisValue)用于检测数组中的元素是否有满足指定条件的元素。
ps:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,全部不满足才会返回false。
var resultSome = arr.some(function(currentValue,index,arr){ return Math.floor(currentValue) != currentValue }) console.log(resultSome);console.log(arr); //true // [5, 6, "#", 9, 1]
b.查找指定数组(不改变原素组)
slice(start,end),参数与String的slice方法相同
arr.slice(-2)//[9, 1] arr.slice(-2,4)//[9] arr.slice(2,5)//["#", 9, 1]
ps:可以利用此方法不改变原数组的特性返回原数组的副本
arr.slice()//[5, 6, "#", 9, 1]
c.数组合并(不改变原素组)
concat(arrayX,arrayX,......,arrayX)用于连接两个或多个数组
ps1:从尾巴开始接
var bArr = ["a","b","c"]; console.log(bArr.concat(arr))//["a", "b", "c", 5, 6, "#", 9, 1] console.log(arr.concat(bArr));//[5, 6, "#", 9, 1, "a", "b", "c"] console.log(arr.concat("ab",09,66));//[5, 6, "#", 9, 1, "ab", 9, 66]
ps2:可以利用此方法不改变原数组的特性返回原数组的副本
arr.concat()//[5, 6, "#", 9, 1]
d.归约(不改变原素组)
reduce(function(total, currentValue, currentIndex, arr), initialValue)接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
var result = arr.reduce(function(total, currentValue, currentIndex, arr){ return total + Math.floor(currentValue); },0); console.log(result);//NaN Math.floor("#") === NaN
reduceRight 方法(function(total, currentValue, currentIndex, arr), initialValue)接收一个函数作为累加器,数组中的每个值(从右到左)开始缩减,最终计算为一个值。
e.排序(改变原素组)
1>sort(sortby)
sortby:函数,规定排序顺序(可选)
此方法是按照字符编码的顺序进行排序,如果想排序可以最好都转成字符串
arr.sort()// ["#", 1, 10, 5, 6, 9] arr.sort(function(a,b){ return a-b })//["#", 1, 5, 6, 9, 10] //如果希望a出现b的前面,就返回一个小于零的数字, //如果希望a出现在b的后面,就返回一个大于零的数字 var bArr = ["g","a","b","c"]; bArr.sort(function(a,b){ return 0 })//["g", "a", "b", "c"] 当然返回0就不排啦
关于sort方法,这篇文章就讲的很全了,请戳这里
2>reverse 颠倒数组中元素的顺序
var bArr = ["g","a","b","c"]; bArr.reverse()// ["c", "b", "a", "g"]
f.数组转为字符串
join(separator):把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串
var bArr = ["g","a","b","c"]; bArr.join("|")//"g|a|b|c" console.log(bArr)//["g", "a", "b", "c"]
备注:
对数组中空位的处理
es5
forEach()
,filter()
,reduce()
,every()
和some()
都会跳过空位。map()
会跳过空位,但会保留这个值join()
和toString()
会将空位视为undefined
,而undefined
和null
会被处理成空字符串。
es6:明确将空位转为undefined
请参考阮老师的es6,请戳这里
此篇文章参考了这位伙伴的文章,请戳这里。
谢谢参考的伙伴,欢迎指正!