淺談ECMAScript 中的Array類型

更新時間：2019年06月10日 09:54:22 作者：切圖仔ice

這篇文章主要介紹了淺談ECMAScript 中的Array類型，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

Array 類型是除了 Object 類型之外又是一個特別經(jīng)常用的一個類型了，當然數(shù)組在其他的語言中都是不可缺少的屬性，我們都知道不管 js 還是其他類的語言的數(shù)組都是數(shù)據(jù)的有序列表，但是在 javaScript 中的數(shù)組是有一定的區(qū)別的，具體的區(qū)別就是： js 中的數(shù)組保存的數(shù)據(jù)可以是任何類型的數(shù)據(jù)，比如，我可以在第一個位置來保存數(shù)字，第二個位置保存字符串，第三和第四保存一個對象都完全OK，同時我還可以非常方便的操作數(shù)組的大小，添加新數(shù)據(jù)長度也會自動增長，動態(tài)調(diào)整什么的都是沒有任何問題滴！而 c 或者其他的語言的數(shù)組和 js 的數(shù)組一對比就完全看出區(qū)別了，至于什么是數(shù)組，怎么創(chuàng)建、怎么用的等等基礎(chǔ)用法這個就不用說了俺也默認你都知道的！

正文

我們?nèi)粘?shù)據(jù)的各種操作都離不開數(shù)組，可以說數(shù)組的使用之多，接口返回的數(shù)據(jù)等等大都是使用到了數(shù)組

一、檢測數(shù)組

對于數(shù)組我們已經(jīng)知道了什么是數(shù)組了，那么檢測數(shù)組又是怎么檢測的呢？

其實檢測數(shù)組的兩個方法：

01、 instanceof

let arr = []

console.log( arr instanceof Array)//true

instanceof 的判斷其實就是判斷倆個操作數(shù)的構(gòu)造函數(shù)的prototype屬性，在一個全局執(zhí)行環(huán)境下 instanceof 這個當然可以判斷數(shù)組的類型，那假如一個網(wǎng)頁同時有倆個框架下的情況下呢，我從一個框架傳一個數(shù)組到另一個框架中，而我從一個框架傳入的數(shù)組和這個框架中的數(shù)組卻是存在不一樣的構(gòu)造函數(shù)，使用 instanceof 判斷是否為數(shù)組的時候就會出現(xiàn)問題，那又該怎么辦呢？

02、 Array.isArray

可以說 Array.isArray() 方法就是為了針對這個問題而新增的，這個方法不管你從哪里來到哪里去，只要判斷你是不是一個 Array 類型，看粟子：

let arr = [];

console.log(Array.isArray(arr))//true

二、數(shù)組方法

當數(shù)組存有了我們需要的數(shù)據(jù)，然后就是對數(shù)據(jù)進行各種各樣的操作，而數(shù)組為我們提供了以下的方法(常用)

01、Array.prototype.join()

join() 方法將數(shù)組（類數(shù)組對象）的所以元素都連接成一個字符串然后返回這個字符串，一個元素的情況下直接返回

粟子：

let arr = ['apple','tomatoes','banana']

console.log(arr.join())//apple,tomatoes,banana

console.log(arr.join('.'))//apple.tomatoes.banana

console.log(arr.join('-'))//apple-tomatoes-banana

let arr1 = ['apple']

console.log(arr1.join('+'))//apple

從例子可以看出，當什么都不添加的情況下的時候直接返回所有元素的字符串，添加分割符的情況時候就為元素直接添加一個新添加的字符，當數(shù)組只有一個元素的時候，無論添加什么都是直接返回該元素。

02、Array.prototype.push()

push() 方法用于將一個或者多個元素添加到數(shù)組的末端，返回數(shù)組的新的長度

又一個粟子：

let arr = ['apple','tomatoes','banana']

console.log(arr.push('orange'))//4

console.log(arr.push('pear','peach'))//6

console.log(arr);//[ 'apple', 'tomatoes', 'banana', 'orange', 'pear', 'peach' ]

03、Array.prototype.pop()

pop() 方法將數(shù)組的最后一個元素進行刪除，然后會返回刪除的改元素。該方法會改變數(shù)組的長度，空數(shù)組的情況下會返回 undefined

對方表示不想說話并扔了一個粟子：

let arr = [ 'apple', 'tomatoes', 'banana', 'orange', 'pear' ]

console.log(arr.pop())//pear

console.log(arr.pop())//orange

console.log(arr)//[ 'apple', 'tomatoes', 'banana' ]

04、Array.prototype.concat()

concat 方法是合并兩個或者多個數(shù)組，然后返回一個合并的新數(shù)組，但是并不改變原來的數(shù)組

接到新的粟子：

let arr = [ 'apple', 'tomatoes' ]
let arr1 = ['banana', 'orange', 'pear']
console.log(arr.concat(arr1));//[ 'apple', 'tomatoes', 'banana', 'orange', 'pear' ]

console.log(arr.concat(2,arr1));//[ 'apple', 'tomatoes', 2, 'banana', 'orange', 'pear' ]

console.log(arr);//[ 'apple', 'tomatoes' ](原數(shù)組)

05、Array.prototype.sort()

sort 方法對數(shù)組進行排序，返回排序的數(shù)組

一個簡單的粟子：

let array = [1,3,2,4,5,7,6,8]

console.log(array.sort())//[ 1, 2, 3, 4, 5, 6, 7, 8 ]

拓展的粟子：

let array = [
 { id: 5, name: "jk" },
 { id: 2, name: "jc" },
 { id: 3, name: "jg" },
 { id: 4, name: "jp" },
 { id: 1, name: "jq" },
 { id: 6, name: "jr" }
]

console.log(array.sort( (a, b) => a.id - b.id)) //[ { id: 1, name: 'jq' },{ id: 2, name: 'jc' },{ id: 3, name: 'jg' },{ id: 4, name: 'jp' },{ id: 5, name: 'jk' },{ id: 6, name: 'jr' } ]

結(jié)果不出意外也是正序排序，降序反過來就ok了

06、Array.prototype.slice()

slice() 方法從數(shù)組中返回選中的元素,對原數(shù)組進行淺拷貝

第一個參數(shù)為從0開始

第二個參數(shù)為從0開始

粟子：

let array = [
 { id: 5, name: "jk" },
 { id: 2, name: "jc" },
 { id: 3, name: "jg" },
 { id: 4, name: "jp" },
 { id: 1, name: "jq" },
 { id: 6, name: "jr" }
]

console.log(array.slice(0, 3)) //[ { id: 5, name: 'jk' },{ id: 2, name: 'jc' },{ id: 3, name: 'jg' } ]


//字符串

let str = 'this1 is slice'
console.log(str.slice(0,5))//this1

截取元素用的,但是原數(shù)組不會改變！

07、Array.prototype.splice()

splice() 方法用于添加、移除、刪除數(shù)組的元素，修改后的元素以數(shù)組形式返回。

第一個參數(shù)為修改開始的位置

第二個參數(shù)為刪除的個數(shù)

第三個參數(shù)為插入的參數(shù)

粟子：

let array = [
 { id: 5, name: "jk" },
 { id: 2, name: "jc" },
 { id: 3, name: "jg" },
 { id: 4, name: "jp" },
 { id: 1, name: "jq" },
 { id: 6, name: "jr" }
];
let arr = {id: 7, name: 'yy'}
console.log(array.splice(1,1, arr));//[ { id: 2, name: 'jc' } ]
console.log(array);// [ { id: 5, name: 'jk' },{ id: 7, name: 'yy' }, { id: 3, name: 'jg' }, { id: 4, name: 'jp' },{ id: 1, name: 'jq' },{ id: 6, name: 'jr' } ]

splice() 方法直接返回修改的內(nèi)容，第一個log返回的就是刪除的元素，如果第二參數(shù)為0或者為負數(shù)的時候則會返回一個空的數(shù)組，第二個log是改變后的數(shù)組。該方法會將原數(shù)組修改！

08、Array.prototype.shift()

shift() 方法會將數(shù)組的第一個元素進行刪除,然后返回刪除的元素(如果數(shù)組為空將會返回undefined)，該方法會修改數(shù)組的長度粟子：

let array = [
 { id: 5, name: "jk" },
 { id: 2, name: "jc" },
 { id: 3, name: "jg" },
 { id: 4, name: "jp" },
 { id: 1, name: "jq" },
 { id: 6, name: "jr" }
]
console.log(1,array.shift())//1 { id: 5, name: 'jk' }
console.log(2,array)//2 [ { id: 2, name: 'jc' },{ id: 3, name: 'jg' },{ id: 4, name: 'jp' },{ id: 1, name: 'jq' },{ id: 6, name: 'jr' } ]

09、Array.prototype.unshift()

unshift() 該方法則是在數(shù)組的開頭添加一個或者多個元素

粟子：

let array = [
 { id: 5, name: "jk" },
 { id: 2, name: "jc" },
 { id: 3, name: "jg" },
 { id: 4, name: "jp" },
 { id: 1, name: "jq" },
 { id: 6, name: "jr" }
]
let arr = { id: 2, name: 'yy' }
console.log(1,array.unshift(arr))//7
console.log(2,array)//2 [ { id: 2, name: 'yy' },{ id: 5, name: 'jk' },{ id: 2, name: 'jc' },{ id: 3, name: 'jg' }{ id: 4, name: 'jp' },{ id: 1, name: 'jq' },{ id: 6, name: 'jr' } ]

10、Array.prototype.reverse()

reverse() 方法用翻轉(zhuǎn)數(shù)組元素的位置，然后返回該數(shù)組

let arr = [1,2,3,4,5]
console.log(arr.reverse())//[5,4,3,2,1]

11、Array.prototype.indexOf()

indexOf() 方法用于給定的元素然后從數(shù)組開頭查找數(shù)組，如果存在則返回該元素存在數(shù)組的下標，不存在則返回-1

簡單的粟子：

let array = [1,2,3,4,5,6,7,8,9]
console.log(array.indexOf(3))//2

第二個粟子：（簡單的去重）

let array = [1,2,3,4,5,1,2,6,8,3,8,9]
function arr(arr) {
if(arr.length === 0 ) return
let n = [];
for(let i = 0; i<arr.length; i++) {
 if(n.indexOf(arr[i]) === -1) {
 n.push(arr[i])
 }
}
return n
}
console.log(arr(array))//[ 1, 2, 3, 4, 5, 6, 8, 9 ]

12、Array.prototype.lastIndexOf()

lastIndexOf() 方法從數(shù)組的末端開始按給定的元素進行查找，查找到則返回所在的下標，不存在則返回-1；

粟子：

var arr1 = [1,2,3,4,5]
console.log(arr1.lastIndexOf(3))//2

迭代

1、Array.prototype.forEach()

forEach() 方法對數(shù)組中的每個元素執(zhí)行一次所寫的回調(diào)函數(shù)（注意，一旦開始循環(huán)中途無法跳出循環(huán)）

回調(diào)函數(shù)接收三個參數(shù)

數(shù)組當前項值

數(shù)組當前項的下標

當前數(shù)組 簡單的粟子：

var words = ['one', 'two', 'three', 'four'];
words.forEach((item, index) =>{
 if(item === 'two') {
  words.splice(index, 1)
 }

});
console.log(words)//[ 'one', 'three', 'four' ]

2、Array.prototype.map()

map() 方法會將該方法迭代后返回的新數(shù)組

簡單的粟子：

let arr = [1,2,3,4,5,6]

let arrs = arr.map(item => item + 10)
console.log(arrs)//[ 11, 12, 13, 14, 15, 16 ]

經(jīng)典的粟子：

let a = [1,2,3].map(parseInt)
a?

a等于多少呢，有的答案可能是123，有的答案又可能是別的，而且這是一個經(jīng)典的面試題，是不是剛剛看的時候覺得特別簡單一下子就給出了答案了呢！

是不是很意外？還是說這個就是你意想中的事情呢？根據(jù)MDN中介紹：是因為通常的情況下我們的回調(diào)函數(shù)是接受一個參數(shù)，但是接受一個參數(shù)并不代表 map() 方法只給回調(diào)函數(shù)只傳一個參數(shù)而已，而上面的例子是因為 parseInt 平常我們使用的時候大都傳一個參數(shù)進行轉(zhuǎn)換，但是 parseInt 是可以接受兩個參數(shù)的，只不過第二個參數(shù)為 二進制 而已，所以第二個參數(shù)則會變成二進制，那么第三個參數(shù) parseInt

則會忽略，所以返回這個答案！

3、Array.prototype.some()

some() 方法用于判斷回調(diào)函數(shù)中邏輯而返回 true 還是 false

粟子：

var arr = ['apple', 'banana', 'mango', 'guava']

checkarr = (arr, val) => {
 return arr.some(item => val === item)
}
console.log(checkarr(arr, 'apple'))//true

4、Array.prototype.reduce()

reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終為一個值

第一個值為累加器（上一次回調(diào)函數(shù)返回的值/初始為第一個值）

第二個值為當前值

第三個值為當前下標

第四個值為當前數(shù)組 簡單的粟子：

var arr = [1, 2, 3, 4, 5]

const data = arr.reduce((prev, curr) => prev + curr )
console.log(data)//15

合并數(shù)組里面對象的值并累加(結(jié)合find一起使用):

let tableNetWorkData = [
{'newLocker': 6,'newSection': -2,'newSite': 1,'partnerShip': "self"},
{'newLocker': 5,'newSection': 24,'newSite': 1,'partnerShip': "self"},
{'newLocker': 3,'newSection': 65,'newSite': 1,'partnerShip': "sell"},
{'newLocker': 1,'newSection': 38,'newSite': 1,'partnerShip': "agent"},
{'newLocker': -6,'newSection': 4,'newSite': 1,'partnerShip': "agent"},
{'newLocker': 8,'newSection': 22,'newSite': 1,'partnerShip': "lease"},
{'newLocker': 15,'newSection': -2,'newSite': 1,'partnerShip': "self"},
]

let result = tableNetWorkData.reduce((per, currNext) => {
  let pers = per.find( perItem => currNext.partnerShip === perItem.partnerShip );
  if(pers) {
  pers.newLocker += currNext.newLocker;
  pers.newSection += currNext.newSection;
  pers.newSite += currNext.newSite;

  } else {
  let newPers = {
   newLocker: currNext.newLocker,
   newSection: currNext.newSection,
   newSite: currNext.newSite,
   partnerShip: currNext.partnerShip
  }
  per.push(newPers)
  }
  return per
 }, []);
 console.log(result)

結(jié)果如下：

再來一個數(shù)組去重：

let arr = [1,2,2,3,4,5,5,6,8,7,7,9,8]

let result = arr.reduce( (prev, curr) => {
  if(prev.length === 0 || prev[prev.length - 1] !== curr) {
   prev.push(curr)
  }
  return prev
}, [])
console.log(result)

看結(jié)果：

5、Array.prototype.every()

every() 方法用于檢測數(shù)組所有元素是否通過指定的函數(shù)的邏輯操作，通過則返回 true 否則返回 false 。注意空數(shù)組則無論什么邏輯都將返回 true

回調(diào)函數(shù)接通常收三個參數(shù):

當前值

當前值的下標

原數(shù)組

簡單的粟子：

var arr = [1, 30, 39, 21, 10, 13];

console.log(arr.every(curr => { return curr < 45 }));
// expected output: true

6、Array.prototype.filter()

filter() 方法就是一個過濾原數(shù)組的方法返回需要的元素組成的新數(shù)組，想象成一個漏斗然后過濾一些符合的元素?。ú粫淖冊瓟?shù)組）

當前值

當前值的下標

原數(shù)組

粟子：

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']
let filterindexOf = function (query){
return fruits.filter(item => {
return item.toLowerCase().indexOf(query.toLowerCase())> -1
})
}
console.log(filterindexOf('an'))//["banana", "mango", "orange"]

7、Array.prototype.toString()

toString() 方法就是將數(shù)組元素轉(zhuǎn)化為字符串

粟子：

var array1 = ['ca', 'ba', 'a', '1a'];

console.log(array1.toString());// "ca,ba,a,1a"

8、Array.prototype.find()

find() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值

當前值

當前值的下標

原數(shù)組

粟子：

let arr = [
 {name: 'apples', value: 2},
 {name: 'bananas', value: 0},
 {name: 'cherries', value: 5}
];

let res =arr.find ((item)=> { 
 return item.name === 'bananas';
})

console.log(res)//{ name: "bananas", value: 0 }

總結(jié)

對于數(shù)組在我們平常對數(shù)據(jù)的一些操作都大都避免不了使用數(shù)組對數(shù)據(jù)進一步的邏輯操作，所以對于數(shù)組的一些方法都要熟悉熟練的使用，只有熟練的使用數(shù)組各種方法才能在后端返回的數(shù)據(jù)進行一梭子的操作完成業(yè)務(wù)操作甚至是比較騷的操作，同時在使用數(shù)組的方法的時候避免給自己挖一些不必要的坑，我們要嚴格按照規(guī)范使用數(shù)組的方法這樣才不會出現(xiàn)一些神都看不懂的 bug ，當然文章所介紹的都是平常使用的一些方法，數(shù)組還有其他的方法沒有寫出來，需要的再自己查找了，如有錯誤萬望指出，萬分感謝！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: