Js中的數(shù)組Array

bbbbbb 發(fā)布于2019-08-22 17:20 / 2918人閱讀

摘要：關(guān)于的常用方法和注意點(diǎn)基礎(chǔ)字面量方式創(chuàng)建實(shí)例創(chuàng)建當(dāng)只有一個(gè)參數(shù)的時(shí)候代表創(chuàng)建相同數(shù)量的空項(xiàng)是為了彌補(bǔ)在創(chuàng)建數(shù)組的不足是實(shí)例上的一個(gè)屬性返回?cái)?shù)組元素的個(gè)數(shù)是否是一個(gè)留個(gè)位置增刪改作用用一個(gè)固定值填充一個(gè)數(shù)組中從索引到索引內(nèi)的全部元素參數(shù)

關(guān)于Array的常用方法和注意點(diǎn)

基礎(chǔ)

字面量方式創(chuàng)建

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

實(shí)例創(chuàng)建當(dāng)只有一個(gè)參數(shù)的時(shí)候代表創(chuàng)建相同數(shù)量的空項(xiàng)

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

Array.of()是 ES6 為了彌補(bǔ) new Array() 在創(chuàng)建數(shù)組的不足

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

length 是 Array 實(shí)例上的一個(gè)屬性返回?cái)?shù)組元素的個(gè)數(shù)

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

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

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

Array.from()

// 留個(gè)位置

增, 刪, 改 fill()

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

fill(value) 默認(rèn): 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是開(kāi)始填充的索引 end(不包含end) 結(jié)束填充的索引

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]

如果添加的是一個(gè)對(duì)象則是對(duì)同一個(gè)對(duì)象的引用

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

push()

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

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

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

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

通過(guò)數(shù)組的索引和利用數(shù)組的length添加新元素

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

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

pop()

- 作用: 刪除數(shù)組最后一個(gè)元素
- 參數(shù): 無(wú)
- 返回值: 刪除的那項(xiàng) 如果數(shù)組為空返回 undefined
- 原有數(shù)組是否改變: 是

pop() 刪除數(shù)組最后一個(gè)元素

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

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

通過(guò)減少數(shù)組的length刪除最后一個(gè)元素

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

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

unshift()

- 作用: 向數(shù)組的開(kāi)頭增加一個(gè)或多個(gè)新元素
- 參數(shù): unshift(itemN)
- 返回值: 增加內(nèi)容后數(shù)組的長(zhǎng)度值
- 原有數(shù)組是否改變: 是

unshift()向數(shù)組的開(kāi)頭增加一個(gè)或多個(gè)新元素

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()

- 作用: 刪除數(shù)組的第一個(gè)元素
- 參數(shù): 無(wú)
- 返回值: 刪除的那項(xiàng) 如果數(shù)組為空返回 undefined
- 原有數(shù)組是否改變: 是
shift() 刪除數(shù)組的第一個(gè)元素

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

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

splice()

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

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

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

let returnValue = ary.splice(3)

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

splice(start,deleteCount) 從索引 start 開(kāi)始刪除 deleteCount 個(gè)元素

let returnValue = ary.splice(0,4)

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

splice(start,deleteCount,itemN) 從索引start開(kāi)始，刪除deleteCount個(gè)元素，用itemN(n個(gè))把這個(gè)位置填補(bǔ)上

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

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

查詢 slice()

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

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

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

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這一項(xiàng))

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()

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

indexOf(value[,index])查詢數(shù)組里面是否包含某個(gè)元素 index 查詢開(kāi)始的索引默認(rèn)為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) //無(wú)法找到 NaN

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

lastIndexOf()

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

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

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

includes()

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

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

find()

- 作用: 返回?cái)?shù)組中符合函數(shù)規(guī)則的第一個(gè)元素的值
- 參數(shù): find(callback[,thisArg])
- 返回值: 如果有符合的返回這個(gè)元素的值, 沒(méi)有符合的返回 undefined
- 原有數(shù)組是否改變: 否

callback(item, index ,array)可以傳入3個(gè)參數(shù)(按需傳入) item:當(dāng)前元素 index:當(dāng)前元素的索引 array:原數(shù)組

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

thisArg(可選參數(shù)) 指定callback的this值注: callback 不能使用箭頭函數(shù) 因?yàn)榧^函數(shù)綁定了this

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

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

findIndex()

- 作用: 返回?cái)?shù)組中符合函數(shù)規(guī)則的第一個(gè)元素的索引
- 參數(shù): findIndex(callback[,thisArg])
- 返回值: 如果有符合的返回這個(gè)元素的索引, 沒(méi)有符合的返回-1
- 原有數(shù)組是否改變: 否

callback(item, index ,array)可以傳入3個(gè)參數(shù)(按需傳入) item:當(dāng)前元素 index:當(dāng)前元素的索引 array:原數(shù)組

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

thisArg(可選參數(shù)) 指定callback的this值注: callback 不能使用箭頭函數(shù) 因?yàn)榧^函數(shù)綁定了this

filter()

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

callback(item, index ,array)可以傳入3個(gè)參數(shù)(按需傳入) item:當(dāng)前元素 index:當(dāng)前元素的索引 array:原數(shù)組

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

thisArg(可選參數(shù)) 指定callback的this值注: callback 不能使用箭頭函數(shù) 因?yàn)榧^函數(shù)綁定了this

遍歷 forEach()

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

callback(item, index ,array)可以傳入3個(gè)參數(shù)(按需傳入) item:當(dāng)前元素 index:當(dāng)前元素的索引 array:原數(shù)組

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(可選參數(shù)) 指定callback的this值注: callback 不能使用箭頭函數(shù) 因?yàn)榧^函數(shù)綁定了this

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

map()

- 作用: 對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)并把執(zhí)行后的結(jié)果組成一個(gè)新的數(shù)組返回
- 參數(shù): map(callback[, thisArg])
- 返回值: 執(zhí)行函數(shù)后的新數(shù)組

callback(item, index ,array)可以傳入3個(gè)參數(shù)(按需傳入) item:當(dāng)前元素 index:當(dāng)前元素的索引 array:原數(shù)組
forEach并不會(huì)返回結(jié)果而現(xiàn)在需要對(duì)結(jié)果進(jìn)行處理后返回

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() 都返回一個(gè)遍歷器對(duì)象可以用 for...of 遍歷也可以用遍歷器對(duì)象的 next() 調(diào)用

entries()是對(duì)鍵值對(duì)的遍歷 for...of循環(huán)數(shù)組是不可以取到索引的可通過(guò)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() 是對(duì)鍵值的遍歷

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

keys() 是對(duì)鍵名的遍歷

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

拼接 擴(kuò)展運(yùn)算符

... 留個(gè)位置

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

concat()

- 作用: 數(shù)組的拼接
- 參數(shù): concat([, ary])
- 返回值: 把拼接后的數(shù)組當(dāng)做一個(gè)新的數(shù)組返回

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

concat() 沒(méi)有參數(shù)的時(shí)候?qū)崿F(xiàn)數(shù)組的克隆

let returnValue = ary.concat()

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

concat(ary1) 實(shí)現(xiàn)兩個(gè)數(shù)據(jù)的拼接

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()

- 作用: 以指定的分隔符把數(shù)組轉(zhuǎn)換為字符串
- 參數(shù): 分割的字符如:,
- 返回值: 轉(zhuǎn)換后的字符串

join() 以指定的分隔符把數(shù)組轉(zhuǎn)換為字符串默認(rèn)是 ,

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

排序 reverse()

- 作用: 反轉(zhuǎn)數(shù)組
- 參數(shù): 無(wú)
- 返回值: 反轉(zhuǎn)后的數(shù)組
- 原有數(shù)組是否改變: 是

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()

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

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 ]

云服務(wù)器 GPU云服務(wù)器 js返回?cái)?shù)組中的值 js取數(shù)組中的數(shù)據(jù) js刪除數(shù)組中的數(shù)據(jù) 數(shù)組array

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95082.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

bbbbbb

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

VS Code如何編寫(xiě)C/C++程序

閱讀 1860·2021-09-23 11:21
利用styleSheets快速生成一個(gè)圖標(biāo)庫(kù)界面

閱讀 707·2019-08-30 15:55
JavaScript 工作原理之十－使用 MutationObserver 監(jiān)測(cè) DOM 變化

閱讀 844·2019-08-29 15:40
什么是編程的基本功？

閱讀 541·2019-08-29 12:56
try-catch-finally，被你忽略掉的執(zhí)行順序

閱讀 3175·2019-08-26 12:00
cross-env使用以及根據(jù)環(huán)境打包

閱讀 3567·2019-08-23 18:24
重學(xué)前端學(xué)習(xí)筆記（三）--前端知識(shí)框架圖

閱讀 2259·2019-08-23 17:08
LeetCode 之 JavaScript 解答第344題 —— 反轉(zhuǎn)字符串（Reverse Str

閱讀 1649·2019-08-23 17:03

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Js中的數(shù)組Array

相關(guān)文章

**PHP： array數(shù)組常用API**

JS數(shù)組

JS數(shù)組

學(xué)習(xí)筆記: JS數(shù)組

**對(duì)類(lèi)型化數(shù)組(Typed Array)與ArrayBuffer的理解**

發(fā)表評(píng)論

0條評(píng)論

bbbbbb

男|高級(jí)講師

TA的文章

VS Code如何編寫(xiě)C/C++程序

利用styleSheets快速生成一個(gè)圖標(biāo)庫(kù)界面

JavaScript 工作原理之十－使用 MutationObserver 監(jiān)測(cè) DOM 變化

什么是編程的基本功？

try-catch-finally，被你忽略掉的執(zhí)行順序

cross-env使用以及根據(jù)環(huán)境打包

重學(xué)前端學(xué)習(xí)筆記（三）--前端知識(shí)框架圖

LeetCode 之 JavaScript 解答第344題 —— 反轉(zhuǎn)字符串（Reverse Str

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Js中的數(shù)組Array

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！