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