数组是一个存储数据的容器,数组的方法主要用于对数组元素进行增删改查到排序、转换和循环操作。需要注意的是,有些方法会有返回值,有些方法会改变原数组。
增添方法:
push()
:在数组末尾添加一个或多个元素,并返回数组的新长度。unshift()
:在数组开头添加一个或多个元素,并返回新数组的长度。splice()
:在指定位置插入或删除元素。传入三个参数:开始位置、删除的元素数量、插入的元素。返回被删除的元素组成的数组。concat()
:连接两个或多个数组或元素,返回一个新数组,不会影响原数组。
javascript
复制代码
// push
let colors = [];
let count = colors.push("red", "green");
console.log(count); // 2
// unshift
let count2 = colors.unshift("blue");
console.log(count2); // 3
// splice
let removed = colors.splice(1, 0, "yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green"]
console.log(removed); // []
// concat
let colors2 = colors.concat("pink", ["black", "brown"]);
console.log(colors2); // ["red", "yellow", "orange", "green", "pink", "black", "brown"]
删除方法
pop()
:移除数组末尾的一个元素,返回被移除的元素。shift()
:移除数组开头的一个元素,返回被移除的元素。splice()
:删除指定位置的元素。传入两个参数:开始位置和删除元素的数量,返回删除元素的数组。slice()
:截取数组元素,通过传入起始和结束索引来截取数组元素,返回截取出来的元素,不改变原数组。
// pop
let colors = ["red", "green"];
let item = colors.pop();
console.log(item); // "green"
console.log(colors); // ["red"]
// shift
item = colors.shift();
console.log(item); // "red"
console.log(colors); // []
// splice
colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1);
console.log(colors); // ["red", "blue"]
console.log(removed); // ["green"]
// slice
colors = ["red", "green", "blue", "yellow"];
let colors2 = colors.slice(1, 3);
console.log(colors2); // ["green", "blue"]
修改方法
splice()
:可以在数组中插入或删除元素。传入三个参数:开始位置、删除的元素数量、插入的元素。返回被删除的元素组成的数组。
javascript
复制代码
let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "yellow", "purple");
console.log(colors); // ["red", "yellow", "purple", "blue"]
console.log(removed); // ["green"]
查找方法
indexOf()
:查找数组中第一个符合条件的元素,并返回它的索引号,如果没有找到则返回-1
。includes()
:判断数组是否包含指定的元素,返回true
或false
。find()
:查找数组中第一个符合条件的元素,并返回该元素,如果没有找到则返回undefined
;findIndex()
:返回第一个满足条件的元素的索引,如果没有找到则返回-1
。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
const people = [
{
name: "Matt",
age: 27
},
{
name: "Nicholas",
age: 29
}
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}
排序方法
reverse()
:反转数组中元素的顺序,会修改原数组。sort()
:对数组元素进行排序。可以传入一个比较函数,根据前一个元素是否大于后一个元素判断是否交换位置,进行升序和降序的排列。
// 升序
const numbers = [10, 5, 40, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出:[5, 10, 25, 40]
// 降序 把 a 和 b 的位置调换
numbers.sort((a, b) => b - a);
转换方法
join()
:将数组根据分隔符拼接成字符串,返回包含所有项的字符串。
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
循环方法
some()
:循环数组,在数组中只要有一个元素符合条件,这个方法就返回 true,否则返回 false;every()
:循环数组,在数组中所有元素都符合条件,这个方法就返回 true,否则返回 false;forEach()
:对数组中的每个元素执行给定的函数,无返回值。filter()
:过滤出数组中符合条件的元素,组成一个新数组返回。map()
:循环数组,组成一个新的数组返回。reduce()
:它的主要作用是遍历数组中的每一个元素,每遍历一次把返回结果作为下一次遍历初始值重新累计,最终返回一个累计完后的值; -reduce传参和接收参数: 它需要传入两个参数:1.累积器,保存每次累积后的结果;2.传入一个初始值(可选); 接收参数:上一次值和当前值; arr.reduce((上一次值,当前值)=>{},初始值}
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
console.log(someResult) // 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
const array = [5, 12, 8, 130, 44];
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
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 数组求和
var arr = [1, 2, 5, 4];
var sum = arr.reduce((prev,current)=>x+y)
console.log( sum ); //求和,12
// reduce 遍历规律
// 上一次值 当前值 返回值(第一次循环)
// 1 2 3
// 上一次值 当前值 返回值(第二次循环)
// 3 5 8
//reduce 数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
总结
- 改变原数组的方法:
push()
,pop()
,shift()
,unshift()
,splice()
,sort()
,reverse()
- 不会改变原数组的方法:
concat()
,slice()
,map()
,filter()
,reduce()
,find()
,findIndex()
,includes()
,indexOf()
,every()
,some()
,join()
,forEach()