JavaScript中常用的數組操作實例分析

今天小編給大家分享一下JavaScript中常用的數組操作實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前言

函數和方法的區別：

函數function：獨立的function，那么稱之為是一個函數。

function foo() {}

方法method：當我們的一個函數屬于某一個對象時，我們稱這個函數是這個對象的方法。

var obj = {
  foo: function() {}
}
obj.foo()

例如，對一個數組的操作方法：filter，我們就稱之為是一個方法。

// filter：過濾
var nums = [10, 5, 11, 100, 55]
nums.filter((item) => item > 10)

在以下對數組的操作中，我們統稱方法。

文章中通用常量意義：

item：某一項。當作為參數時，為遍歷數組中的每一項。當作為返回值時，意思為某項數據，可以為任意類型。

index：下標。當作為參數時，為遍歷數組中的item在數組中下標。當作為返回值時，意思為下標。

arr：數組。當作為返回值時，意思為改變數組本身。當作為參數時，意思為自身數組。

length：數組長度。當作為返回值時，意思為數組長度

newarr：新數組。當作為返回值時，意思為產生一個新數組，

boolean：布爾值。當作為方法體時以為：條件的返回值為布爾值。

num：數值類型。

start ：數組遍歷開始下標（包含）

end：數組遍歷結束下標（不包含）

數組基礎遍歷方法

for

for(var i = 0, len = arr.length; i < len; i++ ){
  console.log(arr[i])
}

for基礎循環可以用來遍歷數組，字符串，類數組，DOM節點等。

for of

for (var item of arr) {
  console.log(item);
}

for of：for-of獲取的是數組的值。可以使用 break、continue、return 來中斷循環遍歷。

for in

for (var value in arr) {
  console.log(value); 
}

for in：一般用于對對象的遍歷，但也可以用于數組。用于數組遍歷時，for-in獲取的是數組的索引

var arr = [10, 7, 9, 100, 11]

for (var value in arr) {
  console.log(value); 
}
// 0 1 2 3 4

注意：

1).index索引為字符串型數字，不能直接進行幾何運算。

2).使用for in會遍歷數組所有的可枚舉屬性，包括原型。例如上栗的原型方法method和name屬性。

Array.prototype.myfun=function(){
    alert('myfun');
}    
var arr = [0,1,2,3];

for(var i in arr){
    console.log(arr[i]);
}

console.log(Array.prototype)
/* 輸出結果：
0 1 2 3
? (){
    alert('myfun');
}
*/

數組的基礎操作方法

push：尾部追加元素

var length = arr.push(item)

push() 方法用于對數組尾部插入新的元素。返回值為追加后的數組長度。

var nums = [10, 7, 9, 100, 11]

var length = nums.push(2)
console.log(length) // 2

pop：尾部移出元素

var item = arr.pop()

pop() 方法用于刪除數組的最后一個元素并返回刪除的元素。無參，返回值為刪除的元素。

var nums = [10, 7, 9, 100, 11]

var item = nums.pop()
console.log(item) // 11

unshift：頭部追加元素

var length = arr.unshift(item)

unshift() 方法用于對數組頭部插入新的元素。返回值為追加后的數組長度。

shift：頭部移出元素

var item = arr.unshift()

shift() 方法用于對數組頭部插移出元素。返回值為追出后的元素。

splice：刪除添加替換

var newarr = arr.splice(index, howmany, item)

splice() 方法用于對數組元素進行刪除添加替換操作。返回值為刪除的元素組成的數組。

index（必填）：數組下標，代表從第幾個元素開始執行操作。

howmany（可選）：規定刪除多少個元素，如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。

item（可選）：插入元素，可以為多個。從下標位置插入。

var nums = [10, 7, 9, 100, 11]
var newarr= nums.splice(2,2,99,77,55)

console.log(newarr) // [9, 100]
console.log(nums) // [10, 7, 99, 77, 55, 11]

注意：splice() 方法會改變原數組。

concat：連接

newarr = arr.concat(nums1, nums2)

concat() 方法用于連接兩個或多個數組。

var nums1 = [2,5,7,9]
var nums2 = [1,3,55]
var newarr = []
var newarr = newarr.concat(nums1, nums2)

concat() 方法不會改變原數組。

join：分割

Str = arr.join(separator)

separator：分割符，如果為空，則已 “，” 分割。

join() 方法用于把數組中的所有元素轉換一個字符串。

var nums = [10, 7, 9, 100, 11]

var Str = nums.join('x')
console.log(Str) // 10x7x9x100x11

slice：切割

newarr = arr.slice(start, end)

從數組的 [start, end）位置截取數組元素。

slice() 方法可從已有的數組中返回選定的元素。

slice() 方法可提取字符串的某個部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不會改變原始數組。

includes：查詢

boolean = arr.includes(value, start)

value（必填）: 查找的元素，可以為字符串或數值。

start（可選）：開始查找的位置下標。

includes() 方法用于判斷字符串是否包含指定的子字符串。返回值為布爾值。

indexOf：查詢

index = arr.indexOf(value, start)

value（必填）: 查找的元素，可以為字符串或數值。

start（可選）：開始查找的位置下標。

indexOf() 方法用于判斷字符串是否包含指定的子字符串。返回值為查詢到下標，若為查詢到則為 -1。

lastIndexOf()方法類似，返回值為 value 最后一次出現的下標 。

fill：填充/替換

fruits.fill(value, start, end)

value（必填）：用來填充數組元素的值。

start（可選）：可選開始索引值（包含），默認值為0。

end（可選）：可選終止索引（不包含），默認值為 arr.length 。

通常與 new Array 搭配使用。

var arr = new Array(10).fill('10')
// ['10', '10', '10', '10', '10', '10', '10', '10', '10', '10']

或是用于替換掉數組中元素的值。

var arr3 = [0, 1, 2, 3, 4, 5, 6]
console.log(arr3.fill(1, 3)); //[0, 1, 2, 1, 1, 1, 1]

es6中帶來的數組高階方法

接下來是es6中帶來的數組高階方法。

高階函數：一個函數如果接收另一個函數作為參數，或者該函數會返回另外一個函數作為返回值的函數，那么這個函數就稱之為是一個高階函數。

數組的高階方法通常會接收一個回調函數作為參數，在回調中遍歷數組，執行操作。

接下來

寫在前面：接下來介紹的數組高階方法，回調函數的寫法均采用的是箭頭函數的寫法，因箭頭沒有自己的 this 指向，就不介紹第二個參數 thisValue 了。

forEach：迭代（枚舉）

arr.forEach((item, index, arr) => { 寫想要枚舉的操作 })

forEach 方法不會改變原數組，也沒有返回值；

var nums = [10, 7, 9, 100, 11]
nums.forEach((item) => {
    if (item > 10) {
        console.log(item)
    }
}) // 100, 11

forEach無法使用 break 跳出循環。使用 return 時，效果和在 for 循環中使用 continue 一致。

forEach如果想要跳出循環，可以通過 throw new Error() 拋出錯誤的方式實現。

var nums = [10, 7, 9, 100, 11]
nums.forEach((item) => {
    if (item == 100) {
        throw new Error("miss 100")
    } else {
        console.log(item)
    }
}) // 10 7 9 Error: miss 100

filter：過濾

newarr = arr.filter((item, index, arr) => boolean)

例子：

var nums = [10, 7, 9, 100, 11]
var newNums = nums.filter((item) => {
  return item % 2 === 0 // 偶數
})
console.log(newNums) // [10, 100]
console.log(nums) // [10, 5, 11, 100, 55]

返回值是過濾后的新數組

map：映射

newarr = arr.map((item, index, arr) => { 寫指定方法體 })

map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組。

var nums = [10, 7, 9, 100, 11]

var newNums = nums.map((item) => { 
  return item * 10
})
console.log(newNums) // [100, 50, 110, 1000, 550]
console.log(nums) // [10, 5, 11, 100, 55]

注意：map 方法中的 callback 函數只需要接受一個參數，就是正在被遍歷的數組元素本身。

但這并不意味著 map 只給 callback 傳了一個參數（會傳遞3個參數）。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。

// 下面的語句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能覺的會是[1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]

// num.parseInt() , parseInt()接收兩個參數，第一個為要轉換的字符串，第二個參數是進制數（2-36之間）如果省略該參數或其值為 0，則數字將以 10 為基礎來解析，超過返回NaN。
// map的 callback，會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身。第三個參數被忽略
// 所以就相當于執行了，parseInt("1", 0)，parseInt("2", 1)，parseInt("3", 2),

// 正確的寫法應該為：
function returnInt(element){
 return parseInt(element,10);
}
 
["1", "2", "3"].map(returnInt);
// 返回[1,2,3]

find：查找

item = arr.find((item, index, arr) => { boolean })

find()方法用于獲取數組中符合指定條件的第一個元素。沒有找到返回 undefined。

var family = [
  { name: 'xiaoming', age: 18 },
  { name: 'xiaocheng', age: 40 },
  { name: 'xiaoli', age: 42 }
]

var item = family.find((item) => {
  return item.name === 'xiaoming'
})
console.log(item) // { name: 'xiaoming', age: 18 }

注意，返回的item為淺拷貝。

item.name = 'kkk'
console.log(family)
/*
* {name: 'kkk', age: 18}
* {name: 'xiaocheng', age: 40}
* {name: 'xiaoli', age: 42}
*/

這里就反應出 find() 方法返回的結果內存指向依然是 family 所指向的內存地址，

所以這里返回的是淺拷貝的數據。

findIndex：查找下標

index = arr.findIndex((item, index, arr) => { boolean })

findIndex() 返回符合條件的數組第一個元素位置（索引），沒有找到符合條件則返回 -1。

var family = [
  { name: 'xiaoming', age: 18 },
  { name: 'xiaocheng', age: 40 },
  { name: 'xiaoli', age: 42 }
]

var index = family.findIndex((item) => {
  return item.name === 'xiaoming'
})
console.log(index) // 0

以上就是“JavaScript中常用的數組操作實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。