欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

梳理總結25個JavaScript數(shù)組操作方法實例

 更新時間：2022年07月13日 09:41:50   作者：丨Jack_Chen丨?  
這篇文章主要分享JavaScript數(shù)組操作方法實例梳理總結，刪除數(shù)組重復項、獲取數(shù)組的片段等方法，需要的小伙伴可以參考一下

1.刪除數(shù)組重復項

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ù)組索引哪里開始、操作多少個元素、可選項：替換值。

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.置空數(shù)組

var array=[1,2,3,4,5,6]
array.length=0
console.log(array) // []

5. 將數(shù)組轉換為對象

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)建一個新的數(shù)組，而不改變原來的數(shù)組

array.concat( ...array1，...array2，...]) 接受多個要連接的數(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.求兩個數(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ù)組中獲取隨機值

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.反轉數(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.對數(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)  // 21

14.數(shù)組的遍歷

for(const item of items)循環(huán)遍歷數(shù)組項

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ù)組項

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)方法，在每個數(shù)組項上調用callback函數(shù)來遍歷數(shù)組項。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.數(shù)組的映射

Array.map()創(chuàng)建一個新的映射數(shù)組，不改變原始數(shù)組，在每個數(shù)組項上使用callback調用結果來創(chuàng)建一個新數(shù)組。

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()創(chuàng)建一個新的映射數(shù)組，而不改變原始數(shù)組。適合從類似數(shù)組的對象進行映射。

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() 返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 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.查詢數(shù)組

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.數(shù)組的過濾

array.filter() 創(chuàng)建一個新數(shù)組，而不改變原始數(shù)組。 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素

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() 方法,將一個或多個項追加到數(shù)組的末尾，并返回新的長度

array.push() 會改變原數(shù)組

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() 方法 ,將一個或多個項追加到數(shù)組的開頭，返回數(shù)組的新長度

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ù)組中插入項

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.刪除數(shù)組元素

array.pop() 方法, 從數(shù)組中刪除最后一個元素，然后返回該元素, 會改變原數(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ù)組中刪除第一個元素，然后返回該元素。會改變原數(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ù)組中刪除元素，刪除元素并插入新的元素。會改變原數(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ù)組中刪除項。

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ù)組長度的屬性。 除此之外，array.length是可寫的

如果寫一個小于當前長度的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)來初始化特定長度和初始值的數(shù)組。會改變原數(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() 有助于初始化帶有對象的特定長度的數(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ù)組的項直到一定深度來創(chuàng)建新數(shù)組。 depth可選參數(shù)默認為1：array.flat() 創(chuàng)建一個新數(shù)組，而不會改變原始數(shù)組。

let array = [0, [1, 3], [2, 4]];
let  flatArray = array.flat();
console.log(flatArray) // [0, 1, 3, 2, 4]

25.數(shù)組的排序

array.sort() 以升序對數(shù)字進行排序。

let array=[4,6,7,9,3,2]
array.sort()
console.log(array) // [2, 3, 4, 6, 7, 9]

數(shù)compare(a, b)是一個自定義排序順的回調函數(shù)。如果比較compare(a, b)返回的結果：

  • 如果 a小于b，在排序后的數(shù)組中a應該出現(xiàn)在b之前，就返回一個小于0的值
  • 如果a等于b，就返回0
  • 如果a大于b，在排序后的數(shù)組中a應該出現(xiàn)在b之后,就返回一個大于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]

到此這篇關于JavaScript數(shù)組操作方法實例梳理總結的文章就介紹到這了,更多相關JS數(shù)組操作 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論