梳理總結25JavaScript數組操作方法實例
1.刪除數組重復項
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. 獲取數組的片段
array.splice(start、remove or update、replace value)
,從數組索引哪裡開始、操作多少個元素、可選項:替換值。
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 達到 .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.置空數組
var array=[1,2,3,4,5,6] array.length=0 console.log(array) // []
5. 將數組轉換為對象
var array=['one','two','three'] var obj={...array} console.log(obj) // {0: "one", 1: "two", 2: "three"}
6. 用數據填充數組
var array=new Array(10).fill(0) console.log(array)// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
7. 數組合並
array.concat()
,concat()方法創建一個新的數組,而不改變原來的數組
array.concat( ...array1,...array2,...])
接受多個要連接的數組。
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.求兩個數組的交集
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.從數組中刪除虛值
虛值有 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. 從數組中獲取隨機值
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.反轉數組
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.對數組中的所有值求和
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) // 21
14.數組的遍歷
for(const item of items)
循環遍歷數組項
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++)
循環遞增索引,遍歷數組項
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)
方法,在每個數組項上調用callback
函數來遍歷數組項。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 ":" 5
15.數組的映射
Array.map()
創建一個新的映射數組,不改變原始數組,在每個數組項上使用callback
調用結果來創建一個新數組。
let array=[1,2,3,4,5,6] let newArray=array.map(item => { //返回新項。 return item+1 }) console.log(newArray) // [2, 3, 4, 5, 6, 7]
Array.from()
創建一個新的映射數組,而不改變原始數組。適合從類似數組的對象進行映射。
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.數組的拷貝
[...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.數組元素的查找
array.includes()
方法
let array=[1,2,3,4,5,6] array.includes(3) // true
array.find()
返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined
let arrray=[1,2,3,4,5,6] function test(number) { return number % 2 === 0; } let value = arrray.find(test); console.log(value) // 2
array.indexOf()
從開始0索引開始查找,返回找到元素的索引值,如果找不到該項,則返回-1
let array=[1,2,3,4,5,6] array.indexOf(2) //1
18.查詢數組
array.every()
方法,每個項都通過‘檢查’,則返回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()
方法,每個項中隻要一項通過‘檢查’,則返回true
let array=[1,2,3,4,5,6] array.some((item,index) => item>0) //true array.some((item,index) => item % 2) //true
19.數組的過濾
array.filter()
創建一個新數組,而不改變原始數組。 其包含通過所提供函數實現的測試的所有元素
let array=[1,2,3,4,5,6] let newArray= array.filter(item => item>3) console.log(newArray) // [4, 5, 6]
20.數組的插入
array.push()
方法,將一個或多個項追加到數組的末尾,並返回新的長度
array.push()
會改變原數組
array.push(item1, item2, ..., itemN)
可以添加多個元素
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()
方法 ,將一個或多個項追加到數組的開頭,返回數組的新長度
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]
通過組合展開操作符
和數組字面量以不可變的方式在數組中插入項
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,'增加一個') console.log(newArray) // [1, 2, 3, 4, 5, 6, "增加一個"] 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.刪除數組元素
array.pop()
方法, 從數組中刪除最後一個元素,然後返回該元素, 會改變原數組。
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()
方法 從數組中刪除第一個元素,然後返回該元素。會改變原數組
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()
方法,從數組中刪除元素,刪除元素並插入新的元素。會改變原數組。
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]
通過組合展開操作符
和數據字面量以不可變的方式從數組中刪除項。
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.清空數組
array.length
是保存數組長度的屬性。 除此之外,array.length
是可寫的
如果寫一個小於當前長度的array.length = newLength
,多餘的元素從數組中移除
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()
刪除數組中的所有元素
let array=[1,2,3,4,5,6] array.splice(0) console.log(array) //[1,2,3,4,5,6]
23.填充數組
Array(length).fill(initial)
來初始化特定長度和初始值的數組。會改變原數組。
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()
有助於初始化帶有對象的特定長度的數組:
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. 數組的扁平化
array.flat([depth])
方法通過遞歸扁平屬於數組的項直到一定深度來創建新數組。 depth
可選參數默認為1
:array.flat()
創建一個新數組,而不會改變原始數組。
let array = [0, [1, 3], [2, 4]]; let flatArray = array.flat(); console.log(flatArray) // [0, 1, 3, 2, 4]
25.數組的排序
array.sort()
以升序對數字進行排序。
let array=[4,6,7,9,3,2] array.sort() console.log(array) // [2, 3, 4, 6, 7, 9]
數compare(a, b)
是一個自定義排序順的回調函數。如果比較compare(a, b)
返回的結果:
- 如果
a
小於b
,在排序後的數組中a
應該出現在b
之前,就返回一個小於0
的值 - 如果
a
等於b
,就返回0
- 如果
a
大於b
,在排序後的數組中a
應該出現在b
之後,就返回一個大於0
的值
讓偶數排在奇數前面:
let array=[4,6,7,9,3,2] function compare(a, b) { //返回<0,則a在b之前出現 if (a % 2 === 0 && b % 2 !== 0) { return -1; } //返回>0,則a在b之後出現 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之後出現 if(a<4 && b>=4){ return 11 } //返回<0,則a在b之前出現 if(a>=4 && b<4){ return -11 } return 0 } array.sort(compare) console.log(array) // [4, 5, 6, 1, 2, 3]
到此這篇關於JavaScript數組操作方法實例梳理總結的文章就介紹到這瞭,更多相關JS數組操作 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- javascript數組裡的27個方法總合詳解
- javascript的數組方法大全
- 27個JavaScript數組常見方法匯總與實例說明
- TypeScript 數組Array操作的常用方法
- Javascript數組常用方法你都知道嗎