Js中的數組Array

bbbbbb 發布于2019-08-22 17:20 / 2910人閱讀

摘要：關于的常用方法和注意點基礎字面量方式創建實例創建當只有一個參數的時候代表創建相同數量的空項是為了彌補在創建數組的不足是實例上的一個屬性返回數組元素的個數是否是一個留個位置增刪改作用用一個固定值填充一個數組中從索引到索引內的全部元素參數

關于Array的常用方法和注意點

基礎

字面量方式創建

let ary1 = []
let ary2 = [1,2,3]

實例創建當只有一個參數的時候代表創建相同數量的空項

let ary1 = new Array() //[]
let ary2 = new Array(3) //[, , ,] 
let ary3 = new Array(1,2,3) //[1, 2, 3]

Array.of()是 ES6 為了彌補 new Array() 在創建數組的不足

let ary1 = Array.of() //[]
let ary2 = Array.of(3) //[3]
let ary3 = Array.of(1,2,3) //[1, 2, 3]

length 是 Array 實例上的一個屬性返回數組元素的個數

let ary = [1,2,3,4,5]
let lengths = ary.length;
console.log(lengths) //5

Array.isArray(value) value是否是一個 Array

Array.isArray([1,2,3])  // true
Array.isArray({}) //false
Array.isArray("foobar") //false
Array.isArray(undefined) //false

Array.from()

// 留個位置

增, 刪, 改 fill()

- 作用: 用一個固定值value填充一個數組中從索引start到索引end內的全部元素
- 參數: fill(value[, start = 0[, end = this.length]])
- 返回值: 填充后的數組
- 原有數組是否改變: 是

fill(value) 默認: start = 0 end = this.length

let ary = [1,2,3,4]
let returnValue = ary.fill(0)
console.log(ary) //[0, 0, 0, 0]
console.log(returnValue) //[0, 0, 0, 0]

fill(value,start,end) start是開始填充的索引 end(不包含end) 結束填充的索引

let ary = [1,2,3,4]
let returnValue = ary.fill(0,1,3)
console.log(ary) //[1, 0, 0, 4]
console.log(returnValue) //[1, 0, 0, 4]

如果添加的是一個對象則是對同一個對象的引用

let ary = new Array(2)
ary.fill({sex:1})
ary[0].sex = 0
console.log(ary) //[{ sex: 1 }, { sex: 1 }]

push()

- 作用: 向數組的末尾添加1個或多個新元素
- 參數: push(itemN)
- 返回值: 增加內容后數組的長度值
- 原有數組是否改變: 是

push() 向數組的末尾增加一個或多個新元素

let ary = []
ary.push(1)
let returnValue = ary.push(2,"3")

console.log(ary) //[1, 2, "3"]
console.log(returnValue) //3

通過數組的索引和利用數組的length添加新元素

let ary = [1,2]
ary[ary.length] = 3

console.log(ary) //[1, 2, 3]

pop()

- 作用: 刪除數組最后一個元素
- 參數: 無
- 返回值: 刪除的那項如果數組為空返回 undefined
- 原有數組是否改變: 是

pop() 刪除數組最后一個元素

let ary = [1,2,3,4]
let returnValue = ary.pop()

console.log(ary) //[1, 2, 3]
console.log(returnValue) //4

通過減少數組的length刪除最后一個元素

let ary = [1,2,3]
ary.length -= 1

console.log(ary) //[1, 2]

unshift()

- 作用: 向數組的開頭增加一個或多個新元素
- 參數: unshift(itemN)
- 返回值: 增加內容后數組的長度值
- 原有數組是否改變: 是

unshift()向數組的開頭增加一個或多個新元素

let ary = [4,5]
ary.unshift(3)
let returnValue = ary.unshift(1,2)

console.log(ary) // [1, 2, 3, 4, 5]
console.log(returnValue) // 5

shift()

- 作用: 刪除數組的第一個元素
- 參數: 無
- 返回值: 刪除的那項如果數組為空返回 undefined
- 原有數組是否改變: 是
shift() 刪除數組的第一個元素

let ary = [1,2,3,4]
let returnValue = ary.shift()

console.log(ary) //[2, 3, 4]
console.log(returnValue) //1

splice()

- 作用: 刪除多個或者添加/替換新元素
- 參數: splice(start[, deleteCount[, itemN])
- 返回值: 把刪除的內容當做一個新的數組返回
- 原有數組是否改變: 是

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

splice(start) 從索引start開始刪除到末尾

let returnValue = ary.splice(3)

console.log(ary) //[1, 2, 3]
console.log(returnValue) //[4, 5, 6, 7]

splice(start,deleteCount) 從索引 start 開始刪除 deleteCount 個元素

let returnValue = ary.splice(0,4)

console.log(ary) //[5, 6, 7]
console.log(returnValue) //[1, 2, 3, 4]

splice(start,deleteCount,itemN) 從索引start開始，刪除deleteCount個元素，用itemN(n個)把這個位置填補上

let returnValue = ary.splice(3,1,"a","b")

console.log(ary) //[1, 2, 3, "a", "b", 5, 6, 7]
console.log(returnValue) //[4]

查詢 slice()

- 作用: 截取數組
- 參數: slice(n = 0[, m = this.length])
- 返回值: 把找到的內容當做一個新的數組返回

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

slice(n) 從索引n找到數組末尾如果 m 被省略則slice會截取到數組末尾

let returnValue = ary.slice(2)

console.log(ary) //[1, 2, 3, 4, 5, 6, 7]
console.log(returnValue) //[3, 4, 5, 6, 7]

slice(n,m) 從索引n找到索引m處(不包含m這一項)

let returnValue = ary.slice(2,6)
let returnValue1 = ary.slice(-4,-1)
console.log(ary) //[1, 2, 3, 4, 5, 6, 7]
console.log(returnValue) //[3, 4, 5, 6]
console.log(returnValue1) //[4, 5, 6]

indexOf()

- 作用: 查詢數組里面是否包含某個元素
- 參數: indexOf(value[,index])
- 返回值: 如果查詢的元素存在返回當前元素的索引; 如果查詢的元素不存在返回 -1
- 原有數組是否改變: 否

indexOf(value[,index])查詢數組里面是否包含某個元素 index 查詢開始的索引默認為0

let ary = [1,2,3,"a","b","c",NaN]
let returnValue = ary.indexOf("a")
let returnValue1 = ary.indexOf("a",4)
let returnValue2 = ary.indexOf(NaN) //無法找到 NaN

console.log(returnValue,"&",returnValue1,"&",returnValue2) //3 "&" -1 "&" -1

lastIndexOf()

- 作用: 查詢數組里面的某個元素最后出現的位置
- 參數: lastIndexOf(value[,index])
- 返回值: 如果查詢的元素存在返回當前元素的索引; 如果查詢的元素不存在返回 -1
- 原有數組是否改變: 否
lastIndexOf(value[,index]) 數組里面的某個元素最后出現的位置從數組的[,index]開始往前查詢默認從最后一個

let ary = ["a","b","c","b"]
let returnValue  = ary.lastIndexOf("b")
let returnValue1 = ary.lastIndexOf("b",2) //從索引為2的往前查找 所以最后一個"b" 的索引為 1
let returnValue2 = ary.lastIndexOf("c",-3)

console.log(returnValue,"&",returnValue1,"&",returnValue2) //3 "&" 1 "&" -1

includes()

- 作用: 判斷一個數組是否包含某個元素
- 參數: includes(value[, start])
- 返回值: 如果包含則返回 true，否則返回false
- 原有數組是否改變: 否
同indexOf()相比 includes 可以找到 NaN

let ary = [1,2,3,"a","b","c",NaN]
let returnValue = ary.includes(NaN)
console.log(returnValue) //true

find()

- 作用: 返回數組中符合函數規則的第一個元素的值
- 參數: find(callback[,thisArg])
- 返回值: 如果有符合的返回這個元素的值, 沒有符合的返回 undefined
- 原有數組是否改變: 否

callback(item, index ,array)可以傳入3個參數(按需傳入) item:當前元素 index:當前元素的索引 array:原數組

let ary = [1,3,5,66,8,99]
let returnValue = ary.find(function(item,index){
    return item >= 66
})
console.log(returnValue) //66

thisArg(可選參數) 指定callback的this值注: callback 不能使用箭頭函數因為箭頭函數綁定了this

let ary = [1,3,5,66,8,99]
ary.find(function(item,index){
    console.log(this) //[1,3,5,66,8,99]
},ary)

// 不能使用箭頭函數
ary.find((item) => {
    console.log(this) //undefined
},ary)

findIndex()

- 作用: 返回數組中符合函數規則的第一個元素的索引
- 參數: findIndex(callback[,thisArg])
- 返回值: 如果有符合的返回這個元素的索引, 沒有符合的返回-1
- 原有數組是否改變: 否

callback(item, index ,array)可以傳入3個參數(按需傳入) item:當前元素 index:當前元素的索引 array:原數組

let ary = [1,3,5,66,8,99]
let returnValue = ary.findIndex(function(item,index){
    return item >= 66
})
console.log(returnValue) //3

thisArg(可選參數) 指定callback的this值注: callback 不能使用箭頭函數因為箭頭函數綁定了this

filter()

- 作用: 過濾數組中符合函數規則的元素
- 參數: filter(callback[,thisArg])
- 返回值: 把符合規則的元素組成一個新的數組返回,如果沒有則返回空數組
- 原有數組是否改變: 否

callback(item, index ,array)可以傳入3個參數(按需傳入) item:當前元素 index:當前元素的索引 array:原數組

let ary = [1,3,5,66,8,99]
let returnValue = ary.filter((item) => {
    return item > 5
})
console.log(returnValue) //[66, 8, 99]

thisArg(可選參數) 指定callback的this值注: callback 不能使用箭頭函數因為箭頭函數綁定了this

遍歷 forEach()

- 作用: 對數組的每個元素執行一次提供的函數
- 參數: forEach(callback[, thisArg])
- 返回值: undefined

callback(item, index ,array)可以傳入3個參數(按需傳入) item:當前元素 index:當前元素的索引 array:原數組

let ary = [1,2,3,4,5]
let ary1 = []
ary.forEach(function(item){
    ary1.push(item + "a")
})
console.log(ary1) //["1a", "2a", "3a", "4a", "5a"]

thisArg(可選參數) 指定callback的this值注: callback 不能使用箭頭函數因為箭頭函數綁定了this

ary.forEach(function(item){
    console.log(this) //[1, 2, 3, 4, 5]
},ary)
//使用箭頭函數將獲取不到this
ary.forEach(() => {
    console.log(this) //undefined
},ary1)

map()

- 作用: 對數組的每個元素執行一次提供的函數并把執行后的結果組成一個新的數組返回
- 參數: map(callback[, thisArg])
- 返回值: 執行函數后的新數組

callback(item, index ,array)可以傳入3個參數(按需傳入) item:當前元素 index:當前元素的索引 array:原數組
forEach并不會返回結果而現在需要對結果進行處理后返回

let ary = [1,2,3,4,5]
let returnValue = ary.map(function(item){
    return item + "a"
})
console.log(returnValue) //["1a", "2a", "3a", "4a", "5a"]

entries(), keys(), values()

entries() keys() values() 都返回一個遍歷器對象可以用 for...of 遍歷也可以用遍歷器對象的 next() 調用

entries()是對鍵值對的遍歷 for...of循環數組是不可以取到索引的可通過entries方法取到索引

let ary = ["a","b","v"]
let ary1 = []
for(let [index, item] of ary.entries()){
    ary.push({[index] : item})
}
console.log(ary1) //[{ "0": "a" }, { "1": "b" }, { "2": "v" }]

values() 是對鍵值的遍歷

let ary = ["a","b","v"]
let ary1 = []
for(let item of ary.values()){
    ary.push(item)
}
console.log(ary1) //[a, b, v]

keys() 是對鍵名的遍歷

let ary = ["a","b","v"]
let ary1 = []
for(let index of ary.keys()){
    ary.push(index)
}
console.log(ary1) //[0, 1, 2]

拼接 擴展運算符

... 留個位置

[...["a","b","c"], ...["d","e","f"]] // ["a", "b", "c", "d", "e", "f"]

concat()

- 作用: 數組的拼接
- 參數: concat([, ary])
- 返回值: 把拼接后的數組當做一個新的數組返回

let ary = [1,2,3,4]

concat() 沒有參數的時候實現數組的克隆

let returnValue = ary.concat()

console.log(ary) //[1, 2, 3, 4]
console.log(returnValue) //[1, 2, 3, 4]

concat(ary1) 實現兩個數據的拼接

let ary1 = [5,6,7]
let returnValue = ary.concat(ary1)

console.log(ary) //[1, 2, 3, 4]
console.log(returnValue) //[1, 2, 3, 4, 5, 6, 7]

join()

- 作用: 以指定的分隔符把數組轉換為字符串
- 參數: 分割的字符如:,
- 返回值: 轉換后的字符串

join() 以指定的分隔符把數組轉換為字符串默認是 ,

let ary = ["Chrome","IE","Firefox"]
let returnValue = ary.join(",")
console.log(returnValue) //"Chrome,IE,Firefox"

排序 reverse()

- 作用: 反轉數組
- 參數: 無
- 返回值: 反轉后的數組
- 原有數組是否改變: 是

let ary = [0,1,2,3,4,5,6]
let returnValue = ary.reverse()

console.log(ary) //[6, 5, 4, 3, 2, 1, 0]
console.log(returnValue) //[6, 5, 4, 3, 2, 1, 0]

sort()

- 作用: 對數組的元素進行排序
- 參數: sort([, callback])
- 返回值: 排序后的數組
- 原有數組是否改變: 是

let ary = [2,32,4,23,62,99]

a - b 正序

let returnValue = ary.sort(function(a,b){
    return a - b
})
console.log(returnValue) //[2, 4, 23, 32, 62, 99]

b - a 倒序

let returnValue = ary.sort(function(a,b){
    return b - a
})
console.log(returnValue) //[ 99, 62, 32, 23, 4, 2 ]

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95082.html

PHP： array數組常用API

摘要：語法數組刪除數組的最后一項語法數組在數組的最末添加一項語法數組刪除數組的首項語法數組在數組的首部添加一項案例分析 1:數組的指針操作：語法：current(數組) 當前指針指向的單元值（默認是第零個）語法 next(數組) 當前指針往下移動一幀語法 prev(數組) 當前指針往前移動一個指針語法 end(array) 將當前指針移動到最后一項語法 ...

Cheriselalala 2019-07-01 12:24 評論0 收藏0
JS數組

摘要：如果沒有符合條件的成員，則返回返回查找到的該成員該方法與類似，對數組中的成員依次執行函數，直至找到第一個返回值為的成員，然后返回該成員的索引。摘要最近學習了JS數組的基礎知識，在這里呢總結一下，包括js數組的屬性與方法，js數組常常遇到的一些問題，小編通過查閱一些網上的知識，把關于數組的東西進行了羅列，希望各位大神多多指點！數組屬性 lengthlength屬性表示數組的長度，即...

NSFish 2019-08-02 10:57 評論0 收藏0
JS數組

摘要：如果沒有符合條件的成員，則返回返回查找到的該成員該方法與類似，對數組中的成員依次執行函數，直至找到第一個返回值為的成員，然后返回該成員的索引。摘要最近學習了JS數組的基礎知識，在這里呢總結一下，包括js數組的屬性與方法，js數組常常遇到的一些問題，小編通過查閱一些網上的知識，把關于數組的東西進行了羅列，希望各位大神多多指點！數組屬性 lengthlength屬性表示數組的長度，即...

Carl 2019-08-30 15:54 評論0 收藏0
學習筆記: JS數組

摘要：數組元素甚至可以是對象或其它數組。它執行的是淺拷貝，這意味著如果數組元素是對象，兩個數組都指向相同的對象，對新數組中的對象修改，會在舊的數組的相同對象中反應出來。 JS中的數組是弱類型的，數組中可以含有不同類型的元素。數組元素甚至可以是對象或其它數組。JS引擎一般會優化數組，按索引訪問數組常常比訪問一般對象屬性明顯迅速。數組長度范圍 from 0 to 4,294,967,295(2^...

archieyang 2019-08-20 16:32 評論0 收藏0
對類型化數組(Typed Array)與ArrayBuffer的理解

摘要：類型化數組也是中新引入的。用一句話解釋類型化數組就是它是操作二進制數據的接口。類型化數組類型化數組的應用二進制數據的接口主要應用于文件，在中涉及文件處理的幾乎都可以應用，主要是，，。類型化數組（Typed Array）也是HTML5中新引入的API。用一句話解釋類型化數組就是：它是JS操作二進制數據的接口。眾所周知，直接操作二進制數據可以使程序更為高效，盡管JS對常規數組做了很多...

Worktile 2019-08-19 17:51 評論0 收藏0