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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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实现websocket通信的方法示例
2018/08/28 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Windows下python3.7安装教程
2018/07/31 Python
python操作redis数据库的三种方法
2020/09/10 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
业务代表的岗位职责
2013/11/16 职场文书
初中班主任评语大全
2014/04/24 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
生日宴会策划方案
2014/06/03 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
python用字节处理文件实例讲解
2021/04/13 Python
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android