javascript 中关于array的常用方法详解


Posted in Javascript onMay 05, 2017

javascript 中关于array的常用方法

最近总结了一些关于array中的常用方法,

其中大部分的方法来自于《JavaScript框架设计》这本书,

如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教。

第一部分

数组去重,总结了一些数组去重的方法,代码如下:

/**
 * 去重操作,有序状态
 * @param target
 * @returns {Array}
 */
function unique(target) {
  let result = [];
  loop: for (let i = 0,n = target.length;i < n; i++) {
    for (let x = i + 1;x < n;x++) {
      if (target[x] === target[i]) {
        continue loop;
      }
    }
    result.push(target[i]);
  }
  return result;
}

/**
 * 去重操作,无序状态,效率最高
 * @param target
 * @returns {Array}
 */
function unique1(target) {
  let obj = {};
  for (let i = 0,n = target.length; i < n;i++) {
    obj[target[i]] = true;
  }
  return Object.keys(obj);
}

/**
 * ES6写法,有序状态
 * @param target
 * @returns {Array}
 */
function unique2(target) {
  return Array.from(new Set(target));
}

function unique3(target) {
  return [...new Set(target)];
}

第二部分

数组中获取值,包括最大值,最小值,随机值。

/**
 * 返回数组中的最小值,用于数字数组
 * @param target
 * @returns {*}
 */
function min(target) {
  return Math.min.apply(0,target);
}

/**
 * 返回数组中的最大值,用于数字数组
 * @param target
 * @returns {*}
 */
function max(target) {
  return Math.max.apply(0,target);
}

/**
 * 从数组中随机抽选一个元素出来
 * @param target
 * @returns {*}
 */
function random(target) {
  return target[Math.floor(Math.random() * target.length)];
}

第三部分

对数组本身的操作,包括移除值,重新洗牌,扁平化和过滤不存在的值

/**
 * 移除数组中指定位置的元素,返回布尔表示成功与否
 * @param target
 * @param index
 * @returns {boolean}
 */
function removeAt(target,index) {
  return !!target.splice(index,1).length;
}

/**
 * 移除数组中第一个匹配传参的那个元素,返回布尔表示成功与否
 * @param target
 * @param item
 * @returns {boolean}
 */
function remove(target,item) {
  const index = target.indexOf(item);
  if (~index) {
    return removeAt(target,index);
  }
  return false;
}

/**
 * 对数组进行洗牌
 * @param array
 * @returns {array}
 */
function shuffle(array) {
  let m = array.length, t, i;
  // While there remain elements to shuffle…
  while (m) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
}



/**
 * 对数组进行平坦化处理,返回一个一维的新数组
 * @param target
 * @returns {Array}
 */
function flatten (target) {
  let result = [];
  target.forEach(function(item) {
    if(Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
}


/**
 * 过滤属性中的null和undefined,但不影响原数组
 * @param target
 * @returns {Array.<T>|*}
 */
function compat(target) {
  return target.filter(function(el) {
    return el != null;
  })
}

第四部分

根据指定条件对数组进行操作。

/**
 * 根据指定条件(如回调或对象的某个属性)进行分组,构成对象返回。
 * @param target
 * @param val
 * @returns {{}}
 */
function groupBy(target,val) {
  var result = {};
  var iterator = isFunction(val) ? val : function(obj) {
    return obj[val];
  };
  target.forEach(function(value,index) {
    var key = iterator(value,index);
    (result[key] || (result[key] = [])).push(value);
  });
  return result;
}
function isFunction(obj){
  return Object.prototype.toString.call(obj) === '[object Function]';
}

// 例子
function iterator(value) {
  if (value > 10) {
    return 'a';
  } else if (value > 5) {
    return 'b';
  }
  return 'c';
}
var target = [6,2,3,4,5,65,7,6,8,7,65,4,34,7,8];
console.log(groupBy(target,iterator));



/**
 * 获取对象数组的每个元素的指定属性,组成数组返回
 * @param target
 * @param name
 * @returns {Array}
 */
function pluck(target,name) {
  let result = [],prop;
  target.forEach(function(item) {
    prop = item[name];
    if (prop != null) {
      result.push(prop);
    }
  });
  return result;
}

/**
 * 根据指定条件进行排序,通常用于对象数组
 * @param target
 * @param fn
 * @param scope
 * @returns {Array}
 */
function sortBy(target,fn,scope) {
  let array = target.map(function(item,index) {
    return {
      el: item,
      re: fn.call(scope,item,index)
    };
  }).sort(function(left,right) {
    let a = left.re, b = right.re;
    return a < b ? -1 : a > b ? 1 : 0;
  });
  return pluck(array,'el');
}

第五部分

数组的并集,交集和差集。

/**
 * 对两个数组取并集
 * @param target
 * @param array
 * @returns {Array}
 */
function union(target,array) {
  return unique(target.concat(array));
}

/**
 * ES6的并集
 * @param target
 * @param array
 * @returns {Array}
 */
function union1(target,array) {
  return Array.from(new Set([...target,...array]));
}

/**
 * 对两个数组取交集
 * @param target
 * @param array
 * @returns {Array.<T>|*}
 */
function intersect(target,array) {
  return target.filter(function(n) {
    return ~array.indexOf(n);
  })
}

/**
 * ES6 交集
 * @param target
 * @param array
 * @returns {Array}
 */
function intersect1(target,array) {
  array = new Set(array);
  return Array.from(new Set([...target].filter(value => array.has(value))));
}

/**
 * 差集
 * @param target
 * @param array
 * @returns {ArrayBuffer|Blob|Array.<T>|string}
 */
function diff(target,array) {
  var result = target.slice();
  for (var i = 0;i < result.length;i++) {
    for (var j = 0; j < array.length;j++) {
      if (result[i] === array[j]) {
        result.splice(i,1);
        i--;
        break;
      }
    }
  }
  return result;
}

/**
 * ES6 差集
 * @param target
 * @param array
 * @returns {Array}
 */
function diff1(target,array) {
  array = new Set(array);
  return Array.from(new Set([...target].filter(value => !array.has(value))));
}

第六部分

数组包含指定目标。

/**
 * 判定数组是否包含指定目标
 * @param target
 * @param item
 * @returns {boolean}
 */
function contains(target,item) {
  return target.indexOf(item) > -1;
}

 最后模拟一下数组中的pop,oush,shift和unshift的实现原理

const _slice = Array.prototype.slice;
Array.prototype.pop = function() {
  return this.splice(this.length - 1,1)[0];
};
Array.prototype.push = function() {
  this.splice.apply(this,[this.length,0].concat(_slice.call(arguments)));
  return this.length;
};
Array.prototype.shift = function() {
  return this.splice(0,1)[0];
};
Array.prototype.unshift = function() {
  this.splice.apply(this,
    [0,0].concat(_slice.call(arguments)));
  return this.length;
};

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
详解小程序云开发数据库
May 20 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 #Javascript
Angular中实现树形结构视图实例代码
May 05 #Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 #Javascript
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 #Javascript
js实现倒计时关键代码
May 05 #Javascript
javascript 中的继承实例详解
May 05 #Javascript
You might like
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
JS实现多选框的操作
2020/06/24 Javascript
wxPython 入门教程
2008/10/07 Python
理解Python中的With语句
2016/03/18 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
革命先烈的英雄事迹材料
2014/02/15 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
个人委托书范本汇总
2014/10/01 职场文书
客房部经理岗位职责
2015/02/02 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
芙蓉镇观后感
2015/06/10 职场文书
上学路上观后感
2015/06/16 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL