常用的数组方法
数组的基本操作,可从用于增删查、用于排序、用于迭代(遍历)几个方面进行记忆
增加元素
push()
向数组中添加元素
let colors = ["yellow"];
colors.push("red", "green"); // 添加元素
console.log(colors ) // [ 'yellow','red', 'green' ]
unshift()
向数组开头添加元素
let colors = ["yellow"];
colors.unshift("red", "green"); // 从数组开头位置处添加
console.log(colors ); // [ 'red', 'green', 'yellow' ]
splice()
(开始位置,要删除元素的数量,插入的元素) 传入三个参数,该方法既可用于添加元素,也可以删除元素。
let num1 = [1,2,3,4,5]
let num2 = [1,2,3,4,5]
let num3 = [1,2,3,4,5]
num1.splice(0,2) // 返回[1,2]
num2.splice(3) // 返回[4,5]
num3.splice(2,1,'h','i') //返回[3],原数组nums3为[1,2,'h','i',4,5]
concat()
数组的拼接,不会影响原始数组
let colors = ["red", "green"];
let colors2 = colors.concat("yellow", ["black"]);
console.log(colors); // ["red", "green"]
console.log(colors2); // ["red", "green", "yellow", "black"]
注意:push()、unshift()、splice()方法均在原数组上直接修改,concat()则不会改变原始数组。
删除元素
pop()
删除数组的最后一项元素shift()
删除数组的第一项元素splice()
(开始位置,删除的元素数量),返回被删除的元素slice()
删除数组中的一个或者多个元素,并构成新的数组返回
let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors) // [ 'red', 'green', 'blue', 'yellow', 'purple' ]
console.log(colors2); //[ 'green', 'blue', 'yellow', 'purple' ]
console.log(colors3); // [ 'green', 'blue', 'yellow' ]
注意:pop()、shift()、splice()方法均在原数组上直接修改,slice()则不会。
查找元素
indexOf()
返回要查找的元素在数组中的位置,如果没有找到返回-1
let numbers = [1,2,3,4,5,4,3,2,1]
numbers.indexOf(4) //3
includes()
判断数组中是否含有查找的元素,找到返回true
,否则返回false
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
find()
返回第一个匹配的元素- 参数 (currentValue, index, arr),其中currentValue为必需的,当前元素;index为可选,当前元素的索引值;arr为可选,当前元素所属的数组对象
const people = [
{
name: "Matt",
age: 27
},
{
name: "Nicholas",
age: 29
}
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}
注意:indexOf()、includes()、find() 方法不会改变原始数组
排序方法
数组有两个方法可以用来对元素重新排序:
reverse()
将数组进行反转sort()
接受一个比较函数,用于判断哪个值应该排在前面
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15
注意:sort()、reverse() 方法会改变原始数组
转换方法
常见的转换方法有:join()
- join()方法接收一个参数,即字符串分隔符
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue
注意:join()
方法不会改变原始数组
迭代(遍历)方法
常用来迭代数组的方法(都不改变原数组)有如下:
- some()
- 对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; let someResult = numbers.some((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
- reduce()
坚持每天复习一点点js的内容。