原生JS面试题整理（2023年）_编程题带答案01

1、冒泡排序

function bubbleSort(arr) {
 ? ?var len = arr.length;
 ? ?
 ? ?for (var i = 0; i < len - 1; i++) {
 ? ? ? ?for (var j = 0; j < len - 1 - i; j++) {
 ? ? ? ? ? ?if (arr[j] > arr[j + 1]) { // 比较相邻元素大小并交换位置
 ? ? ? ? ? ? ? ?var temp = arr[j];
 ? ? ? ? ? ? ? ?arr[j] = arr[j + 1];
 ? ? ? ? ? ? ? ?arr[j + 1] = temp;
 ? ? ? ? ?  }
 ? ? ?  }
 ?  }
 ? ?
 ? ?return arr;
}
 
// 调用示例
var array = [5, 3, 8, 4, 2];
console.log("原始数组：", array);
array = bubbleSort(array);
console.log("排序后的数组：", array);
?

思考：这个代码可以优化一下，如：当数组的元素一开始就有序，或者，再排序过程中已经有序，如何让代码进行优化

2、数组去重（至少三种）

使用set

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 原始数组
const uniqueArr = Array.from(new Set(arr)); // 利用Set对象进行去重操作
console.log(uniqueArr); // 输出结果为[1, 2, 3, 4, 5, 6, 7, 8, 9]
?

使用filter：

const arr = [1, 2, 3, 4, 5, 6];
const uniqueArr = arr.filter((item, index) => {
 ? ?return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

使用reduce()函数进行去重：

const arr = [1, 2, 3, 4, 5, 6];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
 ? ?if (!accumulator.includes(currentValue)) {
 ? ? ? ?accumulator.push(currentValue);
 ?  }
 ? ?return accumulator;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

使用for循环进行去重（遍历原始数组）：

function removeDuplicates(arr) {
 ? ?const result = [];
 ? ?for (let i = 0; i < arr.length; i++) {
 ? ? ? ?if (!result.includes(arr[i])) {
 ? ? ? ? ? ?result.push(arr[i]);
 ? ? ?  }
 ?  }
 ? ?return result;
}
 
const arr = [1, 2, 3, 4, 5, 6];
const uniqueArr = removeDuplicates(arr);
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

使用forEach()函数进行去重

function removeDuplicates(arr) {
 ? ?const result = [];
 ? ?arr.forEach(element => {
 ? ? ? ?if (!result.includes(element)) {
 ? ? ? ? ? ?result.push(element);
 ? ? ?  }
 ?  });
 ? ?return result;
}
 
const arr = [1, 2, 3, 4, 5, 6];
const uniqueArr = removeDuplicates(arr);
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

其实还有很多，自己发挥。

3、数组扁平化

function flatArray(arr){
 ? ?let resultArr=[];
?
 ? ?for(let i=0;i<arr.length;i++){
 ? ? ? ?if(Array.isArray(arr[i])){
 ? ? ? ? ? ?resultArr = resultArr.concat(flatArray(arr[i]));
 ? ? ?  }else{
 ? ? ? ? ? ?resultArr.push(arr[i]);
 ? ? ?  }
 ?  }
?
 ? ?return resultArr;
}
?

4、求一组数中最接近平均数的数。

// 求一组数中最接近平均数的数。
// 参数：数组
// 返回值：数字（接近平均值的数字）
?
function findCloseAverage(arr) {
 ? ?//1、求出平均数
 ? ?// 1）、求和
 ? ?let sum = 0;
 ? ?
 ? ?for(let i=0;i<arr.length;i++){
 ? ? ? ?sum += arr[i];
 ?  }
 ? ?// 2）、求平均数。
 ? ?let avg = sum/arr.length;
?
?
 ? ?// 2、求每个数与平均数的差值（绝对值）。找到最小的
 ? ?
 ? ?// 1）、假定第一个是最小的。
 ? ?let min = Math.abs(arr[0]-avg);//最小插值
 ? ?let minIndex = 0;//最小数的下标
?
 ? ?for(let i=1;i<arr.length;i++){
 ? ? ? ?if(Math.abs(arr[i]-avg)<min){
 ? ? ? ? ? ?min = Math.abs(arr[i]-avg);
 ? ? ? ? ? ?minIndex = i;
 ? ? ?  }
 ?  }
 ? ?return arr[minIndex];
?
}
?

5、合并有序数组

给定两个从小到大排好序的数组，请你把它两个合并成新的数组，合并后的结果依然有序。

function mergeSortedArrays(array1, array2) {
 ? ?let mergedArray = [];
 ? ?let i = 0;
 ? ?let j = 0;
?
 ? ?while (i < array1.length && j < array2.length) {
 ? ? ? ?if (array1[i] < array2[j]) {
 ? ? ? ? ? ?mergedArray.push(array1[i]);
 ? ? ? ? ? ?i++;
 ? ? ?  } else {
 ? ? ? ? ? ?mergedArray.push(array2[j]);
 ? ? ? ? ? ?j++;
 ? ? ?  }
 ?  }
?
 ? ?// 将剩余的元素添加到数组中
 ? ?while (i < array1.length) {
 ? ? ? ?mergedArray.push(array1[i]);
 ? ? ? ?i++;
 ?  }
?
 ? ?while (j < array2.length) {
 ? ? ? ?mergedArray.push(array2[j]);
 ? ? ? ?j++;
 ?  }
?
 ? ?return mergedArray;
}
?
let array1 = [1, 3, 5, 7];
let array2 = [2, 4, 6, 8];
let mergedArray = mergeSortedArrays(array1, array2);
console.log(mergedArray); // 输出结果为[1, 2, 3, 4, 5, 6, 7, 8]

6、求两个数的交集

7、请编写函数，将data数组中所有对象按照value从小到大排列，不能使用sort函数

 var data = [{
 ? ? ? ? ? ? name: "uc",
 ? ? ? ? ? ? value: 5
 ? ? ? ? }, {
 ? ? ? ? ? ? name: "amap",
 ? ? ? ? ? ? value: 2
 ? ? ? ? }, {
 ? ? ? ? ? ? name: "ali",
 ? ? ? ? ? ? value: 3
 ? ? ? ? }.....
 ? ? ? ]

参数答案：

function sortObj(arr){
? ? ? ? ? for(let i=0;i<arr.length-1;i++){
? ? ? ? ? ? for(let j=0;j<arr.length-i-1;j++){
? ? ? ? ? ? ? if(arr[j]["value"] > arr[j+1]["value"]){
? ? ? ? ? ? ? ? let b = arr[j];
? ? ? ? ? ? ? ? arr[j] = arr[j+1];
? ? ? ? ? ? ? ? arr[j+1] = b;
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? 
? ? ? ? ? }
? ? ? ? ? return arr;
? ? ? ? }
? ? ? ? console.log(sortObj(data))

8、深拷贝

场景：

说深拷贝和浅拷贝，特指引用类型。

区别：

深拷贝： 把引用类型的地址及其它的数据都拷贝一份

浅拷贝： 只拷贝了引用类型的地址

如何进行深拷贝：

深拷贝的思路：

创建空对象，循环原对象的每个键，一一 赋值给空对象，并使用递归的方式，把对象属性也进行复制

详情请阅读：面试题：深拷贝和浅拷贝(超级详细，有内存图)_深拷贝和浅拷贝 面试题-CSDN博客

function deepCopy(sourceObj){
 ? ?
 ? ?let targetObj = Array.isArray(sourceObj)?[]:{};
?
 ? ?for(let key in sourceObj){
 ? ? ? ?if(typeof sourceObj[key] == "object"){
 ? ? ? ? ? ?targetObj[key] = deepCopy(sourceObj[key]);
 ? ? ?  }else{
 ? ? ? ? ? ?targetObj[key] = sourceObj[key];
 ? ? ?  }
 ?  }
?
 ? ?return targetObj;
}

9、js中如何判断两个嵌套层数不确定对象是否相等，说出详细的代码思路

可以使用 JavaScript 中的 filter() 和 includes() 方法来求取两个数组的交集。

function getIntersection(arr1, arr2) {
 ? ?return arr1.filter(x => arr2.includes(x));
}
?
const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];
console.log(getIntersection(array1, array2)); // 输出[3, 4]

这个方法首先使用 filter() 方法遍历第一个数组中的每个元素，然后使用 includes() 方法检查该元素是否存在于第二个数组中。如果存在，则将该元素添加到结果数组中。最后返回结果数组即可。

10、请把下面的对象数组变成对象嵌套

 let arr = [
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 1,
 ? ? ? ? ? ? ? ?name: "张一",
 ? ? ? ? ? ? ? ?parentId: null
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 2,
 ? ? ? ? ? ? ? ?name: "张二",
 ? ? ? ? ? ? ? ?parentId: 1
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 3,
 ? ? ? ? ? ? ? ?name: "张三",
 ? ? ? ? ? ? ? ?parentId: 1
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 4,
 ? ? ? ? ? ? ? ?name: "张四",
 ? ? ? ? ? ? ? ?parentId: 2
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 5,
 ? ? ? ? ? ? ? ?name: "张五",
 ? ? ? ? ? ? ? ?parentId: 2
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 6,
 ? ? ? ? ? ? ? ?name: "张六",
 ? ? ? ? ? ? ? ?parentId: 3
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 7,
 ? ? ? ? ? ? ? ?name: "张七",
 ? ? ? ? ? ? ? ?parentId: 4
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?id: 8,
 ? ? ? ? ? ? ? ?name: "张八",
 ? ? ? ? ? ? ? ?parentId: 6
 ? ? ? ? ?  }
 ? ? ?  ]

第一种：

function objDataFormat(arr,parentId=null){
 ? ?return arr.filter(function(item){
 ? ? ? ?return item.parentId === parentId
 ?  }).map(function(item){
 ? ? ? ?let children = objDataFormat(arr,item.id)
 ? ? ? ?if (children.length > 0) {
 ? ? ? ? ? ?return {
 ? ? ? ? ? ? ? ?...item, // 将当前项的所有属性展开，赋给一个新的对象
 ? ? ? ? ? ? ? ?children:children // 将子项赋值给children属性
 ? ? ? ? ?  };
 ? ? ?  } else {
 ? ? ? ? ? ?return {
 ? ? ? ? ? ? ? ?...item // 将当前项的所有属性展开，赋给一个新的对象
 ? ? ? ? ?  };
 ? ? ?  }
 ?  })
}
console.log(objDataFormat(arr))

第二种：

 //实现
 ? ?function arrToJson(root) {
?
 ? ? ? ?// 2、循环数组，找子元素
 ? ? ? ?let children = arr.filter(item => item.parentId == root.id);
?
 ? ? ? ?if (children.length > 0) {
 ? ? ? ? ? ?root.children = children;
 ? ? ? ? ? ?children.forEach(item => {
 ? ? ? ? ? ? ? ?arrToJson(item);
 ? ? ? ? ?  })
 ? ? ?  };
 ?  }
?
 ? ?// 1、先找的根元素；
 ? ?let root = arr.filter(item => item.parentId == null)[0]
 ? ?arrToJson(root);
?
 ? ?console.log(root);

第三种：

function arrToJSON(arr) {
 ? ?let root;
?
 ? ?arr.forEach(item => {
?
 ? ? ? ?if(item.parentId!=null){
 ? ? ? ? ? ?// 如果有父级
 ? ? ? ? ? ?// 找到父级
 ? ? ? ? ? ?let parentObj = arr.filter(parentItem=>parentItem.id===item.parentId)[0];
 ? ? ? ? ? ?// 给父级增加children属性（数组）
 ? ? ? ? ? ?!parentObj.children && (parentObj.children=[]);
 ? ? ? ? ? ?// 把自己添加到父级的children属性（数组）
 ? ? ? ? ? ?parentObj.children.push(item);
?
 ? ? ?  }else{
 ? ? ? ? ? ?root = item;
 ? ? ?  }
 ?  });
?
 ? ?return root;
}
?
console.log(arrToJSON(arr));
?
console.log(arr.length);
?