前端map循環方法

1. 前端問題 map area

api有的 不知道你是什麼開發。下邊是高德地圖js API我寫的例子
var markers = app.json;// 取ajax介面數據
// 添加一些點到地圖上
markers.forEach(function(marker) {
var mMrak = new AMap.Marker({
map: map,
icon: '../img/home/dyj.png',
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36)
});
mMrak.on('click', function(e) {
// 點擊彈出一個div，內容可以自己設計

// 控制彈出層的顯示('myPop是一個矩形框div')
document.getElementById("myPop").style.display = 'block';
});

});

2. angularjs中後端傳給前端map集合怎麼遍歷出每個值

angularjs是一個很強大的JavaScript框架,強大到我看了半個小時寫出來一個基本的angularjs項目(本人是標準的後台開發人員).

angularjs獲取map的value值很簡單{{map.key}},那麼在未知key的時候怎麼獲取key了

<td ng-repeat="(x,y) in map">{{y}}</td>
<td ng-repeat="(x,y) in map">{{x}}</td>

當遇到value可能為null的時候

<td ng-repeat="(x,y) in map">{{y || " "}}</td>

3. struts2 前端用迭代器遍歷 map<string,object>

struts2不能實現將<s:iterator>遍歷得到的值再來作為<s:iterator>的遍歷對象

不過你可以將meetingList和meetingList作為2個對象傳到頁面

4. List<Map<String,Object>>遍歷比對

你的意思似乎是，
主要是要把前端的數據與資料庫里的數據對比，把不同的數據找出來處理對嗎？
假如涉及到與資料庫里的數據對比。要變快的話，就要減少對資料庫的訪問，那就一次性大批量的把資料庫中的數據讀取，放入集合中，我們就稱為資料庫集合把。
在把資料庫集和與要對比數據對比。

5. 前端開發的基本方法

CSS部分

盒子邊傾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止點擊事件/滑鼠事件「穿透」

div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }

用來控制元素在移動設備上使用滾動回彈效果

.main{
-webkit-overflow-scrolling: touch;
}

可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況

文字漸變效果

.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

}

實現圓弧

clip-path: ellipse(80%60% at50%40%);

JS部分

JavaScript中檢測數組的方法

(1)、typeof操作符

這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符

這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true

(5)、Array.isArray()

常用的字元串操作

• 字元串轉化toString()

• 字元串分隔split()

• 字元串替換replace()

• 獲取長度length

• 查詢子字元串 indexOf

• 返回指定位置的字元串或字元串編碼 charAt charCodeAt

• 字元串匹配 match

• 字元串拼接concat

• 字元串的切割或提取slice() substring() substr()

• 字元串大小寫轉化 toLowerCase toUpperCase

• 字元串去空格 trim() 用來刪除字元串前後的空格

其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重

• const str = '11122223333'const uniqueStr = [...new Set(str)].join('')



常用的數組操作

1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：

• arr.rece(callback,[initialValue])



• 跳過第一個索引。如果提供initialValue，從索引0開始。



callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，

數組去重：

• const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]



常用對象方法

1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性

• var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})



5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf

• function a(){}


• var b = new a();console.log(a.prototype.isPrototypeOf(b));//true



安卓監聽可視區域變化，讓輸入框移動至可視區域

• if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();


• }, 0);


• }


• });


• };



vue中平滑滾動到某個位置

this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加參數

• /**


• * 向URL追加參數


• * @function stringifyUrlArgs


• * @param {string} url - URL路徑


• * @param {object} params - 參數對象


• * @return {string}


• const stringifyUrlArgs = (url, params) => {


• url += (/?/).test(url) ? '&' : '?'


• url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url


• }



解析URL參數

• /**


• * 解析URL參數


• * @function parseUrlArgs


• * @param {string} url - 字元串


• * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {


• a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a


• }, {}) return args


• }



好用的JavaSrcipt庫與模塊（包）

日期時間處理庫

1、monent.js
2、day.js
day相對於monent要輕量許多

高精度數學運算

number-precision

• NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio



實用工具庫

Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等

6. angular前端.map和.filter的區別

我們說的map()和filter()其實是Array.prototype.map()創建一個新的數組，其結果是該數組中每個元素都調用一個提供的函數後返回的結果。
語法：var newArray = arr.map(function callback(currentValue， index， array){undefined//對每個元素的處理})
具體操作可去相關網站進行了解。

7. 如何通過獲取map中的key來獲得與key對應的value值，進行運算

獲取map的key和value的方法分為以下兩種形式：

1、map.keySet()：先獲取map的key，然後根據key獲取對應的value；

2、map.entrySet()：同時查詢map的key和value，只需要查詢一次；

注意：當map的value值相等時，根據key值進行排序

很多人都推薦使用entrySet，認為其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，針對每個key，都要去Map中額外查找一次value，從而降低了總體效率。

兩種方法對比測試如下：

HashMap測試數據:

(7)前端map循環方法擴展閱讀：

map.keySet()和map.EntrySet()的比較：

一、如果使用HashMap

1、同時遍歷key和value時，keySet與entrySet方法的性能差異取決於key的具體情況，如復雜度（復雜對象）、離散度、沖突率等。換言之，取決於HashMap查找value的開銷。

entrySet一次性取出所有key和value的操作是有性能開銷的，當這個損失小於HashMap查找value的開銷時，entrySet的性能優勢就會體現出來。

在比測試中，當key是最簡單的數值字元串時，keySet可能反而會更高效，耗時比entrySet少10%。總體來說還是推薦使用entrySet。

因為當key很簡單時，其性能或許會略低於keySet，但卻是可控的；而隨著key的復雜化，entrySet的優勢將會明顯體現出來。當然，我們可以根據實際情況進行選擇

2、只遍歷key時，keySet方法更為合適，因為entrySet將無用的value也給取出來了，浪費了性能和空間。在上述測試結果中，keySet比entrySet方法耗時少23%。

3、只遍歷value時，使用vlaues方法是最佳選擇，entrySet會略好於keySet方法。

二、如果使用TreeMap

1、同時遍歷key和value時，與HashMap不同，entrySet的性能遠遠高於keySet。這是由TreeMap的查詢效率決定的，也就是說，TreeMap查找value的開銷較大，明顯高於entrySet一次性取出所有key和value的開銷。因此，遍歷TreeMap時強烈推薦使用entrySet方法。

2、只遍歷key時，keySet方法更為合適，因為entrySet將無用的value也給取出來了，浪費了性能和空間。在上述測試結果中，keySet比entrySet方法耗時少24%。

3、只遍歷value時，使用vlaues方法是最佳選擇，entrySet也明顯優於keySet方法。

網路——Map

8. js怎麼遍歷我後台傳過來的Map

首先，你說的是後台傳來，並且是map，並且用js方式。這有兩個情況：

1. map 的值是實體類，無法遍歷每條實體類的內部（js拿到鍵值對的值，是內存引用地址）

2. map 的值不是實體類，可以通過

   var map = JSON.parse('${變數名}')；//轉為json，注意要有引號

   for ( var i in map) { // i是索引
   var obj = map[i];
   }

   =============

   針對第一種情況，2個方法：

   1. 後台先轉為json字元串，再傳給前端；

   2. 通過類似java的<c:foreach這樣的後台語言操作。
   

9. 數組的方法有哪些

數組中常用的方法有：
1、給數組末尾添加新內容的push方法；
2、刪除數組最後一項的pop方法；
3、刪除數組第一項的shift方法；
4、向數組首位添加新內容unshift方法；
5、按照條件查找出其中的部分內容。

數組（Array）是有序的元素序列。若將有限個類型相同的變數的集合命名，那麼這個名稱為數組名。組成數組的各個變數稱為數組的分量，也稱為數組的元素，有時也稱為下標變數。用於區分數組的各個元素的數字編號稱為下標。數組是在程序設計中，為了處理方便， 把具有相同類型的若干元素按有序的形式組織起來的一種形式。這些有序排列的同類數據元素的集合稱為數組。數組是用於儲存多個相同類型數據的集合。

在C語言中， 數組[2]屬於構造數據類型。一個數組可以分解為多個數組元素，這些數組元素可以是基本數據類型或是構造類型。因此按數組元素的類型不同，數組又可分為數值數組、字元數組、指針數組、結構數組等各種類別。
關於可變長數組（VLA）的問題：原來的C89標准中是不允許可變長數組出現的，但是在C99標准中，加入了對VLA的支持，但是支持的編譯器不多，而且由於棧溢出的安全問題，沒有太多的人敢用這個可變長數組，所以在C11標准中又把它規定為可選實現的功能了。

如果有過用其它語言編程的經歷，那麼想必會熟悉數組的概念。由於有了數組，可以用相同名字引用一系列變數，並用數字（索引）來識別它們。在許多場合，使用數組可以縮短和簡化程序，因為可以利用索引值設計一個循環，高效處理多種情況。數組有上界和下界，數組的元素在上下界內是連續的。因為 Visual Basic對每一個索引值都分配空間，所以不要不切實際聲明一個太大的數組。

此處數組是程序中聲明的變數數組。它們不同於控制項數組，控制項數組是在設計時通過設置控制項的 Index 屬性規定的。變數數組總是連續的；與控制項數組不同的是，不能從一個數組的中部載入或卸載數組元素。

10. 前端面試題，map,forEach,for循環，三個都能遍歷，啥區別

for遍歷對象自身的和繼承的可枚舉的屬性，也就是說會包括那些原型鏈上的屬性。如果想要僅迭代自身的屬性，那麼在使用
for...in
forEach
只能遍歷數組，不能中斷，沒有返回值(或認為返回值是
undefined
)
map
只能遍歷數組，不能中斷，返回值是修改後的數組