devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Java前端技术栈】ES6-ECMAScript6.0

作者：繁依Fanyi0 | 2024-02-19 06:53:04

赞

踩

【Java前端技术栈】ES6-ECMAScript6.0

一、ES6基本介绍

1. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。

2. ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语 言

3. ECMAScript 和 JavaScript 的关系：ECMAScript是JavaScript的规范/规则，JavaScript 是ECMAScript的一种实现

二、let声明变量

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>let基本使用</title>
  6.     <script type="text/javascript">
  7.         let name = "yinhai";
  8.         //1. console.log("name=", name); //使用, 可以输出对象的完整信息
  9.         //2. console.log("name="+ name); //使用+, 字符串的拼接, 如果name是一个对象, 会输出object, 而不会输出对象的完整信息
  10.         console.log("name",name);
  11.     </script>
  12. </head>
  13. <body>
  14.  
  15. </body>
  16. </html>

注意事项和使用细节

1. let 声明的变量有严格局部作用域

2. let 只能声明一次, var 可以声明多次

3. let 不存在变量提升, var 存在变量提升 （在某个获取语句之后的定义的变量）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>let 的使用细节</title>
  6.     <script type="text/javascript">
  7.  
  8.  
  9.         // let 细节1
  10.         // (1) let 声明的变量, 在代码块中，则作用域在代码块中
  11.         // (2) var声明的变量, 在代码块中，作用域没有限制
  12.         {
  13.             var name = "韩顺平教育";
  14.             let job = "java工程师";
  15.             console.log("name=", name);
  16.             console.log("job=", job);
  17.         }
  18.  
  19.         console.log("name=", name);
  20.         //console.log("job=", job);//job is not defined
  21.  
  22.         // let 细节2
  23.         // 1. var 可以声明多次
  24.         // 2. let 只能声明一次
  25.         var num1 = 100;
  26.         var num1 = 200;
  27.         console.log(num1);
  28.         let num2 = 600;
  29.         //Syntax => 语法
  30.         //let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2
  31.  
  32.         console.log(num2);
  33.  
  34.         // let 细节3
  35.         // 1. let 不存在变量提升
  36.         // 2. var 存在变量提升
  37.  
  38.         console.log("x=", x);//undefined
  39.         var x = "tom";
  40.  
  41.         //can't access lexical declaration 'z'
  42.         console.log("z=", z);
  43.         let  z = "mary";
  44.  
  45.  
  46.     </script>
  47. </head>
  48. <body>
  49.  
  50. </body>
  51. </html>

三、const声明常量/只读变量

类似java之中的final

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>const 常量/只读变量的使用</title>
  6.     <script type="text/javascript">
  7.  
  8.         //const 基本使用 => 想一想java基础[语言语法很多是相通] final
  9.  
  10.         /**
  11.          1. 常量在定义时，需要赋值
  12.          2. 常量赋值后不能修改
  13.          */
  14.             //常量
  15.         const PI = 3.14;
  16.         //invalid assignment to const 'PI'
  17.         //PI = 3.1415926;
  18.         console.log("PI=", PI)
  19.  
  20.  
  21.     </script>
  22. </head>
  23. <body>
  24.  
  25. </body>
  26. </html>

不过不定义会报错 而且定义过之后不能修改这个值

四、解构赋值

1. 解构赋值是对赋值运算符的扩展

2. 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

3. 主要有两种形式： 数组解构和对象解

1.数组解构赋值

自动模式匹配

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数组的解构赋值</title>
  6.     <script type="text/javascript">
  7.  
  8.         let arr = [1, 2, 3];
  9.         //如果要看某个变量的类型
  10.         console.log("arr=>", arr);
  11.         //数组解构[取出元素]
  12.         //1.传统
  13.         let x = arr[0], y = arr[1], z = arr[2];
  14.         console.log(x, y, z);
  15.         //2. ES6风格
  16.         let [a, b, c] = arr;
  17.         console.log("==================================");
  18.         console.log(a, b, c);
  19.  
  20.         let [num1, num2, num3] = [100, 200, 300];
  21.         console.log(num1, num2, num3);
  22.  
  23.     </script>
  24. </head>
  25. <body>
  26.  
  27. </body>
  28. </html>

2.对象解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象解构</title>
  6.     <script type="text/javascript">
  7.  
  8.         //对象解构
  9.         /**
  10.          * let monster = {name: '牛魔王', age: 800}
  11.          * 细节说明
  12.          * 1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致
  13.          * 2. 也可解构对象部分属性，比如 let{age} 这样就只取出age 属性
  14.          * 3. 还有其它的形式,比如方法上使用对象解构
  15.          */
  16.             //monster是一个对象
  17.         let monster = {name: '牛魔王', age: 800};
  18.         //传统方式取出属性-解构 对象名.属性名
  19.         console.log(monster.name, " ", monster.age);
  20.  
  21.         //ES6对象解构
  22.         //1. 把monster对象的属性, 赋值给{name,age}
  23.         //2. {name,age} 的取名name 和 age 要和monster对象的属性名保持一致
  24.         //3. 使用{} 包括, 不要使用[]
  25.         //4. {name,age} 顺序是无所谓
  26.         let {name, age} = monster;
  27.         console.log("========================");
  28.         console.log("name=", name, " age=", age);
  29.  
  30.         //下面这个写法也可以
  31.         //let {name, age} = {name: '牛魔王', age: 800};
  32.  
  33.         //还有其它的形式,比如方法上使用对象解构
  34.         //如果这样使用，仍然要保证名称和对象的属性名一致
  35.         function f1({name, age}) {
  36.  
  37.             console.log("f1-name=", name, " ", "f1-age=", age)
  38.         }
  39.  
  40.         f1(monster);
  41.  
  42.     </script>
  43. </head>
  44. <body>
  45.  
  46. </body>
  47. </html>

五、模版字符串

1.模板字符串使用反引号 ` 将字符串包裹

2.可作为普通字符串

3.可用来定义多行字符串，即可以将换行字符串原生输出

4.字符串插入变量和表达式, 使用 ${}

5.字符串中调用函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板字符串的使用</title>
  6.     <script type="text/javascript">
  7.         //1、字符串，换行会原生输出
  8.         let str1 = `for(int i = 0;i < 10;i++){
  9.             System.out.println("i="+i);
  10.         }`;
  11.         console.log("str1=", str1);
  12.         //2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
  13.         let name = "hspedu教育";
  14.         //(1) 当解析 ${name}, 就找最近的name遍历, 进行替换
  15.         //(2) 然后可以得到最后解析的字符串
  16.         let str2 = `教育名称=${name}`;
  17.         let str3 = `1+2=${1 + 2}`;
  18.         let n1 = 80;
  19.         let n2 = 20;
  20.         let str4 = `${n1}+${n2}=${n1 + n2}`;
  21.         console.log("str2=", str2);
  22.         console.log("str3=", str3);
  23.         console.log("str4=", str4);
  24.         //3. 字符串中调用函数
  25.  
  26.         function sayHi(name) {
  27.             return "hi " + name;
  28.         }
  29.  
  30.         let name2 = "tom";
  31.         let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
  32.         let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
  33.         console.log("str5=", str5);
  34.         console.log("str6=", str6);
  35.     </script>
  36. </head>
  37. <body>
  38.  
  39. </body>
  40. </html>

六、对象相关特性

1.声明对象简写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>声明对象的简写方式</title>
  6.     <script type="text/javascript">
  7.         const age = 800;
  8.         const name = "牛魔王";
  9.         // 传统 声明/定义对象
  10.         let monster = {name: name, age: age};
  11.         // ES6 声明/定义对象
  12.         //老师解读
  13.         //1. {name, age} : 表示对象的属性名是name和age
  14.         //2. 属性name的值是从变量/常量 name来的
  15.         let monster02 = {name, age};
  16.         console.log("monster02=>", monster02);
  17.     </script>
  18. </head>
  19. <body>
  20.  
  21. </body>
  22. </html>

2.对象方法简写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象方法的简写形式</title>
  6.     <script type="text/javascript">
  7.         // 传统-对象方法定义
  8.         let monster = {
  9.             name: "红孩儿",
  10.             age: 100,
  11.             sayHi: function () {
  12.                 console.log("信息: name=", this.name, " age=", this.age);
  13.             }
  14.         }
  15.         monster.f10 = function () {
  16.             console.log("哈哈");
  17.         };
  18.         monster.sayHi();
  19.         monster.f10();
  20.         // ES6-对象方法定义
  21.         let monster2 = {
  22.             name: "红孩儿~",
  23.             age: 900,
  24.             sayHi() {
  25.                 console.log("信息: name=", this.name, " age=", this.age);
  26.             },
  27.             f1() {
  28.                 console.log("f1()");
  29.             }
  30.         }
  31.         monster2.sayHi();
  32.         monster2.f1();
  33.  
  34.     </script>
  35. </head>
  36. <body>
  37.  
  38. </body>
  39. </html>

3.对象运算符的拓展

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象运算符的扩展</title>
  6.     <script type="text/javascript">
  7.         let cat = {name: "小花猫", age: 2};
  8.         // let cat2 = cat;
  9.         // cat2.name = "大花猫";
  10.         // console.log("cat=>", cat);
  11.         // console.log("cat2=>", cat2);//
  12.         // 拷贝对象(深拷贝)
  13.         let cat2 = {...cat};
  14.         cat2.name = "中花猫";
  15.         console.log("cat=>", cat);//小花猫
  16.         console.log("cat2=>", cat2);//中花猫
  17.  
  18.         // 合并对象[深拷贝]
  19.         let monster = {name: "白骨精", age: 100};
  20.         let car = {brand: "奔驰", price: 800000};
  21.         let monster_car = {...monster, ...car}
  22.         monster_car.name = "狐狸精";
  23.         console.log("monster=>", monster);
  24.         console.log("monster_car=>", monster_car);
  25.  
  26.     </script>
  27. </head>
  28. <body>
  29.  
  30. </body>
  31. </html>

七、箭头函数

1.基本介绍

1. 箭头函数提供更加简洁的函数书写方式。

2. 基本语法是：(参数列表) => { 函数体 }

3. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()

4. 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块

5. 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回

6. 箭头函数多用于匿名函数的定义

2.箭头函数的基本使用

单个形式参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>箭头函数的使用</title>
  6.     <script type="text/javascript">
  7.         // 传统定义函数
  8.         var f1 = function (n) {
  9.             return n * 2
  10.         }
  11.         console.log("传统= " + f1(2))
  12.         // ES6 , 箭头函数使用
  13.  
  14.         let f2 = (n) => {
  15.             return n * 2;
  16.         }
  17.         console.log("f2() 结果= ", f2(100));//200
  18.         //上面的es6 函数写法，还可以简化
  19.         let f3 = n => n * 3;
  20.         console.log("f3() 结果=", f3(100));//300
  21.  
  22.         //函数也可以传给一个变量=> 看看java基础匿名内部类
  23.         function hi(f4) {
  24.             console.log(f4(900));
  25.         }
  26.         hi((n) => {
  27.             return n + 100
  28.         });
  29.         hi((n) => {
  30.             return n - 100
  31.         });
  32.  
  33.  
  34.     </script>
  35. </head>
  36. <body>
  37.  
  38. </body>
  39. </html>

多个形式参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>箭头函数使用案例2</title>
  6.     <script type="text/javascript">
  7.         // 传统
  8.         var f1 = function (n, m) {
  9.             var res = 0
  10.             for (var i = n; i <= m; i++) {
  11.                 res += i
  12.             }
  13.             return res
  14.         }
  15.         console.log("传统= " + f1(1, 10))
  16.         // ES6 , 箭头函数使用
  17.         let f2 = (n, m) => {
  18.             var res = 0
  19.             for (var i = n; i <= m; i++) {
  20.                 res += i
  21.             }
  22.             return res
  23.         };
  24.         console.log(f2(1, 10));
  25.     </script>
  26. </head>
  27. <body>
  28.  
  29. </body>
  30. </html>

箭头函数加对象解构       

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>箭头函数+对象解构</title>
  6.     <script type="text/javascript">
  7.         const monster = {
  8.             name: "红孩儿",
  9.             age: 1000,
  10.             skill: ['红缨枪', '三位真火']
  11.         }
  12.         //要求：在方法形参取出monster对象的skill属性
  13.         //传统方式
  14.  
  15.         function f1(monster) {
  16.             console.log("skill=", monster.skill);
  17.         }
  18.  
  19.         f1(monster);
  20.  
  21.         //箭头函数
  22.  
  23.         let f2 = ({skill}) => {
  24.             console.log("skill=", skill);
  25.         }
  26.         //1. f2 传入对象 monster
  27.         //2. f2形参是 {skill} , 所以es6的对象解构特性, 会把monster对象的 skill属性赋给
  28.         //   skill
  29.         //3. 对象解构的前提就是 {skill}的skill 和 monster的 skill属性是一致
  30.         f2(monster);
  31.  
  32.         //箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
  33.         let f3 = ({age, name, skill}) => {
  34.             console.log("skill=", skill, " age=", age, " name=", name);
  35.         }
  36.  
  37.         f3(monster);
  38.  
  39.  
  40.     </script>
  41. </head>
  42. <body>
  43.  
  44. </body>
  45. </html>

 注意事项

1 箭头函数+对象解构, 注意参数是({属性名})

2 ({属性名}) 是由{} 包括的，属性名需要和对象属性名一致，使用到了对象解构

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/113219
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号