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 => x1 == function(x){return x1}

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

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"]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/217961.html

標籤：JavaScript

上一篇：第八章散串列

下一篇：js陣列方法(管飽)

js陣列方法(管飽)