underscore综合运用 -

bijian1013

浏览: 3237210 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

underscore综合运用

博客分类：

underscore

JavaScript underscore

一.将value为对象数组的map转换成一维对象数组

underscoreTest.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Underscore</title>
	<script src="lib/underscore/underscore1.6.0.js"></script>
</head>

<body>
</body>
</html>
<script type="text/javascript">
	var map = {'01':[{id:'001',name:'test001'},{id:'003',name:'test003'},{id:'002',name:'test002'}],'02':[{id:'004',name:'test004'},{id:'005',name:'test005'},{id:'008',name:'test008'}]};
    console.log(_.flatten(_.toArray(map)));
</script>

运行结果：

二.将成员为key-value的数组转换成一维对象数组，其中value又是一个对象数组

underscoreTest02.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Underscore</title>
	<script src="lib/underscore/underscore1.6.0.js"></script>
</head>

<body>
</body>
</html>
<script type="text/javascript">
	var arr1 = [{name:'car1',age:'29'},{name:'bi',age:'28'}];
	var arr2 = [{name:'car01',age:'39'},{name:'bi01',age:'38'}];
	var arr3 = [{name:'car02',age:'49'},{name:'bi02',age:'48'}];
	var arrMap = [];
	arrMap['arr1'] = arr1;
	arrMap['arr2'] = arr2;
	arrMap['arr3'] = arr3;
	console.log(arrMap);
    console.log(_.flatten(_.values(arrMap)));
</script>

运行结果：

三.filter及each的使用

underscoreTest03.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Underscore</title>
	<script src="lib/underscore/underscore1.6.0.js"></script>
</head>

<body>
</body>
</html>
<script type="text/javascript">
	var jsonArr = [{'isChecked': true,'value':'01'},{'isChecked': false, 'value':'03'},{'isChecked': true, 'value':'02'}];
	var afterFilter = _.filter(jsonArr, function(a) {
		return a.isChecked;
	});
	_.each(afterFilter, function(item) {
		document.write(item.isChecked + ' ' + item.value + '<br/>');
	});
</script>

运行结果：

四.each与flatten的综合使用

underscoreTest04.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Underscore</title>
	<script src="underscore-1.5.1.min.js"></script>
</head>

<body>
</body>
</html>
<script type="text/javascript">
	var jsonArr = [{main:{num:'1111'}},{relation:[{num:'2222'},{num:'333'}]}];
	var res = [];
	_.each(jsonArr, function(obj) {
		var t = _.values(obj);
		res = res.concat(t);
	});
	res = _.flatten(res);
	console.log(res);
</script>

运行结果：

附：在js代码中加debugger关键字，调试模式下就会在debugger处暂停

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Underscore</title>
	<script src="lib/underscore/underscore1.6.0.js"></script>
</head>

<body>
</body>
</html>
<script type="text/javascript">
	debugger;
	var jsonArr = [{'isChecked': true,'value':'01'},{'isChecked': false, 'value':'03'},{'isChecked': true, 'value':'02'}];
	var afterFilter = _.filter(jsonArr, function(a) {
		return a.isChecked;
	});
	debugger;
	_.each(afterFilter, function(item) {
		document.write(item.isChecked + ' ' + item.value + '<br/>');
	});
</script>

运行效果：打开首先在第一个debugger处停留，F8后就会在第二个debugger处停留。