梳理總結(jié)25個(gè)JavaScript數(shù)組操作方法實(shí)例
1.刪除數(shù)組重復(fù)項(xiàng)
var array=[1,3,4,5,6,4,3] var setArray1=Array.from(new Set(array)) console.log(setArray1) // [1, 3, 4, 5, 6] var setArray2=[...new Set(array)] console.log(setArray2) // [1, 3, 4, 5, 6]
2. 獲取數(shù)組的片段
array.splice(start、remove or update、replace value)，從數(shù)組索引哪里開始、操作多少個(gè)元素、可選項(xiàng)：替換值。
var array=[1,2,3,4,5,6] array.splice(0,3,11,22,33) // [1, 2, 3] console.log(array) // [11, 22, 33, 4, 5, 6]
var array=[1,2,3,4,5,6] array.splice(0,3,11,22) // [1, 2, 3] console.log(array) // [11, 22, 4, 5, 6]
var array=[1,2,3,4,5,6] array.splice(0,1) // [1] console.log(array) // [2, 3, 4, 5, 6]
var array=[1,2,3,4,5,6] array.splice(2) // [3, 4, 5, 6] console.log(array) //[1, 2]
3.Array.from 達(dá)到 .map 的效果
var array=[{name:"one",value:1},{name:"two",value:2},{name:"three",'value':3}]
Array.from(array,({name}) => name)
console.log(array) // ["one", "two", "three"]
Array.from(array,({value}) => value)
console.log(array) // [1, 2, 3]4.置空數(shù)組
var array=[1,2,3,4,5,6] array.length=0 console.log(array) // []
5. 將數(shù)組轉(zhuǎn)換為對(duì)象
var array=['one','two','three']
var obj={...array}
console.log(obj) // {0: "one", 1: "two", 2: "three"}6. 用數(shù)據(jù)填充數(shù)組
var array=new Array(10).fill(0) console.log(array)// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
7. 數(shù)組合并
array.concat() ，concat()方法創(chuàng)建一個(gè)新的數(shù)組，而不改變?cè)瓉淼臄?shù)組
array.concat( ...array1，...array2，...]) 接受多個(gè)要連接的數(shù)組。
var array1=[1,2,3] var array2=[4,5,6] var array=[...array1,...array2] console.log(array) // [1, 2, 3, 4, 5, 6] var array=array1.concat(array2) console.log(array) // [1, 2, 3, 4, 5, 6]
8.求兩個(gè)數(shù)組的交集
var array1=[2,4,6] var array2=[1,2,3,4,5] var repeatValues=array2.filter(item => array1.includes(item)) console.log(repeatValues) // [2, 4]
9.從數(shù)組中刪除虛值
虛值有 false, 0，''， null, NaN, undefined
var array=[0,1,2,false,'',null,NaN,undefined] var newArray=array.filter(Boolean) console.log(newArray) // [1, 2]
10. 從數(shù)組中獲取隨機(jī)值
var array=[0,1,2,3,4,5,6] var index=Math.floor(Math.random() * (array.length)) var value=array[index] console.log(index) //6
11.反轉(zhuǎn)數(shù)組
var array=[1,2,3,4,5,6] var reverseArray=array.reverse(); console.log(reverseArray) // [6, 5, 4, 3, 2, 1]
12 lastIndexOf() 方法與indexOf()方法
var array=[1,2,3,4,5,4,3,2,1] var lastIndexOf=array.lastIndexOf(2) console.log(lastIndexOf) // 7 var indexOf=array.indexOf(2) console.log(indexOf) //1
13.對(duì)數(shù)組中的所有值求和
var array=[1,2,3,4,5,6]
var sum= array.reduce((a,b) => a+b)
console.log(sum) // 21
var array=[1,2,3,4,5,6]
var sum=0
array.forEach(item => sum+=item)
console.log(sum) // 21
let array = [1, 2, 3, 4, 5, 6];
function computeSum(sum, number) {
return sum + number;
}
let sum = array.reduce(computeSum, 0);
console.log(sum) // 2114.數(shù)組的遍歷
for(const item of items)循環(huán)遍歷數(shù)組項(xiàng)
let array=[1,2,3,4,5,6]
for(let item in array){
console.log(item)
// 0 1 2 3 4 5
}for(let i; i < array.length; i++)循環(huán)遞增索引，遍歷數(shù)組項(xiàng)
let array=[1,2,3,4,5,6]
for (let index = 0; index < array.length; index++) {
let value=array[index]
console.log(value)
// 0 1 2 3 4 5
}array.forEach(callback)方法，在每個(gè)數(shù)組項(xiàng)上調(diào)用callback函數(shù)來遍歷數(shù)組項(xiàng)。break無法終止迭代
let array=[1,2,3,4,5,6]
array.forEach(function(item,index){ //item：元素 index：索引
console.log(item,':',index)
})
1 ":" 0
2 ":" 1
3 ":" 2
4 ":" 3
5 ":" 4
6 ":" 515.數(shù)組的映射
Array.map()創(chuàng)建一個(gè)新的映射數(shù)組，不改變?cè)紨?shù)組，在每個(gè)數(shù)組項(xiàng)上使用callback調(diào)用結(jié)果來創(chuàng)建一個(gè)新數(shù)組。
let array=[1,2,3,4,5,6]
let newArray=array.map(item => {
//返回新項(xiàng)。
return item+1
})
console.log(newArray) // [2, 3, 4, 5, 6, 7]Array.from()創(chuàng)建一個(gè)新的映射數(shù)組，而不改變?cè)紨?shù)組。適合從類似數(shù)組的對(duì)象進(jìn)行映射。
let array=[1,2,3,4,5,6];
let newArray= Array.from(array,function(item){
return item+1;
})
console.log(newArray) // [2, 3, 4, 5, 6, 7]16.數(shù)組的拷貝
[...array]方法
let array=[1,2]; let clone =[...array] console.log(clone) // [1, 2] array===clone //false
[].concat(array)方法
let array=[1,2]; let clone=[].concat(array) console.log(clone) // [1, 2] array===clone //false
array.slice())方法
let array=[1,2]; let clone=array.slice() console.log(clone) // [1, 2] array===clone //false
17.數(shù)組元素的查找
array.includes() 方法
let array=[1,2,3,4,5,6] array.includes(3) // true
array.find() 返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined
let arrray=[1,2,3,4,5,6]
function test(number) {
return number % 2 === 0;
}
let value = arrray.find(test);
console.log(value) // 2array.indexOf() 從開始0索引開始查找，返回找到元素的索引值，如果找不到該項(xiàng)，則返回-1
let array=[1,2,3,4,5,6] array.indexOf(2) //1
18.查詢數(shù)組
array.every() 方法，每個(gè)項(xiàng)都通過‘檢查’，則返回true
let array=[1,2,3,4,5,6] array.every((item,index) => item % 2) // false array.every((item,index) => item>0) // true
array.some() 方法，每個(gè)項(xiàng)中只要一項(xiàng)通過‘檢查’，則返回true
let array=[1,2,3,4,5,6] array.some((item,index) => item>0) //true array.some((item,index) => item % 2) //true
19.數(shù)組的過濾
array.filter() 創(chuàng)建一個(gè)新數(shù)組，而不改變?cè)紨?shù)組。 其包含通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素
let array=[1,2,3,4,5,6] let newArray= array.filter(item => item>3) console.log(newArray) // [4, 5, 6]
20.數(shù)組的插入
array.push() 方法,將一個(gè)或多個(gè)項(xiàng)追加到數(shù)組的末尾，并返回新的長(zhǎng)度
array.push() 會(huì)改變?cè)瓟?shù)組
array.push(item1, item2, ..., itemN) 可以添加多個(gè)元素
let array=[1,2,3,4,5,6] let length= array.push(7) console.log(length) //7 console.log(array) //[1, 2, 3, 4, 5, 6, 7]
array.unshift() 方法 ,將一個(gè)或多個(gè)項(xiàng)追加到數(shù)組的開頭，返回?cái)?shù)組的新長(zhǎng)度
let array=[1,2,3,4,5,6] let length= array.unshift(0) console.log(length) //7 console.log(array) //[0,1, 2, 3, 4, 5, 6]
通過組合展開操作符和數(shù)組字面量以不可變的方式在數(shù)組中插入項(xiàng)
let array=[1,2,3,4,5,6] let newArray array=[...array,7,8] console.log(newArray) // [1, 2, 3, 4, 5, 6, 7, 8] let array=[1,2,3,4,5,6] let newArray array=[0,...array] console.log(newArray) // [0,1, 2, 3, 4, 5, 6]
任何索引處插入元素
let array=[1,2,3,4,5,6] array.splice(array.length,0,'增加一個(gè)') console.log(newArray) // [1, 2, 3, 4, 5, 6, "增加一個(gè)"] let array=[1,2,3,4,5,6] let newArray=[...array.splice(0,1),'刪除2',...array.splice(1)] console.log(newArray) // [1, "刪除2", 3, 4, 5, 6]
21.刪除數(shù)組元素
array.pop() 方法, 從數(shù)組中刪除最后一個(gè)元素，然后返回該元素, 會(huì)改變?cè)瓟?shù)組。
let array=[1,2,3,4,5,6] let array=[1,2,3,4,5,6] let value=array.pop() console.log(value) //6 console.log(array) // [1, 2, 3, 4, 5]
array.shift() 方法 從數(shù)組中刪除第一個(gè)元素，然后返回該元素。會(huì)改變?cè)瓟?shù)組
let array=[1,2,3,4,5,6] let value=array.shift() console.log(value) //1 console.log(array) // [2, 3, 4, 5, 6]
array.splice() 方法,從數(shù)組中刪除元素，刪除元素并插入新的元素。會(huì)改變?cè)瓟?shù)組。
let array=[1,2,3,4,5,6] array.splice(1,2)// [2, 3] console.log(array) // [1, 4, 5, 6] let array=[1,2,3,4,5,6] array.splice(1,3,'刪除2，3，4，插入234') //[2, 3, 4] console.log(array) // [1, "刪除2，3，4，插入234", 5, 6]
通過組合展開操作符和數(shù)據(jù)字面量以不可變的方式從數(shù)組中刪除項(xiàng)。
let array=[1,2,3,4,5,6] let newArray=[...array.splice(0,1),...array.splice(4)] //array.splice(0,1) [1] array : [2, 3, 4, 5, 6] //array.splice(4) [6] array: [2, 3, 4, 5] console.log(newArray) // [1, 6]
22.清空數(shù)組
array.length是保存數(shù)組長(zhǎng)度的屬性。 除此之外，array.length是可寫的
如果寫一個(gè)小于當(dāng)前長(zhǎng)度的array.length = newLength，多余的元素從數(shù)組中移除
let array=[1,2,3,4,5,6] array.length=3 console.log(array) // [1, 2, 3] array.length=0 console.log(array) // []
array.splice() 刪除數(shù)組中的所有元素
let array=[1,2,3,4,5,6] array.splice(0) console.log(array) //[1,2,3,4,5,6]
23.填充數(shù)組
Array(length).fill(initial)來初始化特定長(zhǎng)度和初始值的數(shù)組。會(huì)改變?cè)瓟?shù)組。
let array=[1,2,3,4,5,6] array.fill(0) console.log(array) // [0, 0, 0, 0, 0, 0] var array=new Array(10).fill(0) console.log(array)// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Array.from() 有助于初始化帶有對(duì)象的特定長(zhǎng)度的數(shù)組：
var array=[{name:"one",value:1},{name:"two",value:2},{name:"three",'value':3}]
Array.from(array,({name}) => name)
console.log(array) // ["one", "two", "three"]
Array.from(array,({value}) => value)
console.log(array) // [1, 2, 3]
let array=Array.from(Array(3),()=> {return {} })
console.log(array) // [{},{},{}]24. 數(shù)組的扁平化
array.flat([depth])方法通過遞歸扁平屬于數(shù)組的項(xiàng)直到一定深度來創(chuàng)建新數(shù)組。 depth可選參數(shù)默認(rèn)為1：array.flat() 創(chuàng)建一個(gè)新數(shù)組，而不會(huì)改變?cè)紨?shù)組。
let array = [0, [1, 3], [2, 4]]; let flatArray = array.flat(); console.log(flatArray) // [0, 1, 3, 2, 4]
25.數(shù)組的排序
array.sort() 以升序?qū)?shù)字進(jìn)行排序。
let array=[4,6,7,9,3,2] array.sort() console.log(array) // [2, 3, 4, 6, 7, 9]
數(shù)compare(a, b)是一個(gè)自定義排序順的回調(diào)函數(shù)。如果比較compare(a, b)返回的結(jié)果：
- 如果
a小于b，在排序后的數(shù)組中a應(yīng)該出現(xiàn)在b之前，就返回一個(gè)小于0的值 - 如果
a等于b，就返回0 - 如果
a大于b，在排序后的數(shù)組中a應(yīng)該出現(xiàn)在b之后,就返回一個(gè)大于0的值
讓偶數(shù)排在奇數(shù)前面：
let array=[4,6,7,9,3,2]
function compare(a, b) {
//返回<0,則a在b之前出現(xiàn)
if (a % 2 === 0 && b % 2 !== 0) {
return -1;
}
//返回>0,則a在b之后出現(xiàn)
if (a % 2 !== 0 && b % 2 === 0) {
return 1;
}
return 0;
}
array.sort(compare)
console.log(array) // [4, 6, 2, 7, 9, 3]讓大于等于4的書排在前面
let array=[1,2,3,4,5,6]
function compare(a,b){
//返回>0,則a在b之后出現(xiàn)
if(a<4 && b>=4){
return 11
}
//返回<0,則a在b之前出現(xiàn)
if(a>=4 && b<4){
return -11
}
return 0
}
array.sort(compare)
console.log(array) // [4, 5, 6, 1, 2, 3]到此這篇關(guān)于JavaScript數(shù)組操作方法實(shí)例梳理總結(jié)的文章就介紹到這了,更多相關(guān)JS數(shù)組操作 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
今天測(cè)試代碼時(shí)，發(fā)現(xiàn)不少IE可以運(yùn)行的ajax，但在FF中報(bào)錯(cuò)。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結(jié)如下，需要的朋友可以看下，對(duì)于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。2010-04-04
JavaScript表單通過正則表達(dá)式驗(yàn)證電話號(hào)碼
通過正則表達(dá)式實(shí)現(xiàn)判斷一個(gè)輸入量是否為電話號(hào)碼,需要的朋友可以參考下2014-03-03
URL的參數(shù)中有加號(hào)傳值變?yōu)榭崭竦膯栴}(URL特殊字符)
今天在調(diào)試客戶端向服務(wù)器傳遞參數(shù)時(shí)，參數(shù)中的“+”全部變成了空格，原因是URL中默認(rèn)的將“+”號(hào)轉(zhuǎn)義了，經(jīng)過以下步驟解決了，需要的朋友可以參考一下2016-11-11
這篇文章主要為大家介紹了uniapp?@click事件冒泡問題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
弱類型語言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類型語言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a，b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
這篇文章主要為大家詳細(xì)介紹了bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能實(shí)現(xiàn)的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
javascript常見數(shù)據(jù)驗(yàn)證插件大全
這篇文章主要介紹了javascript常見數(shù)據(jù)驗(yàn)證插件大全,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)bindtap等事件傳參，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及遇到的坑
JavaScript是一個(gè)神奇的語言，字符串轉(zhuǎn)數(shù)字有5種方法，各有各的坑法!接下來通過本文給大家介紹JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及其陷阱，感興趣的朋友一起看看吧2018-07-07
這篇文章主要介紹了淺談Javascript數(shù)組索引，都是個(gè)人的一些經(jīng)驗(yàn)總結(jié),需要的朋友可以參考下2015-07-07