zoukankan      html  css  js  c++  java
  • 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
    
    
  • 相关阅读:
    Servle生命周期
    Nginx反向代理
    redis
    java二分查找
    Redis集群的数据一致性
    springmvc中controller不要定义全局变量
    elasticsearch-6.7.1和kibana-oss-6.7.1的Linux安装
    centos7.0查看IP,Linux基本命令
    高并发ConcurrentHashMap 1.8的原理
    JS 循环 while for do while
  • 原文地址:https://www.cnblogs.com/erbingbing/p/6431618.html
Copyright © 2011-2022 走看看