前端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
只能遍历数组，不能中断，返回值是修改后的数组