ES6-键值对

最新推荐文章于 2023-04-25 12:12:04 发布

Issssy

最新推荐文章于 2023-04-25 12:12:04 发布

阅读量683

点赞数 1

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/Issssy/article/details/128025169

版权

本文介绍了ES6中的键值对概念及其应用，通过身份证号和手机号码的例子来阐述键值对的绑定关系。接着讲解了Set集合，它存储唯一值并提供了遍历元素的方法。此外，还详细描述了forEach方法在数组遍历中的使用，以及Map对象，用于保存任意键值对，并列举了Map的主要操作方法。

摘要由CSDN通过智能技术生成

1.什么是键值对?

键值对('key = value') 顾名思义,每一个键会对应一个值。

2.举例

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

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

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

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

键:就是存的值的编号。

值:就是要存放的数据。

3.Set集合

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

3.注意点:
a.回调函数执行次数 == 数组长度(数组中有多少元素，回调函数就会执行几次)
b.forEach函数没有返回值
c.回调函数不需要return(就算手动ruturn,也不会结束循环)

4.filter方法和forEach方法的参数完全相同。
filter主要是根据条件进行筛选,满足条件的值会被return返回，需要一个变量接收

5.Map对象

Map对象用来保存键值对。

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

基本Map方法

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

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

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

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

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

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

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

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

has():如果键存在,则返回true。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>