2022.8.14 ES6

03、Es6

3.1、ES6的概述

 

 

ECMAScript的快速发展：

 

 

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。

[类型]– 布尔型、数字、字符串、对象等。

[原型和继承]

内建对象和函数的

[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。

ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。 它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。

3.2、ES6的语法：let和const命令

变量和常量的严格区分。

核心代码：

新建html如下

 <!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>
         // 传统定义 变量和常量 都使用var
         var name='taohy';
         var link ='http://baidu.com';
         var PI=Math.PI;
     
         console.log(name);
         console.log(link);
         console.log(PI);
     
         // ES6定义
         let name2 = 'dabao';
         let link2 = 'http://bing.com';
         const PI2 =Math.PI;
         
         console.log(name2);
         console.log(link2);
         console.log(PI2);
     </script>
     
 </body>
 </html>

 

 

双击运行如下：

 

 

小结 let : 可变变量 const 是常量 var：最原始。

3.2.1、ES6 let和const和var的区别

新建html

 <!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 const解决
         // 1. var变量穿透的问题(var定义的相当于全局变量)
         for (let i = 0; i < 5; i++) {
             console.log(i);
         }
         // console.log(i);  会打印5
     
         // 2. 常量修改的问题(用var可以修改常量,用const就不能修改)
         const PI = Math.PI;
         PI = 100;
         console.log(PI);
     
         // 在实际开发和生产中，如果是小程序，uniapp或者脚手架中，可以大胆使用let和const
         // 在web开发中，建议还是var，有些浏览器不支持ES6
     </script>
     </body>
     
 </body>
 </html>

3.3、ES6的语法：模板字符串

以前： 我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在： `` 【反引号】

 

 

用途：将表达式嵌入字符串中进行拼接。用${}来界定。ES6反引号(``)直接搞定。

  • 新建一个如下：

 <!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>
         // 模板字符串
         var person = {
             name: 'taohy',
             address: '江苏省苏州市',
             link: 'csdn'
         }
         // 传统 ' '  " " 拼接
         let address = '我叫' + person.name + ',地址在' + person.address + ',链接在' + person.link;
         console.log(address);
         
         // ES6 ` ${} `  拼接
         let address2 = `我叫${person.name},地址在${person.address},链接在${person.link}`;
         console.log(address2);
         
     </script>
      
 </body>
 </html>

 

 

3.4、ES6的语法：函数默认参数与箭头函数

函数默认参数 在方法的参数后面加上一个默认值即可 核心代码：

新建html

 <!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>
         // b默认参数值为20，不传递b时，默认20；传递就为实时值
         function sum(a,b=20){
             return a+b;
         }
         //100为a的值
         var sum = sum(100);
         console.log('result:'+sum);
         </script>
         
 </body>
 </html>

箭头函数

箭头函数简化函数的定义，可以让我们不用使用function关键字

箭头函数最直观的三个特点。

  • 不需要function关键字来创建函数

  • 省略return关键字

  • 继承当前上下文的 this 关键字

核心代码

新建html：

 <!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>
         //重点 在未来项目开发项目中，比如小程序uniapp或者一些常见的脚手架大量使用
         function sum(a, b) {
             return a + b;
         }
      
         // 箭头函数 改进1
         var sum = (a, b) => {
             return a + b;
         }
      
         // 箭头函数 改进2
         var sum =(a,b) => a + b;
      
         // 通过上面的例子，找到规律
         // 规律1 去掉function
         // 规律2 在括号后面加箭头
         // 规律3 如果逻辑代码中仅有return 可以直接全部省去(如果有逻辑体，不能省略)
         // 规律4 如果参数只有一个，可以把括号也可以省略（如果多个参数，不能省略）
      </script>
      
 </body>
 </html>

3.5、ES6的语法：对象初始化简写

核心代码

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

新建一个html

 <!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>
         // 传统对象
         var info = {
             name: '小明',
             age: 20,
             link: 'csdn',
             go: function () {
                 console.log('我骑车上班！');
             }
         }
     
         // ES6简写
         // 因为对象是key：value存在
         // 1.如果key和变量的名字一致，可以指定一次即可
         // 2.如果value是一个函数，可以把 :function 去掉，只剩下()即可
         var name = 'taohy';
         var age = 20;
         var link = 'csdn';
         var info2 = {
             //本来这样写 name: name,  简写后如下
             name,
             age,
             link,
             go () {
                 console.log('我骑车上班！')
             }
         }
     
         console.log(info2.name);
         console.log(info2.age);
         console.log(info2.link);
         info2.go();
     </script>
     
 </body>
 </html>

 

 

对象简写案例

 <!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>
     <form action="">
         <p>账号：<input type="text" id="user"></p>
         <p>密码：<input type="password" id="password"></p>
         <p><input type="button" value="登录" id="loginbtn"></p>
     </form>
 ​
 ​
     <script>
         // document.getElementById('button').οnclick=funtion(){}
 ​
         $('#loginbtn').on('click', function () {
             var account = $('#user').val();
             var pwd = $('#password').val();
 ​
             // 这是一个对象 将account赋值给pars对象的user字段
             // var pars ={'user': account, 'password': pwd};
 ​
             // 上面对象简写的应用场景 前提是名字要一致
             var pars = {account, pwd };
 ​
             // 执行异步请求
             $ajax({
                 type: 'post',
                 url: 'xxx',
                 //对象传给data
                 data: pars,
                 // success: function () {
                 // 这是上面的简写，可以去掉function    
                 success() {
                 }
             })
         });
       </script>
       
 </body>
 </html><!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>
     <form action="">
         <p>账号：<input type="text" id="user"></p>
         <p>密码：<input type="password" id="password"></p>
         <p><input type="button" value="登录" id="loginbtn"></p>
     </form>
 ​
 ​
     <script>
         // document.getElementById('button').οnclick=funtion(){}
 ​
         $('#loginbtn').on('click', function () {
             var account = $('#user').val();
             var pwd = $('#password').val();
 ​
             // 这是一个对象 将account赋值给pars对象的user字段
             // var pars ={'user': account, 'password': pwd};
 ​
             // 上面对象简写的应用场景 前提是名字要一致
             var pars = {account, pwd };
 ​
             // 执行异步请求
             $ajax({
                 type: 'post',
                 url: 'xxx',
                 //对象传给data
                 data: pars,
                 // success: function () {
                 // 这是上面的简写，可以去掉function    
                 success() {
                 }
             })
         });
       </script>
       
 </body>
 </html>

3.6、ES6的语法：对象解构

核心代码

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

 <!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>
         // 对象是key:value存在，获取对象属性和方法的方式有两种
         // 方法1: 通过.
         // 方法2: 通过[]
         var name = 'taohy';
         var age = 20;
         var link = 'csdn';
 ​
         var info2 = {
             name,
             age,
             link,
             go() {
                 console.log('我骑车上班！')
             }
         }
         // 通过.方式
         console.log(info2.name);
         console.log(info2.age);
         console.log(info2.link);
         info2.go();
 ​
         // 通过[]方式 不加引号也行
         console.log(info2["name"]);
         console.log(info2["age"]);
         console.log(info2["link"]);
         info2['go']();
       
         console.log("ES6 快速获取属性和方法的一种形式");
         //ES6 快速获取属性和方法的一种形式
         var {name,age,go}=info2;
         // 还原代码 相当于上面
         // var name = info2.name;
         // var age = info2.age;
         console.log(name,age);
         go();
       </script>
       
 </body>
 </html>

 

 

3.7、ES6的语法：传播操作符【…】

把一个对象的属性传播到另外一个对象中

 <!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>
         // 对象传播操作符 ...
         var person={
             name:'taohy',
             address:'suzhou',
             link:'csdn',
             phone:15250,
             go(){
                 console.log('开始上课了....')
             }
         };
 ​
         //解构出来  把person对象中剩余的参数传给person2对象
         var {name,address,...person2} = person;
         console.log(name);
         console.log(address);
         console.log(person2);  // 剩下的传播 {link: 'csdn', phone: 15250, go()}
         
         </script>
         
 </body>
 </html>

 

 

3.8、ES6的语法：数组map和reduce方法使用(了解)

目标：数组中map方法的应用场景

讲解：

数组中新增了map和reduce方法。

map()

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。

举例：有一个字符串数组，希望转为int数组

 <!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, 2, 3, 4, 5, 6, 7];
         // 需求，对数组中每个数 乘以2
         // 传统做法
         let arrNew = [];
         for (let i = 0; i < arr.length; i++) {
             //push：放到新的数组arrNew中
             arrNew.push(arr[i] * 2);
         }
         console.log(arrNew);
 ​
 ​
         console.log("==========map循环===========");
         // ES6 Map自带循环功能 并且会把处理的值回填到对应的位置
         var arrNew2 = arr.map(function (a) {
             return a * 2; // 必须return
         })
         console.log(arrNew2);
         console.log("==========map简写===========");
         // 上面简写
         var arrNew3 = arr.map(a => a * 2);
         console.log(arrNew3);
       
         console.log("======================");
         // map 处理对象的数据 
         // 实现对象年龄加1
         var users = [{ age: 10, name: '小绿' }, { age: 12, name: '小红' }];
 ​
         var usersNew= users.map(function (a) {
             a.age = a.age + 1;
             return a;
         })
         console.log(usersNew);
 ​
 ​
         console.log("======================");
         // 简写
         var usersNew1 = users.map(ele => {
             ele.age = ele.age + 1;
             return ele;
         })
         console.log(usersNew1);
       </script>
       
 </body>
 </html>

 

 

reduce()

reduce(function(),初始值（可选）) ：

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

  • 第一个参数是上一次reduce处理的结果

  • 第二个参数是数组中要处理的下一个元素 reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

 <!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>
         var arr= [1,2,3,4];
         // a=1 b=2 a+b=3,代替1,2的位置 arr[3,3,4]
         // a=3 b=3 a+b=6,代替3,3的位置 arr[6,4]
         // a=6 b=4 a+b=10
         var result= arr.reduce(function(a,b){
             return a+b;
         })
         console.log("result = ", result); // 全部相加 10
     </script>
 ​
 </body>
 </html>

ES6 js新建文件中，在node中可以直接使用

 

 

 

 

posted @ 2022-08-14 11:35  暴躁C语言  阅读(87)  评论(0)  编辑  收藏  举报