JavaScript數(shù)組之展開運(yùn)算符詳解
更新時(shí)間：2023年12月18日 11:34:28 作者：遠(yuǎn)近高低各不同
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組之展開運(yùn)算符的相關(guān)資料,你可以通過展開操作符(Spread operator)擴(kuò)展一個(gè)數(shù)組對象和字符串,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
展開運(yùn)算符是什么？有什么作用？
展開運(yùn)算符可以將一個(gè)數(shù)組展開
const arr = [1,2,3,4,5]
// 我們使用...展開數(shù)組
console.log(...arr) //1 2 3 4 5
它不會修改原數(shù)組
典型運(yùn)用場景：求數(shù)組最大值、最小值、合并數(shù)組等會讓我們代碼更加簡潔
最大值
const arr = [1,2,3,4,5]
//...arr 等價(jià)于 1,2,3,4,5
console.log(Math.max(...arr)) // 5
最小值
const arr = [1,2,3,4,5]
//...arr 等價(jià)于 1,2,3,4,5
console.log(Math.min(...arr)) // 1
合并
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr = [...arr1,...arr2]
console.log(arr) //[1, 2, 3, 4, 5, 6]附：js 數(shù)組展開對象去重
在JavaScript中，可以使用數(shù)組展開運(yùn)算符（Spread Operator）和Set數(shù)據(jù)結(jié)構(gòu)來實(shí)現(xiàn)數(shù)組展開對象去重。下面是實(shí)現(xiàn)的步驟：
- 定義一個(gè)包含重復(fù)對象的數(shù)組。
- 使用數(shù)組展開運(yùn)算符將數(shù)組展開為一個(gè)新的數(shù)組。
- 使用Set數(shù)據(jù)結(jié)構(gòu)去除數(shù)組中的重復(fù)項(xiàng)。
- 將Set轉(zhuǎn)換回?cái)?shù)組。
以下是代碼示例：
let arr = [
{id: 1, name: '張三'},
{id: 2, name: '李四'},
{id: 1, name: '張三'},
{id: 3, name: '王五'}
];
let uniqueArr = [...new Set([...arr])];
console.log(uniqueArr);
// 輸出: [{id: 1, name: '張三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}]
在上面的代碼中，我們使用了數(shù)組展開運(yùn)算符將原始數(shù)組展開為一個(gè)新的數(shù)組。然后，我們使用Set數(shù)據(jù)結(jié)構(gòu)去除了數(shù)組中的重復(fù)項(xiàng)。最后，我們將Set轉(zhuǎn)換回?cái)?shù)組，并將結(jié)果賦值給uniqueArr變量。最終，uniqueArr將包含去重后的對象數(shù)組。
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組之展開運(yùn)算符的文章就介紹到這了,更多相關(guān)JS數(shù)組展開運(yùn)算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要幫助大家輕松掌握J(rèn)avaScript裝飾者模式，告訴大家什么是js裝飾者模式，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)消息框彈出動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
不用ajax實(shí)現(xiàn)點(diǎn)擊文字即可編輯的方法
本文給大家分享一段代碼不使用ajax實(shí)現(xiàn)點(diǎn)擊文字即可編輯的方法，代碼簡單易懂，需要的朋友參考下吧2007-12-12
前一篇《關(guān)于selector性能比賽》中提到，目測覺得在$("div,p,a")這樣有逗號時(shí)，sizzle耗時(shí)異常（600多個(gè)元素，花了200ms），說是它可能沒有優(yōu)化ie下的排序。2011-01-01
做過微信開發(fā)的都知道，在部分android機(jī)型里微信不支持網(wǎng)頁上傳圖片的，這是由于這些機(jī)型的文件上傳存在內(nèi)存泄漏，會導(dǎo)致微信閃退，所以微信內(nèi)置瀏覽器將文件上傳屏蔽，本篇文章給大家介紹使用微信jssdk如何上傳圖片，需要的朋友可以關(guān)注下2015-08-08
首先說下背景，該code用于一個(gè)多條件查詢界面，原本該查詢條件由一個(gè)下拉列表提供，但是由于下拉列表數(shù)據(jù)量過大，用戶使用不方便，便希望在頁面給出一個(gè)智能提示的功能，但搜索的數(shù)據(jù)來自下拉列表2009-11-11
下面小編就為大家?guī)硪黄猨s判斷數(shù)組的最佳方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
原生js實(shí)現(xiàn)類似fullpage的單頁/全屏滾動
這篇文章主要介紹了利用原生js實(shí)現(xiàn)類似fullpage的全屏滾動的實(shí)現(xiàn)方法，文中給出了完整的實(shí)例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考價(jià)值，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-01-01
多個(gè)表單中如何獲得這個(gè)文件上傳的網(wǎng)址實(shí)現(xiàn)js代碼
假設(shè)一個(gè)網(wǎng)頁里有多個(gè)表單，其中一個(gè)表單里有文件上傳，問題是如何獲得這個(gè)文件上傳的網(wǎng)址呢，接下來為大家介紹下實(shí)現(xiàn)的js代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
在使用three.js開發(fā)的過程中,我們常常使用canvas來作為紋理貼圖,下面這篇文章主要介紹了如何基于Three.js在三維場景中使用Canvas更新紋理,通過實(shí)現(xiàn)思路和代碼樣例,幫助讀者掌握這一技能,需要的朋友可以參考下2024-12-12