js數組方法(管飽)

  • 2020 年 11 月 15 日
  • 筆記

有一些數組方法是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"]

VirMach 便宜 VPS

QNews

QNews