一、改變原數(shù)組的方法

1.push（） 末尾添加數(shù)據(jù)

語法: 數(shù)組名.push(數(shù)據(jù))

作用: 就是往數(shù)組末尾添加數(shù)據(jù)

返回值: 就是這個(gè)數(shù)組的長度

//push
var arr = [10, 20, 30, 40]
res = arr.push(20)
console.log(arr);//[10,20,30,40,20]
console.log(res);//5

2. pop（） 末尾出刪除數(shù)據(jù)

語法:數(shù)組名.pop()

作用: 就是從數(shù)組的末尾刪除一個(gè)數(shù)據(jù)

返回值: 就是你刪除的那個(gè)數(shù)據(jù)

//pop
var arr = [10, 20, 30, 40] 
res =arr.pop()
console.log(arr);//[10,20,30]
console.log(res);//40

3.unshift（） 頭部添加數(shù)據(jù)

語法: 數(shù)組名.unshift(數(shù)據(jù))

作用: 就是在數(shù)組的頭部添加數(shù)據(jù)

返回值: 就是數(shù)組的長度

 //pop
 var arr = [10, 20, 30, 40]
 res=arr.unshift(99)
 console.log(arr);//[99,10,20,30,40]
 console.log(res);//5

4.shift（） 頭部刪除數(shù)據(jù)

語法: 數(shù)組名.shift()

作用: 頭部刪除一個(gè)數(shù)據(jù)

返回值: 就是刪除掉的那個(gè)數(shù)據(jù)

//shift
 var arr = [10, 20, 30, 40]
 res=arr.shift()
 console.log(arr);[20,30,40]
 console.log(res);10

5.reverse（） 翻轉(zhuǎn)數(shù)組

語法: 數(shù)組名.reverse()

作用: 就是用來翻轉(zhuǎn)數(shù)組的

返回值: 就是翻轉(zhuǎn)好的數(shù)組

//reverse
var arr = [10, 20, 30, 40]
res=arr.reverse()
console.log(arr);//[40,30,20,10]
console.log(res);//[40,30,20,10]

6.sort（） 排序

語法一: 數(shù)組名.sort()                       會(huì)排序 會(huì)按照位排序

語法二: 數(shù)組名.sort(function (a,b) {return a-b})  會(huì)正序排列

語法三: 數(shù)組名.sort(function (a,b) {return b-a})  會(huì)倒序排列

//sort()
var arr = [2, 63, 48, 5, 4, 75, 69, 11, 23]
arr.sort()
console.log(arr);
arr.sort(function(a,b){return(a-b)})
console.log(arr);
arr.sort(function(a,b){return(b-a)})
console.log(arr);

7.splice（）  截取數(shù)組

語法一: 數(shù)組名.splice(開始索引,多少個(gè))

作用: 就是用來截取數(shù)組的

返回值: 是一個(gè)新數(shù)組 里面就是你截取出來的數(shù)據(jù)

語法二: 數(shù)組名.splice(開始索引,多少個(gè),你要插入的數(shù)據(jù))

作用: 刪除并插入數(shù)據(jù)

注意: 從你的開始索引起

返回值: 是一個(gè)新數(shù)組 里面就是你截取出來的數(shù)據(jù)

//splice() 語法一
var arr = [2, 63, 48, 5, 4, 75]
res = arr.splice(1,2)
console.log(arr);
console.log(res);
//******************************
//splice() 語法二
var arr = [2, 63, 48, 5, 4, 75]
res = arr.splice(1,1,99999,88888)
console.log(arr);
console.log(res);

二、不改變原數(shù)組的方法

1.concat（）  合并數(shù)組

語法: 數(shù)組名.concat(數(shù)據(jù))

作用: 合并數(shù)組的

返回值: 一個(gè)新的數(shù)組

//concat
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.concat(20,"小敏",50)
console.log(arr) 
console.log(res);

2.join（） 數(shù)組轉(zhuǎn)字符串

語法:數(shù)組名.join('連接符')

作用: 就是把一個(gè)數(shù)組轉(zhuǎn)成字符串

返回值: 就是轉(zhuǎn)好的一個(gè)字符串

//join
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.join("+")
console.log(arr)
console.log(res);

3.slice（）截取數(shù)組的一部分?jǐn)?shù)據(jù)

語法: 數(shù)組名.slice(開始索引,結(jié)束索引)

作用: 就是截取數(shù)組中的一部分?jǐn)?shù)據(jù)

返回值: 就是截取出來的數(shù)據(jù) 放到一個(gè)新的數(shù)組中

注意: 包前不好后 包含開始索引不包含結(jié)束索引

//slice
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.slice(1,4)
console.log(arr)
console.log(res);

4.indexOf 從左檢查數(shù)組中有沒有這個(gè)數(shù)值

語法一:數(shù)組名.indexOf(要查詢的數(shù)據(jù))

作用: 就是檢查這個(gè)數(shù)組中有沒有該數(shù)據(jù)

如果有就返回該數(shù)據(jù)第一次出現(xiàn)的索引

如果沒有返回 -1

語法二:數(shù)組名.indexOf(要查詢的數(shù)據(jù),開始索引)

//indexOf 語法一
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10)
console.log(arr)
console.log(res);
//*************************************
//indexOf  語法二
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10,1)
console.log(arr)
console.log(res);

5.lastIndexOf 從右檢查數(shù)組中有沒有這個(gè)數(shù)值

語法一:數(shù)組名.indexOf(要查詢的數(shù)據(jù))

作用: 就是檢查這個(gè)數(shù)組中有沒有該數(shù)據(jù)

如果有就返回該數(shù)據(jù)第一次出現(xiàn)的索引

如果沒有返回 -1

語法二:數(shù)組名.lastIndexOf(要查詢的數(shù)據(jù),開始索引)

//lastIndexOf 語法一
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.lastIndexOf(50)
console.log(arr) 
console.log(res);
//*************************************
//lastIndexOf 語法二
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.lastIndexOf(50,4)
console.log(arr)
console.log(res);

三、ES6新增的數(shù)組方法

1. forEach()   用來循環(huán)遍歷的 for

語法: 數(shù)組名.forEach(function (item,index,arr) {})

 + item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

 + index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

 + arr : 這個(gè)表示的是原數(shù)組

作用: 就是用來循環(huán)遍歷數(shù)組的 代替了我們的for

返回值: 沒有返回值 如果真的說要有返回值就是undefined

//forEach
var arr = [1, 2, 3, 4, 5]
console.log('原始數(shù)組 : ', arr);
var res = arr.forEach(function (item, index, arr) {
    console.log(item, "------", index, "-------", arr);
})

2.map  映射數(shù)組的

語法: 數(shù)組名.map(function (item,index,arr) {})

+ item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

+ index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

+ arr : 這個(gè)表示的是原數(shù)組

作用: 就是用來映射

返回值: 必然是一個(gè)數(shù)組 一個(gè)映射完畢的數(shù)組；這個(gè)數(shù)組合原數(shù)組長度一樣

注意: 要以return的形式執(zhí)行返回條件

//map
var arr = [1, 2, 3, 4, 5]
console.log('原始數(shù)組 : ', arr);
var res = arr.map(function (item) {
    return item*1000
})
console.log(res);

3.filter  過濾數(shù)組

語法: 數(shù)組名.filter(function (item,index,arr) {})

 + item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

 + index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

 + arr : 這個(gè)表示的是原數(shù)組

作用: 用來過濾數(shù)組的

返回值: 如果有就是過濾(篩選)出來的數(shù)據(jù) 保存在一個(gè)數(shù)組中；如果沒有返回一個(gè)空數(shù)組

注意: 要以return的形式執(zhí)行返回條件

//filter
var arr = [1, 2, 3, 4, 5]
console.log('原始數(shù)組 : ', arr);
var res = arr.filter(function (item) {
    return item > 2
})
console.log(res);

4.every  判斷數(shù)組是不是滿足所有條件

語法: 數(shù)組名.every(function (item,index,arr) {})

+ item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

+ index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

+ arr : 這個(gè)表示的是原數(shù)組

作用: 主要是用來判斷數(shù)組中是不是 每一個(gè) 都滿足條件

     只有所有的都滿足條件返回的是true

     只要有一個(gè)不滿足返回的就是false

返回值: 是一個(gè)布爾值

注意: 要以return的形式執(zhí)行返回條件

//every
var arr = [1, 2, 3, 4, 5]
console.log('原始數(shù)組 : ', arr);
var res = arr.every(function (item) {
    return item > 0
})
console.log(res);//打印結(jié)果  true

5.some（） 數(shù)組中有沒有滿足條件的

語法: 數(shù)組名.some(function (item,index,arr) {})

+ item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

+ index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

+ arr : 這個(gè)表示的是原數(shù)組

作用: 主要是用來判斷數(shù)組中是不是 每一個(gè) 都滿足條件

     只有有一個(gè)滿足條件返回的是true

     只要都不滿足返回的就是false

返回值: 是一個(gè)布爾值

注意: 要以return的形式執(zhí)行返回條件

//some
var arr = [1, 2, 3, 4, 5]
console.log('原始數(shù)組 : ', arr);
var res = arr.some(function (item) {
    return item > 3
})
console.log(res);//true

6.find（）用來獲取數(shù)組中滿足條件的第一個(gè)數(shù)據(jù)

語法: 數(shù)組名.find(function (item,index,arr) {})

+ item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

+ index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

+ arr : 這個(gè)表示的是原數(shù)組

作用: 用來獲取數(shù)組中滿足條件的數(shù)據(jù)

返回值: 如果有 就是滿足條件的第一個(gè)數(shù)據(jù)；如果沒有就是undefined

注意: 要以return的形式執(zhí)行返回條件

//find
var arr = [1, 2, 3, 4, 5]
console.log('原始數(shù)組 : ', arr);
var res = arr.find(function (item) {
    return item > 3
})
console.log(res)//4

7.reduce（）疊加后的效果       

語法: 數(shù)組名.reduce(function (prev,item,index,arr) {},初始值)

+ prev :一開始就是初始值 當(dāng)?shù)谝淮斡辛私Y(jié)果以后；這個(gè)值就是第一次的結(jié)果

+ item : 這個(gè)表示的是數(shù)組中的每一項(xiàng)

+ index : 這個(gè)表示的是每一項(xiàng)對應(yīng)的索引

+ arr : 這個(gè)表示的是原數(shù)組

作用: 就是用來疊加的

返回值: 就是疊加后的結(jié)果

注意: 以return的形式書寫返回條件

//reduce
var arr = [1, 2, 3, 4, 5]
var res = arr.reduce(function (prev, item) {
    return prev *= item
}, 1)
console.log(res);//120

總結(jié) 

到此這篇關(guān)于js數(shù)組常用19種方法的文章就介紹到這了,更多相關(guān)js數(shù)組常用方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論