JavaScript数组常用方法有哪些?
常见的四个方法:操作方法、排序方法、转换方法、迭代方法
(一)操作方法:增、删、改、查
1.增
push() 末尾添加新元素
let num = [];
let num1 = num.push(0, 1);
console.log(num); // [0, 1] 改变元素组
console.log(num1); // 2 返还新数组长度
unshift() 开头添加新元素
let num = [2];
let num1 = num.unshift(0, 1);
console.log(num); // [0, 1, 2] 改变原数组
console.log(num1); // 3 返还新数组长度
splice() 传入三个参数,分别是开始位置、要删除的元素数量、插入的元素,返回删除的内容
let num = [0, 1, 2, 3];
let num1 = num.splice(1, 2, 10);
console.log(num); // [0, 10, 3] //改变原数组
console.log(num1); // [1, 2]
concat()
let num = [0, 1, 2, 3];
let num1 = num.concat(1, 2, 10);
console.log(num); // [0, 1, 2, 3] 不改变元素组
console.log(num1); // [0, 1, 2, 3, 1, 2, 10] 返回新数组
2.删
pop() 删除数组的最后一项,新数组返回被删除的项
let num = ["a", "b", "c"]
let num1 = num.pop()
console.log(num); // ['a', 'b']
console.log(num1); // c
shift() 删除数组的第一项,新数组返回被删除的项
let num = ["a", "b", "c"]
let num1 = num.shift()
console.log(num); // ['b', 'c']
console.log(num1); // a
splice() 类似于前面,传两个参数,开始位置,删除数量
let num = ["a", "b", "c"]
let num1 = num.splice(0,1)
console.log(num); // ['b', 'c']
console.log(num1); // ['a']
slice() 用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原始数组
let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4); // 1代表索引为1(第2位),4代表第4位
console.log(colors) // red,green,blue,yellow,purple
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow
3.改
splice()方法
4.查
indexOf() 返回要查找的元素在数组中的位置,如果没找到则返回-1
let num = [1,2,3,4,5,6,7,8]
console.log(num.indexOf(5)); //4
includes() 返回要查找的元素在数组中的位置,找到返回true
,否则false
let num = [1,2,3,4,5,6,7,8]
console.log(num.includes(5)); //true
console.log(num.includes(0)); //false
find() 返回匹配的第一个元素
const people = [
{
name: "Matt",
age: 27
},
{
name: "Nicholas",
age: 29
}
];
let A = people.find((element, index, array) => element.age < 28)
console.log(A); // {name: "Matt", age: 27}
(二)排序方法
reverse() 反方向排列数组
let num = [1, 2, 3, 4, 5]
num.reverse()
console.log(num); //[5, 4, 3, 2, 1]
sort() 是一个比较方法,判断谁挡在前面,默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
let num = [1, 2, 91, 31, 4, 5]
num.sort()
console.log(num); //[1, 2, 31, 4, 5, 91] 并不是简单将数字按大小排序
// 设置一个比较函数
function compare(a,b){
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
}
let num = [1, 2, 91, 31, 4, 5]
num.sort(compare)
console.log(num); //[1, 2, 4, 5, 31, 91] 可以实现纯数字大小排序
// 纯数字可以写简单一点
function compare(a, b) {
return a - b
}
// 或者直接
num.sort((a, b) => a - b)
// 使用map映射改善排序
// 需要被排序的数组
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
// 对需要排序的数字和位置的临时存储
var mapped = list.map(function(el, i) {
return { index: i, value: el.toLowerCase() };
})
// 按照多个值排序数组
mapped.sort(function(a, b) {
return +(a.value > b.value) || +(a.value === b.value) - 1;
});
// 根据索引得到排序的结果
var result = mapped.map(function(el){
return list[el.index];
});
(三)转换方法
join() 将数组转化为字符串
let word = ['a', 'b', 'c', 'd']
console.log(word.join()); // a,b,c,d 默认以逗号廉洁
console.log(word.join('')); //abcd 没有元素
console.log(word.join(' ')); // a b c d 以空格连接
console.log(word.join('+')); // a+b+c+d 以加号连接
(四)迭代方法
常用来迭代数组的方法(都不改变原数组)有如下:
- some()
- every()
- forEach()
- filter()
- map()
some()
对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.every((item, index, array) => item > 2);
console.log(someResult) // true
every()
对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false
forEach()
对数组每一项都运行传入的函数,没有返回值
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
// 执行某些操作
});
filter()
对数组每一项都运行传入的函数,函数返回 true
的项会组成数组之后返回
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3
map()
对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2