js陣列方法(管飽)

浮雲共我歸發表於2020-11-15
JS陣列

有一些陣列方法是ECMAScript新增的，一定要注意瀏覽器的相容！！

Array物件屬性：

屬性 說明

constructor

 返回對建立此物件的函式引用
length 返回集合內的元素的所有長度
prototype 向物件新增屬性和方法

 

constructor

const arr = [1, 2, 4, 5, 6, 9, 15]
console.log(arr.constructor)

//輸出為  ƒ Array() { [native code] }

length

const arr = [1, 2, 4]
console.log(arr.length)

//輸出為  3

 

下文的箭頭函式的解釋為：x => x*1  ==  function(x){return x*1}

如果是有多個引數則：(x,y) => x*y  ==  function(x,y){return x*y}  。我這只是為了簡寫，並不代表適用。

 

Array物件方法：

方法 說明
shift() 刪除第一個元素，並返回結果。
unshift() 插入元素至第一個元素前面，括號內放入要插入的元素。
splice()  向陣列內新增新元素。第一個引數定義新增新元素的位置,以拼接的方式，第二個引數是定義應刪除多少個元素
slice()  找出陣列內的指定元素。第一個引數定義刪除元素的位置，第二個引數是結束位置。
pop() 刪除陣列內的最後一個元素，並返回結果。
push() 在陣列內的末尾新增一個或多個元素，並返回結果。
reverse() 反轉陣列內的元素順序，並返回結果。
toString() 把陣列轉換為字串並返回結果。注意：S為大寫。
concat() 合併(連線)陣列建立一個新陣列，也可以將括號內的值作為引數合併至當前陣列。
sort() 對陣列內的元素進行排序。 (排序的依照我還搞不清楚....)
valueOf() 返回陣列物件的原始值。
join()  把陣列內的元素拼成字串，再以指定的分隔符進行分隔。
isArray() 判斷物件是否是一個陣列。
includes() 判斷陣列內是否包含指定的值，可新增多個。
lastIndexOf() 返回指定的元素最後出現的位置。
find() 返回陣列內通過條件的第一個元素。注意：用函式判斷、如果沒有符合條件的元素則返回undefined。
indexOf() 返回指定元素在陣列內的位置。
copyWithin() 指定元素位置拷貝到另一個位置。注意：後面的元素會被位移出陣列，慎用！

shift()

const myArray = [3, 1, 5, 2, 6]
console.log(myArray.shift())

//輸出為 3

unshift()

const myArray = [3, 1, 5, 2, 6]
console.log(myArray.unshift(1,3,2323))

//輸出為 [1, 3, 2323, 3, 1, 5, 2, 6]

splice()

const myArray = [3, 1, 5, 2, 6]
console.log(myArray.splice(1,1,'浮雲共我歸'))

//輸出為  [3, "浮雲共我歸", 5, 2, 6]

slice()

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2.slice(2, 4))

//輸出為  (2) [3, 4]

pop()

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2.pop())

//輸出為  9

push()

const arr2 = [1, 2, 3, 4]
console.log(arr2.push('233','333'))
console.log(arr2)

//輸出為  6  、  (6) [1, 2, 3, 4, "233", "333"]

toString()

const myArray = [3, 1, 5, 2, 6]
console.log(myArray.toString())

//輸出為  3，1，5，2，6

concat()

const myArray = [3, 1, 5, 2, 6]
const MyArray = [66,77]
const result = myArray.concat(MyArray)
console.log(result.concat('add'))

//輸出為  [3, 1, 5, 2, 6, 66, 77, "add"]

sort()

const arr2 = [6, 2, '雲', 1, 4, 'a']
const result = arr2.sort((x, y) => {
    if (x > y) {
        return 1
    }
    if (x < y) {
        return -1
    }
    return 0
})
console.log(result)

//輸出為  (6) [1, 2, 4, 6, "a", "雲"]

valueOf()

const arr2 = [6, 2, '雲', 1]
console.log(arr2.valueOf())
            
// 輸出為  (4) [6, 2, "雲", 1]

join()　　(結合split()方法會有意想不到的結果,而且我發現)

const arr2 = ['浮','雲','共','我','歸']
console.log(arr2.join('?'))
            
// 輸出為  浮?雲?共?我?歸
//用上這行arr2.join('?').split('?')   又變回原樣了   
//split()裡不加值  輸出： ["浮?雲?共?我?歸"]

isArray()

const myArray = [3, 1, 5, 2, 6]
console.log(Array.isArray(myArray))

//輸出為  true

includes()

const arr2 = ['浮','雲','共','我','歸']
console.log(arr2.includes('雲','浮'))
            
// 輸出為  true

lastIndexOf()

const arr2 = ['浮','雲','共','我','歸']
arr2.shift()
onsole.log(arr2.lastIndexOf('雲'))
            
// 輸出為  0

find()

const myArray = [3, 1, 5, 2, 6]
const result = myArray.find(x => x > 5)
console.log(result)

//輸出為  6

indexOf()

const myArray = [3, 1, 5, 2, 6]
console.log(myArray.indexOf(6))

//輸出為  4

 copyWithin()

const myArray = [1, 2,'雲', 3, 4, 5]
            
const result = myArray.copyWithin(2,0)
console.log(result)
//輸出為  (6) [1, 2, 1, 2, "雲", 3]

 

Array物件-高階函式

方法 說明
filter()  過濾 過濾未達成指定條件的元素，並返回結果。注意：不會對空元素進行檢測，不會改變原陣列
reduce()   累加

 此方法接收一個函式作為累加器，陣列中的每個元素從左到右相加，最終計算為一個值。可用於函式的compose。

注意：對空陣列不會執行回撥函式。　　reduceRight()從右往左累加
map()   對映 返回一個新陣列，陣列中的元素為呼叫函式後處理的值。

 

filter()

// 過濾偶數
const arr = [1, 2, 4, 5, 6, 9, 15]
myarr = arr.filter((x) => x % 2 !== 0)
console.log(myarr)

reduce()

//將元素累加至最終全部相加的值，輸出結果為42
const Nums = [1, 5, 1, 5, 10, 20]
const total = Nums.reduce((preValue, n) => {
return preValue + n
}, 0)
//後面0表示初始值，正數則在結果值上加，負數反之

map()　（這個方法的用法也很多）

const myArray = [1, 2, 3, 4, 5]
console.log(myArray.map((function(x) {
    return x + 1
})))

// 輸出為  (5) [2, 3, 4, 5, 6]

 

陣列遍歷方法

 

方法 說明
forEach 呼叫陣列的每個元素，將元素傳遞給回撥函式。
for in 遍歷出陣列內的元素索引值。   keys()方法也和這個差不多
for of 遍歷出陣列內的元素。

 

 

forEach

const myArray = [1, 2,'雲', 3, 4, 5]

//element是當前元素,index是元素索引,array是當前元素所屬的陣列物件
myArray.forEach(function(element, index,array) {
    console.log(element,index,array)
})
            
/* 輸出為:1 0 (6) [1, 2, "雲", 3, 4, 5]
         2 1 (6) [1, 2, "雲", 3, 4, 5]
         雲 2 (6) [1, 2, "雲", 3, 4, 5]
         3 3 (6) [1, 2, "雲", 3, 4, 5]
         4 (6) [1, 2, "雲", 3, 4, 5]
         5 5 (6) [1, 2, "雲", 3, 4, 5] */

for of

const myArray = [1, 2,'雲', 3, 4, 5]
            
for(result of myArray){
    console.log(result)
}
//輸出為  1 2 雲 3 4 5

for in

const myArray = [1, 2,'雲', 3, 4, 5]
            
for(result in myArray){
    console.log(result)
}
//輸出為  0 1 2 3 4 5

 

陣列的一些常用方法

去重

const myArray = [3, 1, 5, 1, 6]
const result = Array.from(new Set(myArray))
console.log(result)

//輸出為  [3,1,5,6]

字串轉陣列  （陣列轉字串可用toString()的方法）

const myArray = '浮雲共我歸'
const result = Array.from(myArray)
console.log(result)

//輸出為  ["浮,雲,共,我,歸"]

//如果去掉from  輸出為  ["浮雲共我歸"]

將首字母變為大寫，其餘小寫

const arr = ['adam', 'LISA', 'barT']
const arr2= ['Adam', 'Lisa', 'Bart']

function result(arr) {
　　return arr.map(function(x) {
　　　　x = x.toLowerCase()
//toUpperCase()將元素轉化為大寫,substring()提取指定下標裡的元素後面的字元
　　　　x = x[0].toUpperCase() + x.substring(1)
　　　　return x
})
}
console.log(result(arr).toString() === arr2.toString())

//輸出為  true   轉換小寫的方法是 toLowperCase()

用map建立鍵值對集合  &&  元素乘與自身

const arr1 = new Map([
    ['lai', 199],
    ['quan', 'map'],
    ['feng', 10]
])
console.log(arr1)
//輸出為  Map(3) {"lai" => 199, "quan" => "map", "feng" => 10}
            
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const result = arr2.map(x => x * x)
console.log(result)
//輸出為  (9) [1, 4, 9, 16, 25, 36, 49, 64, 81]

 找出陣列內最大的數字   

const myArray = [1, 2, 3, 4, 5]

const result = Math.max(...myArray)
console.log(result)
//輸出為  5
//最小值的話換成min即可

去除陣列內的空格    缺點是陣列內不能包含數字

const myArray = ['a', ' ', null, '', undefined, 'b', 'c','   ']
const result = myArray.filter((z) => z && z.trim())
console.log(result)

//輸出為  (3) ["a", "b", "c"]

相關文章