陣列是用于儲存多個相同型別資料的集合，JavaScript 開發中陣列開發是必須掌握技能，作業學習中沒少和陣列打交道，所以重中之重必須掌握，以下是陣列中常用方法及實體，
陣列常用操作
1、創建陣列
直接定義陣列項方法；
建構式new Array('Apple', 'Banana');
定義一個空陣列，我們在push進想要的陣列項，
const fruits = ['Apple', 'Banana'] console.log(fruits);//[ 'Apple', 'Banana' ] console.log(fruits.length);//3
2、訪問（索引到）陣列項 通過下標定位到陣列項，JavaScript陣列的索引為零：陣列的第一個元素在index 0，最后一個元素在index等于陣列length屬性值減去1，但是使用無效的索引號將回傳undefined，
console.log(fruits[0]) //Apple console.log(fruits[fruits.length-1])//Banana
3、遍歷陣列 Array.forEach(),遍歷陣列的方法很多，我將在往后的隨筆中更新，
fruits.forEach(function(item, index, array) { console.log(item, index) }) // Apple 0 // Banana 1
4、添加陣列項
- 添加到陣列的末尾 Array.push()
fruits.push('Orange') console.log(fruits)//[ 'Apple', 'Banana', 'Orange' ] - 添加到陣列的前面 Array.unshift()
fruits.unshift('Strawberry') console.log(fruits)//[ 'Strawberry', 'Apple', 'Banana', 'Orange' ]
5、移除陣列項
- 移除陣列末尾項 Array.pop()
fruits.pop() console.log(fruits)//[ 'Strawberry', 'Apple', 'Banana' ]
- 移除陣列首項 Array.shift()
fruits.shift() console.log(fruits)//[ 'Apple', 'Banana' ]
6、找到陣列項的索引 Array.indexOf()
fruits.push('Mango')
let pos = fruits.indexOf('Banana')
console.log(fruits)//[ 'Apple', 'Banana', 'Mango' ]
console.log(pos)//1
7、按索引的位置洗掉陣列項 Array.splice（pos，n）
//Array.splice（pos，n）//pos指定索引的開始位置，一直到陣列的結尾，n定義要洗掉的陣列項數目 fruits.splice(pos, 1) console.log(fruits)//[ 'Apple', 'Mango' ]
8、賦值陣列 Array.slice()
fruits.slice() console.log(fruits)//[ 'Apple', 'Mango' ]
9、陣列的其他常用方法
Array.reverse() 將陣列反轉就位（第一個陣列元素成為最后一個，最后一個陣列元素成為第一個）const fruits = ['Apple', 'Banana','Mango'] console.log(fruits)//[ 'Apple', 'Banana', 'Mango' ] fruits.reverse(); console.log(fruits)//[ 'Mango', 'Banana', 'Apple' ]
Array.sort()方法對陣列中的元素進行適當排序var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers); // [1, 2, 3, 4, 5]
Arrzy.fill()方法將陣列中的所有元素更改為靜態值，從開始索引（默認0）到結束索引（默認array.length），它回傳修改后的陣列const array1 = [1, 2, 3, 4]; // fill with 0 from position 2 until position 4 console.log(array1.fill(0, 2, 4)); // expected output: [1, 2, 0, 0] // fill with 5 from position 1 console.log(array1.fill(5, 1)); // expected output: [1, 5, 5, 5] console.log(array1.fill(6)); // expected output: [6, 6, 6, 6]
- Array.concat() 陣列合并（回傳一個新陣列，該陣列是與其他陣列和/或值連接在一起的該陣列）
const fruits = ['Apple', 'Banana','Mango'] const array = ['Strawberry'] console.log(fruits)//[ 'Apple', 'Banana', 'Mango' ] const newArray = fruits.concat(array); console.log(newArray)//[ 'Apple', 'Banana', 'Mango', 'Strawberry' ]
Array.entries()Array Iterator物件，該物件包含陣列中每個索引的鍵/值對，var a = ['a', 'b', 'c']; var iterator = a.entries(); for (let e of iterator) { console.log(e); } // [0, 'a'] // [1, 'b'] // [2, 'c']
Array.find()方法回傳提供的陣列中滿足條件的第一個元素的值，const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found);//12-
Array.filter() 陣列過濾
Array.filter是一個十分有用的方法，它通過回呼函式過濾原陣列，并將過濾后的項作為新陣列回傳 ）//過濾出陣列項長度大于6的項 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; function test(words) { return words.filter(word => word.length > 6); } console.log(test(words));//[ 'exuberant', 'destruction', 'present' ]
- Array.includes() 判斷陣列中是否包含指定元素 回傳值為布爾型別true或者false
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; let limit = words.includes("limit") let order = words.includes("order") console.log(limit)//true console.log(order)//false
- Array.indexOf() 回傳陣列中元素等于指定元素的第一個（最小）索引，如果沒有則回傳-1
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; let present = words.indexOf("limit") let order = words.indexOf("order") console.log(present)//1 console.log(order)//-1
- Array.join() 將陣列的所有元素連接到字串中，陣列轉字串，
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; console.log(words.join(','))//spray,limit,elite,exuberant,destruction,present
Array.lastIndexOf()方法回傳可以在陣列中找到給定元素的最后一個索引；如果不存在，則回傳-1，也可以用作去掉字串最后一個（字符）逗號操作const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']; console.log(animals.lastIndexOf('Dodo'));//3 console.log(animals.lastIndexOf('Tiger'));//1 console.log(animals.lastIndexOf('order'));//-1 const comma = "Dodo,Tiger,Penguin,"; console.log(comma.substring(0,comma.lastIndexOf(',')));//Dodo,Tiger,Penguin
Array.slice()陣列截取 方法將陣列的一部分的淺表副本回傳到新的陣列物件中，該物件選自begintoend（end不包括），其中begin和end表示該陣列中各項的索引，原始陣列將不會被修改const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2));//["camel", "duck", "elephant"] console.log(animals.slice(2, 4));//["camel", "duck"] console.log(animals.slice(1, 5));// ["bison", "camel", "duck", "elephant"]
Array.toString()方法回傳一個表示指定陣列及其元素的字串，const array1 = [1, 2, 'a', '1a']; console.log(array1.toString());//1,2,a,1a
- Array.toLocaleString() 回傳一個表示陣列元素的字串，元素使用其
toLocaleString方法轉換為字串，并且這些字串由特定于語言環境的字串分隔（例如，逗號“，”）const array1 = [1, 'a', new Date()]; const localeString = array1.toLocaleString('en', {timeZone: "UTC"}); console.log(localeString);//1,a,2020-4-12 4:49:17 PM
Array.every()方法測驗陣列中的所有元素是否通過提供的功能實作的測驗，它回傳一個布林值，//判斷陣列中是否所有的項的length都大于4
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
function test(words) {
return words.every(word => word.length > 4);
}
console.log(test(words));// true
Array.findIndex()方法回傳滿足條件的陣列中第一個元素的索引，否則回傳表明沒有元素通過測驗，-1const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber));//3
Array.keys()方法回傳一個新Array Iterator物件，該物件包含陣列中每個索引的鍵const array1 = ['a', 'b', 'c']; const iterator = array1.keys(); for (const key of iterator) { console.log(key); }
//0
//1
//2Array.values()方法回傳一個新Array Iterator物件，該物件包含陣列中每個索引的值，const array1 = ['a', 'b', 'c']; const iterator = array1.values(); for (const value of iterator) { console.log(value); }
//a
//b
//cArray.map()方法創建一個新陣列，其中填充了在呼叫陣列中每個元素上呼叫提供的函式的結果const array1 = [1, 4, 9, 16]; const map1 = array1.map(x => x * 2); console.log(map1);//[ 2, 8, 18, 32 ]
Array.reduce()方法在陣列的每個元素上執行reducer函式（由您提供），從而產生單個輸出值，const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15
- Array.
reduceRight()方法對一個累加器和陣列的每個值（從右到左）應用一個函式，以將其減小為單個值，const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight( (accumulator, currentValue) => accumulator.concat(currentValue) ); console.log(array1); // expected output: Array [4, 5, 2, 3, 0, 1]
Array.some()方法測驗陣列中的至少一個元素是否通過了由提供的功能實作的測驗，它回傳一個布林值，const array = [1, 2, 3, 4, 5]; const even = (element) => element % 2 === 0; console.log(array.some(even));//true
10、總結
以上就是本次全部內容，相信看完你會識訓頗多，使用起來也會更熟練，很多方法可能不會使用到，但是學無止境，建議去看看 MDN 檔案 以尋找更好的方法，
下面是記得一次查閱資料時，查到一個網友的總結，挺不錯的，感謝分享：
陣列方法可先選擇性使用
- 假設我們要判斷陣列中是否包含指定元素時：我們可以使用Array.includes()和Array.indexOf()均可以達到效果，但是可以使用前者代替后者，因為前者回傳的是布林值，
- 假設我們要通過主鍵id獲取相應詳細資訊時，那對于回傳值只有一項的時候，我們可以使用Array.find()，盡管Array.filter()可以實作，但是有可能符合條件的有多個項，那么程式不會停止還會繼續檢索所有符合的項，并回傳一個新的陣列,所以不建議大家使用，
- 如果我們判斷陣列中是否包含某一項時我們可以用Array.find()和Array.some()都能實作，看你的需要吧，如果只是判斷是否存在，那some()回傳布爾型別，建議使用some();
-
使用
Array.reduce替代Array.filter與Array.map的組合，事實上說，
Array.reduce不太容易理解，然而，如果我們先使用Array.filter過濾原陣列，之后（對結果）再呼叫Array.map（以獲取一個新陣列），這看起似乎有點問題，是我們忽略了什么嗎？這樣做的問題是：我們遍歷了兩次陣列，第一次是過濾原陣列以獲取一個長度稍短的新陣列，第二次遍歷（譯者注：指
Array.map）是對Array.filter的回傳的新陣列進行加工，再次創造了一個新陣列！為得到最終的結果，我們結合使用了兩個陣列方法，每個方法都有它自己的回呼函式，而且供Array.map使用的臨時陣列是由Array.filter提供的，（一般而言）該陣列無法復用，為避免如此低效場景的出現，我的建議是使用
Array.reduce，一樣的結果，更好的代碼！Array.reduce允許你將過濾后切加工過的項放進累加器中，累加器可以是需要待遞增的數字、待填充的物件、 待拼接的字串或陣列等，在上面的例子中，我們使用了
Array.map，（但更）建議使用累加器為待拼接陣列的Array.reduce，在下面的例子中，根據變數env的值，我們會將它加進累加器中或保持累加器不變（即不作任何處理），const characters = [ { name: 'ironman', env: 'marvel' }, { name: 'black_widow', env: 'marvel' }, { name: 'wonder_woman', env: 'dc_comics' }, ]; console.log( characters .filter(character => character.env === 'marvel') .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) ); // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ] console.log( characters .reduce((acc, character) => { return character.env === 'marvel' ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) : acc; }, []) ) // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124745.html
標籤：JavaScript
上一篇：陣列去重