一饶米、操作方法
數(shù)組基本操作可以歸納為 增、刪睦刃、改砚嘴、查,需要留意的是哪些方法會對原數(shù)組產(chǎn)生影響涩拙,哪些方法不會
增
下面前三種是對原數(shù)組產(chǎn)生影響的增添方法际长,第四種則不會對原數(shù)組產(chǎn)生影響
push()
unshift()
splice()
concat()
push()
push()方法接收任意數(shù)量的參數(shù),并將它們添加到數(shù)組末尾兴泥,返回數(shù)組的最新長度
let colors = []; // 創(chuàng)建一個數(shù)組
let count = colors.push("red", "green"); // 推入兩項
console.log(count) // 2
unshift()
unshift()在數(shù)組開頭添加任意多個值工育,然后返回新的數(shù)組長度
let colors = new Array(); // 創(chuàng)建一個數(shù)組
let count = colors.unshift("red", "green"); // 從數(shù)組開頭推入兩項
alert(count); // 2
splice()
傳入三個參數(shù),分別是開始位置搓彻、0(要刪除的元素數(shù)量)如绸、插入的元素,返回空數(shù)組
let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []
concat()
首先會創(chuàng)建一個當前數(shù)組的副本旭贬,然后再把它的參數(shù)添加到副本末尾怔接,最后返回這個新構建的數(shù)組,不會影響原始數(shù)組
let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]
刪
下面三種都會影響原數(shù)組稀轨,最后一項不影響原數(shù)組:
pop()
shift()
splice()
slice()
pop()
pop()?方法用于刪除數(shù)組的最后一項扼脐,同時減少數(shù)組的?length?值,返回被刪除的項
let colors = ["red", "green"]
let item = colors.pop(); // 取得最后一項
console.log(item) // green
console.log(colors.length) // 1
shift()
shift()方法用于刪除數(shù)組的第一項奋刽,同時減少數(shù)組的?length?值瓦侮,返回被刪除的項
let colors = ["red", "green"]
let item = colors.shift(); // 取得第一項
console.log(item) // red
console.log(colors.length) // 1
splice()
傳入兩個參數(shù),分別是開始位置杨名,刪除元素的數(shù)量脏榆,返回包含刪除元素的數(shù)組
let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 刪除第一項
console.log(colors); // green,blue
console.log(removed); // red,只有一個元素的數(shù)組
slice()
slice() 用于創(chuàng)建一個包含原有數(shù)組中一個或多個元素的新數(shù)組台谍,不會影響原始數(shù)組
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
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow
改
即修改原來數(shù)組的內(nèi)容须喂,常用splice
splice()
傳入三個參數(shù)吁断,分別是開始位置,要刪除元素的數(shù)量坞生,要插入的任意多個元素仔役,返回刪除元素的數(shù)組,對原數(shù)組產(chǎn)生影響
let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "red", "purple"); // 插入兩個值是己,刪除一個元素
console.log(colors); // red,red,purple,blue
console.log(removed); // green又兵,只有一個元素的數(shù)組
查
即查找元素,返回元素坐標或者元素值
indexOf()
includes()
find()
indexOf()
返回要查找的元素在數(shù)組中的位置卒废,如果沒找到則返回-1
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3
includes()
返回要查找的元素在數(shù)組中的位置沛厨,找到返回true,否則false
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
find()
返回第一個匹配的元素
const people = [
? ? {
? ? ? ? name: "Matt",
? ? ? ? age: 27
? ? },
? ? {
? ? ? ? name: "Nicholas",
? ? ? ? age: 29
? ? }
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}
二摔认、排序方法
數(shù)組有兩個方法可以用來對元素重新排序:
reverse()
sort()
reverse()
顧名思義逆皮,將數(shù)組元素反向排列
let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1
sort()
sort()方法接受一個比較函數(shù),用于判斷哪個值應該排在前面
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
三参袱、轉換方法
常見的轉換方法有:
join()
join() 方法接收一個參數(shù)电谣,即字符串分隔符,返回包含所有項的字符串
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue
四抹蚀、迭代方法
常用來迭代數(shù)組的方法(都不改變原數(shù)組)有如下:
some()
every()
forEach()
filter()
map()
some()
對數(shù)組每一項都運行傳入的函數(shù)剿牺,如果有一項函數(shù)返回 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()
對數(shù)組每一項都運行傳入的函數(shù)环壤,如果對每一項函數(shù)都返回 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()
對數(shù)組每一項都運行傳入的函數(shù),沒有返回值
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
? ? // 執(zhí)行某些操作
});
filter()
對數(shù)組每一項都運行傳入的函數(shù)郑现,函數(shù)返回?true?的項會組成數(shù)組之后返回
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()
對數(shù)組每一項都運行傳入的函數(shù)潜索,返回由每次函數(shù)調用的結果構成的數(shù)組
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()?
reduce() 方法接收一個函數(shù)作為累加器,數(shù)組中的每個值(從左到右)開始縮減懂酱,最終計算為一個值。
reduce() 可以作為一個高階函數(shù)誊抛,用于函數(shù)的 compose列牺。
注意:?reduce() 對于空數(shù)組是不會執(zhí)行回調函數(shù)的。
array.reduce(total, currentValue, currentIndex, arr)
參數(shù)描述:
total必需拗窃。初始值, 或者計算結束后的返回值瞎领。
currentValue必需。當前元素
currentIndex可選随夸。當前元素的索引
arr可選九默。當前元素所屬的數(shù)組對象。
舉列子:
? ? ? ? ? ? const key = [ { key:1},{key:2},{key:3} ]
? ? ? ? ? ? const keyArr = key.reduce(function(arr:any,primaryKey:any){
? ? ? ? ? ? ? ? arr.push(primaryKey.key);
? ? ? ? ? ? ? ? return arr;
? ? ? ? ? ? },[]);
console.log(keyArr) // [1,2,3]
場景一:求和
var numbers = [65, 44, 12, 4];
function getSum(total, num) {? ? return total + num}
numbers.reduce(getSum)=125
場景二:
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]
場景三:計算數(shù)組中每個元素出現(xiàn)的次數(shù)
let arr2 = ['a','b','c','d','a','b','c','a','b','a']
let num = arr2.reduce((prev,cur)=>{
? ? if(cur in prev){//如果prev(初始對象)包含cur(當前元素),數(shù)量累加
? ? ? ? prev[cur]++
? ? }else{
? ? ? ? prev[cur] = 1
? ? }
? ? return prev
},{});//初始值需要設置一個空的對象
console.log(num);// {a: 4, b: 3, c: 2, d: 1}
場景四:將二維數(shù)組轉化為一維數(shù)組
let arr4 = [[0, 1], [2, 3], [4, 5]]
let newArr1 = arr4.reduce((prev,cur)=>{
? ? return prev.concat(cur)
},[])
console.log(newArr1); // [0, 1, 2, 3, 4, 5]