前端面试宝典总结4-手搓代码JavaScript（数据处理）

前端面试宝典总结4之手写代码JavaScript（数据处理）

本文章 对各大学习技术论坛知识点，进行总结、归纳自用学习，共勉🙏

上一篇👉: 前端面试宝典总结3-JavaScript（2）

1.实现数组元素求和（Sum）

• 简单数组求和 ：arr=[1,2,3,4,5,6,7,8,9,10]，求和

let arr= [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = arr.reduce( (total,i) => total += i,0);
console.log(sum);

• 嵌套数组求和： arr=[1,2,3,[[4,5],6],7,8,9]，求和

var = arr=[1, 2, 3, [[4,5],6],7,8 , 9]
let arr= arr.toString().split(',').reduce( (total,i) => total += Number(i),0);
console.log(arr);

递归实现：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] 

function add(arr) {
    if (arr.length == 1) return arr[0] 
    return arr[0] + add(arr.slice(1)) 
}
console.log(add(arr)) // 45


var arr = [1, 2, 3, [[4, 5], 6], 7, 8, 9]];
function sumNestedArray(arr) {
    let total = 0;
    arr.forEach(element => {
        if(Array.isArray(element)) {
            total += sumNestedArray(element);
        } else {
            total += element;
        }
    });
    return total;
}

console.log(sumNestedArray(arr)); // 输出: 45

2.实现数组的乱序输出

实现思路：

• 取出数组的第一个元素，随机产生一个索引值，将该第一个元素和这个索引对应的元素进行交换。
• 第二次取出数据数组第二个元素，随机产生一个除了索引为1的之外的索引值，并将第二个元素与该索引值对应的元素进行交换
• 按照上面的规律执行，直到遍历完成

原地交换法

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (var i = 0; i < arr.length; i++) {
  const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
  [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
}
console.log(arr)

倒序遍历法：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let length = arr.length;
while (length > 1) {
    const randomIndex = Math.floor(Math.random() * length);
    length--;
    [arr[length], arr[randomIndex]] = [arr[randomIndex], arr[length]];
}
console.log(arr);

3.数组过滤（Filter）

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = array1.concat(array2);
console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6]

4.数组排序（Sort）

const fruits = ['banana', 'apple', 'cherry', 'date'];
fruits.sort();
console.log(fruits); // 输出: ['apple', 'banana', 'cherry', 'date']

// 对象数组按属性排序
const people = [
  {name: 'Alice', age: 30},
  {name: 'Bob', age: 25}
];
people.sort((a, b) => a.age - b.age);
console.log(people);

5.数组去重（Remove duplicates）

• 使用 Set（ES6 提供的新数据结构）

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

• 使用 filter 方法

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

• 使用 reduce 方法

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, current) => 
    accumulator.includes(current) ? accumulator : [...accumulator, current], []);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

• 双重循环检查（传统方法）

function uniqueArrayTraditional(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if (result.indexOf(item) === -1) {
            result.push(item);
        }
    }
    }
    return result;
}
console.log(uniqueArrayTraditional([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]

• 利用对象键特性

function uniqueByKey(arr) {
    var map = {};
    arr.forEach(item => map[item] = true);
    return Object.keys(map);
}
console.log(uniqueByKey([1, 2, 2, 3, 4, 4, 5])); // 输出: ["1", "2", "3", "4", "5"]

• 使用 Map

function uniqueWithMap(arr) {
    return Array.from(new Map(arr.map(item => [item, item])).map(([item]) => item));
}
console.log(uniqueWithMap([1, 2, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5]

6.查找元素（Find）

const array = [1, 2, 3, 4, 5];
const found = array.find(element => element > 3);
console.log(found); // 输出: 4

7.实现日期格式化函数

const dateFormat = (dateInput, format) => {
    let day = dateInput.getDate();
    let month = dateInput.getMonth() + 1; // 月份需要加1，因为getMonth()返回的月份是从0开始的
    let year = dateInput.getFullYear();

    // 添加前导零处理
    day = day < 10 || day > 9 ? day : '0' + day;
    month = month < 10 ? '0' + month : month;

    format = format.replace(/yyyy/g, year);
    format = format.replace(/MM/g, month); // 确保月份已经做了前导零处理
    format = format.replace(/dd/g, day);   // 确保日期已经做了前导零处理
    return format;
};

// 测试用例
console.log(dateFormat(new Date('2020-12-01'), 'yyyy/MM/dd')); // 应输出: 2020/12/01
console.log(dateFormat(new Date('2020-04-01'), 'yyyy/MM/dd')); // 应输出: 2020/04/01
console.log(dateFormat(new Date('2020-04-01'), 'yyyy年MM月dd日')); // 应输出: 2020年04月01日

8.交换a,b的值，不能用临时变量

• 使用算术运算（限于数值交换）

不适用于非数值类型的变量，并且可能会有精度损失（对于浮点数）

a = a + b;
b = a - b;
a = a - b;

• 使用数组解构赋值

这段代码首先创建了一个包含b和a值的新数组，然后立即解构这个数组，将b的值赋给a，a的值赋给b，从而实现了交换。

[a, b] = [b, a];

9.实现数组的扁平化

数组的扁平化，即将一个多维数组转换为一维数组，可以通过递归或ES6的展开运算符等多种方法实现。

• 使用递归

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

let nestedArray = [1, [2, [3, [4, 5], 6], 7], 8, 9];
console.log(flatten(nestedArray)); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 使用ES6的展开运算符（…）

function flattenES6(arr) {
    while(arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

let nestedArray = [1, [2, [3, [4, 5], 6], 7], 8, 9];
console.log(flattenES6(nestedArray)); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 使用reduce和递归

function flattenReduce(arr) {
    return arr.reduce((acc, val) => 
        Array.isArray(val) ? acc.concat(flattenReduce(val)) : acc.concat(val), []);
}, []);

let nestedArray = [1, [2, [3, [4, 5], 6], 7], 8, 9];
console.log(flattenReduce(nestedArray)); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 使用栈（非递归）

function flattenStack(arr) {
    let stack = [...arr], result = [];
    while(stack.length) {
        let next = stack.pop();
        if(Array.isArray(next)) {
            stack.push(...next);
        } else {
            result.push(next);
        }
    }
    }
    return result.reverse();
}

let nestedArray = [1, [2, [3, [4, 5], 6], 7], 8, 9];
console.log(flattenStack(nestedArray)); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

上述方法各有特点，递归方法直观易懂，但在处理极深的嵌套时可能会遇到栈溢出问题；ES6展开运算符简洁高效，但需要考虑兼容性；使用reduce和栈的方法则提供了不同的思考角度，适用于处理大量数据或深度嵌套的情况。

下一篇👉: 前端面试宝典总结4-手搓代码JavaScript（基础版）