2023年最新前端面试题（数组相关）

一、数组深拷贝的方法

• 利用递归实现

写一个递归函数，里面用for in 循环

判断是不是数组，如果是数组，调用递归函数（一定要先判断是否为数组，因为数组也是对象）

判断是不是对象，如果是对象，调用递归函数

其他简单类型开始浅拷贝

• 利用lodash里的_.cloneDeep()实现

• 利用序列化反序列化实现（注意：不能拷贝undefine和函数）

二、数组浅拷贝的方法

const arr = [1,2,3]
方法一：
const arr1 = [...arr]
方法二：
const arr2 = arr.map(function(item){
     return item
})
方法三：
const arr3 = []
for (let i = 0; i<arr.length; i++){
  arr3.push(arr[i])
}
方法四：
const arr4 = []
const arr5 = arr4.concat(arr)

三、对象浅拷贝的方法

const oldO = {
        age : 20,
        sex : '男'
}
方法一：
const newO = {...oldO}
方法二：
const newO = Object.assign({},oldO)
方法三：
const newO = {}
for (let k in oldO){
   newO[k]=oldO[k]
}

四、数组去重

1. 利用 ES6的set 方法

function setArr1(arr) {
//Set数据结构，它类似于数组，其成员的值都是唯一的
   return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}
console.log(setArr1([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

2. 利用双for循环，结合splice方法

function setArr2(arr) {
   let i; let j; let len = arr.length
   for (i = 0; i < len; i++) {
       for (j = i + 1; j < len; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            len--
            j--
          }
       }
   }
   return arr
}
console.log(setArr2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))// 结果是[1, 2, 3, 5, 6, 7, 4]

3. 利用forEach 和 includes方法

function setArr3(arr) {
    let newArr = [];
    arr.forEach(item => {
         return newArr.includes(item) ? '' : newArr.push(item);
    });
    return newArr;
}
console.log(setArr3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

4. 利用filter 和 includes方法

function setArr4(arr) {
   let newArr = []
   newArr = arr.filter(function (item) {
       return newArr.includes(item) ? '' : newArr.push(item)
   })
   return newArr
}
console.log(setArr4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

5. 利用for和includes方法

function setArr5(arr) {
   let newArr = []
   for (var i = 0; i < arr.length; i++) {
       if (!newArr.includes(arr[i])) {
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(setArr5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

6. 利用数组的indexOf下标属性来查询

function setArr6(arr) {
     let newArr = []
     for (let i = 0; i < arr.length; i++) {
         if (newArr.indexOf(arr[i])===-1) {
              newArr.push(arr[i])
         }
     }
     return newArr
}
console.log(setArr6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

7. 先将原数组排序，在与相邻的进行比较，如果不同则存入新数组

function unique2(arr) {
    let formArr = arr.sort()
    let newArr=[formArr[0]]
    for (let i = 1; i < formArr.length; i++) {
         if (formArr[i]!==formArr[i-1]) {
             newArr.push(formArr[i])
         }
     }
     return newArr
}
console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

五、数组合并

const arr1 = [1, 4, 6]
const arr2 = [3, 4, 5]
方法1：
console.log(arr1.concat(arr2))
方法2：
console.log([...arr1, ...arr2])
方法3：
arr2.forEach(el => {
    arr1.push(el)
})
console.log(arr1)

六、伪数组及特点

1. 本质是Object，是复杂的数据类型

2. 有长度有索引

3. 没有pop()，push()等数组方法

七、伪数组转化为真数组方法

1. 先声明一个空数组，然后遍历伪数组，将伪数组中的值通过索引逐个添加到新数组当中

let newArr = []
for (let i = 0; i < arguments.length; i ++){
    newArr[i] = arguments[i]
}

2. 利用Array的原型对象的slice方法，配合call()方法修改slice中this指向

slice原本是数组的截取子数组的方法，这里给数组的原型对象方法slice的指向强制改成arguments

let newArr = Array.prototype.slice.call(arguments)

3 利用扩展运算符(...)将伪数组转化为真数组

let newArr = [...arguments]

4 利用ES6的Array.from方法

let arr = Array.from(arguments)

八、ES6数组方法

1. array.forEach()

遍历数组，没有返回值，return不可以终止循环，可以跳过某次循环

let arr = [1,2,3]
array.forEach((item,index)=>{}

2. array.map()

map方法和forEach每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组），但是map返回一个新数组,原数组不影响

let arr = [1,2,3];
let arr2 = arr.map((item,index)=>{
    if(item==1){
        return true;
      }else{
        return false; //通过return 返回想要的东西
      }
    })
结果arr2 = [true,false,false] arr = [1,2,3]

3. array.filter

筛选数组中符合条件的项，返回一个新数组

let arr = [1,2,4];
let result = arr.filter((item,index)=>{
    return item>2;
}）
结果 result 为 [4]

4. array.some()和array.every()

想执行一个数组是否满足什么条件，返回一个布尔值，这时forEach和map就不行了，可以用一般的for循环实现，或者用array.every()或者array.some();

①array.some() 类似于或

some()方法用于检测数组中的元素是否有满足条件的，若满足返回true,否则返回false

注意：1、不会对空数组检测

2、不会改变原始数组

let arr = [1,2,4];
let result = arr.some((item,index)=>{
    return item>2;
}）
结果 result 为true

②array.every() 类似于与

用于检测数组中所有元素是否都满足条件，若满足返回true,否则返回false

let arr = [1,2,4];
let result = arr.every((item,index)=>{
    return item>2;
}）
结果 result 为false

5. array.find()

find（）方法只会找到第一个符合的，找到之后就会直接返回item，就算下面还有符合要求的，也不会再找下去

let arr = [1,1,2,4];
let result = arr.find((item,index)=>{
    return item>=2;
}）
结果 result 为2

6. array.reduce()

数组累计求和

reducearr.reduce((sum,obj)=>sum += obj.price,0)

7. array.join()

用于把数组中的所有元素转换一个字符串，参数表示转换为字符串以什么连接

  const arr = ['pink老师', 'red老师', 'blue老师']
  console.log(arr.join(''))  //pink老师red老师blue老师 

string.split()

用于把字符串转换为数组，参数为以某个字符串分割

  "|a|b|c".split("|")    //将返回["", "a", "b", "c"]

8. array.slice

原数组不会改变，返回由start和end决定的一个新数组,原数组不变

let arr = [1,2,3,4,5]
let arr1 = arr.slice(1,3) // 截取索引1到3之间的数据，包括索引1，但是不包括3
console.log(arr1); //得到的是 [2, 3]

9. array.splice

会改变原数组，他通过删除或者替换现有元素或者原地添加新的元素来修改数组

删除2：
let arr = [1,2,3]
arr.splice(1,1)  // 从数组下标1开始，删除1个，第二个参数如果省略则默认从指定的起始位置删除到最后
console.log(arr)  // [1,3]

在索引号是1的位置添加 pink：
let arr = ['red', 'green', 'blue']
arr.splice(1, 0, 'pink')
console.log(arr) // ['red', 'pink', 'green', 'blue']

在索引号是1的位置添加 pink  hotpink，删除green：
let arr = ['red', 'green', 'blue']
arr.splice(1, 1, 'pink', 'hotpink') 
console.log(arr) // ['red', 'pink', 'hotpink',  'blue']

九、js清空数组

十、判断object是否是数组array

1. Object. prototype.toString.call(obj)===[ object Array]

2. Array. isArray(obj)

十一、js的concat方法

用途：合并2个或多个数组，生成新数组，原数组不变

1. 连接2个数组

const arr = [1, 2, 3].concat([4, 5])
console.log(arr) // [1,2,3,4,5]

2. 连接3个数组

const arr1 = [1, 2]
const arr2 = [3, 4]
const arr3 = [5, 6]
const arr4 = arr1.concat(arr2, arr3)
console.log(arr4) // [1, 2, 3, 4, 5, 6]

3. 连接值到数组

const arr1 = [1, 2]
const arr2 = 3
const arr3 = [4, 5]
const arr4 = arr1.concat(arr2, arr3)
console.log(arr4) // [1, 2, 3, 4, 5]