Js基礎回顧--Array常用的方法
阿新 • • 發佈：2022-03-06
陣列常用方法
1 concat()
concat() 方法用於連線兩個或多個數組。該方法不會改變原陣列，返回連線生成的陣列。
let arr1 = \[1,2\];
let arr2 \= \[3,4,5\];
let arr3 \= arr1.concat(arr2);
console.log(arr1); //\[1, 2\]
console.log(arr3); //\[1, 2, 3, 4, 5\]
2 join()
join() 方法用於把陣列中的所有元素放入一個字串。元素是通過指定的分隔符進行分隔的，預設使用','號分割，不改變原陣列。
let arr = \[1,2,3\]; console.log(arr.join()); //1,2,3 console.log(arr.join('\-'));//1-2-3 console.log(arr); //\[1,2,3\]
3 slice()
返回一個新的陣列，包含從原陣列從 start 到 end （包頭不包尾）的元素。該方法不會修改原陣列。
let arr = \[1,2,3,4,5\];
console.log(arr.slice(1,3));//\[2,3\]
console.log(arr); //\[1,2,3,4,5\]
4 push()*
push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。會改變原陣列。
let arr = \['a','b','c','d'\]; let x\=arr.push('e'); console.log(x); //5 console.log(arr); //\['a','b','c','d','e'\];
5 pop()*
pop() 方法用於刪除並返回陣列的最後一個元素。會改變原陣列。
let arr = \['a','b','c','d'\];
let x\=arr.pop();
console.log(x); //d
console.log(arr); //\['a','b','c'\];
6 unshift()*
unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度。改變原陣列。
let arr = \['a','b','c','d'\]; let x\=arr.unshift('e'); console.log(x); //5 console.log(arr); //\['e','a','b','c'\];
7 shift()*
shift() 方法用於刪除並返回陣列的第一個元素。改變原陣列。
let arr = \['a','b','c','d'\];
let x\=arr.shift();
console.log(x); //a
console.log(arr); //\['b','c','d'\];
8 splice()*
splice() 方法可刪除從 index 處開始的零個或多個元素，並用引數列表中宣告的一個或多個值來替換那些被刪除的元素。返回被刪除元素的陣列。splice() 方法會直接對陣列進行修改。
//不刪除元素，相當於插入元素。從索引2開始刪除0個元素，用'hello','world'替代
let arr = \['a','b','c','d'\];
let x\=arr.splice(2,0,'hello','world');
console.log(x);//\[\]
console.log(arr);//\['a','b','hello','world','c','d'\];
//刪除元素，並替換。從索引2開始刪除2個元素，用'hello','world'替代
let arr1 = \['a','b','c','d'\];
let x1\=arr1.splice(2,2,'hello','world');
console.log(x1);//\['c','d'\]
console.log(arr1);//\['a','b','hello','world'\];
9 substring() 和 substr()
substring()和substr()都用於擷取字串的一部分，用法如下：
let str='abcdefgh';
//當為一個引數時兩個方法都返回從index擷取到最後
console.log(str.substr(2)) //cdefgh
console.log(str.substring(2))//cdefgh
//substr(startindex,length),從startindex擷取指定長度
console.log(str.substr(2,4)); //cdef
//substr(startindex,endindex),從startindex擷取到endindex,包頭不包尾
console.log(str.substring(2,4));//cd
console.log(str) //abcdefgh
10 sort()*
sort()會按照元素首字母的 Unicode code 位置排序，預設升序。sort()會改變原陣列。
let arr=\['c','dddd','bbb','ee','aa'\];
console.log(arr.sort()); //\['aa', 'bbb', 'c', 'dddd', 'ee'\]
console.log(arr); //\['aa', 'bbb', 'c', 'dddd', 'ee'\]
let numArr\=\[10,2,30,15,23\];
console.log(numArr.sort());//\[10, 15, 2, 23, 30\]
console.log(numArr); //\[10, 15, 2, 23, 30\]
有時候我們排序的規則並不是按照預設方式的，如上邊的例子中需求是：arr按照字串的長度排序，numArr按照大小進行排序。我們可以重寫排序規則，如下：
//按照字串的長度排序
let arr = \['c', 'dddd', 'bbb', 'ee', 'aa'\];
arr.sort((str1, str2) \=> {
return str1.length - str2.length;
})
console.log(arr); //\["c", "ee", "aa", "bbb", "dddd"\]
//按照大小進行排序
let numArr = \[10, 2, 30, 15, 23\];
numArr.sort((num1, num2) \=> {
return num1 - num2;
})
console.log(numArr); // \[2, 10, 15, 23, 30\]
11 reverse()*
reverse() 方法用於顛倒陣列中元素的順序。返回的是顛倒後的陣列，會改變原陣列。
let arr=\["a", "b", "c", "d", "e"\]
console.log(arr.reverse());//\["e", "d", "c", "b", "a"\]
console.log(arr); //\["e", "d", "c", "b", "a"\]
12 indexOf() 和 lastIndexOf()
indexOf()和lastIndexOf()用於查詢元素的位置，可以接受1/2個引數，用法如下：
let arr=\["a", "b", "c", "d", "e","a"\]
//indexOf
console.log(arr.indexOf("a"));//查詢第一個a的索引 0
console.log(arr.indexOf("a",2));//在索引2(包含)之後查詢 5
//lastIndexOf
console.log(arr.lastIndexOf("a"));//查詢最後一個a的索引 5
console.log(arr.lastIndexOf("a",2));//在索引2(包含)之前查詢 0
13 every()和some()
every:所有元素都滿足給定條件的話返回true；some：只要有一個元素滿足給定條件就返回true，用法如下：
let arr=\[5,12,6,7,9\];
//判斷是否所有元素都大於10，只有所有元素都滿足條件才返回true
let res1=arr.every((ele,index,array)=>{
return ele<10
})
console.log(res1);//false
//判斷是否有元素大於10，只要有一個元素滿足條件就返回true
let res2=arr.some((ele,index,array)=>{
return ele<10
})
console.log(res2);//true
14 filter()
篩選陣列中滿足給定條件的元素，返回滿足條件元素組成的陣列。不會改變原陣列。
let arr=\[5,12,6,7,9\];
//過濾陣列，返回滿足條件的元素組成的陣列
let res=arr.filter((ele,index,array)=>{
return ele<10;
})
console.log(res);// \[5, 6, 7, 9\]
console.log(arr);//\[5,12,6,7,9\]
15 map()
陣列的每個元素都執行指定操作，返回各個元素執行結果組成的陣列。該方法不改變原陣列。
let arr=\[5,12,6,7,9\];
//遍歷陣列，每一個元素都執行指定操作，返回一個新的陣列
res=arr.map((ele,index,array)=>{
return ele+1;
})
console.log(res);//\[6, 13, 7, 8, 10\]
console.log(arr);//\[5,12,6,7,9\]
16 forEach()
純粹的遍歷陣列，無返回值。該方法不改變原陣列。
let arr=\[5,12,6,7,9\];
//單純的進行陣列遍歷,列印陣列中的每一個元素
arr.forEach((ele,index,arrya)=>{
console.log(ele);
})
//列印：5,12,6,7,9
ES6新增方法
01 find()和findIndex()
let arr=\[15,12,6,7,9\];
//查詢第一個小於10的元素並返回該元素
res=arr.find((ele,index,array)=>{
return ele<10;
})
console.log(res);//6
//查詢第一個小於10的元素並返回該元素的索引
resindex=arr.findIndex((ele,index,array)=>{
return ele<10;
})
console.log(resindex);//2
02 fill()*
用固定值替換陣列中的元素，可以指定替換元素的索引範圍。該方法會改變原陣列。
//不指定索引範圍
let arr=\["apple","peer","banana","orange"\]
arr.fill("mango");
console.log(arr);//\["mango", "mango", "mango", "mango"\]
//指定索引範圍 arr.fill(value,startindex,endindex)
let arr1=\["apple","peer","banana","orange"\]
arr1.fill("mango",2,4);
console.log(arr1);//\["apple", "peer", "mango", "mango"\]
03 includes()
判斷陣列中是否存在某元素，引數：查詢的值、起始位置。使用indexOf 不能判斷是否包含NaN。
let arr=\[2,1,5,4,3,NaN\];
console.log(arr.includes(2));//true
//arr.includes(ele,startindex) 從索引1開始搜尋元素
console.log(arr.includes(2,1)); //false
console.log(arr.includes(6)); //false
console.log(arr.indexOf(NaN));//\-1，因為NaN!==NaN
console.log(arr.includes(NaN)); //true
04 Array.from()
將類似陣列的物件（array-like object）和可遍歷（iterable）的物件轉為真正的陣列。
//1.類陣列轉為陣列
function foo(){
let arr\= Array.from(arguments);
console.log(arr);
}
foo(1,2,3,4,5) //\[1, 2, 3, 4, 5\]
//2.可遍歷物件轉成陣列
let myset=new Set();
myset.add("a");
myset.add("b");
myset.add("c");
let arr\=Array.from(myset);
console.log(arr);//\["a", "b", "c"\]
//3.陣列去重小技巧
let res=Array.from(new Set(\[1,1,2,2,2,3\]))
console.log(res);//\[1,2,3\]
本文轉自 https://www.cnblogs.com/wyy1234/p/11372134.html，如有侵權，請聯絡刪除。