ES6 Map 数据结构、ES6 箭头函数

曾经终败给现在 2022-04-17 05:17 315阅读 0赞

目录

Map 定义与基本用法

Map 属性与方法

Map 遍历

ES6 箭头函数

箭头函数基本用法

简化回调函数

Map 定义与基本用法

  1.  JavaScript 的对象（Object）本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键，这给它的使用带来了很大的限制。
  3.  为了解决这个问题，ES6 提供了 Map 数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>Map 对 象</title>
  11.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  12.     <script type="text/javascript">
  13.         /**map:创建一个 Map 对象
  14.          * json：创建一个 json 对象*/
  15.         let map = new Map();
  16.         const json = {"name": "Hua An"};
  17.         /**赋值：第一个 key 为对象 json，第二个 key 为字符串 "json" */
  18.         map.set(json, 'content');
  19.         map.set("json", json);
  21.         console.log(map.get(json)); // 根据 key 取值："content"
  22.         console.log(map.has(json)); // 判断是否存在某个 Kye：true
  23.         console.log(map.delete(json));//删除某个 key：true
  24.         console.log(map.has(json)); // 判断是否存在某个 Kye：false
  25.         console.log(map.get("json")["name"]);//根据 Key 取值，然后取 json 的值：Hua An
  26.     </script>
  27. </head>
  28. <body>
  29. <div id="myDiv"></div>
  30. </body>
  31. </html>

20181113165156333.png

作为构造函数，Map 也可以接受一个数组作为参数，该数组的成员是一个个表示键值对的数组。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Map 对 象</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  8.     <script type="text/javascript">
  10.         /**创建一个 json 对象*/
  11.         const json = {"name": "Hua An"};
  13.         /**map:创建一个 Map 对象，同时初始化值*/
  14.         const map = new Map(
  15.                 [
  16.                     ['name', '张三'],
  17.                     ['title', 'Author'],
  18.                     ["user", json]
  19.                 ]);
  20.         console.log(map.size);// 3
  21.         console.log(map.has('name'));//判断是否存在某个 Kye: true
  22.         console.log(map.get('name'));// 根据 key 取值："张三"
  23.         console.log(map.has('title'));// 判断是否存在某个 Kye:true
  24.         console.log(map.get('title'));// 根据 key 取值："Author"
  25.         console.log(map.get("user")["name"]);// "Hua An"
  26.     </script>
  27. </head>
  28. <body>
  29. <div id="myDiv"></div>
  30. </body>
  31. </html>

事实上，不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数。这就是说，Set 和 Map 都可以用来生成新的 Map 。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Map 对 象</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.     <script type="text/javascript">
  8.         let mapSource = new Map();
  9.         mapSource.set("name", "华安");
  10.         mapSource.set("title", "宁王造反");
  12.         let map = new Map(mapSource);
  13.         console.log(map.size);// 2
  14.         console.log(map.get('name'));// 根据 key 取值："华安"
  15.         console.log(map.get('title'));// 根据 key 取值："宁王造反"
  16.     </script>
  17. </head>
  18. <body>
  19. <div id="myDiv"></div>
  20. </body>
  21. </html>

如果对同一个键多次赋值，后面的值将覆盖前面的值，如果读取一个未知的键，则返回undefined。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Map 对 象</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.     <script type="text/javascript">
  8.         let map = new Map();
  9.         map.set("name", "华安");
  10.         map.set("name", "宁王造反");
  12.         console.log(map.size);// 1
  13.         console.log(map.get('name'));// 根据 key 取值："宁王造反"
  14.         console.log(map.get('title'));// 根据 key 取值：undefined
  15.     </script>
  16. </head>
  17. <body>
  18. <div id="myDiv"></div>
  19. </body>
  20. </html>

只有对同一个对象的引用，Map 结构才将其视为同一个键，Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Map 对 象</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.     <script type="text/javascript">
  8.         let map = new Map();
  9.         /**
  10.          * 内存地址是不一样的,所以 k1 与 k2 是两个不同的对象
  11.          * @type {string[]}
  12.          */
  13.         let k1 = ["name", "华安"];
  14.         let k2 = ["name", "华安"];
  15.         map.set(k1, "我是 k1");
  16.         map.set(k2, "我是 k2");
  17.         console.log(map.size);// 2
  18.         console.log(map.get(k1));// 根据 key 取值：我是 k1
  19.         console.log(map.get(k2));// 根据 key 取值：我是 k2
  20.     </script>
  21. </head>
  22. <body>
  23. <div id="myDiv"></div>
  24. </body>
  25. </html>

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Map 对 象</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.     <script type="text/javascript">
  9.         let map = new Map();
  10.         map.set(-0, 123);
  11.         map.set(-5, 456);
  12.         console.log(map.get(+0));// 123
  13.         console.log(map.get(5));// undefined
  14.         console.log(map.get(-5));// 456
  16.         map.set(true, 1);
  17.         map.set('true', 2);
  18.         console.log(map.get(true));// 1
  19.         console.log(map.get("true"));// 2
  21.         map.set(undefined, 3);
  22.         map.set(null, 4);
  23.         console.log(map.get(undefined));// 3
  24.         console.log(map.get(null));// 4
  26.         map.set(NaN, 123);
  27.         console.log(map.get(NaN));// 123
  28.     </script>
  29. </head>
  30. <body>
  31. <div id="myDiv"></div>
  32. </body>
  33. </html>

Map 属性与方法

size 属性返回 Map 结构的成员总数：

  1. let map = new Map([
  2.     ["name", "华安"],
  3.     ["age", 35]
  4. ]);
  5. console.log(map.size);//输出 2
  7. let map2 = new Map();
  8. console.log(map2.size);//输出 0

set(key,value) 方法设置键名 key 对应的键值为 value，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就新生成该键：

  1. let map = new Map();
  2. map.set("name", "张三");
  3. map.set(123, "age");
  4. map.set(undefined, "未定义");
  6. console.log(map);//输出 {"name" => "张三", 123 => "age", undefined => "未定义"}
  8. /**set方法返回的是原 Map 对象，所以可以链式编程*/
  9. map.set("name", "华安").set(123, "年龄");
  10. console.log(map);//输出 {"name" => "华安", 123 => "年龄", undefined => "未定义"}

get(key) 方法读取 key 对应的键值，如果找不到 key，返回 undefined：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>ES6 测试</title>
  7.     <!-- JQuery CDN-->
  8.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  10.     <script type="module">
  11.         $(function () {
  12.             let map = new Map();
  13.             map.set("name", "华安").set("age", 35);
  14.             map.set("address", "苏州");
  16.             console.log(map.get("name"), map.get("age"), map.get("address"), map.get("birthday"));
  17.             //输出：华安 35 苏州 undefined
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  22. </body>
  23. </html>

has(key) 方法返回一个布尔值，表示某个键是否在当前 Map 对象之中:

  1. let map = new Map();
  2. map.set("name", "华安").set("age", 35);
  3. map.set(110, "公安局");
  5. console.log(map.has("name"), map.has("age"), map.has(110));//输出：true true true
  6. console.log("abc");//输出：false

delete(key) 方法删除某个键，返回 true。如果删除失败，返回 false：

  1. let map = new Map();
  2. map.set("name", "华安").set("age", 35);
  3. map.set(110, "公安局");
  5. console.log(map.has("name"), map.has("age"), map.has(110));//输出：true true true
  6. console.log(map.delete("name"));//输出：true
  7. console.log(map.delete(110));// 输出：true
  8. console.log(map.has("name"), map.has("age"), map.has(110));//输出：false true false

clear 方法清除所有成员，没有返回值:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>ES6 测试</title>
  7.     <!-- JQuery CDN-->
  8.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  10.     <script type="module">
  11.         $(function () {
  12.             let map = new Map();
  13.             map.set("name", "华安").set("age", 35);
  14.             map.set(110, "公安局");
  16.             console.log(map.size);//输出：3
  17.             map.clear();
  18.             console.log(map.size);//输出：0
  19.         });
  20.     </script>
  21. </head>
  22. <body>
  23. </body>
  24. </html>

Map 遍历

Map 结构原生提供三个遍历器生成函数和一个遍历方法， 需要特别注意的是，Map 的遍历顺序就是插入顺序。

• keys()：返回键名的遍历器。

• values()：返回键值的遍历器。

• entries()：返回所有成员的遍历器。

• forEach()：遍历 Map 的所有成员。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>增强 For 循环</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.     <script type="text/javascript">
  8.         let map = new Map([
  9.             ["name", "赵子龙"],
  10.             ["age", 35],
  11.             ["address", "常山"]
  12.         ]);
  14.         console.log("--------1------");
  15.         // 依次输出：name、age、address
  16.         for (let keyLoop of map.keys()) {
  17.             console.log(keyLoop);
  18.         }
  20.         console.log("--------2------");
  21.         //依次输出：赵子龙、35、常山
  22.         for (let valueLoop of map.values()) {
  23.             console.log(valueLoop);
  24.         }
  26.         console.log("--------3------");
  27.         //依次输出：name 赵子龙、age 35、address 常山
  28.         /**其中循环的 item 相当于 Java 中 Map 迭代时的 Entry*/
  29.         for (let item of map.entries()) {
  30.             console.log(item[0], item[1]);
  31.         }
  33.         console.log("--------4------");
  34.         //依次输出：name 赵子龙、age 35、address 常山
  35.         /**上面可以简写如下*/
  36.         for (let [keyLoop,valueLoop] of map.entries()) {
  37.             console.log(keyLoop, valueLoop);
  38.         }
  40.         console.log("--------5------");
  41.         //依次输出：name 赵子龙、age 35、address 常山
  42.         /**上面可以再简写如下*/
  43.         for (let [keyLoop,valueLoop] of map) {
  44.             console.log(keyLoop, valueLoop);
  45.         }
  47.         //依次输出：name 赵子龙、age 35、address 常山
  48.         console.log("--------6------");
  49.         map.forEach(function (value, key) {
  50.             console.log(key, value);
  51.         })
  53.     </script>
  54. </head>
  55. <body>
  56. <div id="myDiv"></div>
  57. </body>
  58. </html>

ES6 箭头函数

箭头函数基本用法

ES6 允许使用“箭头”（=>）定义函数。如下所示当函数带一个参数时：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  11.         let f1 = param => param;
  12.         /**函数 f1 等价于函数 f2 */
  13.         let f2 = function (param) {
  14.             return param;
  15.         }
  16.         $(function () {
  17.             console.log(f1(3));// 输出 3
  18.             console.log(f2(5));// 输出 5
  19.         });
  20.     </script>
  21. </head>
  22. <body>
  23. </body>
  24. </html>

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  11.         let getTime1 = () => new Date();
  13.         /**函数 getTime1 等价于函数 getTime2 */
  14.         let getTime2 = function () {
  15.             return new Date();
  16.         }
  18.         $(function () {
  19.             console.log(getTime1());// 输出系统当前时间
  20.             console.log(getTime2());// 输出系统当前时间
  21.         });
  22.     </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，如果需要返回，则使用 return 语句返回：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  11.         let sun1 = (a, b) => {
  12.             return a + b;
  13.         }
  14.         /**函数 sun1 等价于 sun2 */
  15.         let sun2 = function (a, b) {
  16.             return a + b;
  17.         }
  19.         let sun3 = (a, b)=> {
  20.             console.log(a + b);
  21.         }
  23.         $(function () {
  24.             console.log(sun1(10, 20));// 输出 30
  25.             console.log(sun2(20, 30));// 输出 50
  26.             sun3(30, 40);//输出 70
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31. </body>
  32. </html>

由于大括号被解释为代码块，所以如果箭头函数直接返回一个 Json 对象，必须在对象外面加上括号，否则会编译报错：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  12.         let getUserJson1 = (id, name) =>({"id": id, "name": name});
  13.         /**
  14.          * 函数 getUserJson1 等价于 getUserJson2，不过 getUserJson1 更简洁
  15.          * getUserJson1 中因为想要返回一个 json 对象，所以为了不让大括号 {} 起冲突，外面必须加 ()
  16.          * getUserJson2 是 getUserJson1 的拆解写法，语义上更好理解
  17.          * @param id
  18.          * @param name
  19.          * @returns {
  20.    {id: *, name: *}}
  21.          */
  23.         let getUserJson2 = (id, name) => {
  24.             let userJson = {"id": id, "name": name};
  25.             return userJson;
  26.         }
  28.         $(function () {
  29.             let userJson1 = getUserJson1("9527", "华安");
  30.             let userJson2 = getUserJson2("8888", "宁王");
  31.             console.log(JSON.stringify(userJson1));//输出：{"id":"9527","name":"华安"}
  32.             console.log(JSON.stringify(userJson2));//输出：{"id":"8888","name":"宁王"}
  33.         });
  34.     </script>
  35. </head>
  36. <body>
  37. </body>
  38. </html>

箭头函数可以与变量解构结合使用，如 参数可以直接转换 json 对象：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  12.         /**
  13.          * 参数中 {id,name} 会直接解构传入的 json 对象
  14.          * @param id
  15.          * @param name
  16.          */
  17.         let getUserInfo1 = ({id,name})=>"id=" + id + ",name=" + name;
  19.         /**函数 getUserInfo1 等价于 getUserInfo2*/
  20.         let getUserInfo2 = function (userInfo) {
  21.             return "id=" + userInfo.id + ",name=" + userInfo.name;
  22.         }
  24.         $(function () {
  25.             let userInfo = {"id": 9527, "name": "华安"};
  26.             console.log(getUserInfo1(userInfo));//输出 id=9527,name=华安
  27.             console.log(getUserInfo2(userInfo));//输出 id=9527,name=华安
  28.         });
  30.     </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>

箭头函数使得表达更加简洁：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  12.         /**
  13.          * isEven 函数判断一个数是否为偶数
  14.          * square 函数用于球平方
  15.          * @param n
  16.          */
  17.         let isEven = n => n % 2 == 0;
  18.         let square = n => n * n;
  20.         $(function () {
  21.             console.log(isEven(0));// 输出 true
  22.             console.log(isEven(2));// 输出 true
  23.             console.log(isEven(3));// 输出 false
  24.             console.log(square(5));// 输出 25
  25.         });
  26.     </script>
  27. </head>
  28. <body>
  29. </body>
  30. </html>

简化回调函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>箭头函数</title>
  7.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  9.     <!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别-->
  10.     <script type="module">
  11.         $(function () {
  12.             let arr1 = [1, 2, 3, 4, 5];
  14.             /**正常函数写法，可以参考：https://blog.csdn.net/wangmx1993328/article/details/84066490*/
  15.             let arr1_new1 = arr1.map(function (value) {
  16.                 return value * value;
  17.             });
  18.             /**
  19.              * 上面等价于下面的箭头函数写法
  20.              * @type {Array}
  21.              */
  22.             let arr1_new2 = arr1.map(value=>value * value);
  24.             console.log(arr1_new1.toString());//输出 1,4,9,16,25
  25.             console.log(arr1_new2.toString());//输出 1,4,9,16,25
  26.         });
  27.     </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>

箭头函数有几个使用注意点。

（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。

（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this 对象的指向是可变的，但是在箭头函数中，它是固定的。

发表评论

表情：
评论列表 （有 0 条评论，315人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Es6箭头函数

    `箭头函数`是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。 下文就是我对于箭头`(=>)`函数的定义与实用说明。 用法一（无参数） 定义语法

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 130 阅读

    相关 ES6 箭头函数

    ES6 中添加了函数新的定义语法——`箭头函数`，当有大于一个形参的时候，必须使用`()`代表部分参数，函数体大于一行时，必须使用`{}`将函数体括起来，并使用 `return

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 238 阅读

    相关 es6箭头函数

    一。对箭头函数的理解 1. 在ES6中，"=>"是函数的表达式，并且箭头函数是匿名的。（这个箭头叫“lambda运算符”） 如： var lets = b => b\b

    矫情吗；*矫情吗；*/ 0 赞/ 114 阅读

    相关 ES6箭头函数

    ES6箭头函数 一、什么是箭头函数 二、写法 三、箭头函数中this 一、什么是箭头函数 简化了匿名函数的写法， 二、写法 fu

    快来打我*快来打我*/ 0 赞/ 442 阅读