陣列中常用的方法總結

*唔西迪西*發表於2020-09-23

棧方法:都會改變原陣列
新增:push,unshift
刪除:shift,pop
1.push()後增
push()方法可以向陣列後新增一個新的元素,並返回新陣列的長度。
末尾新增,返回長度,改變原陣列

var a = [1,2,3]
var b = a.push(4)
 
console.log(a)  // [1,2,3,4] 
console.log(b)  // 4

2.unshift()前增
unshift()可以向陣列前新增一個或多個元素,並返回新的長度
首部新增,返回長度,改變原陣列

var a = [1,2,3]
var b = a.unshift(4,9)
 
console.log(a)  // [4,9,1,2,3] 
console.log(b)  // 5

3.pop()後刪
pop()用於刪除並返回最後一個元素
尾部刪除,返回被刪除的元素,改變原陣列

var a = [1,2,3]
var b = a.pop()
 
console.log(a) // [1,2]
console.log(b) // 3

4.shift()前刪
shift()用於刪除並返回首個元素
刪除首個元素,返回被刪除的元素,改變原陣列
5.splice()修改刪除
splice(index,length,add1,add2…,addn)表示從index開始刪除length個元素,並從index開始新增元素1~n,放回被刪除的元素組成的陣列。
對陣列進行刪除修改,返回被刪除的元素組成的陣列,改變原陣列

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)
 
console.log(a)  // [1,3,[2,3,4],5,3]
console.log(b)  // [2]

6.concat()拼接
concat()方法用來合併兩個或多個陣列
合併兩個或多個陣列,返回新陣列,不會改變原陣列

var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)
 
console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5] 

7.slice()剪下
slice(startIndex,endIndex)返回從startIndex開始(包括),到endIndex(不包括)之間的原屬組成的陣列
返回新陣列,不改變原陣列

var a = [1,2,3]
var b = a.slice(0,1)
// 不填引數則表示剪下整個陣列  
var c = a.slice() 
console.log(a) // [1,2,3] 
console.log(b) // [1]
console.log(c) // [1,2,3]    
console.log(a===c)  // false // 注意 a !== c 
 
// 負數表示從後往前數
var d = a.slice(-1,-2)   
console.log(d) // []   從左向右擷取,所以說為[]
 
var e = a.slice(-1)  
console.log(e)  // [3]

8.join()
join()方法用來將陣列轉換為字串
不改變原陣列,返回轉換後的字串

var a = [1,2,3,4,5]
console.log(a.join(','))  // 1,2,3,4,5
console.log(a)  // [1,2,3,4,5]

9.sort()排序
字母的話按照ascii碼排序
改變原陣列,返回排序後的陣列

var a = ['a','b','d','c']
 
console.log(a.sort())  // ['a','b','c','d']
console.log(a)  // ['a','b','c','d']

10.reverse()顛倒順序
reverse()方法用於顛倒陣列中元素的順序
返回的是顛倒後的陣列,會改變原陣列

var a  = [1,3,2,7,6]
 
console.log(a.reverse())  // [6,7,2,3,1]
console.log(a)  // [6,7,2,3,1]

11.indexOf()和lastIndexOf()
indexOf(某元素,startIndex)從startIndex開始,查詢某元素在陣列中的位置,若存在則返回第一個位置的下標,否則返回-1

lastIndexOf(某元素,startIndex)和indexOf()相同,區別在於從尾部向首部查詢
不會改變原陣列,返回找到的index,否則返回-1
若不使用下標,則一般通過includes()方法代替indexOf()

var a = [1,2,4,3,4,5]
 
console.log(a.indexOf(4))  // 2
console.log(a.indexOf(4,3)) // 4

12.filer()過濾
filer()方法返回陣列中滿足條件的元素組成的新陣列,原陣列不變
filer()的引數是一個方法

var a = [1,2,3,4,11]
// 第一個引數為一個方法,有三個引數,current:當前值 index:當前值下標 array:這個陣列物件
var b = a.filter(function(current,index,array){
    return current < 10
})
 
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]

13.map()格式化陣列
map()方法根據需求格式化原陣列,返回格式化的陣列。原陣列不變

var a = [1,2,3,4,5]
// 引數同filter方法
var b = a.map(function(current,index,array){
    return current + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

14.every()
對陣列的每一項都執行給定的函式,若每一項都返回true,則返回true

var a = [1,2,3,4,5]
 
var b = a.every(function(current,index,array){
       return current < 6
})
 
var c = a.every(function(current,index,array){
       return current < 3
})
console.log(b)  // true 
console.log(c)  // false 

15.some()
對陣列的每一項都執行給定的函式,若存在一項或多項返回true,則返回true

var a = [1,2,3,4,5]
 
var b = a.some(function(current,index,array){
       return current > 4
})
 
var c = a.some(function(current,index,array){
       return current > 5
})
console.log(b)  // true 
console.log(c)  // false 

16.forEach陣列遍歷
遍歷整個陣列,中途不能中斷

var arr = ['a','b','c']
var copy = []
arr.forEach(function(item){
     copy.push(item)   
})
console.log(copy)

es6中新增的方法
1.find()
找到陣列中第一次滿足條件的元素,並返回,若找不到則返回undefined.不改變原陣列

和filter()方法的區別在於:filter返回值是所有滿足條件的元素組成的陣列,
一般在需要使用找到的元素時,用find()方法

var a = [1,2,3,4]
// b在下面需要使用,則一般用find
var b = a.find(function(ele,index,array){
    return ele == 1
})
 
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判斷元素是否存在
// 若果是簡單陣列(非物件陣列),則一般使用Array.includes(value)方法
// 如果為物件陣列,則可以使用Array.some()方法
 
var a = [1,2,3]
console.log(a.includes(1))  // true
 
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
 
console.log(a.some(function(ele){
    return ele.name == 'xiaoming'
}))                            // true
 

2.findIndex()方法
findIndex()的作用同indexOf(),返回第一個滿足條件的下標,並停止尋找。
區別是findIndex() 的引數為一個回撥函式,且一般用於物件陣列

var a = [1,2,3,4]
 
var b = a.findIndex(function(ele,index,array){
    return ele === 2
})
 
var c = a.indexOf(2)  
 
console.log(a)  // [1,2,3,4]
console.log(b)  // 1
console.log(c)  // 1

3.includes()
includes()方法,返回一個布林值。 引數是一個value,一般用於簡單陣列。
對於複雜陣列,則可以使用some()方法替代includes()方法

var a = [1,2,3]
console.log(a.includes(1))  // true

4.Array.isArray()方法
用來判斷一個元素是否為陣列

Array.isArray([])  // true
Array.isArray({})  // false

相關文章