javascript中数组的常用算法深入分析


Posted in Javascript onMarch 12, 2019

前言

Array是Javascript构成的一个重要的部分,它可以用来存储字符串、对象、函数、Number,它是非常强大的。因此深入了解Array是前端必修的功课。本文将给大家详细介绍了javascript中数组的常用算法,下面话不多说了,来一起看看详细的介绍吧

一、不改变原数组,返回新数组(字符串)

1、concat()   连接两个或者多个数组,两边的原始数组都不会变化,返回的是被连接数组的一个副本。

2、join()  把数组中所有的元素放入到一个字符串中,返回字符串

var a = [1,2,3];
a.join([4,5,6]); // "14,5,624,5,63"
a.join('sau');  // "1sau2sau3"

3、slice()    从开始到结束(不包括结束)选择数组的一部分浅拷贝到一个新数组

var a = [1,2,3,4,5];
a.slice(0,0);  //[]
a.slice(0,1);  //[1]
a.slice(2,4); //[3,4]
a.slice(0,5); //[1,2,3,4,5]
a.slice(10,1); //[]
a.slice(4); //[5]

4、map()   创建一个新的数组并返回,其中新数组的每一个元素由调用原始数组中的每一个元素执行提供的函数得来,原数组不变

5、every()  对数组中的每一个元素都执行一次指定的回调函数,直到回调函数返回false,此时every()返回false并不再继续执行,如果回调函数都对每一个元素都返回true,那么every()返回true。

6、some()  对数组中的每一个元素都执行一次指定的回调函数,直到回调函数返回true,此时some()返回true并不再执行。如果回调函数对每一个元素都返回false,那么some()将返回false。

7、filter()   创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。

二、改变原数组

1、forEach()   针对每一个元素执行提供的函数。会修改原来的数组,不会返回执行结果,返回undefined。

2、pop()   删除数组最后一个元素,返回被删除的元素的值,如果数组为空,则不改变数组,返回undefined。

3、push()   向数组末尾添加一个或多个元素,返回改变后数组的长度。

4、reverse()   颠倒数组中元素的位置,返回该数组的引用。

5、shift()   从数组中删除第一个元素,改变原数组,并返回该元素的值。

6、unshift()   将一个或者多个元素添加到数组的开头,并返回新数组的长度。

7、sort()   对数组的元素进行排序,返回数组。排序不一定是稳定的。默认排序顺序是根据字符串unicode码点。

8、splice()   向数组中添加/删除元素,然后返回被删除的新数组()。

var a = [1,2,3,4,5];
a.splice(0,1);  //删除从0位置开始的1个 返回[1] a为[2,3,4,5] 
a.splice(1,0,99) //在1的位置插入99 [2,99,3,4,5]
a.splice(1,1,88) //99替换为88 [2,88,3,4,5]

三、遍历方法

1、获取属性名:for...in  和object.key()的区别

答:1、for in 遍历对象可以枚举的属性名列表,包括[[prototype]]原型链;

2、Object.keys() 只查找属性名是否在对象中,返回一个数组,包含所有可以枚举的属性名;

3、Object.getOwnPropertyNames()只查找属性名是否在对象中,返回一个数组,包含所有的属性名,不论是否可枚举。

2、获取属性值: for... of 和object.values()

for of 语句:遍历可迭代对象的可枚举属性值列表,包括[[propertype]]原型链;

object.values() :返回一个给定对象自身的所有可枚举属性的值,不包括原型链。

四、ES6语法Map键值对转化为数组

new Map创建一个map

// new Map创建一个map
let map = new Map([[1,"one"], [2,"two"], [3,"three"]]);
map.set(4, "four");

// 获取所有键值对
console.log("获取key")
console.log([...map.keys()]) // 输出[1, 2, 3, 4]

console.log("获取value")
console.log([...map.values()]) // 输出[one, two, three, four]

console.log("获取map数组")
console.log([...map]) // 输出[[1, "one"], [2, "two"], [3, "three"], [4, "four"]]

五、两个升序的数组合并成一个升序数组

1、时间复杂度O(M+N),空间复杂度O(M+N)

function merge(left, right){
 let result = [],
  il  = 0,
  ir  = 0;

 while (il < left.length && ir < right.length) {
  result.push(left[il] < right[ir] ? left[il++] : right[ir++]);
console.log(result);
 }

 return result.concat(left.slice(il)).concat(right.slice(ir));
}

2、时间复杂度O(M+N),空间复杂度O(1)

// m, n 是数组长度
function merge(left, m, right, n) {
 var i = m - 1, j = n - 1, writeIdx = m + n - 1;
 while (i >= 0 && j >= 0)
 left[writeIdx--] = left[i] > right[j]? left[i--] : right[j--];
 while (j >= 0)
 left[writeIdx--] = right[j--];
 return left;
}

六、数组重复问题

(一)数组去重

1、reduce方法

const distinct = arr => arr.sort().reduce( (init, current) => {
 
 if (init.length === 0 || init[init.length - 1] !== current) {
  init.push( current );
 }
 return init;
}, []);

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
distinct(arr); // [1, 2, 3, 4, 5]

2、filter方法

const distinct = arr => arr.filter( (element, index, self) => {
 return self.indexOf( element ) === index;
});

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
distinct(arr); // [1, 2, 3, 5, 4]

(二)排序数组去重

/**
 * @param {number[]} nums
 * @return {number}
 */
var removeDuplicates = function(nums) {
 
 if(!nums || nums.length == 0) return 0;
 
 let len = 0;
 for(let i = 1; i < nums.length; i++) {
  if (nums[len] != nums[i]) {
   nums[++ len] = nums[i];
  }
 }
 return len + 1;
};

(三)判断数组是否存在重复

/**
 * @param {number[]} nums
 * @return {boolean}
 */
var containsDuplicate = function(nums) {
 
 let hashMap = new Map();
 for(let i = 0; i < nums.length; i++) {
  
  if( hashMap.has(nums[i]) ) {
   return true;
  }
  
  hashMap.set(nums[i], 1);
 }
 
 return false;
};

七、两个数组的交集

给定两个数组,写一个方法来计算它们的交集。

例如:

给定 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2].

注意:1、出结果中每个元素出现的次数,应与元素在两个数组中出现的次数一致。2、

我们可以不考虑输出结果的顺序。

跟进:1、如果给定的数组已经排好序呢?你将如何优化你的算法?2、如果 nums1 的大小比 nums2 小很多,哪种方法更优?3、如果nums2的元素存储在磁盘上,内存是有限的,你不能一次加载所有的元素到内存中,你该怎么办?

解法:

/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number[]}
 */
var intersect = function(nums1, nums2) {
 
 var map1 = new Map();
 var number = [];
 
 for(var i = 0; i < nums1.length; i++) {
  var map1Value = map1.get(nums1[i]);
  map1.set( nums1[i], ( map1Value ? map1Value : 0 ) + 1 );
 }
 
 for(var i = 0; i < nums2.length; i++) {
  if( map1.has(nums2[i]) && map1.get(nums2[i]) != 0 ) {
   number.push(nums2[i]);
   map1.set( nums2[i], map1.get(nums2[i]) - 1 );
  }
 }
 
 return number;
};

八、找出一个数组中只出现一次的数字

给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。

/**
 * @param {number[]} nums
 * @return {number}
 */
var singleNumber = function(nums) {
 
 let number = 0;
 for(let i = 0; i < nums.length; i++) {
  number ^= nums[i];
 }
 return number;
};

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 #Javascript
NestJs 静态目录配置详解
Mar 12 #Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 #Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 #Javascript
记录一次完整的react hooks实践
Mar 11 #Javascript
es6数值的扩展方法
Mar 11 #Javascript
Vue实现一个图片懒加载插件
Mar 11 #Javascript
You might like
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue系列之动态路由详解【原创】
2017/09/10 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python求质数列表的例子
2019/11/24 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
NET程序员上机面试题
2015/05/23 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
村委会主任先进事迹
2014/01/15 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript