记一道面试题和js常用的方法

面试题

记一道我之前面试的时候的一道题:完整的题面不记得了,只记得大概要求

  1. 基础题: 写一个方法:传参数字,若传参3,生成类似如下表格
1 1 1
2 2 2
3 3 3

传参4的话,生成如下表格

1 1 1 1
2 2 2 2
3 3 3 3
4 4 4 4

以此类推

我的思路是:

  • num为传参,先初始化一个长度为num的数组,数组元素填充1;初始化一定长度的数组:new Array(length) ,数组填充值.fill()
  • 遍历数组,给每个元素初始化为长度为num的数组,并填充索引值+1;这里用到map遍历方法,map需要return
function arr(num){
    return new Array(num).fill(1).map((item,i)=>{
        return new Array(num).fill(i+1);
   });
}
复制代码

运行结果如下:

image.png 2. 扩展题 在1的基础上,变换下生成的表格内容,如下:

1 2 3
6 5 4
7 8 9
1 2 3 4
8 7 6 5
9 10 11 12
16 15 14 13

以此类推 我的思路是:

  • 在1的基础上,初始化num长度的数组,数组填充1

  • map方法,给数组中元素再初始化长度为num的数组,预设1,首位预设 索引*num + 1这里要注意的是,一定要给数组预设一个值,否则,new Array(num)出来的数组实际上是empty*num,都是空的,遍历器无法遍历取到indexitem,如下图

    image.png

  • 二维数组再map遍历一次,除去第一个值,剩余值累加+1

  • 判断奇数行和偶数行,从0数起,奇数行需要reverse(),奇偶数通过对2取余判断

  • return arry; 将拼接完成的数组返回出来

function arr(num){
    let array = new Array(num).fill(1).map((item,i)=>{
        let arrItem = new Array(num).fill(1).fill(i*num + 1, 0 ,1);
        let res = arrItem.map((val, key) => { return key === 0 ? val : key+arrItem[0];});
        return i%2 === 1 ? res.reverse() : res;
        
   }); 
   return array;
}
复制代码

运行结果如下: image.png

反思

这次笔试题,写完后自己在console里面试了下发现有问题,forEachmap用错了,reduce方法也用错了~

基础还是不够扎实,于是趁这次机会要来巩固下数组字符串切割等的各种方法了~

map遍历

不会改变原来的数组,返回一个新数组

image.png

forEach遍历

用于对数组中元素进行操作,不改变原数组的值,返回值为undefined

image.png

filter过滤器 筛选数组

filter用来筛选符合条件的值,返回一个新的数组,不会对原来数组进行修改

image.png

reduce求数组总和

常见用法如下:

  1. 不额外传参:reduce((sum,item,index)=>{return sum+item}) 该方法表示从数组的第1个(即索引值index为1)开始循环,sum初始值为数组下标为0的值
  2. 传初始值:reduce((sum,item,index)=>{return sum+item}, initData) 该方法表示,从数组第0个(即索引值index为0)开始循环,sum初始值为initData

image.png

fill方法 给数组批量填充值

fill用于给数组初始化赋值,常见用法有以下

  1. array.fill(data): 只传一个参,表示给数组每个元素赋值data
  2. array.fill(data, startIndex, endIndex): 表示给数组索引值为startIndexendIndex之间的赋值data
  3. array.fill(data, startIndex): 表示给数组从startIndex索引值开始赋值data

image.png

splice方法

array.splice(index, howmany ,item1……itemX) 删除或新增元素,会修改到原有数组,若删除,返回删除元素组成的数组

  1. arr.splice(index, 0, item1……itemX) 表示从index索引后插入item……itemX数据

image.png

  1. arr.splice(index, howmany) 表示从index索引开始删除howmany个值,返回被删除元素组成的数组

image.png

  1. arr.splice(index, howmany, item1……itemX) 表示从index索引开始删除howmany个值,并插入item……itemX数据,返回被删除元素组成的数组

image.png

image.png

split方法

str.split(), 指定分隔符将字符串分割成数组,分隔符传参可为字符串或者正则

image.png

slice方法

slice(start[, end]), start end为正整数或负整数,用于切割字符串,不改变原有字符串

substring

substring(start[, end]), start end均为非负整数,用于切割字符串,不改变原有字符串

substr

substr(start[, length])start可为负数,表示倒数第几个,用于切割字符串,不改变原有字符串

总结

1、会改变原有数组或字符串的方法

  • splice:原有数组进行新增或删除操作,并且返回被删除元素组成的数组
  • fill: 原有数组预填值

2、不会改变原有数组或字符串的方法

  • slice(start[, end]): 返回切割的字符串,startend可为负数
  • substring(start[, end]): 返回切割的字符串,startend不可为负数
  • substr(start[, length]): 返回切割的字符串,start可为负数
  • split(): 指定分隔符分割成数组,分隔符可用字符串或正则
  • filter: 过滤器,返回符合要求的数组
  • forEach: 遍历数组,对每个元素进行操作,返回值为 undefined
  • reduce: 求和方法
  • map: 对原有数组进行操作,返回一个新数组

3、记一些别的常用的方法

  • findIndex: 返回符合要求的第一个索引
  • find: 返回符合要求的第一个item
  • some: 若有满足条件的值则返回true,否则返回false
  • every: 若所有值都满足条件返回true,否则返回false
  • includes: 数组中若包含某一项返回true,否则返回false

image.png

image.png

猜你喜欢

转载自juejin.im/post/7078496313435750413
今日推荐