關於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 ]