美文网首页语言基础
数组操作-v1.0.0

数组操作-v1.0.0

作者: 一点金光 | 来源:发表于2019-07-27 23:38 被阅读0次
    ---
    title: 数组操作
    date: 2018-06-09 16:29:00
    updated: 2018-06-10 12:00:00
    categories:
    - 语言基础
    tags:
    - nodejs
    ---
    

    目录

    克隆
    扁平
    连接
    拼接
    截取
    排序
    添加
    删除
    遍历
    映射
    过滤
    某一符合
    所有符合
    包含
    生产
    转化
    复杂
    查找
    填充
    包含

    正文

    #克隆

    // 方案1-slice-es5
    [2,4,434,43].slice()
    
    // 方案2-遍历
    Array.prototype.clone = function(){
        let a=[];
        for(let i=0,l=this.length;i<l;i++) {
            a.push(this[i]);
        }
        return a;
    }
    
    // 方案3-concat
    Array.prototype.clone=function(){ 
        return [].concat(this); 
    }
    
    // 方案4-浅复制-es6
    Object.assign([],['sdsd',123,123,123])
    
    // 方案5-扩展运算符-es6
    [...[1, 2]];
    

    #扁平

    // 将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组
    // https://blog.csdn.net/crystal6918/article/details/77130948
    
    // 方案1-递归
    function flatten(arr){
        var res = [];
        for(var i=0,len=arr.length;i<len;i++){
            // 若是数组,递归
            if(Array.isArray(arr[i])){
                res = res.concat(flatten(arr[i]));
            }
            // 若非数组,添加
            else{
                res.push(arr[i]);
            }
        }
        return res;
    }
    
    
    // 方案2-简化-es5
    function flatten(arr){
        return arr.reduce(function(prev,item){
            return prev.concat(Array.isArray(item)?flatten(item):item);
        },[]);
    }
    
    // 方案3-扩展运算符-es6
    function flatten(arr){
        while(arr.some(item=>Array.isArray(item)){
            arr = [].concat(...arr);
        }
        return arr;
    }
    
    // 方案4-数组元素全是数字
    function flatten(arr){
        return arr.toString().split(',').map(function(item){
            return +item;
        })
    }
    

    #方法-es3

    //参考资料 https://segmentfault.com/a/1190000002602408
    
    /*
     * 目录
     * -连接
     * -拼接
     * -截取
     * -排序(升序|降序)
     * -添加(前加|后加)
     * -删除(第一|最后|)
     * -颠倒
     */
    
    // 功能:将数组元素连接
    // 注意:数组本身不发生变化
    //无参数时,用‘,’连接
    [1, 2, 3, 4, 5].join(); //joinstr: '1,2,3,4,5'
    //有参数时
    [1, 2, 3, 4, 5].join('-'); //joinStr1: '1-2-3-4-5'
    
    // 功能:数组拼接成新的数组
    // 注意:数组本身不发生变化
    [1, 2, 3].concat(1, 'xxx'); //newArray: [1, 2, 3, 1, 'xxx']
    [1, 2, 3].concat([4, 5]); //newArray1: [1, 2, 3, 4, 5]
    
    // 功能:数组元素截取
    // 注意:数组本身不发生变化
    // 第一个参数是截取开始位置
    // 第二个参数是截取结束位置,但是不包括结束位置。
    // 如果只有一个参数,从开始位置截取到剩下所有数据
    // 开始位置和结束位置也可以传递负数,负数表示倒着数。例如-3是指倒数第三个元素
    [1, 2, 3, 4, 5].slice(1); //newArray: [2,3,4,5]
    [1, 2, 3, 4, 5].slice(0, 3); //newArray1: [1,2,3]
    [1, 2, 3, 4, 5].slice(0, -1); //newArray2: [1,2,3,4]
    [1, 2, 3, 4, 5].slice(-3, -2); //newArray3: [3]
    
    /*
    slice();
    目的:返回数组的一个片段或子数组.
    参数:无or一个参数or俩个参数
    > 无参数将原样返回一个新的数组,相当于复制了一遍数组.
    > 返回的数组包含第一个参数指定的位置,到第二个参数前面一个位置之间的所有元素.
    > 如果只指定一个参数,返回的数组将包含从开始位置到结尾的所有元素.
    > 如果参数中出现负数,它表示相对于数组中的最后一个元素的位置的个数.
    是否改变原数组: 不改变原数组, 返回一个新的数组.
    */
    
    // 功能:数组插入数据、删除数据
    // 注意:操作的是数组本身
    // 返回值:截断的数据,是数组
    // 如果有一个参数,从开始位置截取剩下所有数据
    // 如果有二个参数,第1个参数为开始位置,第二个参数为截取长度
    // 如果有三个参数,第1个参数为开始位置,第二个参数为截取长度,第三个参数为插入的数据
    [1, 2, 3, 4, 5].splice(1); //array=[1] newArray=[2,3,4,5]
    [1, 2, 3, 4, 5].splice(0, 2); //array=[3,4,5] newArray1=[1,2]
    [1, 2, 3, 4, 5].splice(0, 1, 6, 7); //array=[6,7,2,3,4,5] newArray2=[1]
    
    // 功能:往数组的尾部添加数据
    // 注意:操作的是数组本身
    [1, 2, 3].push(4, 5); //array : [1,2,3,4,5]
    
    // 功能:往数组的头部添加数据
    // 注意:操作的是数组本身
    [3, 4, 5].unshift(1, 2); //array : [1,2,3,4,5]
    
    // 功能:删除数组的最后一个数据
    // 返回值:删除的数据
    // 注意:操作的是数组本身
    [1, 2, 3, 4, 5].pop(); //array : [1,2,3,4]  value: 5
    
    // 功能:删除数组的第一一个数据
    // 返回值:删除的数据
    // 注意:操作的是数组本身
    [1, 2, 3, 4, 5].shift(); //array : [2,3,4,5] value: 1
    
    // 功能:将数组元素颠倒
    // 注意:操作的是数组本身,数组元素颠倒
    [1, 2, 3, 4, 5].reverse(); //array: [5,4,3,2,1]
    
    // 功能:将数组元素排序
    // 注意:操作的是数组本身,数组元素顺序改变
    
    //无参数时,按照字母表升顺排序
    ['a', 'e', 'b', 'd', 'c'].sort(); //['a','b','c','d','e']
    
    //有参数时,参数是函数时,函数有两个参数a、b,分别是数组相邻的两个数据,返回值则决定相邻的两个数据哪个排在在前面
    //返回值小于0,则a顺序在前
    //返回值大于0,则a顺序在后
    
    //升序排列,用代入的思想可以把a看成5,b看出2。
    [5, 2, 1, 4, 3].sort(function(a, b) {
        return a - b;
    }); //[1,2,3,4,5]
    
    //降序排列
    [5, 2, 1, 4, 3].sort(function(a, b) {
        return b - a;
    }); //[5,4,3,2,1]
    
    /*
    toString()和toLocaleString();
    目的::将数组的每个方法转化为字符串,并且输出用逗号分隔的字符串列表.
    参数:俩个方法无视参数.
    是否改变原数组: 不改变原数组, 返回一个新的字符串.
    
     */
    
    
    

    #方法-es5

    
    //http://www.zhangxinxu.com/wordpress/2013/04/es5新增数组方法/?replytocom=288644
    // 对于古董浏览器,如IE6-IE8
    
    /*
     * 目录
     * -遍历
     * -映射
     * -过滤
     * -某一符合
     * -所有符合
     * -包含
     * -生产
     */
    // 遍历数组,执行某一函数
    // [].forEach(fn);
    if (typeof Array.prototype.forEach != "function") {
      Array.prototype.forEach = function (fn, context) {
        // 遍历数组
        for (var k = 0, length = this.length; k < length; k++) {
            // 是函数且数组的键为自身拥有的
          if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
            // 用函数处理数组的值
            fn.call(context, this[k], k, this);
          }
        }
      };
    }
    
    // 映射
    // 遍历数组,执行某一函数,并返回一个数组
    if (typeof Array.prototype.map != "function") {
      Array.prototype.map = function (fn, context) {
        var arr = [];
        // 是函数
        if (typeof fn === "function") {
            // 遍历数组
          for (var k = 0, length = this.length; k < length; k++) {
             // 执行函数并把结果添加的新的数组中;因此,fn需是有返回值的函数
             arr.push(fn.call(context, this[k], k, this));
          }
        }
        return arr;
      };
    }
    
    // 过滤
    // 遍历数组,执行某一函数,并返回一个数组
    if (typeof Array.prototype.filter != "function") {
      Array.prototype.filter = function (fn, context) {
        var arr = [];
        // 是函数
        if (typeof fn === "function") {
                // 遍历数组
           for (var k = 0, length = this.length; k < length; k++) {
                //执行函数且函数执行后的返回值为true则添加元素取值到新的数组中
              fn.call(context, this[k], k, this) && arr.push(this[k]);
           }
        }
        return arr;
      };
    }
    
    // 某一符合
    // 遍历数组,执行某一函数,并返回真假
    if (typeof Array.prototype.some != "function") {
      Array.prototype.some = function (fn, context) {
        var passed = false;
        // 是函数
        if (typeof fn === "function") {
                // 遍历数组
          for (var k = 0, length = this.length; k < length; k++) {
            // 满足跳出遍历的条件则跳出
                if (passed === true) break;
                // 执行函数且将函数执行后的返回值转换为布尔值并赋值
                passed = !!fn.call(context, this[k], k, this);
          }
        }
        return passed;
      };
    }
    
    // 所有符合
    // 遍历数组,执行某一函数,并返回真假
    if (typeof Array.prototype.every != "function") {
      Array.prototype.every = function (fn, context) {
        var passed = true;
        // 是函数
        if (typeof fn === "function") {
            //遍历数组
           for (var k = 0, length = this.length; k < length; k++) {
                // 满足跳出遍历的条件则跳出
              if (passed === false) break;
              // 执行函数且将函数执行后的返回值转换为布尔值并赋值
              passed = !!fn.call(context, this[k], k, this);
          }
        }
        return passed;
      };
    }
    
    // 返回一取值在数组中的位置,顺序查找
    // 遍历数组,判断数组中是否含有某一取值,并返回位置
    if (typeof Array.prototype.indexOf != "function") {
      Array.prototype.indexOf = function (searchElement, fromIndex) {
        var index = -1;
        // 开始位置
        fromIndex = fromIndex * 1 || 0;
            // 遍历数组
        for (var k = 0, length = this.length; k < length; k++) {
            // 满足条件则跳出遍历
          if (k >= fromIndex && this[k] === searchElement) {
              index = k;
              break;
          }
        }
        return index;
      };
    }
    
    // 返回一去值在数组中的位置,逆序查找
    // 遍历数组,判断数组中是否含有某一取值,并返回位置
    if (typeof Array.prototype.lastIndexOf != "function") {
      Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
        var index = -1, length = this.length;
        // 开始位置
        fromIndex = fromIndex * 1 || length - 1;
            // 遍历数组
        for (var k = length - 1; k > -1; k-=1) {
                // 满足条件则跳出遍历
            if (k <= fromIndex && this[k] === searchElement) {
                index = k;
                break;
            }
        }
        return index;
      };
    }
    
    if (typeof Array.prototype.reduce != "function") {
      Array.prototype.reduce = function (callback, initialValue ) {
         // 之前值
         var previous = initialValue,
         // 开始位置
         k = 0, 
         // 结束位置
         length = this.length;
         // 若没有初始值,则之前值为数组第一项,开始位置为1
         if (typeof initialValue === "undefined") {
            previous = this[0];
            k = 1;
         }
         
         // 是函数
        if (typeof callback === "function") {
            // 遍历数组
          for (k; k < length; k++) {
             // 键为数组自身拥有的则执行函数,并将函数执行结果作为下一步的之前值;因此函数需是有返回值
             this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
          }
        }
        return previous;
      };
    }
    
    if (typeof Array.prototype.reduceRight != "function") {
      Array.prototype.reduceRight = function (callback, initialValue ) {
        
        var length = this.length,
        // 开始位置
        k = length - 1,
        // 之前值
        previous = initialValue;
        // 若没有初始值,则之前值为数组最后一项,开始位置为倒数第二个索引
        if (typeof initialValue === "undefined") {
            previous = this[length - 1];
            k--;
        }
        if (typeof callback === "function") {
           for (k; k > -1; k-=1) {          
              this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
           }
        }
        return previous;
      };
    }
    

    #方法-es6

    // https://www.cnblogs.com/xhy-steve/p/5871182.html
    
    /*
     * 目录
     * -转化
     * -复制
     * -查找
     * -填充
     */
    
    /*
    Array.from();
    目的:将类数组对象和可遍历对象转化为数组.
    参数:上述对象以及第二个参数。第二个参数类似于数组中的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组.
    用法:const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )(); (兼容写法).
    
    Array.of();
    目的:将一组值转化为数组.
    参数:无或无限(无时返回一个空数组).
    
    copyWithin();
    目的:在数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员).
    参数:target(必须): 从该位置开始替换数据.
    > start(可选):从该位置开始读取数据.
    > end(可选):到该位置的前一个位置.
    是否修改原数组:修改原数组.
    
    find()和findIndex();
    目的:在数组内部, 找到第一个符合条件的数组成员.
    参数:回调函数接受三个参数,分别表示当前值,当前位置,原数组.
    俩个方法都接受第二个参数用来绑定函数中的this的值.(绑定作用域).
    PS: 这两个方法都可以发现NaN,弥补了数组的IndexOf() 方法的不足。
    
    fill();
    目的:如其意,填充一个数组.
    参数:第一个参数表示被填充的元素.
    第二个参数表示填充的起始位置.
    第三个参数表示填充的结束位置(指定位置之前一个).
    */
    

    #方法-es7

    // https://www.cnblogs.com/xhy-steve/p/5871182.html
    /*
    includes();
    目的:表示某个数组是否包含给定的值,与字符串的includes()方法类似.
    参数:第一个参数表示要查找的数,第二个参数表示搜索的起始位置,返回一个布尔值.
    意义:推荐使用这个而不是indexOf()因为后者会对NaN造成误判.
    */
    

    相关文章

      网友评论

        本文标题:数组操作-v1.0.0

        本文链接:https://www.haomeiwen.com/subject/ddbyrctx.html