-
2020-07-03 09:06:07
vue初学者在使用v-for属性时可能不能区分数组遍历和对象的遍历,这里做一个记录:
v-for指令是用来遍历 数组、对象以及整数的,下面依次讲解
- 遍历数组
v-for最常用的可能就是用来遍历数组,接受两个参数(item, index),item为遍历出的每组数据,index为每组数据的索引,可做唯一标识
<div id="demo" <el-span v-for="(item, index) in array" :key="index"> {{index}}: {{item}} </el-span> </div> new Vue({ el: '#demo', data: { array: [ 'red', 'green', 'pink' ] } })
2.遍历对象
v-for遍历对象可接受三个参数(value, key, index),value为每个对象的value值,key为key值,index为索引
<div id="demo" <el-span v-for="(value, key, index) in objectDemo" :key="index"> {{index}}: {{item}}: {{value}} </el-span> </div> new Vue({ el: '#demo', data: { objectDemo: { color: '#ffffff', size: '20px', background: '#000000' } } })
3.遍历整数
如下,遍历整数会一次打印出1,2,3,4,5
<div id="demo" <el-span v-for="num in nums" :key="num"> {{num}} </el-span> </div> new Vue({ el: '#demo', data: { nums: 5 } })
小伙伴如果有疑问可以第一时间评论或留言,看到后也会及时回复的,有帮助的麻烦动动手指点个赞哟!
更多相关内容 -
PHP基于面向对象实现的留言本功能实例
2020-10-18 14:59:30主要介绍了PHP基于面向对象实现的留言本功能,结合实例形式分析了php基于面向对象的留言本相关写入、显示查看、日志记录等相关方法封装与使用技巧,需要的朋友可以参考下 -
ASP.NET 利用Session对象制作留言或意见反馈程序
2021-03-17 16:28:15内容索引:.NET源码,其它类别,Session,留言 利用Session对象制作留言或意见反馈程序,没有数据库,只是练习Session对象的使用,将表单的数据通过Session临时保存,如果结合数据库,就轻易实现了留言本程序。 -
php留言本系统,简单的采用了面向对象编程
2011-03-02 16:36:01php留言本系统,简单的采用了面向对象编程 -
详细了解JS Map,它和传统对象有什么区别?
2020-09-03 11:49:38一直以来,JavaScript使用数组和对象来定义和存放结构化数据, 在这篇文章中,我们将一起深挖另一种对象Map的一切,我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。 介绍 JavaScript的...转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://www.codeproject.com/Articles/5278387/Understanding-Maps-in-JavaScript一直以来,JavaScript使用数组和对象来定义和存放结构化数据, 在这篇文章中,我们将一起深挖另一种对象Map的一切,我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
介绍
JavaScript的Map对象数据结构类似于例如C#,Java或C ++中的字典,本质是一组包含键值对的集合,如果你了解其他语言的键/值对数据结构的概念的话,那么对您立即掌握Map基本概念是很有帮助的。不过,即便你之前没有接触过任何一种语言,那也不必担心,我们会从基础知识开始讲起的。
在将Map引入JavaScript语言之前,Object是创建键/值对数据结构的主要方式。而Map与常规对象有什么区别?
主要有两点不同:
1. key的类型无限制
Object无法使用非字符串值作为键名,但Map的键名可以是任意类型,让我们来看一个例子。
1
2
3
4
var
firstInstance = { id: 1 };
var
secondInstance = { id: 2 };
console.log(firstInstance[
"id"
]);
console.log(secondInstance [
"id"
]);
输出结果:1 2
下面我们将通过重新造轮子的形式让你了解Map和上述例子有什么区别
1
2
3
4
5
6
7
var
firstInstance = { id: 1 };
var
secondInstance = { id: 2 };
var
sqlServer = {};
sqlServer[firstInstance] =
"SQLServer1"
;
sqlServer[secondInstance] =
"SQLServer2"
;
firstInstance和secondInstance这两个对象都产生了“[Object Object]”。因此,将这两个对象传入sqlServer中作为其键名,就能使其达到类似Map的效果,以下是输出结果。
在映射不同数据类型时,这个特性将提供极大的灵活性。
2. 可直接遍历
常规对象里,为了遍历keys、values和entries,你必须将它们转换为数组,如使用Object.keys()、Object.values()和Object.entries(),或使用for ... in,另外for ... in循环还有一些限制:它仅仅遍历可枚举属性、非Symbol属性,并且遍历的顺序是任意的。
但Map可直接遍历,且因为它是键值对集合,所以可直接使用for…of或forEach来遍历。这点不同的优点是为你的程序带来更高的执行效率。
什么是JavaScript Map?
从根上讲,Map是键/值对的集合。这些键和值可以是任何数据类型。在ES6语法下, 创建JavaScript map对像非常简单,让我们看看例子
1
2
let
myMap =
new
Map();
console.log(myMap);
输出结果:
如您所见,我们只是创建了一个空的Map对象而已,只需使用new Map(),就可以在JavaScript中直接创建新的Map。
如何初始化Map?
如何创建和初始化一个包含数据的map?
有多种方法可以对其进行初始化。让我们一个接一个地看一看。
使用Array
1
2
3
4
5
6
7
8
9
let
topProgrammingLanguages =
new
Map([
[1,
'JavaScript'
],
[2,
'Python'
],
[3,
'Java'
],
[4,
'C#'
],
[5,
'C'
]
]);
console.log(topProgrammingLanguages);
输出结果
使用set() 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let
myFavoriteBooks =
new
Map();
myFavoriteBooks.set(1,
'Rich Dad Poor Dad'
);
myFavoriteBooks.set(2,
'The Magic of Thinking Big'
);
myFavoriteBooks.set(3,
'Think and Grow Rich'
);
myFavoriteBooks.set(4,
'How to Win Friends & Influence People'
);
myFavoriteBooks.set(5,
'Shoe Dog'
);
console.log(myFavoriteBooks);
输出结果
使用get、has、includes、clear和delete方法
使用 get() 方法
该方法返回key对应的value,如果不存在,则返回undefined。
1
2
3
4
5
6
7
8
9
10
let
sqlServerInstances =
new
Map();
sqlServerInstances.set(
'SQL_DEV_Instance'
,
'MS_SQLSERVER_1'
);
sqlServerInstances.set(
'SQL_UAT_Instance'
,
'MS_SQLSERVER_2'
);
sqlServerInstances.set(
'SQL_PROD_Instance'
,
'MS_SQLSERVER_3'
);
console.log(sqlServerInstances.get(
"SQL_DEV_Instance"
));
//output: MS_SQLSERVER_1
console.log(sqlServerInstances.get(
'SQL_UAT_Instance'
));
//output: MS_SQLSERVER_2
console.log(sqlServerInstances.get(
"SQL_PROD_Instance"
));
//output: MS_SQLSERVER_3
console.log(sqlServerInstances.get(
"SQL "
));
//output: undefined
使用 has() 方法
该方法用于检查Map是否有指定key对应的value。
1
2
3
4
5
6
7
8
let
sqlServerInstances =
new
Map();
sqlServerInstances.set(
'SQL_DEV_Instance'
,
'MS_SQLSERVER_1'
);
sqlServerInstances.set(
'SQL_UAT_Instance'
,
'MS_SQLSERVER_2'
);
sqlServerInstances.set(
'SQL_PROD_Instance'
,
'MS_SQLSERVER_3'
);
console.log(sqlServerInstances.has(
"SQL_PROD_Instance"
))
//output: true
console.log(sqlServerInstances.has(
"SQL_PROD2_Instance"
))
//output: false
使用 clear() 方法
该方法用于清空指定map对象中的所有内容。
1
2
3
4
5
6
7
8
9
10
let
products =
new
Map();
products.set(
"PRODUCT_001"
, { name:
"Product 1"
});
products.set(
"PRODUCT_002"
, { name:
"Product 2"
});
products.set(
"PRODUCT_003"
, { name:
"Product 3"
});
//let's get the size of the Map before invoking clear()
console.log(products.size);
//output: 3
products.clear();
//clears the Map-products
console.log(products.size);
//output: 0
使用 delete() 方法
该方法用于删除map中指定key对应的一组key-value元素
1
2
3
4
5
6
7
8
9
10
11
let
sqlServerInstances =
new
Map();
sqlServerInstances.set(
'SQL_DEV_Instance'
,
'MS_SQLSERVER_1'
);
sqlServerInstances.set(
'SQL_UAT_Instance'
,
'MS_SQLSERVER_2'
);
sqlServerInstances.set(
'SQL_PROD_Instance'
,
'MS_SQLSERVER_3'
);
//let's delete the UAT instance
console.log(sqlServerInstances.get('SQL_UAT_Instance
')); //output: MS_SQLSERVER_2
console.log(sqlServerInstances.delete('
SQL_UAT_Instance
')); //deletes the key/value pair
console.log(sqlServerInstances.has('
SQL_UAT_Instance
')); //output: false
console.log(sqlServerInstances.get('
SQL_UAT_Instance'));
//output: undefined
Map遍历的方式
在本节中,我们将了解如何遍历Map。但是,在此之前,我们需要了解以下方法:keys、values和entries,这些方法将在我们开始使用for-of循环遍历map对象时很有帮助。
首先,我们将创建一个map对象作为数据源
1
2
3
4
5
6
let
myFavoriteBooks =
new
Map();
myFavoriteBooks.set(1,
'Rich Dad Poor Dad'
);
myFavoriteBooks.set(2,
'The Magic of Thinking Big'
);
myFavoriteBooks.set(3,
'Think and Grow Rich'
);
myFavoriteBooks.set(4,
'How to Win Friends & Influence People'
);
myFavoriteBooks.set(5,
'Shoe Dog'
);
使用 keys() 方法
该方法返回Map对象中每个元素的key。尤其是你在只需要遍历Map集合的键时,更是如此。
1
2
const myMap1 =
new
Map([[1,
'red'
], [2,
'blue'
]]);
console.log(myMap1.keys());
//output: { 1, 2 }
遍历key
1
2
3
4
5
6
7
8
9
10
11
12
/**
* Output
* 1
* 2
* 3
* 4
* 5
*/
for
(const key of myFavoriteBooks.keys()) {
console.log(key);
}
//end of iteration over the keys
使用 values() 方法
和keys方法对应,values方法返回的就是Map对象中的value集合。
1
2
const myMap2 =
new
Map([[
'Electronic Gadget'
,
'Smart Phone'
], [
'Input Devices'
,
'Mouse'
]]);
console.log(myMap2.values());
//output: {"Smart Phone", "Mouse"}
遍历value
1
2
3
4
5
6
7
8
9
10
11
12
/**
* Output
* Rich Dad Poor Dad
* The Magic of Thinking Big
* Think and Grow Rich
* How to Win Friends & Influence People
* Shoe Dog
*/
for
(const value of myFavoriteBooks.values()) {
console.log(value);
}
//end of iteration over the values
使用 entry() 方法
该方法返回Map集合中每个 [key,value] 元素的对象。
1
2
3
4
const myMap3 =
new
Map([[
'Samsung'
,
'Smart Phone'
],
[
'Colgate'
,
'Toothpaste'
], [
'Coke'
,
'Soda'
]]);
console.log(myMap3.entries());
//output: {"Samsung" => "Smart Phone",
//"Colgate" => "Toothpaste", "Coke" => "Soda"}
遍历条目
1
2
3
4
5
6
7
8
9
10
11
12
/**
* Output
* 1 "Rich Dad Poor Dad"
* 2 "The Magic of Thinking Big"
* 3 "Think and Grow Rich"
* 4 "How to Win Friends & Influence People"
* 5 "Shoe Dog"
*/
for
(const [key, value] of myFavoriteBooks.entries()) {
console.log(key, value);
}
//end of iteration over the entries
散布运算符遍历Map
在文章的最后一部分,我们将了解通过使用散布运算符(...)轻松遍历map对象,下面让我们看一个例子吧!
1
2
3
4
5
let
fastFoods =
new
Map([[1,
'McDO'
], [2,
'Burger King'
], [3,
'KFC'
],
[4,
'Wendys'
], [5,
'Pizza Hut'
]]);
console.log(...fastFoods.keys());
console.log(...fastFoods.values());
大家可以自行执行一下上面这段程序,看看运行结果是什么。
总结
在本文中,我们讨论了JavaScript Map对象集合。相信通过这篇文章,你已经对Map对象有了一定的了解了。在文末,展示了遍历Map的另一种形式for-of和散布运算符(...)来遍历集合。
如果有什么问题或补充,欢迎通过评论区留言告诉我。
-
Vue实现动态添加或者删除对象和对象数组的操作方法
2020-12-24 00:19:46v-model="item.description" clearable> 效果图如下: 总结 以上所述是小编给大家介绍的Vue实现动态添加或者删除对象和对象数组的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家...添加核心代码如下:
this.data.push({
type: [{
value: '选项1',
label: 'in'
},
{
value: '选项3',
label: 'out'
}],
value:[{
value: '选项1',
label: 'CSV'
},
{
value: '选项3',
label: 'TSV'
}],
parameter:'',
default:'',
description:'',
isDelete:false,
});
删除核心代码如下:
/*遍历数组,然后根据选中的状态获取对应的下标,然后进行删除*/
for (let i = 0;i
let obj = this.data[i];
if (obj.isDelete){
this.data.splice(i,1);
i--
}
}
全部代码如下:
============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================
v-for="obj in item.type"
:key="obj.value"
:label="obj.label"
:value="obj.value">
v-for="obj in item.value"
:key="obj.value"
:label="obj.label"
:value="obj.value">
size="mini"
placeholder="请输入内容"
v-model="item.parameter"
clearable>
size="mini"
placeholder="请输入内容"
v-model="item.default"
clearable>
size="mini"
placeholder="请输入内容"
v-model="item.description"
clearable>
export default {
name: "VueArrays_32",
data(){
return {
data:[
{
type: [{
value: '选项1',
label: 'in'
},
{
value: '选项3',
label: 'out'
}],
value:[{
value: '选项1',
label: 'CSV'
},
{
value: '选项3',
label: 'TSV'
}],
parameter:'',
default:'',
description:'',
isDelete:false,
},
],
}
},
methods:{
add(){
this.data.push({
type: [{
value: '选项1',
label: 'in'
},
{
value: '选项3',
label: 'out'
}],
value:[{
value: '选项1',
label: 'CSV'
},
{
value: '选项3',
label: 'TSV'
}],
parameter:'',
default:'',
description:'',
isDelete:false,
});
},
deleteItem(){
/*遍历数组,然后根据选中的状态获取对应的下标,然后进行删除*/
for (let i = 0;i
let obj = this.data[i];
if (obj.isDelete){
this.data.splice(i,1);
i--
}
}
}
}
}
效果图如下:
总结
以上所述是小编给大家介绍的Vue实现动态添加或者删除对象和对象数组的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
-
Json和对象之间转换的封装(Gson)
2022-03-09 08:54:03前段时间由于做spring boot的后端,经常需要进行Json 和对象之间的转换,所以利用Gson结合Kotlin扩展函数的特性封装了两个非常方便的函数,如果是其他语言,也可以封装一下,就是没Kotlin方便了。下面展示一下最终...一、前言
前段时间由于做spring boot的后端,经常需要进行Json 和对象之间的转换,所以利用Gson结合Kotlin扩展函数的特性封装了两个非常方便的函数,如果是其他语言,也可以封装一下,就是没Kotlin方便了。下面展示一下最终封装效果
对象转Json
val cat = Cat() cat.toMyJson()
Json转对象
//单个对象,这里转换成单个对象需要手动,主要是为例统一形式 val cat = Cat() val data = cat.toMyJson() data.toMyObject<Cat>()[0] //list 类型 val cats = List<Cat>() val dataList = cats.toMyObject<Cat>()[0]
二、对象转 Json
这里的需要在Any下面进行扩展,由于Any为所有类的父类,这个和Java里面的Object 有点类似
fun Any.toMyJson():String{ return Gson().toJson(this) }
封装好了就可以直接用了,这个处理起来Gson也没有那么难,但只用写点的方式,节省了打括号的时间
val cat = Cat() cat.toMyJson()
三、Json 转对象
这个起初封装的时候还有点问题,首先扩展对象比较容易找到,就是String类型,但有一点需要进行注意的,这里Gson转化用到了反射机制,所以需要做两个处理
- 进行泛型实化处理
- 处理反射相关的问题
最终代码效果
inline fun <reified T> String.toMyObject(): List<T> { val listType: Type = `$Gson$Types`.newParameterizedTypeWithOwner(null, ArrayList::class.java, T::class.java) return if(!contains("[")){ Gson().fromJson("[${this}]", listType) }else{ Gson().fromJson(this, listType) } }
封装的使用
val cat = Cat() val data = cat.toMyJson() data.toMyObject<Cat>()[0]
不过这里有个缺点就是如果是单个对象的话,需要手动取第一个值作为对象,因为返回值是list类型的,如果有大佬有换返回值类型的方法,欢迎评论区留言
四、需要注意的问题
对象转Json需要注意的
这个只需要注意转换之后的格式即可,list或者单个对象都是可以直接转换的
Json 转对象需要注意的
这个需要注意的就是对象是什么类型的要清楚,还有就是非Json格式的字符串是不能转换成功的,虽然它有这个方法,然后目前我这套方案是转化成统一的list类型,所以需要手动取值
五、总结
以前碰到这些是相当的头疼,经常就需要转来转去的,网上的文章很多都没讲明白,虽然封装好的库,就这么几行代码,总之,方便开发才是最好的,这种繁琐的事越简单越好。
-
【Python从入门到精通】(十三)Python面向对象的开发,没有对象怎么能行呢?
2021-07-22 22:46:33面向对象的开发,终究是要有个对象,不能老是玩函数。 -
jsp利用application实现留言板
2021-04-18 13:39:53文章目录index.jspprocess.jspshow.jsp实现图 index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%> <!DOCTYPE html>...留言 -
从PHP函数参数为数组和对象的区别说开去
2018-03-18 22:26:55从PHP函数参数为数组和对象的区别说开去 ...函数参数为数组和对象的区别 变量的底层结构 对象的底层结构 *HashTable —PHP的灵魂 函数参数为数组和对象的区别 先写一个不算很好的例子但是足够说明问题了。... -
JVM系列之:对象的锁状态和同步
2020-07-24 09:14:07锁和同步是java多线程编程中非常常见的使用场景。为了锁定多线程共享的对象,Java需要提供一定的机制来实现共享对象的锁定,从而保证一次只有一个线程能够作用于共享对象。当第二个线程进入同一个区域的时候,必须... -
Asp.net简单留言板源码(采用面向对象开发)
2007-09-13 06:06:49Asp.net简单留言板源码(采用面向对象开发,包含所有CS文件) <br>可以对留言进行回复 游客也可以留言,用户登录采用随机验证码 默认帐号密码51aspx 该示例采用面向对象方法开发 <br>该源码为... -
Vue2.0 不能监测数组和对象的变化原因以及解决方案
2021-09-22 14:10:02无法检测数组和对象的新增 无法检测通过索引改变数组的操作 针对以上问题,我们一般都会把锅甩给 Object.defineProperty。所以,在Vue 3.0 中,尤大把响应式数据部分弃用了 Object.defineProperty,而使用 Proxy 来... -
那个小白说他还没搞懂类和对象,我一怒之下把这篇文章扔给了他
2020-04-22 05:20:49二哥,我就是上次说你《教妹学Spring》看不懂的那个小白,没想到你还特意写了一篇入门级的 Java 基础知识,这次真的看懂了,感觉好棒。请原谅我上次的唐突,二哥能够照顾我们这些小白的学习进度,真的...类和对象是... -
Java的对象监视器和Condition监视器概念以及对比
2020-03-17 23:12:31详细介绍了Java对象监视器的概念以及API方法,包括JDK1.5提供的Condition监视器对比。 -
【SpringBoot】34、SpringBoot整合Redis实现序列化存储Java对象
2020-10-23 10:27:23前面我们已经介绍过【SpringBoot】十七、SpringBoot 中整合 Redis,...我们可以将 Java 对象转化为 JSON 对象,然后转为 JSON 字符串,存入 Redis,那么我们从 Redis 中取出该数据的时候,我们也只能取出字符串,并转 -
当返回前端的数据中存在List对象集合,如何优雅操作?
2021-06-23 18:15:16当返回前端的数据中存在List对象集合,如何优雅操作?一对多结构简单不冗余,便于前端取数据,是一个好的解决方案。 -
VB对象的事件和方法
2020-09-15 12:44:45对象的事件: 事件是指对象对于外部动作的响应,当对象发生了某个事件,就会执行相应的代码,这段代码被称为“事件过程”。 事件是Visual Basic预先编辑好的并且能够被对象识别的的动作,VB采用的是事件驱动机制,当... -
java 判断一个对象是否为空对象
2020-03-30 22:29:29最近项目中遇到一个问题,在用户没填数据的时候,我们需要接收从前端传过来的对象为null,但是前端说他们一个一个判断特别麻烦,只能传个空对象过来,我第一个想法就是可以通过反射来判断对象是否为空。 第一版: ... -
js预编译AO对象及GO对象
2018-03-15 09:57:28这是第一步,创建一个ao对象,第二步是将函数内所有的形参和变量声明储存到ao对象中,value为undefined; ao{ a:undefined, b:undefined } 第三步将形参和实参进行统一。 ao{ a:1... -
Java判断对象是否为空(包括null ,"")的方法
2021-03-08 08:37:25Java判断对象是否为空(包括null ,"")的方法本文实例为大家分享了Java判断对象是否为空的具体代码,供大家参考,.../*** 判断对象是否为空** @author Rex**/public class EmptyUtil{/*** 判断对象为空** @param obj* ... -
Python当中的array数组对象实例详解
2020-12-15 05:44:36由于项的地址在编号上是连续的,数组某一项的地址可以通过将两个值相加得出,即将数组的基本地址和项的偏移地址相加。数组的基本地址就是数组的第一项的机器地址。一个项的偏移地址就等于它的索引乘以数组的一个项所... -
java面向对象简介
2021-11-06 13:59:14欢迎点赞 收藏 ⭐留言 目录 一、Java特效 1、简单性 2、面向对象 3、分布式 4、健壮性 5、安全性 6、体系结构中立 7、可移植性 8、解释性 9、高性能 10、多线程 11、动态性 二、对象 三、类 1、类声明 2、类体 3、... -
Java对象转换成Map
2021-03-06 23:51:09需求总是千奇百怪,对象转成map,看似没必要,但就是有这个需求,所以记录下来首先是beanpackage tools;import lombok.data;/*** 车辆实体类*/@datapublic class car {private string id;private string model;//... -
nodejs+express留言板功能实现
2021-09-19 15:19:36包含列表界面、添加界面和发送留言功能。 所需类库 直接copy以下package.json 然后直接 npm install 或者yarn install 即可。 package.json所需内容如下。 { "name": "nodejs_message_board", "version": "2021.09... -
家人问你还没有对象怎么办?那你new一个对象呀
2021-12-22 08:59:15在JavaScript的世界,万物皆对象。除了null和undefined,其他基本类型数字,字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。 -
网页设计制作-留言板
2021-06-13 12:38:04制作留言板1、留言板分为填加留言、保存留言、显示留言、管理留言等模块。显示留言页面应为系统默认页面或首页,管理页面由站长进行回复与删除管理。2、文件说明:default.asp(留言显示页面)显示留言按时间的降序... -
学习open62541 --- [7] Server添加对象和对象类型
2019-09-27 22:45:29显示如下, 在Reference窗口中可以看到对象节点和变量节点之间的关系,即HasComponent 二 自定义对象类型 上一节我们手动添加了一个学生对象节点,可以看出来需要写很多代码,如果有100个学生对象,那么代码量就很大... -
Java面向对象知识点总结(全)
2020-12-13 10:16:10封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联系。 原则 使对象以外的...