数组Array的常用方法(22种)

关于数组的判断(1)isArray

Array.isArray()

1
2
3
// 用于判断一个对象是否为数组
var f = [1,2,3];
console.log(Array.isArray(f)); //true

关于这个方法的实现

1
2
3
Array.myIsArray = function(o){
return Object.prototype.toString.call(Object(o) === '[Object Array]');
};

关于类数组对象转成数组(1)from

Array.from() 用于通过拥有length属性的对象或可迭代的对象来返回一个数组

1
2
3
4
5
6
7
8
9
10
11
12
// 返回新的数组实例,对于原始解构不影响
let arr1 = Array.from("foo");
console.log(arr1); // ["f","o","o"];

// 该方法有三个参数:
// 1. 接受一个类数组或可迭代对象
// 2. 新数组中每个元素都会执行的回调函数
// 3. 指定第二个参数的this对象
var arr = Array.from([1,2,3],x=>x*10);
// arr[0] = 10;
// arr[1] = 20;
// arr[2] = 30;

关于多个数组的连接 & 数组转换成字符串(2)concat/join

Array.prototype.concat() 用于连接两个或多个数组,且不会改变现有数组

1
2
3
4
var arr1 = ["苹果","香蕉","橘子"];
var arr2 = ["梨","西瓜","火龙果"];
var arr = arr1.concat(arr2)
console.log(arr); // ["苹果","香蕉","橘子","梨","西瓜","火龙果"]

Array.prototype.join() 把数组的所有元素转换成一个字符串

1
2
var fruits = ["西瓜","哈密瓜","榴莲"];
console.log(fruits.join()); // 西瓜,哈密瓜,榴莲

关于查找符合条件的数组(5)every/some/filter/find/includes

Array.prototype.every() 用于检测数值元素的每个元素是否都符合条件

1
2
3
4
5
6
7
// 如果数组中检测到一个元素不满足条件,则整个返回false,剩余元素就不会再进行检测
// 不会对空数组进行检测,也不会改变原始数组
var ages = [33,20,16,50];
function checkAdult(age){
return age >= 18;
}
ages.every(checkAdult); // false

Array.prototype.some() 检测数组元素中是否有元素符合指定条件

1
2
3
4
5
6
7
// 不会对空数组进行检测,也不会改变原始数组
// 如果有一个元素满足条件,就返回true,剩余的元素不会再进行检测
var ages = [33,20,16,50];
function checkAdult(age){
return age >= 18;
}
ages.some(checkAdult); // true

Array.prototype.filter() 用于检测数值元素,并返回符合条件的所有元素的数组

1
2
3
4
5
6
// 不会对空数组进行检测,也不会改变原始数组
var ages = [33,20,16,50];
function checkAdult(age){
return age >= 18;
}
ages.filter(checkAdult); // [33,20,50]

Array.prototype.find()

1
2
3
4
5
6
7
8
// 不会对空数组进行检测,也不会改变原始数组
// 返回符合传入测试(函数)条件的第一个元素的值,之后的值就不会再检测了
// 没有符合条件的值就返回undefined
var ages = [10,15,18,50];
function checkAdult(age){
return age >= 18;
}
ages.filter(checkAdult); // 18

Array.prototype.includes(searchElement,fromIndex)

1
2
// 判断一个数组是否包含一个指定的值,有就返回true,否则返回false
console.log([1,2,3].includes(2,1)); // true

关于数组的遍历(1)forEach

Array.prototype.forEach() 遍历方法,对数组中的每个元素都执行一次回调函数

1
2
3
4
5
// 对于空数组不会执行回调函数
var arr = [4,9,16,25];
arr.forEach(function(item,index){
console.log(item)
});

关于数组index的查找(2)indexOf/lastIndexOf

Array.prototype.indexOf() 搜素数组中的元素,返回它所在的位置

1
2
3
4
// 从头开始检索,找到item第一次出现的位置,返回它的索引值
// 没有就返回-1
var fruits = ["西瓜","哈密瓜","榴莲"];
console.log(fruits.indexOf("哈密瓜"));//1

Array.prototype.lastIndexOf() 返回指定内容最后出现的位置

1
2
3
4
// 从后向前进行检索,找到item第一次出现的位置,返回它的索引值
// 没有就返回-1
var fruits = ["西瓜","哈密瓜","榴莲"];
console.log(fruits.indexOf("哈密瓜")); //1

关于数组的增删改(7)pop/shift/push/unshift/reverse/slice/splice

Array.prototype.pop() 删除数组的最后一个元素并返回删除的元素

1
2
3
4
5
// 该方法会改变数组的长度
var arr1 = [10,20,30,40];
var arr2 = arr1.pop();
console.log(arr1); // [10,20,30]
console.log(arr2); // 40

Array.prototype.shift() 删除并返回数组的第一个元素

1
2
3
4
5
// 该方法会改变数组的长度
var arr1 = [10,20,30,40];
var arr2 = arr1.shift();
console.log(arr1); // [20,30,40]
console.log(arr2); // 10

Array.prototype.push() 向数组末尾添加一个或多个元素,并返回新的长度

1
2
3
4
5
// 该方法会改变数组的长度
var arr1 = [10,20,30,40];
var arr2 = arr1.push(50);
console.log(arr1); // [10,20,30,40,50]
console.log(arr2); // 5

Array.prototype.unshift() 向数组开头添加一个或多个元素,并返回新的长度

1
2
3
4
5
// 该方法会改变数组的长度
var arr1 = [10,20,30,40];
var arr2 = arr1.unshift(50);
console.log(arr1); // [50,10,20,30,40]
console.log(arr2); // 5

Array.prototype.reverse() 反转数组的元素顺序

1
2
var names = ["小明","小红","小黄"];
console.log(names.reverse()); // ["小黄","小红","小明"]

Array.prototype.slice(start,end) 选取数组的一部分,并返回一个新数组

1
2
3
4
// 不会改变原始数组
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var re = fruits.slice(1,3);
console.log(re); // ["Orange","Lemon"]

Array.prototype.splice(index,num) 从数组中添加或删除元素

1
2
3
4
5
6
7
// 该方法会改变原始数组
// 删除元素时,参数为开始索引和要删除元素的长度
var sites = ["Runoob","Google","Taobao"];
// 该方法返回的是被删除元素组成的数组
var re = sites.splice(2,1,"GGGGG");
console.log(sites); //["Runoob","Google","GGGGG"]
console.log(re); // ["Taobao"]

关于数组的回调处理和排序(3)sort/reduce/map

Array.prototype.sort() 对数组的元素进行排序

1
2
3
4
5
6
7
8
9
// 该方法将改变原始数组
var points = [40,100,1,5,25,10];
points.sort(function(a,b){
return a-b;
}); // 1,5,10,25,40,100 (升序排列)

// 也可以给字母排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // ["Apple","Banana","Mango","Orange"];

Array.prototype.reduce() 将数组元素计算为一个值

1
2
3
4
5
6
7
// 对于空数组不会执行回调函数的
// 接收一个函数作为累加器,对数组中的每个值进行累加计算
var num = [10,20,30,40,50];
var result = num.reduce(function(pre,cur){
return pre + cur;
})
console.log(result); // 150

关于这个方法的实现

1
2
3
4
5
6
7
8
Array.prototype.myReduce = function(callback, initialValue) {
let accumulator = initialValue ? initialValue : this[0];
for (let i = initialValue ? 0 : 1; i < this.length; i++) {
let _this = this;
accumulator = callback(accumulator, this[i], i, _this);
}
return accumulator;
};

Array.prototype.map(callback,[thisObject]) 通过指定函数处理数组的每个元素,并返回处理后的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 返回一个新数组,新数组中的元素都是原始数组处理后的值
// 不会对空数组进行检测,也不会改变原始数组
var numbers = [4,9,16,25,36];
var newNum = numbers.map(Math.sqrt);
console.log(newNum); // [2,3,4,5,6]

var arr1 = [1,4,9,16];
const map1 = arr1.map(x=>{
// 只有当x=4时,才进行操作
if(x == 4){
return x*2;
}
// 其他值时,就直接返回
return x;
})
console.log(map1); // [1,8,9,16]

关于这个方法的实现

1
2
3
4
5
6
7
Array.prototype.myMap = function(callback, thisArg) {
let arr = [];
for (let i = 0; i < this.length; i++) {
arr.push(callback.call(thisArg, this[i], i, this));
}
return arr;
};