網站前端_JavaScript-基礎入門.0009.JavaScript數組類型

數組簡介:

說明: Array屬于引用類型,引用類型是一種資料結構,用于将資料和功能組織在一起,如var newArr = new Array(),這行代碼建立了Array引用類型的一個新執行個體,儲存在newArr中,使用的構造函數是Array,它隻為新對象定義了預設的屬性和方法.

建立數組:

說明: 數組每個元素可以儲存任何類型,而且可以随着資料的添加自動增長以容納新增資料

對象屬性
length	表示數組長度,支援讀寫,可以通過設定此屬性,來從數組的預設移除項或向數組中添加新項

/*
 * 建立數組對象
 */
// 支援使用Array構造函數
var newArr = new Array()
// 支援省略new關鍵字聲明
var newArr = Array()
// 支援Array構造函數傳參
var newArr = new Array(10)
// 支援Array構造函數傳項
var newArr = new Array('李滿滿', 25, '男')
// 支援字面量形式建立數組
var newArr = ['李滿滿', 25, '男']
console.log(newArr)
/*
 * 數組對象指派
 */
newArr[0] = '劉珍珍'
newArr[newArr.length] = '新增項'
console.log(newArr)
/*
 * 多元數組建立
 */
var newArr = [
    {
        name: '李滿滿',
        age: 25,
        sex: '男'
    },
    ['李滿滿', 25, '男'],
    '李滿滿',
    '25',
    '男'
]
/*
 * length - 讀取或添加元素
 */
var newArr = [1, 2, 3]
console.log(newArr.length)
// 數組原地被修改
newArr[newArr.length] = 4
console.log(newArr)      

檢測數組:

說明: 由于數組為引用類型,是以再用typeof表達式将無法檢測到執行個體對象屬性,因為對于引用類型的對象基本傳回都是Object,此時我們可使用instanceof表達式來判斷

/*
 * 數組類型檢測
 */
var newArr = new Array('李滿滿', '男', 25)
// 以new關鍵字建立的也傳回true
console.log(newArr instanceof Array)
var newArr = ['李滿滿', '男', 25]
// 以字面量建立的也傳回true
console.log(newArr instanceof Array)      

轉換方法:

方法名稱	方法說明
toString()	傳回由數組中的每個值的字元串拼接而成的一個以逗号分割的字元串,其實調用的是每個元素的toString方法
toLocaleString()	傳回由數組中的每個值的字元串拼接而成的一個以逗号分割的字元串,其實調用的是每個元素的toLocaleString方法
valueOf()	傳回數組
join(sep)	傳回以seq連接配接數組中各個元素的字元串形式

/*
 * toString/toLocaleString/valueOf
 */
var newArr = [
    {
        toString: function(){
            return 'toString - 李滿滿'
        },
        toLocaleString: function(){
            return 'toLocaleString - 李滿滿'
        }
    },
    {
        toString: function(){
            return 'toString - 劉珍珍'
        },
        toLocaleString: function(){
            return 'toLocaleString - 劉珍珍'
        }
    }
]
console.log(
    newArr.toString(),
    newArr.toLocaleString(),
    newArr.valueOf()    
)
/*
 * join(sep)
 */
console.log(['李滿滿', '男', 25].join(','))      

技巧: 數組的toString或toLocaleString方法傳回值隻能以逗号分割的字元串形式,如果要使用不同分割符連接配接數組元素,可使用join(sep)方法,此方法隻有一個參數分割符,然後傳回包含所有元素和分割符的字元串

棧的方法:

說明:棧是一種先進先出的資料結構,也就是說最新被插入的項最早被移除,Js為數組提供了push/pop方法,使其實作類似棧的行為

push(val1.....valN)	壓入棧頂,可接收任意數量的參數,把它們逐個添加到數組末尾,并傳回修改後數組的長度
pop()	彈出棧頂,從數組末尾移除最後一個元素,并傳回此元素

var userInfo = ['李滿滿', 25, '男']
var newLen = userInfo.push('杭州市富陽市')
console.log('數組被壓入棧後長度改變為: ' + newLen)
var lastItem = userInfo.pop()
console.log('數組彈出最新壓入的資料為: ' + lastItem)      

隊列方法:

說明: 隊列是一種先進後出的資料結構,也就是說最新被插入的項最晚被移除,Js為數組提供了push/shift/unshift,使其實作類似隊列的行為

	尾部壓入,可接收任意數量的參數,把它們逐個添加到數組末尾,并傳回修改後數組的長度
shift()	頭部彈出,從數組頭部移除第一個元素,并傳回此元素
unshift(val1.....valN)	頭部壓入,可接收任意數量的參數,把它們逐個添加到數組頭部,并傳回修改後數組的長度

var userInfo = ['李滿滿', 25, '男']
var newLen = userInfo.push('杭州市富陽市')
console.log('數組被壓入隊列後長度改變為: ' + newLen)
var shitfItem = userInfo.shift()
console.log('數組從隊列頭部移除的元素是: ' + shitfItem)
var newLen = userInfo.unshift('李滿滿')
console.log('向數組頭部插入元素後的長度: ' + newLen)      

排序方法:

reverse()	數組反轉,反轉數組項的順序
sort([cmp])	數組排序,預設調用每項的toString()轉型函數,然後比較得到的字元串升序排序,同時還支援自定義比較器,比較函數需要大于傳回1,小于傳回-1,等于傳回0

/*
 * reverse
 */
var numArr = [1, 2, 3, 4, 5]
console.log(
    // 倒序排列,原數組被修改,傳回排序後的數組
    numArr.reverse(),
    // 正序排序,原數組被修改,傳回排序後的數組
    numArr.sort()   
)
/*
 * 定義比較器
 */
var numArr = ['1f', '11f', '2f', '22f']
// 定義比較器
function cmp(x, y){
    var xVal = parseInt(x)
    var yVal = parseInt(y)
    return xVal>yVal?1:(xVal==yVal?0:-1)
}
// 傳入比較器
alert(numArr.sort(cmp))      

操作方法:

concat([arr|val1...valN])	基于目前數組中的所有項建立一個新數組,參數支援數組或單值或空,如果為空則隻是複制目前數組并傳回副本
slice(start, end)	基于目前數組的一個或多個項建立一個新數組,傳回起始和結束位置之間的項,但不包括結束位置的項,而且start/end支援負數
splice(start, count[,val1...valN])	基于目前數組添加,删除,替換元素建立一個新數組,start為起始位置,count=0,在start位置插入vals,count!=0 and未傳vals則删除count個元素,否則替換原來元素

/*
 * concat([arr|val1...valN])
 */
var userInfo = ["李滿滿", 25, '男']
var newInfo = userInfo.concat(['武漢'])
console.log(newInfo)
var newInfo = userInfo.concat('武漢', '18814818764')
console.log(newInfo)
/*
 * slice(start, end)
 */
var newInfo = userInfo.slice(0, 3)
console.log(newInfo)
// 非常金典的用法是寫評級元件
var rate = 3
document.write("★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate))
/*
 * splice(start, count, val1...valN)
 */
// 删除元素
var deletedItems = userInfo.splice(0, 2)
console.log(deletedItems)
console.log(userInfo)
// 插入元素
userInfo.splice(0, 0, '李滿滿', 25)
userInfo.splice(0, 1, '劉珍珍')
console.log(userInfo)      

位置方法:

indexOf(val[,start])	從數組開頭查找第一個val,如果找到傳回val的第一個字元索引,否則傳回-1
lastIndexOf(val[,start])	從數組開頭查找最後一個val,如果找到傳回val的第一個字元索引,否則傳回-1

/*
 * indexOf(val[,start])
 * lastIndexOf(val[,start])
 */
console.log(userInfo[userInfo.indexOf('劉珍珍')])
console.log(userInfo[userInfo.lastIndexOf('劉珍珍')])      

疊代方法:

every(func)	對數組中的每一項運作給定函數,如果每項都傳回true則傳回true,傳回新數組,func必須包含三個參數item,index,array
filter(func)	對數組中的每一項運作給定函數,傳回該函數會傳回true的項組成的數組,傳回新數組,func必須包含三個參數item,index,array
forEach(func)	對數組中的每一項運作給定函數,沒有傳回值,func必須包含三個參數item,index,array
map(func)	對數組中的每一項運作給定函數,傳回每次調用的結果組成的數組,func必須包含三個參數item,index,array
some(func)	對數組中的每一項運作給定函數,如果該函數對任意一項傳回true則傳回true,func必須包含三個參數item,index,array

/*
 * every(func)
 * some(func)
 * 
 */
var newArr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(
    newArr.every(function(item, index, array){return item>1}),
    newArr.some(function(item, index, array){return item>1})
)
/*
 * filter(func)
 * map(func)
 */
var newArr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(
    newArr.filter(function(item, index, array){return item>2}),
    newArr.map(function(item, index, array){return item-1})
)      

注意: 對于數組的疊代類方法,必須傳遞三個參數目前項(item),目前項位置(index),數組對象(array)

reduce(func[,start])	從第一個元素周遊到最後一個元素分别調用func,start為縮小基礎初始值,func必須接受4個參數,前一個值,目前值,項的索引,數組對象
reduceRight(func[,start])	從最後一個元素周遊到第一個元素分别調用func,start為縮小基礎初始值,func必須接受4個參數,前一個值,目前值,項的索引,數組對象

/*
 * reduce(func[,start])
 * reduceRight(func[,start])
 */
var newArr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var sum = function(pre, cur, index, array){
    return pre + cur
}
console.log(
    newArr.reduce(sum),
    newArr.reduceRight(sum)
)