Javascript 深入了解map

`map()` 是 JavaScript 數組提供的一個高階函數,它用于對數組中的每個元素執行指定的函數,并返回一個新的數組,新數組中的元素是原數組中的每個元素經過函數處理后的結果。

`map()` 函數的語法如下:

```javascript
array.map(callback(currentValue, index, array), thisArg);
```

其中:
- `callback` 是一個函數,它會被應用到數組中的每個元素上,并且會接收三個參數:
? - `currentValue`:當前正在被處理的元素。
? - `index`(可選):當前元素的索引。
? - `array`(可選):調用 `map()` 方法的數組。
- `thisArg`(可選):傳遞給 `callback` 函數的 `this` 值。

`map()` 函數會返回一個新數組,其中每個元素都是由 `callback` 函數返回的結果。原始數組不會受到影響。

下面是一些關于 `map()` 函數的例子:

1. **對數組中的每個元素進行平方操作:**

```javascript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
```

2. **將數組中的字符串元素轉換為大寫:**

```javascript
const fruits = ["apple", "banana", "orange"];
const capitalizedFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(capitalizedFruits); // ["APPLE", "BANANA", "ORANGE"]
```

3. **將對象數組中的特定屬性提取出來:**

```javascript
const people = [
? { name: "Alice", age: 30 },
? { name: "Bob", age: 25 },
? { name: "Charlie", age: 40 }
];

const names = people.map(person => person.name);
console.log(names); // ["Alice", "Bob", "Charlie"]
```

4. **計算數組中每個數字的平均值:**

```javascript
const scores = [85, 90, 78, 95, 88];
const average = scores.reduce((total, score) => total + score, 0) / scores.length;
console.log(average); // 87.2
```

`map()` 函數非常有用,它可以讓你在不修改原始數組的情況下對數組的每個元素進行操作,并生成一個新的數組。它在函數式編程中廣泛用于數據轉換和操作。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/35759.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/35759.shtml
英文地址,請注明出處:http://en.pswp.cn/news/35759.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Multi-object navigation in real environments using hybrid policies 論文閱讀

論文信息 題目:Multi-object navigation in real environments using hybrid policies 作者:Assem Sadek, Guillaume Bono 來源:CVPR 時間:2023 Abstract 機器人技術中的導航問題通常是通過 SLAM 和規劃的結合來解決的。 最近…

優化堆排序(Java 實例代碼)

目錄 優化堆排序 Java 實例代碼 src/runoob/heap/HeapSort.java 文件代碼: 優化堆排序 上一節的堆排序,我們開辟了額外的空間進行構造堆和對堆進行排序。這一小節,我們進行優化,使用原地堆排序。 對于一個最大堆,首…

【設計模式】-策略模式:優雅處理條件邏輯

Java 策略模式之優雅處理條件邏輯 前言 在軟件開發中,我們經常會遇到根據不同的條件執行不同邏輯的情況。這時,策略模式是一種常用的設計模式,能夠使代碼結構清晰、易于擴展和維護。 本文將詳細介紹策略模式的概念及其在Java中的應用&#x…

flume系列之:監控Systemctl托管的flume agent組

flume系列之:監控Systemctl托管的flume agent組 一、需求背景二、相關技術博客三、遠程登陸flume機器四、發送飛書告警五、監控flume agent組狀態一、需求背景 flume接kafka集群,一個kafka集群對應一個flume agent組,會把一組flume agent用systemctl托管每接一個kafka集群會…

pytest 編寫規范

一、pytest 編寫規范 1、介紹 pytest是一個非常成熟的全功能的Python測試框架,主要特點有以下幾點: 1、簡單靈活,容易上手,文檔豐富;2、支持參數化,可以細粒度地控制要測試的測試用例;3、能夠…

差分升級在物聯網水表上的實現與應用(學習)

摘要 當越來越多的物聯網水表加入抄表系統后,實現了水表數據的信息化,并且當水表終端需要技術更新時,通過網絡方式來升級產品可以高效修復設備面臨的問題,減少用戶損失,降低維護成本,但同時也對有限的網絡…

遍歷集合List的五種方法以及如何在遍歷集合過程中安全移除元素

一、遍歷集合List的五種方法 測試數據 List<String> list new ArrayList<>(); list.add("A");list.add("B");list.add("C");1. 普通for循環 普通for循環&#xff0c;通過索引遍歷 for (int i 0; i < list.size(); i) {Syst…

form中表單切換,導致 relus 中的事件無法觸發,原因:頁面切換不要一直切換DOM,會導致問題,需要都顯示出來

修改前&#xff0c;因為重復渲染DOM導致綁定rules失效 修改前代碼使用 computed 計算出渲染的DOM&#xff0c;影響rules事件<el-formref"form"inline:model"billDetailCopy":rules"rules"size"small"label-position"right&quo…

selenium官網文檔閱讀總結(day 4)

1.selenium的工作原理 selenium的工作原理涉及以下主要組件和步驟&#xff1a; &#xff08;1&#xff09;WebDriver:這是selenium的核心組件&#xff0c;它是一個用于控制瀏覽器的API。WebDriver提供了許多方法&#xff0c;用于在瀏覽器中模擬用戶操作。不同的瀏覽器需要相應…

掌握Python的X篇_39_繼承

本篇將會是本專欄關于python基本語法的最后一個知識點&#xff0c;后期將會談python&#xff0c;就會介紹使用python專題&#xff0c;例如&#xff1a;做爬蟲、有架構的網站。 文章目錄 1. 為什么需要繼承2. 繼承的基本概念3. python中繼承的基礎語法4. 總結 1. 為什么需要繼承…

NLP語言模型概覽

語言模型結構分類 Encoder-Decoder&#xff08;Transformer&#xff09;: Encoder 部分是 Masked Multi-Head Self-Attention&#xff0c;Decoder 部分是 Casual Multi-Head Cross-Attention 和 Casual Multi-Head Self-Attention 兼具。比如T5&#xff0c;BART&#xff0c;MA…

騰訊云輕量服務器和云服務器的CPU處理器有差別嗎?

騰訊云輕量應用服務器和CVM云服務器的CPU處理器性能有差別嗎&#xff1f;創建輕量應用服務器時不支持指定底層物理服務器的CPU型號&#xff0c;騰訊云將隨機分配滿足套餐規格的物理CPU型號&#xff0c;通常優先選擇較新代次的CPU型號。而云服務器CVM的CPU處理器型號、主頻都是有…

JAVA設計模式----原型設計模式

文章目錄 一、簡介二、實現方式三、原型模式的注意事項淺拷貝與深拷貝淺拷貝深拷貝一、簡介 定義:用原型實例指定創建對象的種類,并通過拷貝這些原型創建新的對象。 類型:創建類模式 類圖: 原型模式主要用于對象的復制,它的核心是就是類圖中的原型類Prototype。Protot…

下載程序到西門子PLC

更多關于西門子S7-200PLC內容請查看&#xff1a;西門子200系列PLC學習課程大綱 下載西門子200PLC程序分以下兩步&#xff1a; 一.編譯程序 1. 如下圖1-1所示&#xff0c;使用PPI電纜將PLC和電腦連接上&#xff0c;注意筆記本使用USB轉PPI電纜&#xff0c;連接保證給PLC單獨供…

Linux(進程間通信詳解)

進程間通信&#xff0c;顧名思義&#xff0c;就是進程與進程之間互通信交流&#xff0c;OS保證了各進程之間相互獨立&#xff0c;但這不意味著進程與進程之間就互相隔離開&#xff0c;在不少的情況下&#xff0c;進程之間需要相互配合共同完成某項6任務&#xff0c;這就要求各進…

怎樣學會單片機

0、學單片機首先要明白&#xff0c;一個單片機啥也干不了&#xff0c;學單片機的目的是學習怎么用單片機驅動外部設備&#xff0c;比如數碼管&#xff0c;電機&#xff0c;液晶屏等&#xff0c;這個需要外圍電路的配合&#xff0c;所以學習單片機在這個層面上可以等同為學習單片…

JVM:運行時數據區域(白話文)

最近有時間在看一本<深入了解Java虛擬機>的書籍&#xff0c;這本書是一個中國人&#xff0c;名叫周志明的人寫的。相比于其他翻譯過來的技術書籍&#xff0c;這本書還是挺通俗易懂的。先前有和彬哥在聊&#xff0c;他說如果是自己一個人看的話會很枯燥&#xff0c;很難堅…

雙端列表 —— Deque 接口概述,使用ArrayDeque實現隊列和雙端隊列數據結構

Deque接口簡介 Deque譯為雙端隊列&#xff0c;在雙向都能作為隊列來使用&#xff0c;同時可用作棧。Deque接口的方法是對稱成比例的。 Deque接口繼承Queue接口&#xff0c;因此具有Queue&#xff0c;Collection&#xff0c;Iterable的方法屬性。 雙端隊列的工作原理 在常規隊…

前端架構師的能力要求:打造可靠、靈活和可擴展的Web應用

隨著互聯網技術迅猛發展&#xff0c;現代Web應用程序變得越來越復雜且功能強大。作為一名前端架構師&#xff0c;在這個快節奏且競爭激烈的環境中&#xff0c;你需要具備廣泛而深入地技術知識&#xff0c;并且有能力設計、開發和維護高度可靠、靈活和可擴展性強的Web應用。 深入…

前端發送請求和后端springboot接受參數

0.xhr、 ajax、axios、promise和async/await 和http基本方法 xhr、 ajax、axios、promise和async/await都是異步編程和網絡請求相關的概念和技術&#xff01; xhr&#xff1a;XMLHttpRequest是瀏覽器提供的js對象&#xff08;API&#xff09;&#xff0c;用于請求服務器資源。…