map中键为对象,用js将map中的键取出时,如何取出对象,以及它的属性

map中键为对象,用js将map中的键取出时,如何取出对象,以及它的属性,第1张

重写对象的toString方法,按照json数据的规则

然后前台string转json

控制台打印

这个方法不需要引入其他包

如果map的key属性过多,或者key是集合,可以在后台先转json,然后前台一样String转json,再遍历

需要引入包

前台

<script type="text/javascript">

/对比:

1、map速度比foreach快

2、map会返回一个新数组,不对原数组产生影响,foreach不会产生新数组,foreach返回undefined

3、map因为返回数组所以可以链式 *** 作,foreach不能

4, map里可以用return ,而foreach里用return不起作用,foreach不能用break,会直接报错/

/方法一:/

var arr1 = [1, 2, 3, 4, 5, 6];

for(var i = 0, len = arr1length; i < len; i++) { //优化性能处理

consolelog(arr1[i], 'for遍历出来的数据'); //每个item 1,2,3,4,5,6

}

/方法二:/

/forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身/

var arr2 = [{

name: 'bob',

age: 20

},

{

name: 'tom',

age: 18

},

{

name: 'sos',

age: 19

}

]

arr2forEach((val, i) => { //没有返回值的,对原来数组也没有影响

consolelog(val, '遍历出来的每个obj')

});

/方法三:/

var fruits = [1, 2, 3, 4, 5, 6, 7, 8];

let arr = fruitsmap((item, index) => {

consolelog(item, 'top')

consolelog(index, 'top')

return item 8

})

consolelog(arr, 'newarr') //[8, 16, 24, 32, 40, 48, 56, 64] "newarr"

var a = fruitsindexOf("Apple", 4);

consolelog(a)

//for 和 forEach都是普通循环,map 带返回值并且返回一个新数组;

/

当前元素的值,当期元素的索引值,当期元素属于的数组对象;

语法:arraymap(function(currentValue,index,arr), thisValue)

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

/

/方法四:/

/兼容写法:

不管是forEach还是map在IE6 - 8 下都不兼容( 不兼容的情况下在Arrayprototype上没有这两个方法), 那么需要我们自己封装一个都兼容的方法:/

/

forEach遍历数组

@param callback [function] 回调函数;

@param context [object] 上下文;

/

ArrayprototypemyForEach = function myForEach(callback, context) {

context = context || window;

if('forEach' in Arrayprototye) {

thisforEach(callback, context);

return;

}

//IE6-8下自己编写回调函数执行的逻辑

for(var i = 0, len = thislength; i < len; i++) {

callback && callbackcall(context, this[i], i, this);

}

}

/

map遍历数组

@param callback [function] 回调函数;

@param context [object] 上下文;

/

ArrayprototypemyMap = function myMap(callback, context) {

context = context || window;

if('map' in Arrayprototye) {

return thismap(callback, context);

}

//IE6-8下自己编写回调函数执行的逻辑var newAry = [];

for(var i = 0, len = thislength; i < len; i++) {

if(typeof callback === 'function') {

var val = callbackcall(context, this[i], i, this);

newAry[newArylength] = val;

}

}

return newAry;

}

</script>

步骤如下。

1、需要在map()函数中定义一个回调函数。

2、然后将所有的数组元素放到map()函数中。

3、执行后就可以得到一个新的数组,里面的元素都是字符串格式的了。

数组(array)的map方法的第一个参数是遍历的当前值,第二个参数则是索引值,而你这段代码并不需要用到当前值,所以随便用了个_符号代替,在js中,_是合法的名字(可用作变量名、参数名、对象名等),你也可以用其他名字代替,比如 a、b、c、d……等等,这里用_应该只是编程者的个人习惯,并没有特殊含义。

Array(5)是建立一个5元素的空数组

fill(null)是用null值填充空数组

map((_,i)=>i+1)是遍历数组,把数组元素的索引值+1后作为数组的新元素值返回

比如原数组是 [null,null,null,null,null]

那么新数组就是 [1,2,3,4,5]

是深拷贝,返回的是一个全新的数组,与原来的数组并存。

比如:

var a = [1, 2, 3];

var b = amap(function(currentValue, index, arr) {

    return currentValue  2;

});

consolelog(a);

consolelog(b);

分别输出[1, 2, 3]和[2, 4, 6]。

JS中绝大多数函数都是属于深拷贝的,一般不会对原对象执行 *** 作,而是将处理结果通过返回值返回的。

以上就是关于map中键为对象,用js将map中的键取出时,如何取出对象,以及它的属性全部的内容,包括:map中键为对象,用js将map中的键取出时,如何取出对象,以及它的属性、js数组遍历的常用的几种方法以及差异和性能优化、js遍历数组如何把取出来的值进行字符串等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9763207.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存