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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
解决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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP无限分类(树形类)
2013/09/28 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
AutoSave/自动存储功能实现
2007/03/24 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
移动端界面的适配
2017/01/11 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
js实现简单的秒表
2020/01/16 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python实现统计代码行数的小工具
2019/09/19 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
推荐信怎么写
2014/05/09 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
《风筝》教学反思
2016/02/23 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
Python装饰器的练习题
2021/11/23 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js