前端工程师-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,而undefinednull会被处理成空字符串。

  es6:明确将空位转为undefined

 请参考阮老师的es6,请戳这里

此篇文章参考了这位伙伴的文章,请戳这里

谢谢参考的伙伴,欢迎指正!

posted @ 2018-04-11 12:40  ELSE-IF  阅读(184)  评论(0)    收藏  举报