JavaScript優(yōu)雅處理數(shù)組的幾個實用方法
更新時間：2025年12月11日 10:18:39 作者：dorisrv
這篇文章主要介紹了JavaScript優(yōu)雅處理數(shù)組的幾個實用方法,包括數(shù)組去重、扁平化、分組、查找、排序等,并提供了React和Vue3中的數(shù)組處理技巧,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
為什么要優(yōu)雅處理數(shù)組？
數(shù)組是前端開發(fā)中最常用的數(shù)據(jù)結(jié)構(gòu)之一，幾乎每個項目都會用到。但是，你真的掌握了數(shù)組的優(yōu)雅處理方式嗎？
你是否還在使用冗長的for循環(huán)來處理數(shù)組？是否還在為數(shù)組操作的性能和可讀性而煩惱？今天，我們就來學習幾個優(yōu)雅處理數(shù)組的實用方法，讓你的代碼更加簡潔、高效、易讀！
實用的數(shù)組處理方法
1. 數(shù)組去重
傳統(tǒng)方法：使用Set
// 基礎(chǔ)去重
const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
// 對于對象數(shù)組，可以使用Map
const objArray = [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 1, name: '張三' }, // 重復
{ id: 3, name: '王五' }
];
const uniqueObjArray = Array.from(
new Map(objArray.map(item => [item.id, item])).values()
);
console.log(uniqueObjArray);
進階方法：使用filter
const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, self) => {
return self.indexOf(item) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
// 對象數(shù)組去重
const objArray = [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 1, name: '張三' },
{ id: 3, name: '王五' }
];
const uniqueObjArray = objArray.filter((item, index, self) => {
return self.findIndex(obj => obj.id === item.id) === index;
});
console.log(uniqueObjArray);
2. 數(shù)組扁平化
基礎(chǔ)方法：使用flat()
// 二維數(shù)組扁平化 const nestedArray = [1, [2, 3], [4, [5, 6]]]; const flatArray = nestedArray.flat(); console.log(flatArray); // [1, 2, 3, 4, [5, 6]] // 指定深度扁平化 const deepFlatArray = nestedArray.flat(2); console.log(deepFlatArray); // [1, 2, 3, 4, 5, 6] // 無限深度扁平化 const infiniteNestedArray = [1, [2, [3, [4]]]]; const infiniteFlatArray = infiniteNestedArray.flat(Infinity); console.log(infiniteFlatArray); // [1, 2, 3, 4]
傳統(tǒng)方法：使用reduce和concat
const nestedArray = [1, [2, 3], [4, [5, 6]]];
function flattenArray(array) {
return array.reduce((acc, curr) => {
return acc.concat(Array.isArray(curr) ? flattenArray(curr) : curr);
}, []);
}
const flatArray = flattenArray(nestedArray);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]
3. 數(shù)組分組
實用方法：使用reduce
const students = [
{ name: '張三', grade: 'A' },
{ name: '李四', grade: 'B' },
{ name: '王五', grade: 'A' },
{ name: '趙六', grade: 'C' },
{ name: '孫七', grade: 'B' }
];
// 按成績分組
const groupedByGrade = students.reduce((acc, student) => {
const key = student.grade;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(student);
return acc;
}, {});
console.log(groupedByGrade);
// {
// A: [{ name: '張三', grade: 'A' }, { name: '王五', grade: 'A' }],
// B: [{ name: '李四', grade: 'B' }, { name: '孫七', grade: 'B' }],
// C: [{ name: '趙六', grade: 'C' }]
// }
4. 數(shù)組查找
精確查找：find() 和 findIndex()
const users = [
{ id: 1, name: '張三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
];
// 查找第一個年齡大于22的用戶
const user = users.find(user => user.age > 22);
console.log(user); // { id: 2, name: '李四', age: 25 }
// 查找第一個年齡大于22的用戶的索引
const index = users.findIndex(user => user.age > 22);
console.log(index); // 1
條件查找：filter()
// 查找所有年齡大于22的用戶
const usersOver22 = users.filter(user => user.age > 22);
console.log(usersOver22);
// [{ id: 2, name: '李四', age: 25 }, { id: 3, name: '王五', age: 30 }]
5. 數(shù)組排序
基礎(chǔ)排序：sort()
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
// 升序排序
const ascending = [...numbers].sort((a, b) => a - b);
console.log(ascending); // [1, 1, 2, 3, 4, 5, 6, 9]
// 降序排序
const descending = [...numbers].sort((a, b) => b - a);
console.log(descending); // [9, 6, 5, 4, 3, 2, 1, 1]
// 對象數(shù)組排序
const users = [
{ id: 1, name: '張三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
];
// 按年齡升序排序
const sortedByAge = [...users].sort((a, b) => a.age - b.age);
console.log(sortedByAge);
復雜排序：多條件排序
const products = [
{ name: '蘋果', category: '水果', price: 5 },
{ name: '香蕉', category: '水果', price: 3 },
{ name: '胡蘿卜', category: '蔬菜', price: 2 },
{ name: '西紅柿', category: '蔬菜', price: 4 }
];
// 先按分類排序，再按價格升序排序
const sortedProducts = [...products].sort((a, b) => {
if (a.category !== b.category) {
return a.category.localeCompare(b.category);
}
return a.price - b.price;
});
console.log(sortedProducts);
React中的數(shù)組處理
在React中，數(shù)組處理是非常常見的，尤其是在渲染列表時。讓我們來看幾個React中數(shù)組處理的實用技巧。
1. 使用map渲染列表
import React from 'react';
function UserList({ users }) {
return (
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} ({user.age}歲)
</li>
))}
</ul>
);
}
2. 條件渲染數(shù)組元素
import React from 'react';
function ProductList({ products, showOutOfStock = false }) {
return (
<div>
{products
// 條件過濾
.filter(product => showOutOfStock || product.inStock)
// 渲染列表
.map(product => (
<div key={product.id} className="product">
<h3>{product.name}</h3>
<p>價格：{product.price}元</p>
<p className={product.inStock ? 'in-stock' : 'out-of-stock'}>
{product.inStock ? '有貨' : '缺貨'}
</p>
</div>
))
}
</div>
);
}
3. 使用useMemo優(yōu)化數(shù)組計算
import React, { useMemo } from 'react';
function ExpensiveList({ items, filter }) {
// 使用useMemo緩存計算結(jié)果，避免每次渲染都重新計算
const filteredItems = useMemo(() => {
return items.filter(item => {
// 復雜的過濾邏輯
return item.name.includes(filter) && item.price > 100;
}).sort((a, b) => {
// 復雜的排序邏輯
return a.price - b.price;
});
}, [items, filter]);
return (
<ul>
{filteredItems.map(item => (
<li key={item.id}>{item.name} - {item.price}元</li>
))}
</ul>
);
}
Vue 3中的數(shù)組處理
在Vue 3中，我們可以使用模板語法和Composition API來優(yōu)雅地處理數(shù)組。
1. 使用v-for渲染列表
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} ({{ user.age }}歲)
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const users = ref([
{ id: 1, name: '張三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
]);
</script>
2. 條件渲染與數(shù)組過濾
<template>
<div>
<div v-for="product in filteredProducts" :key="product.id" class="product">
<h3>{{ product.name }}</h3>
<p>價格：{{ product.price }}元</p>
<p :class="product.inStock ? 'in-stock' : 'out-of-stock'">
{{ product.inStock ? '有貨' : '缺貨' }}
</p>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const products = ref([
{ id: 1, name: '蘋果', price: 5, inStock: true },
{ id: 2, name: '香蕉', price: 3, inStock: false },
{ id: 3, name: '胡蘿卜', price: 2, inStock: true },
{ id: 4, name: '西紅柿', price: 4, inStock: true }
]);
const showOutOfStock = ref(false);
// 使用computed屬性緩存過濾結(jié)果
const filteredProducts = computed(() => {
return products.value.filter(product => {
return showOutOfStock.value || product.inStock;
});
});
</script>
注意事項與最佳實踐
1. 不要直接修改原數(shù)組
在React和Vue等框架中，直接修改原數(shù)組可能會導致視圖不更新。應(yīng)該使用數(shù)組的不可變方法，或者創(chuàng)建新數(shù)組。
// 錯誤做法：直接修改原數(shù)組
array[0] = 'new value';
array.push('new item');
array.pop();
// 正確做法：創(chuàng)建新數(shù)組
const newArray = [...array.slice(0, 0), 'new value', ...array.slice(1)];
const newArrayWithItem = [...array, 'new item'];
const newArrayWithoutLast = array.slice(0, -1);
2. 選擇合適的數(shù)組方法
根據(jù)不同的場景選擇合適的數(shù)組方法：
- 查找元素：使用find()或findIndex()
- 過濾元素：使用filter()
- 轉(zhuǎn)換元素：使用map()
- 匯總元素：使用reduce()
- 檢查條件：使用some()或every()
3. 性能優(yōu)化
- 對于大數(shù)據(jù)量的數(shù)組操作，要注意性能問題
- 使用useMemo(React)或computed(Vue)緩存計算結(jié)果
- 避免在渲染過程中進行復雜的數(shù)組操作
4. 可讀性優(yōu)先
- 優(yōu)先使用現(xiàn)代數(shù)組方法，而不是傳統(tǒng)的for循環(huán)
- 為復雜的數(shù)組操作添加注釋
- 拆分復雜的數(shù)組操作，提高可讀性
總結(jié)
數(shù)組處理是前端開發(fā)中的基礎(chǔ)技能，掌握優(yōu)雅的數(shù)組處理方法可以讓你的代碼更加簡潔、高效、易讀。
通過本文的介紹，我們學習了：
- 數(shù)組去重：使用Set和filter方法
- 數(shù)組扁平化：使用flat()和reduce方法
- 數(shù)組分組：使用reduce方法
- 數(shù)組查找：使用find()、findIndex()和filter()方法
- 數(shù)組排序：使用sort()方法，包括復雜排序
- 框架中的數(shù)組處理：React和Vue 3中的數(shù)組處理技巧
- 最佳實踐：不可變操作、性能優(yōu)化和可讀性
希望這些小技巧對你有所幫助！下次處理數(shù)組時，不妨試試這些優(yōu)雅的方法吧～?
相關(guān)資源：
到此這篇關(guān)于JavaScript優(yōu)雅處理數(shù)組幾個實用方法的文章就介紹到這了,更多相關(guān)JS優(yōu)雅處理數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)可以點擊收縮或張開的懸浮窗效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了JS自動生成動態(tài)HTML驗證碼頁面，輸入錯誤自動清空輸入框的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法
這篇文章主要介紹了關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法,提供了2種解決方法供大家對比參考,需要的朋友可以參考下2016-06-06
這篇文章主要詳細介紹了javascript 閉包的相關(guān)資料，十分詳盡,需要的朋友可以參考下2015-02-02
在學習Rx編程的過程中，理解Observable這個概念至關(guān)重要，常規(guī)學習過程中，通常需要進行多次碰壁才能逐漸開悟。這個有點像小時候?qū)W騎自行車，必須摔幾次才能掌握一樣。當然如果有辦法能言傳，則可以少走一些彎路，盡快領(lǐng)悟Rx的精妙2021-06-06
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一2022-08-08
用js實現(xiàn)的十進制的顏色值轉(zhuǎn)換成十六進制的代碼
用js實現(xiàn)的十進制的顏色值轉(zhuǎn)換成十六進制的代碼...2007-03-03
這篇文章主要介紹了前端加密常用的幾種方式,前端加密技術(shù)包括Base64編碼、哈希算法、對稱加密和非對稱加密,這些方法各有特點,適用于不同的場景,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
請注意，這里說的是運算數(shù)的求值順序。而非運算符，運算符的求值順序我們比較熟悉。2011-08-08