JavaScript優(yōu)雅處理數(shù)組的幾個(gè)實(shí)用方法
更新時(shí)間：2025年12月11日 10:18:39 作者：dorisrv
這篇文章主要介紹了JavaScript優(yōu)雅處理數(shù)組的幾個(gè)實(shí)用方法,包括數(shù)組去重、扁平化、分組、查找、排序等,并提供了React和Vue3中的數(shù)組處理技巧,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
為什么要優(yōu)雅處理數(shù)組？
數(shù)組是前端開發(fā)中最常用的數(shù)據(jù)結(jié)構(gòu)之一，幾乎每個(gè)項(xiàng)目都會(huì)用到。但是，你真的掌握了數(shù)組的優(yōu)雅處理方式嗎？
你是否還在使用冗長的for循環(huán)來處理數(shù)組？是否還在為數(shù)組操作的性能和可讀性而煩惱？今天，我們就來學(xué)習(xí)幾個(gè)優(yōu)雅處理數(shù)組的實(shí)用方法，讓你的代碼更加簡潔、高效、易讀！
實(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: '張三' }, // 重復(fù)
{ id: 3, name: '王五' }
];
const uniqueObjArray = Array.from(
new Map(objArray.map(item => [item.id, item])).values()
);
console.log(uniqueObjArray);
進(jìn)階方法：使用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ù)組分組
實(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 }
];
// 查找第一個(gè)年齡大于22的用戶
const user = users.find(user => user.age > 22);
console.log(user); // { id: 2, name: '李四', age: 25 }
// 查找第一個(gè)年齡大于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);
復(fù)雜排序：多條件排序
const products = [
{ name: '蘋果', category: '水果', price: 5 },
{ name: '香蕉', category: '水果', price: 3 },
{ name: '胡蘿卜', category: '蔬菜', price: 2 },
{ name: '西紅柿', category: '蔬菜', price: 4 }
];
// 先按分類排序，再按價(jià)格升序排序
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ù)組處理是非常常見的，尤其是在渲染列表時(shí)。讓我們來看幾個(gè)React中數(shù)組處理的實(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>價(jià)格：{product.price}元</p>
<p className={product.inStock ? 'in-stock' : 'out-of-stock'}>
{product.inStock ? '有貨' : '缺貨'}
</p>
</div>
))
}
</div>
);
}
3. 使用useMemo優(yōu)化數(shù)組計(jì)算
import React, { useMemo } from 'react';
function ExpensiveList({ items, filter }) {
// 使用useMemo緩存計(jì)算結(jié)果，避免每次渲染都重新計(jì)算
const filteredItems = useMemo(() => {
return items.filter(item => {
// 復(fù)雜的過濾邏輯
return item.name.includes(filter) && item.price > 100;
}).sort((a, b) => {
// 復(fù)雜的排序邏輯
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>價(jià)格：{{ 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>
注意事項(xiàng)與最佳實(shí)踐
1. 不要直接修改原數(shù)組
在React和Vue等框架中，直接修改原數(shù)組可能會(huì)導(dǎo)致視圖不更新。應(yīng)該使用數(shù)組的不可變方法，或者創(chuàng)建新數(shù)組。
// 錯(cuò)誤做法：直接修改原數(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)緩存計(jì)算結(jié)果
- 避免在渲染過程中進(jìn)行復(fù)雜的數(shù)組操作
4. 可讀性優(yōu)先
- 優(yōu)先使用現(xiàn)代數(shù)組方法，而不是傳統(tǒng)的for循環(huán)
- 為復(fù)雜的數(shù)組操作添加注釋
- 拆分復(fù)雜的數(shù)組操作，提高可讀性
總結(jié)
數(shù)組處理是前端開發(fā)中的基礎(chǔ)技能，掌握優(yōu)雅的數(shù)組處理方法可以讓你的代碼更加簡潔、高效、易讀。
通過本文的介紹，我們學(xué)習(xí)了：
- 數(shù)組去重：使用Set和filter方法
- 數(shù)組扁平化：使用flat()和reduce方法
- 數(shù)組分組：使用reduce方法
- 數(shù)組查找：使用find()、findIndex()和filter()方法
- 數(shù)組排序：使用sort()方法，包括復(fù)雜排序
- 框架中的數(shù)組處理：React和Vue 3中的數(shù)組處理技巧
- 最佳實(shí)踐：不可變操作、性能優(yōu)化和可讀性
希望這些小技巧對你有所幫助！下次處理數(shù)組時(shí)，不妨試試這些優(yōu)雅的方法吧～?
相關(guān)資源：
到此這篇關(guān)于JavaScript優(yōu)雅處理數(shù)組幾個(gè)實(shí)用方法的文章就介紹到這了,更多相關(guān)JS優(yōu)雅處理數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解
這篇文章主要介紹了Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解,本文講解了列表的抽象數(shù)據(jù)類型定義、如何實(shí)現(xiàn)列表類等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)文字掉落效果的方法,可實(shí)現(xiàn)文字往下掉落最終排序正常顯示的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
js es6系列教程 - 基于new.target屬性與es5改造es6的類語法
下面小編就為大家?guī)硪黄猨s es6系列教程 - 基于new.target屬性與es5改造es6的類語法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
js中Array.sort()方法是用來對數(shù)組項(xiàng)進(jìn)行排序的,默認(rèn)是升序排列sort() 方法可以接受一個(gè) 方法為參數(shù)，這個(gè)方法有兩個(gè)參數(shù)，接下來本例將對sort方法進(jìn)行深入探討，感興趣的朋友可以參考下2013-02-02
JavaScript中的break語句和continue語句案例詳解
本文詳細(xì)介紹了JavaScript中的break和continue語句的用法及其應(yīng)用場景,break用于提前退出循環(huán),而continue用于跳過當(dāng)前迭代,還介紹了標(biāo)簽化的break和continue,以及如何在實(shí)際編程中合理使用這些語句以提高代碼的效率和可讀性,感興趣的朋友一起看看吧2025-03-03
js判斷手機(jī)端(Android手機(jī)還是iPhone手機(jī))
現(xiàn)在使用手機(jī)上網(wǎng)的人越來越多，一些下載網(wǎng)站會(huì)通過判斷不同系統(tǒng)手機(jī)來訪問不同網(wǎng)頁，比如iPhone和Android。下面我們就來介紹一下如何用javascript判斷iPhone或Android手機(jī)訪問2015-07-07
今天小編就為大家分享一篇解決layer.prompt無效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript類型系統(tǒng) Array對象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類型系統(tǒng)之Array對象，整理關(guān)于Array對象的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-01-01
微信小程序獲取微信運(yùn)動(dòng)步數(shù)的實(shí)例代碼
本篇文章主要介紹了微信小程序微信運(yùn)動(dòng)步數(shù)的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
本文介紹了 15 個(gè)非常強(qiáng)大的 JavaScript Web UI 庫，非常適合各種各種規(guī)模的富 Web 應(yīng)用的開發(fā)。2010-05-05