JS 中 原生方法 (二) --- 數組 (修---添加ES6新增)

const arr = [1, 2, 3, 5, 'a', 'b']

/**
 * 
 * length
 * 這個只能被 稱之為 數組的原生屬性， 返回 一個 number 
 * arr.length
 */

console.log(arr.length)     // 6


/**
 *  按照方法類型 來方便記憶   棧方法（后進先出） 1
 *  push
 *  這個方法是向數組末尾添加一個新的元素， 返回的是數組的 新長度, 並改變了原來的數組
 *  arr.push()
 */

    const resArr1 = arr.push(1)
    console.log(resArr1)            // 7
    console.log(arr)                // [1, 2, 3, 5, "a", "b", 1]   


/**
 * 棧方法（后進先出） 2
 * pop
 * 這個方法是 刪除數組中最后一個元素並且返回該元素  （如果數組為空 則返回什么呢） 並且原數組已被修改
 *  arr.pop()
 */

console.log(arr.pop())      // 1
console.log(arr)            // [1, 2, 3, 5, "a", "b"]
console.log([].pop())       // undefined


/**
 * 按照列隊方法 （先進先出） 1
 * shift
 * 這個方法是 刪除數組中 第一 個元素並且返回該元素  （如果數組為空 則返回什么呢） 並且原數組已被修改
 *  arr.shift()
 */

console.log(arr.shift())        //  1
console.log(arr)                //  [2, 3, 5, "a", "b"]
console.log([].shift())         //  undefined

/**
 * 按照列隊方法 （先進先出） 2
 * unshift
 * 這個方法是 想數組中 的 首位添加 元素 並返回新數組的 長度 （如果數組為空 則返回什么呢） 並且原數組已被修改
 *  arr.unshift()
 */

console.log(arr.unshift())        //  length  5
console.log(arr)                  //  [2, 3, 5, "a", "b"]
console.log([].unshift())         //  length 0

console.log(arr.unshift([11]))   //  6
console.log(arr)                    // [11, 2, 3, 5, "a", "b"]


/**
 * 按照轉換方法來區分
 * join
 * 該方法 用於將數組中的所有 元素放入一個字符串中， 元素通過制定的 分隔符 進行分割。 返回一個字符串
 * arr.join()
 */

console.log(arr.join())         //  11,2,3,5,a,b
console.log(arr.join("."))      //  11.2.3.5.a.b
console.log(arr.join("-"))      //  11-2-3-5-a-b


/**
 * 重排序方法    1
 * reverse
 * 該方法 會對反轉數組項的順序, 並改變原 數組
 * arr.reverse()
 */

arr.shift()

console.log(arr.reverse())      // ["b", "a", 5, 3, 2]
console.log(arr)                // ["b", "a", 5, 3, 2]

/**
 * 重排序方法    2
 * sort
 * 該方法 會對數組進行從小到大的 排序, 並改變原 數組
 * 因為  在使用 sort 方法時候， 該方法 會先 使用 tostring 方法，將數組中每一項轉換成字符串，
 * 然后 字符串 之間的 大小的  比較是 通過  Unicode 字符編碼來比較的。
 * arr.sort()
 */


console.log(arr.sort())     // [2, 3, 5, "a", "b"]

console.log('5'.charCodeAt())   // 55
console.log('15'.charCodeAt())  // 49

// 所以我們 常常 會封裝一個 比較大小的函數

function compare (m, n) {
    return m - n
}

console.log(arr.sort(compare))


/**
 * 
 * 操作方法 1
 * concat()
 * 該方法 用於 連接 兩個 或者多個 數組
 * arr.concat(arr1)
 */

console.log(arr.concat([11,22,33]))         // [2, 3, 5, "a", "b", 11, 22, 33]


/**
 * 
 * 操作方法 2
 * slice(start, end)
 * 該方法 用於 連接 兩個 或者多個 數組
 * arr.slice(start, end)
 * 如果  start 或者 end  小於 0 
 * -1 指最后一個元素，-2 指倒數第二個元素，以此類推。 
 */

console.log(arr.slice(1,5))         // [3, 5]
console.log(arr)

/**
 * 
 * 操作方法 3 
 * splice(start, length, eleX)  起始位置、0（要刪除的項數）和要插入的項
 * 該方法  有刪除，插入，替換的功能
 * arr.splice(start, length, eleX)
 * 如果  start 小於 0  start = 0 
 * eleX 為 添加的 元素 
 */

console.log(arr.splice(1, 0, 222))         // [2, 222, 5, "a", "b", 11, 22, 33]


/**
 * 
 * ************************ 以下為 ES5 中新增的 9 個方法（可能會和上面的有重復） *****************************
 * 
 */

/**
 * 
 * forEach()
 * 功能： 從頭到尾遍歷數組，為每個元素調用 指定函數
 * forEach( function(value, index, arr) {} )
 * value 為 數組中被遍歷的每個值， index 為 數組索引， arr 為數組本身
 */

arr.forEach( (v, i, arr) => {
    arr[i] = v + 1
})

console.log(arr)        // [3, 223, 4, 6, "a1", "b1"]


/**
 * 
 * map()
 * 功能： 調用數組中的每一個元素 並 傳遞給制定的函數，返回一個新數組. 並不會改變原數組
 * forEach( function(v) {} )
 * value 為 數組中被遍歷的每個值
 */

let b = arr.map( function(v) {
    return v - 1
} )

console.log(b)          //[2, 222, 3, 5, NaN, NaN]

// 為什么會有 NaN 呢？ 'a1' - 1  = NaN  可以思考下


/**
 * 
 * filter()
 * 功能： 將數組元素執行特定函數，而返回一個子集。 
 * filter( function(v) {} )
 * value 為 數組中被遍歷的每個值
 */

let f = arr.filter( function(v) {
    return typeof v === 'number'
} )
console.log(f)          //[3, 223, 4, 6]


/**
 * 
 * some() every()
 * 功能： 對數組元素進行指定函數的邏輯判斷     返回 true or false
 * some( function(v) {} )
 * value 為 數組中被遍歷的每個值
 */

let s = arr.some( function(v) {
    return v > 4
})

let s1 = arr.every( function(v) {
    return v > 4
})

console.log(s,s1)          // true false

// 那么我們就可以 判斷處， some方法， 是只要數組中有部分 值達到 指定函數的要求，那么久返回 true
// every 方法則是需要 數組中的每一個值必須 達到指定函數的方法。才會返回ture 否則 返回 falses


/**
 * 
 * reduce() reduceRight()
 * 功能： 使用指定的函數將數組元素進行組合，生成單個值。 
 * reduce( function(pre,cur) {} )
 * pre 為 數組中的前一個值， cur 為當前值
 */

let max = [1,2,33,12].reduce( function(pre, cur) {
    return pre > cur ? pre : cur
})

let sum = [1,2,33,12].reduce( function(pre, cur) {
    return pre + cur
})

let right = [1,2,33,12].reduceRight( function(pre, cur) {
    return pre + ':' +  cur
})

console.log(max, sum)        // 33   48
console.log(right)           // 12:33:2:1

// 用reduce 的方式來 獲取道數組中的最大值。以及 數組數值求和


/**
 * 
 * *************************華麗分割ES6擴展************************* 
 * 
 */

/**
 * 
 * Array.from()
 * 功能：將兩類對象轉為真正的數組：類似數組的對象和可遍歷的對象 
 * 
 * Array.from(arrayLike)
 */

let arrayLike = {
       '0':'a',
       '1':'b',
       '2':'c',
       length:3
};

let arr2 = Array.from(arrayLike)
console.log(arr2)       // ["a", "b", "c"]


/**
 * 
 * Array.of()
 * 功能：將一組值 轉換成數組
 * 
 * Array.of(1,223)
 */

let Numbers = '1,2,344,44'
let numArr = Array.of(Numbers)
console.log(numArr)            // ["1,2,344,44"]


/**
 * 
 * copyWithin()
 * 功能：在當前數組內部，將指定位置的成員復制到其他位置，返回當前數組
 * 
 * copyWithin(replaceStartLoca, startIndex)
 */

let resArr = [1,2,222,2222,33].copyWithin(0, 3)
console.log(resArr)                     // [2222, 33, 222, 2222, 33]


/**
 * 
 * find()和findIndex() 
 * 功能：找到第一個符合條件的數組成員 並返回改 成員
 * 
 * find(value, index, arr)
 */

let fs = [1,2,222,2222,33].find(function(value, index, arr) {
    return value > 100
})

console.log(fs)         // 222


/**
 * 
 * entries()、keys()、values() 
 * 功能：用於遍歷數組，可以用for…of循環進行遍歷。
 * 區別是keys()是對鍵名的遍歷、values是對鍵值的遍歷、entries()是對鍵值對的遍歷
 * 
 * for (let xxx of [],keys()) {}
 */

for (let index of [2,33,444,555].keys()) {
    console.log(index)                      // 0 1 2 3
}

// for (let elem of [2,33,444,555].values()) {
//     console.log(elem)                      // 2,33,444,555
// }

for (let [index, elem] of [2,33,444,555].entries()) {
    console.log(index + '=>' + elem)                      
}
// 0=>2
// 1=>33
// 2=>444
// 3=>555

/**
 * 
 * includes()
 * 功能：表示某個數組是否包含給定的值 
 * includes(v, index)
 * v 表示你需要查找的值，index 表示開始查找的開始索引，負數表示 從后往前數。
 *
 * 返回 布爾值
 * 
 * 注意 這個和 indexOf 的區別, indexOf 無法識別 NaN 類型。 但是 includes 可以
 */

console.log([1,22,333,444,3].includes(1))       // true

console.log([1,22,33,NaN].includes(NaN))      // ture

console.log([1,22,33,NaN].indexOf(NaN))       // -1