JavaScript面试技巧之数组的一些不low操作


Posted in Javascript onMarch 22, 2019

前言

本文主要从应用来讲数组api的一些骚操作;

如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等;

上面这些应用场景你可以用一行代码实现?

1.扁平化n维数组

1.终极篇

[1,[2,3]].flat(2) //[1,2,3]
[1,[2,3,[4,5]].flat(3) //[1,2,3,4,5]
[1,[2,3,[4,5]]].toString() //'1,2,3,4,5'
[1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n]

Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大

2.开始篇

function flatten(arr) {
 while(arr.some(item=>Array.isArray(item))) {
 arr = [].concat(...arr);
 }
 return arr;
}
flatten([1,[2,3]]) //[1,2,3]
flatten([1,[2,3,[4,5]]) //[1,2,3,4,5]

实质是利用递归和数组合并方法concat实现扁平

2.去重

1.终极篇

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]

set是ES6新出来的一种一种定义不重复数组的数据类型

Array.from是将类数组转化为数组

...是扩展运算符,将set里面的值转化为字符串

2.开始篇

Array.prototype.distinct = function(){
 var arr = this,
 result = [],
 i,
 j,
 len = arr.length;
 for(i = 0; i < len; i++){
 for(j = i + 1; j < len; j++){
 if(arr[i] === arr[j]){
 j = ++i;
 }
 }
 result.push(arr[i]);
 }
 return result;
}
[1,2,3,3,4,4].distinct(); //[1,2,3,4]

取新数组存值,循环两个数组值相比较

3.排序

1.终极篇

[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认是升序
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序

sort是js内置的排序方法,参数为一个函数

2.开始篇

冒泡排序:

Array.prototype.bubleSort=function () {
 let arr=this,
 len = arr.length;
 for (let outer = len; outer >= 2; outer--) {
 for (let inner = 0; inner <= outer - 1; inner++) {
 if (arr[inner] > arr[inner + 1]) {
  //升序
  [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
  console.log([arr[inner], arr[inner + 1]]);
 }
 }
 }
 return arr;
 }
[1,2,3,4].bubleSort() //[1,2,3,4]

选择排序

Array.prototype.selectSort=function () {
 let arr=this,
  len = arr.length;
 for (let i = 0, len = arr.length; i < len; i++) {
 for (let j = i, len = arr.length; j < len; j++) {
 if (arr[i] > arr[j]) {
 [arr[i], arr[j]] = [arr[j], arr[i]];
 }
 }
 }
 return arr;
 }
 [1,2,3,4].selectSort() //[1,2,3,4]

4.最大值

1.终极篇

Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4
[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
 return Math.max(prev,cur);
},0) //4

Math.max()是Math对象内置的方法,参数是字符串;

reduce是ES5的数组api,参数有函数和默认初始值;

函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)

2.开始篇

先排序再取值

5.求和

1.终极篇

[1,2,3,4].arr.reduce(function (prev, cur) {
 return prev + cur;
 },0) //10

2.开始篇

function sum(arr) {
 var len = arr.length;
 if(len == 0){
 return 0;
 } else if (len == 1){
 return arr[0];
 } else {
 return arr[0] + sum(arr.slice(1));
 }
}
sum([1,2,3,4]) //10

利用slice截取改变数组,再利用递归求和

6.合并

1.终极篇

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
[1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]

2.开始篇

let arr=[1,2,3,4];
[5,6].map(item=>{
 arr.push(item)
}) //arr值为[1,2,3,4,5,6],注意不能直接return出来,return后只会返回[5,6]

7.判断是否包含值

1.终极篇

[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1

includes(),find(),findIndex()是ES6的api

2.开始篇

[1,2,3].some(item=>{
 return item===3
}) //true 如果不包含返回false

8.类数组转化

1.终极篇

Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]

类数组:表示有length属性,但是不具备数组的方法

call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法

Array.from是将类似数组或可迭代对象创建为数组

...是将类数组扩展为字符串,再定义为数组

2.开始篇

Array.prototype.slice = function(start,end){ 
 var result = new Array(); 
 start = start || 0; 
 end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键 
 for(var i = start; i < end; i++){ 
  result.push(this[i]); 
 } 
 return result; 
 }

9.每一项设置值

1.终极篇

[1,2,3].fill(false) //[false,false,false]

fill是ES6的方法
2.开始篇

[1,2,3].map(() => 0)

10.每一项是否满足

[1,2,3].every(item=>{return item>2}) //false

every是ES5的api,每一项满足返回 true

11.有一项满足

[1,2,3].some(item=>{return item>2}) //true

some是ES5的api,有一项满足返回 true

12.过滤数组

[1,2,3].filter(item=>{return item>2}) //[3]

filter是ES5的api,返回满足添加的项的数组

13.对象和数组转化

Object.keys({name:'张三',age:14}) //['name','age']
Object.values({name:'张三',age:14}) //['张三',14]
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox输出{name:'张三',age:14}

总结

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

Javascript 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
javascript 简练的几个函数
Aug 29 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
js实现日历与定时器
Feb 22 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 #Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 #Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 #Javascript
如何从零开始手写Koa2框架
Mar 22 #Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 #Javascript
详解ES6中的Map与Set集合
Mar 22 #Javascript
js控制随机数生成概率代码实例
Mar 21 #Javascript
You might like
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
python and or用法详解
2019/06/26 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python如何爬取动态网站
2020/09/09 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
关键字final的用法
2013/10/02 面试题
房屋买卖协议书
2014/04/10 职场文书
挂靠协议书范本
2014/04/22 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
好的旅游活动方案
2014/08/19 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
PHP正则表达式之RCEService回溯
2022/04/11 PHP