前端面試寶典總結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)) // 45var 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（基礎版）