Es6键值对

1.什么是键值对?
        键值对('key = value')        顾名思义,每一个键会对应一个值。

2.举例
   a:身份证号和你本人是绑定的关系。每一个身份证号(键)都会对应一个人(值)。

   b:我们在登录微信或者游戏时,需要输入手机号验证身份。系统会向该手机号发送一条验证短信。

      这里的手机号码(键),对应的接收用户就是值。

      每个键对应响应的值,当按下响应的键时,就会输出响应的结果。

      键:就是存的值的编号。

      值:就是要存放的数据。

3.Set集合
Set对象是值的集合,可以按照插入的顺序迭代它的元素。Set 集合中的元素只会出现一次,即Set集合中的元素是唯一的。


 
 

  <script>
        //ES6提供了新的数据结构Set
        //它类似与数组,但是成员的值都是唯一的,没有重复的值
 
        //创建Set数据结构
        //const s = new Set()
 
        //Set函数可以接收一个数组作为参数,用来初始化
        const s = new Set([1,2,3,4,5,4,5])
        console.log(s); //Set(5) {1,2,3,4,5}
        console.log(s.size); //5
 
        //利用Set进行数组去重
        let arr = [3,4,4,5,6,6]
        let set = new Set(arr)
        console.log(set); //Set(4) {3, 4, 5, 6}
        console.log([...set]); //[3, 4, 5, 6]
    </script>

ES6提供了Set构造函数,创建Set对象

Set集合 - 值(唯一的)的集合

4.forEach方法
1.forEach应用场景:用于遍历数组,相当于for循环另一种写法。

2.语法:数组.forEach( function(value,index,arr){ // 算法 })

3.forEach必须提供一个参数

       a.value:每次遍历到的数组元素

       b.index:每次遍历到的数组的下标

       c.arr:数组

       d.forEach
   

 <script>
        let arr = [1,6,9,16,73,54]
        //累加
        // let sum = 0;
        // for(let i = 0; i < arr.length; i++){
        //     sum =+ arr [i];
        // }
        // console.log(sum);
 
        let sum = 0
        arr.forEach(function(value){
            sum += value
        })
        console.log(sum);
    </script>

5.Map对象
Map对象用来保存键值对。

在Map对象中任何值(对象或者原始值)都可以作为一个键(任何数据类型)或一个值。

基本Map方法     

  new Map():创建新的Map对象。

        set():为Map对象中的键设置值。

        get():获取Map对象中键的值。

        keys():返回Map对象中键的数组。

        values():返回Map对象中值的数组。

        entries():返回Map对象中键/值对的数组。

        clear():删除Map中的所有元素。

        delete():删除由键指定的元素。

        has():如果键存在,则返回true。
 <script>
        // 【Map()属性】
        // Map.size:返回Map中元素的数量。
        //【示例】
        // 创建对象
        const apples = {name:'Apples'};
        const peaches = {name:'Peaches'};
        const oranges = {name:'Oranges'};
        //创建新的map对象(new map())
        const fruits = new Map();
        //向map对象添加成员(set())
        fruits.set(apples,500);
        fruits.set(peaches,600);
        fruits.set(oranges,300);
 
        //获取map对象中键中的值(get())
        console.log(fruits.get(apples)); //500
 
        //获取map对象中键的数组(keys())
        console.log(fruits.keys()); //mapIterator {{…}, {…}, {…}}
 
        //获取对象中值的数组(values())
        console.log(fruits.values()); //mapIterator {500, 600, 300}
 
        //获取map对象中键值对的数组(entries())
        console.log(fruits.entries); 
 
        //返回map中元素的数量(map.size)
        console.log(fruits.size); //3
    </script>


   

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用Vue的v-for指令来遍历Map对象,然后使用ES6的解构语法获取Map的key和value。 例如,假设我们有一个Map对象: ``` const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]) ``` 我们可以在Vue模板中使用v-for指令来遍历这个Map对象: ``` <template> <div> <ul> <li v-for="(value, key) in myMap" :key="key"> {{ key }}: {{ value }} </li> </ul> </div> </template> ``` 在这个例子中,我们使用了ES6的解构语法来获取Map的key和value。在v-for指令中,我们将value放在前面,key放在后面,这样就可以正确地获取Map的key和value了。 注意,在v-for指令中,我们需要使用:key属性来指定每个li元素的key值,这样Vue才能正确地跟踪每个元素的状态。 ### 回答2: Vue是一款流行的JavaScript框架,它提供了一种简单而直观的方式来操作DOM,并将应用程序的数据与其视图保持同步。Vue 遍历 map 并获取key和value,是在Vue实现数据绑定的过程中非常常见的操作。下面介绍如何使用Vue遍历map并获取key和value。 首先,我们应该了解一下在JavaScript中如何创建和遍历一个Map。在JavaScript中,Map是一种非常有用的数据类型,可以将键映射到值上,而不需要像对象那样具有字符串键的限制。我们可以使用空的Map()构造函数创建一个新的空Map。接下来使用set()方法可以添加一个键值对到Map中。最后,我们可以使用for...of循环来遍历Map获取键和值。 下面是具体步骤: 1.创建一个Map,并向其中添加一些键值对: ``` let myMap = new Map() myMap.set('key1', 'value1') myMap.set('key2', 'value2') myMap.set('key3', 'value3') ``` 2. 使用v-for指令遍历Map: ``` <template> <div> <ul> <li v-for="(value, key) in myMap" :key="key"> Key: {{ key }}, Value: {{ value }} </li> </ul> </div> </template> <script> export default { data() { return { myMap: new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]) } } } </script> ``` 使用v-for指令,我们可以使用 `(value, key) in myMap`快速遍历Map中所有的键值对,`value`对应键值对中的值,`key`对应键值对中的键。通过在li元素中绑定key属性,我们可以让Vue自动为每个列表项提供唯一的key。这有助于 Vue 轻松地进行更新DOM。 上述代码使用的是ES6语法,如果需要兼容IE等旧浏览器,在使用过程中需对其进行转换。 总之,使用Vue进行Map遍历并获取key和value非常简单。与普通的JavaScript语法相比,Vue数据绑定的优雅语法和语法糖使代码更加直观易懂,提高了开发效率。 ### 回答3: Vue是一种用于构建用户界面的渐进式JavaScript框架。在Vue中,我们可以使用v-for指令来遍历数组或对象。但是如果你需要遍历一个Map对象,该怎么办呢?本文将介绍如何在Vue中遍历Map对象获取key和value。 一、创建一个Map对象 在Vue中遍历Map对象之前,我们需要先创建一个Map对象。以下是一个简单的例子: ``` let myMap = new Map(); myMap.set('key1', 'value1'); myMap.set('key2', 'value2'); myMap.set('key3', 'value3'); ``` 二、在Vue中使用v-for指令遍历Map对象 我们可以使用v-for指令来遍历Map对象。以下是一个示例: ``` <template> <div> <ul> <li v-for="(value, key) in myMap" :key="key"> {{ key }}: {{ value }} </li> </ul> </div> </template> ``` 在上面的代码中,我们使用v-for指令对myMap对象进行遍历。在v-for指令中,我们使用括号括起来的value和key获取Map对象中的value和key。在模板中,我们可以使用{{ key }}和{{ value }}的方式来获取它们。 三、遍历Map对象的原理 在ES6中,遍历Map对象可以使用以下方法: ``` for (let [key, value] of myMap) { console.log(key + ' = ' + value); } ``` 我们可以使用相同的方法在Vue中遍历Map对象。在v-for指令后面,我们使用括号括起来的value和key获取Map对象中的value和key。 总结 在Vue中,使用v-for指令可以遍历数组和对象。但是如果你需要遍历Map对象获取key和value,可以使用括号括起来的value和key来实现。了解了这些基础知识,我们可以更轻松地在Vue中操作Map对象

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值