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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
js倒计时简单实现方法
Dec 17 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php模板函数 正则实现代码
2012/10/15 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
Prototype Template对象 学习
2009/07/19 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
商务日语专业自荐信
2014/04/17 职场文书
法制宣传月活动总结
2014/04/29 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
雷峰塔导游词
2015/02/09 职场文书
海上钢琴师观后感
2015/06/03 职场文书
PHP基本语法
2021/03/31 PHP
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL