JS 数组方法学习汇总

48次阅读

共计 5009 个字符,预计需要花费 13 分钟才能阅读完成。

前言 在 JS 中我们数组用的是比较多的了,它自带了很多方法可以用,省去了我们时间,特别是 ES6 当中对数组的扩展让数组具有了更强大的功能,为了以后使用数组的时候能够充分发挥数组的特性,在这里对数组的方法进行一次汇总吧。
说明 标题后的标识 * 是说明该方法会改变原数组
对数组元素的操作
push() & pop() *
push() 向数组的末尾添加一个或更多元素(就是传进去的参数),并返回新的长度。
pop() 删除并返回数组的最后一个元素。
具体效果看代码
let arr = [1,2,3];
let res1 = arr.push(5);
console.log(res1); // 4 arr 的长度

console.log(arr); // [1,2,3,5]

let res2 = arr.pop();
console.log(res2); // 5 移除的数组项

console.log(arr); // [1,2,3]
shift() & unshift() *
shift() 删除并返回数组的第一个元素
unshift() 向数组的头部添加一个或者多个元素(传入的参数),并返回新的长度。
具体效果看代码
let arr = [1,2,3];
let res1 = arr.shift();
console.log(res1); // 1 移除的数组项

console.log(arr); // [2,3]

let res2 = arr.unshift(5,7);
console.log(res2); // 4 数组新长度

console.log(arr); // [5,7,2,3]
slice()
这个方法是从某个已有的数组返回选定的元素。一般带两参数 par1 和 par2,方法返回原数组 [par1, par2) 区间内的值组成的新数组。如果只有一个参数 par1 的话,就返回原数组 [par1,数组尾] 区间内的值组成的新数组。具体看代码
let arr = [1,2,3];
console.log(arr.slice(1,2)); // [2]
console.log(arr.slice(1)); // [2,3]

console.log(arr); // [1,2,3]
splice() *
这个方法有点复杂了,他是从原数组中删除 / 添加项目, 并返回删除的项目。具体是删除还是添加,看参数决定,它至少需要两个参数 index,deleteCount,分别指代要开始删除 / 添加项目的下标 index 和要删除的项目的个数 deleteCount,后面如果其他参数通通就是要加入 index 位置后面的项目了。看代码就知道一切了。
let arr = [0,1,2,3,4];
// 删除操做
console.log(arr.splice(0,2)); // [0,1] 从 下标 0 的位置开始删除两个元素,并返回。
console.log(arr); // [2,3,4] 删除后就剩它仨了

// 添加操作
console.log(arr.splice(1, 0, 5, 6, 7)); // [] 第二个参数 0,那就没有删除啥元素咯,然后在下标 1 的位置开始插入
console.log(arr); // [2, 5, 6, 7, 3, 4]

// 替换操作
console.log(arr.splice(1,1,2)); // [5]
console.log(arr); // [2, 2, 6, 7, 3, 4]
这个方法是很强大的,可以用它来实现数组元素的删除,替换,添加的操作,看上面代码就知道啦。
整个数组的大操作 (转换 & 拼接 & 排序 & 倒置)
join()
这个方法是将数组转换为字符串,数组元素间用传进去的参数(没有参数就用,)分隔
let arr = [1,2,3,4,5];
console.log(arr.join(‘|’)); // 1|2|3|4|5
console.log(arr.join()); // 1,2,3,4,5
concat()
这个方法用于拼接两个数组并返回一个新的数组。
let arr = [1,2,3,4,5];
console.log(arr.concat([6,7,8])); // [1, 2, 3, 4, 5, 6, 7, 8]
sort() *
这个就不用讲了吧,排序,不过默认的排序方法是把数字当成字符串来排序的,所以就会有了下面代码中的问题,也有了我们关于排序的重写。
let arr = [1,22,13,4,5];
arr.sort();
console.log(arr) // [1, 13, 22, 4, 5] 因为 22 的第一个字符是 2 比 4 小,所以 22 比 4 小。。。

arr.sort(function(val1,val2){
return val1-val2;
})
console.log(arr); // [1, 13, 22, 4, 5]
reverse() *
如其名,倒置数组的元素。
let arr = [1,22,13,4,5];
arr.reverse();
console.log(arr) // [5, 4, 13, 22, 1]
toString() & toLocaleString() & valueOf()
这三个方法,是个对象就会有,数组对象也不例外,也顺便写出来看看吧,具体啥效果,看代码吧。
let arr = [1,22,13,4,5];
console.log(arr.toString()); // 1,22,13,4,5
console.log(arr.toLocaleString()); // 1,22,13,4,5
console.log(arr.valueOf()); // [1, 22, 13, 4, 5]
数组位置方法
indexOf() & lastIndexOf()
这个用于查找数组中的元素,找到后返回元素的下标,找不到的话就返回 -1。两个方法都是一样的,只不过一个从头到尾找,一个从尾到头找
let arr = [1,22,13,4,5];
console.log(arr.indexOf(13)); // 2
console.log(arr.lastIndexOf(22)); // 1
console.log(arr.indexOf(44)); // -1
迭代方法
every() & some()
every() 对数组每一项运行一个函数,如果该函数对每一项都返回 true,则整体返回 true
some() 这个和上面一样啦,不过这个只要有一项是 true,整体就返回 true
具体看代码啦
let arr = [1, 2, 3, 4, 5];
console.log(
arr.every(function (item, index, array) {
return (item > 2)
})
); // false
console.log(
arr.some(function (item, index, array) {
return (item > 2)
})
); // true
forEach()
这个是对数组中的每一项运行给定函数,没有返回值。看代码吧
let arr = [1,2,3,4,5]
// 打印整个数组
arr.forEach(function(item){
console.log(item);
});
map()
这个方法是对数组的每一项运行给定函数,返回每一项返回结果组成的数组。
let arr = [1,2,3,4,5]
let newArr = arr.map(function(item){
return item+1
});
console.log(newArr); // [2, 3, 4, 5, 6]
filter()
这个方法是对数组的每一项运行给定函数,返回该函数会返回为 true 的数组项组成的新数组。
let arr = [1,2,3,4,5]
let newArr = arr.filter(function(item){
return item > 2
});
console.log(newArr); // [3, 4, 5]
ES6 扩展的数组方法
Array.from() 对象转为数组
这个方法用于将两类对象转为真正的数组,分别是类数组对象和可遍历对象(包括 ES6 新增的数据结构 Set 和 Map)用法就看代码吧
let arrLike = {
‘0’:’1′,
‘1’:’2′,
‘2’:’2′,
length:’3′
}

let arr = Array.from(arrLike);
console.log(arr); // [‘1’, ‘2’, ‘2’]
在实际应用中,DOM 操作返回的 NodeList 集合就是一个类数组对象。
Array.of() 值转为数组
这个是用来替代 Array() 或 new Array() 的,为啥要替换,来段代码感受下就知道了
console.log(Array()); // []
console.log(Array(3)); // [, , ,]
console.log(Array(1, 2, 3)); // [1, 2, 3]

console.log(Array.of()); // []
console.log(Array.of(undefined)); // [undefined]
console.log(Array.of(3)); // [3]
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
看出门道了吧,Array() 会因为参数不同会有不同的效果,而 Array.of() 就不会存在这种问题啦。
copyWithin() 数组内成员复制 *
这个方法有点迷,暂时不知道是用来干啥的,但是也记一下它能干啥,没准以后就用上了。它的话是在当前数组内部将指定位置的成员复制到其他位置(覆盖掉原有成员),然后返回该数组。他有下面三个参数

target(必选):从该位置开始替换数据
start(可选):从该位置读取数据,默认 0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认是数组长度,如果为负值,表示倒数。

具体有啥效果就看代码吧
let arr = [1, 2, 3, 6, 5];
// 从下标 0 开始换 下标 1(也就是 2)开始的数据,一直替换到 下标 4 前(也就是到 arr[3] 结束)
// 人话说就是 arr[0] 到 arr[4-2] 的值被 arr[1] 到 arr[4-1] 的值替换掉
console.log(arr.copyWithin(0, 1, 4)); // [2, 3, 6, 6, 5]

arr2 = [0, 1, 2, 3, 4, 5, 6];
console.log(arr2.copyWithin(1, 3, 6)); // [0, 3, 4, 5, 4, 5, 6]
find() & findIndex() 查找数组元素
find() 用于查找符合第一个符合条件的数组成员,并将其返回。如果没有的话,就返回 undefined。
findIndex() 和上面一样,不过他返回的是那个符合条件的数组的下标。
啥效果就看代码吧
let arr = [0, 1, 2, 3, 5, 5, 6];
arr.find(function (value, index, arr) {
return value > 4;
}) // 返回数值 5

arr.findIndex(function (value, index, arr) {
return value > 4;
}) // 返回下标 4
### fill() 数组填充 这个方法是用给定值填充一个数组。初始化数组的时候可以用到。它有三个参数:value 填充数组的值 start 填充的起始位置 end 填充的结束位置
[1, 2, 3].fill(‘a’) // [‘a’, ‘a’, ‘a’]
[1, 2, 3, 4, 5].fill(‘a’, 2, 4) // [1, 2, ‘a’, ‘a’, 5]
entries() & key() & values() 遍历数组
这三个都会返回一个迭代器对象,可以用 for…of 循环遍历,区别是,entries() 遍历键值对,keys() 遍历键名,values() 遍历键值,啥效果看代码。
let arr = [1, 2];
for (let [index, ele] of arr.entries()) {
console.log(index, ele);
} // 0 1 1 2
for (let index of arr.keys()) {
console.log(index);
} // 0 1
for (let ele of arr.values()) {
console.log(ele);
} // 1 2
includes() 判断数组是否有某值
这个方法如其名,用于判断数组内是否有某个值,如果有,返回 true,没有,返回 false。他如果有第二个参数的话,那么第二个参数表示开始搜索的位置。
let arr=[1,2,3,4,5,6,7];
arr.includes(1) // true
arr.includes(1,5) // false 从下标 5 开始搜没有 1
关于数组的的方法,就总结道这边了,如果还有遗漏或者错误的地方的话,就麻烦下下面评论修正啦。

正文完
 0