ECMAScript 6初始

最新推荐文章于 2024-05-28 16:35:04 发布
最新推荐文章于 2024-05-28 16:35:04 发布
阅读量404 收藏
点赞数
分类专栏： javaweb增删改查 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41093260/article/details/119107087
版权

ECMAScript 6初始


为什么要学习ES6,因为学习vue之前需要掌握ES6.
那么ES6是什么呢?
简单来说是对JavaScript的升级版, 对JavaScript有了更加严格的语法控制,ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。
ES6的一些特性:

1. let声明方式

  • let与var的区别
    • let有局部变量的概念,而var没有局部变量的概念
    • let只能声明一次赋值多次,而var可以多次声明多次赋值
    • let不支持变量提升,而var支持变量提升(变量提升:当未声明变量时,直接调用未有的变量名,不会报错)
  • let的语法
    let 变量名 = 值;
    代码实例如下:
		/*
         let与var的区别:
          1. let是局部变量,var没有局部或者去全局的变量概念
          2. let只能一次声明一次使用,var可以多次声明多次使用
          3. let不支持变量提升,var可以变量提升,js代码中上面报错,不再往下执行
        */ 
        {
            
            // let的声明
            let m = 100;
            var i = 10;
            // console.log(m);
        }
        // console.log(i);
        // 变量提升
        console.log(n); //undefined
        var n = 1000;
        console.log(name); //Cannot access 'name' before
        let name = "张三";

3. 常量声明方式

  • 关键字:const
  • 常量特性:
    • 一旦赋值,不允许再次进行赋值
    • 被const修饰的变量,必须初始化赋值,不可先声明后赋值
  • 语法格式:
    • const 变量名 = 初始化值;
      代码实例如下:
	   const PI = 3.1415926;
        //PI=3.14; //Assignment to constant variable.
       console.log(PI);
       const WEEK_DAY = 7;
        //    WEEK_DAY = 7 ;
        //不可以声明在赋值
       //Missing initializer in const declaration
       console.log(WEEK_DAY);

4. 解构赋值

定义:将多次复杂的声明赋值,一次性赋值

  • 语法格式:
    • let [变量1,变量2…] = [数据1,数据2…]
  • 作用:
    • 基本数据解构赋值
      • 同时赋值同类型多个变量时,可以直接let[]一一对应
    • 对象解构赋值
      • 根据当前对象的属性名,与现解构的对象属性相对象,类似于JavaBean的的使用
        代码实例如下:
	   //基本数据解构
       //传统
       let a = 1, b = 2, c = 3;
       console.log(a,b,c);
       //ES6,数组解构
        let [x,y,z] = [10,20,30];
        console.log(x,y,z);

        //对象解构
        let user = {name:"helen",age:18};
        //传统
        let name1 = user.name;
        let age1 = user.age;
        console.log(name1,age1);
        //ES6
        let {name,age} = user;
        console.log(name,age);

4. 模板字符串

定义:模板,也叫超级字符串,可以使用特定的表达式,操作变量,函数,运算

  • 语法格式:
    • 声明,使用反单引号 `
    • 操作函数,变量,运算,使用${}
  • 作用:
    • 声明一个模板字符串,含有特定的格式
      代码实例如下:
let name = "郭富城";
let age = 19;
function fun(){
   return "对你爱不完";
}
let message = `Hi, My Name is ${name},next year I age ${age+1},function ${fun()}`;
console.log(message);

5. 声明对象简写

  • 定义:将需要传入对象中的属性,可以先进行定义赋值,后声明对象将属性传入
  • 语法格式:
    声明方式 对象名 = {属性1,属性2…}
    代码实例如下:
        let title = "对你爱不完";
        let content = "对你爱,爱,爱不完";
        //传统
        let song = {title:title,content:content};
        console.log("传统"+song);
        //ES6
        let song1 = {title,content};
        console.log("ES6"+song1);

6. 声明方法简写

  • 定义:将function关键字声明省略
  • 语法:
    方法名(){方法体}
    代码实例如下:
    <script>
        /* 
           定义方法简写

        */    
       //传统
       let student = {
           sayHi:function(){
               return "唱歌";
           }
       }
       console.log(student.sayHi());//唱歌
       //ES6
       let student2 = {
           "name":"大黄",
           sayHi(){
               return "喝酒";
           }
       }
       console.log(student2.sayHi());//喝酒
    </script>

7. 对象扩展运算符

  • 扩展内容:
    • 实现对象复制功能,且是分配的新地址的对象
      • 两种情况
      • 第一种:当使用copy对象实现的话,copy出来的对象将是一个新地址
      • 第二种:当使用=赋值对象的话,赋值出来的对象与之前对象是同一个地址,也就是说只是指向了同一块内存
    • 对象的合并
      • 将两个独立的对象进行了重新组合
        代码实例如下:
    <script>
        /* 
            对象扩展运算符
        */    
        let  user = {name:"郭富城",age:110};
       //1.对象的copy
       let user1 = {...user};
       /*
        这里要补充的是:当使用copy一个对象时,被copy对象时在内存中重新定义的对象,与原对象地址是不同的
        其次,就是当赋值对象时,这是的两个对象是指向内存中同一块地址,所以是为true
       */
       console.log(user1.name,user1.age); //郭富城 110
       //赋值
       let user2 = user ;
       console.log(user==user1);//false
       console.log(user==user2);//true

       //2.对象的合并
       let age = {age:15};
       let name = {name:"张三"};
       let person = {...name,...age};
       console.log(person.name,person.age);//张三 15
    </script>

8.函数的默认参数

  • 定义:当一个函数的参数有默认值的话,如果不定义话,将默认使用默认值
  • 以下分为了多种情况进行演示,代码比较直观
    代码实例如下:
    <script>
        /* 
            js方法中的默认参数
        */
       function fun(name,age=20){
           console.log(name+","+age);
       }
       //覆盖
       fun("张三",22);//张三,22
       //无赋值
       fun("张三");//张三,20
       //赋值为null
       fun("张三",null);//张三,null
       //赋值为空
       fun("张三","");//张三,
       //赋值为undefined
       fun("张三",undefined);//张三,20
    </script>

9.不定参数

  • 定义:不定参数,指的是不知道有多少个同类型的参数,使用关键字"…参数名"表示,其中多个参数包含不定参数,必须将不定参数放在末尾.
  • 语法:
    function 方法名(…参数名){方法体}
  • 作用:可以传无数个同类型的参数
    代码实例如下:
    <script>
        /* 
            不定参数
                如果出现多个参数时,不定参数必须放在末尾
        */
        function show(age,...names){
           console.log(names.length);
       }

       //不传参
       show();//0
       //多个参数
       show(21,"张三");//1
       //多个names参数
       show(21,"张三","李四","王五");//3
    </script>

10.箭头函数(类似java的lambda表达式)

  • 定义:可以省却代码的数量,使用=>来表示
  • 语法格式:
    (参数)=>返回值;
    function关键字可以直接省略
    =>:{}
    方法体当只有返回值时,可以直接写返回值
    方法体当不只有返回值时,需要=>{}使用大括号声明,大括号中写具体的方法
    代码实例如下:
    <script>
        /* 
            箭头表达式:类似于java的lambda表达式
        */    
       //传统声明
       let fun = function(param){
           return "Hello,"+param;
       }
       console.log(fun("ES6"));//Hello,ES6
       //箭头表达式
       let fun1 = param=>"Hello,"+param;
       console.log(fun1("自由"));//Hello,自由

       //方法体含有除返回值之外内容
       let fun2 = function(param){
           let str = "今天是星期几?";
           return str + param;
       }
       console.log(fun2("周一"));//今天是星期几?周一
       //转换箭头
       let fun3 = param=>{
            let str = "今天是星期几?";
            return str + param;
       }
       console.log(fun3("周一啊"));//今天是星期几?周一啊

       //方法中含多个参数
       let fun4 = function(a,b){
            return a+b;
       }
       console.log(fun4(1,2));//3
       //转换
       let fun5 = (a,b)=>a+b;
       console.log(fun5(1,2));//3
    </script>

11.Promis(许诺)

  • 定义:当出现多个请求方法,且是环环嵌套,维护起来比较麻烦,且不利于阅读,Promis可以将多个请求体一一铺开,使其便于维护与阅读
  • 属性:
    resolve:成功时调用
    reject:失败时调用
  • then:
    回调函数
    代码实例如下:
    <script>
        /* 
            Promis:
            定义:负责将复杂嵌套请求或方法,进行铺展开来,便于维护
        */

        //未使用Promis之前,多次请求
        //1.创建一个json文件,模仿请求服务器
        /*
            preson.json
            {
                "id":"1",
                "name":"张三",
                "age":23
            }
            address.json
            {
                "person":[
                    {
                        "id":"1",
                        "address":"北京"
                    },
                    {
                        "id":"2",
                        "address":"河南"
                    }
                ]
            }
        */
        //2.第一请求倒计时请求1秒后执行
        setTimeout(function(){
            //ajax请求
            $.get("./person.json",function(data){
                //2.2将取到数据存贮到 presonData以便下面查找
                let personData = data;
                //3.第二次请求
                $.get("./address.json",function(data){
                    for(let i = 0 ;i < data.person.length;i++){
                        if(data.person[i].id==personData.id){
                            console.log(personData.name+"来自"+data.person[i].address);
                        }
                    }
                });
            });    
        },1000);

        //使用Promise
        let promis = new Promise(function(resolve,reject){
            //1.第一次执行倒计时
            setTimeout(function(){
                resolve();//成功调用
            },1000);
        });
        //2.第一次请求
        promis.then(function(){
            return new Promise(function(resolve,reject){
                //ajax请求
                $.get("./person.json",function(data){
                    //2.2将取到数据存贮到 presonData以便下面查找
                    let personData = data;
                    resolve(personData);//将成功参数传到下一个请求
                });
            });
            //3.第二次请求
        }).then(function(personData){
            $.get("./address.json",function(data){
                    for(let i = 0 ;i < data.person.length;i++){
                        if(data.person[i].id==personData.id){
                            console.log(personData.name+"来自"+data.person[i].address);
                        }
                    }
            });
            //如果还有请求的话,需要return new Promis继续下去return new Promise(function(resolve,reject){});
        });
        </script>

12.模态块开发

  • 定义:将多个功能,分为模态化开发,就像专门的人,做专门的事,面向对象的思想
  • 其中:
    定义了一个含有求圆面积,求圆周长的math.js
    定义了一个引用math.js的index.js
    在主要的html中引入index.js使其生效
    代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 记得加module不然会报错,Cannot use import statement outside a module -->
    <script src="index.js" type="module"></script>
</head>
<body>
</body>
</html>

<!--index.js-->
//引入外部的方法
import { area,perimeter } from "./math.js";
//调用方法
console.log(area(4));
console.log(perimeter(4));


<!--math.js-->
//1.定义计算圆面积
var area = function(radius){
    const PI = 3.1415926;
    return PI * radius * radius;
}
//2.定义计算圆周长
var perimeter = function(radius){
    const PI = 3.1415926;
    return PI * 2 * radius;
}
//声明出去
export{area,perimeter};
破晓Dawn
关注
专栏目录
JavaScript对象初始化的标准过程(对象字面量) - 基于ECMAScript-262 V5.1
Interface Oriented Blogging
02-01 1487
对象初始化 English 对象初始化是一个以直接量的方式描述对象的初始化过程的表达式。它是用花括号括起来的由零或者多对属性名 / 关联值组成的列表，值不需要是直接量，每次对象初始化被执行到时他们会执行一次。 语法： ObjectLiteral : { } { PropertyNameAndValueList } { Prope
ECMAScript6详解
互联网底层民工的博客
11-03 1091
ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范ECMAScript6.0是JavaScript语言的下一代标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 6 新特性详解
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
05-25 1213
ECMAScript 6，也称为ECMAScript2015，是ECMAScript标准的最新版本。ES6是该语言的一次重大更新，也是自2009年ES5标准化以来该语言的首次更新。目前正在主要的JavaScript引擎中实现这些功能。有关ECMAScript 6语言的完整规范，请参阅ES6标准。箭头函数类增强对象字面量模板字符串解构赋值默认参数、剩余参数、展开操作符let、constIterators（迭代器）、for ofGenerators（生成器）
ECMAScript6
最新发布
2401_85112041的博客
05-28 277
ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。语言语法 – 语法解析规则、关键字、语句、声明、运算符等。类型 – 布尔型、数字、字符串、对象等。const 声明常量。
02-ECMAScript 6 简介
Logan的博客
08-15 230
一、ECMAScript 1、ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。 2、ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。 3、什么是 ECMA-262 Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个 4、ECMA-262 历史
ECMAScript 6基础总结
qq_57186420的博客
07-29 169
<script> //定义常量 const PI=6 PI=3 //常量值一旦定义，不能改变,不能再进行赋值 console.log(PI) //会报 Assignment to constant variable //定义常量必须初始化赋值 const AA //Uncaught SyntaxError: Missing initializer in const declaration </script> .
ECMAScript 6
qq_43102730的博客
10-11 257
ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准， 2015 年 6 月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 6（一）
weixin_43816711的博客
09-24 1074
ECMAScript 6 （一） 一、ECMAScript 6 简介 ECMAScript和JavaScript 1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准从一开始就是针对JavaScript语言制定的。 ​ 因此，ECMAScript和Ja
【前端】ECMAScript6从入门到进阶
互联网小阿祥
09-29 1310
ECMAScript6入门到进阶
ECMAScript6新增功能续
HH
10-17 411
ECMAScript6
深度解析 ECMAScript 6
05-01
**ECMAScript 6（简称ES6）是JavaScript语言的一个重大升级版本，它引入了许多新的特性和语法糖，极大地提升了开发效率和代码的可读性。对于已经掌握基础JavaScript的开发者来说，理解并掌握ES6的新特性至关重要。**...
详解ECMAScript6入门--Class对象
08-30
在ECMAScript 6（简称ES6）中，引入了一个重要的新特性——Class对象，它为JavaScript提供了更接近传统面向对象编程语言的语法结构。在ES5以前，JavaScript使用构造函数和原型链来实现面向对象的特性，而ES6的Class...
ECMAScript 6 入门（第三版）
08-29
**ECMAScript 6 入门（第三版）** ECMAScript 6，通常被称为ES6，是JavaScript语言的一个重大更新，它引入了一系列新的特性和语法改进，旨在提高开发效率和代码可读性。这本书“ECMAScript 6 入门（第三版）”为...
CursoEmVideoJavaScript：JavaScript和ECMAScript初始版本
02-24
"CursoEmVideoJavaScript：JavaScript和ECMAScript初始版本"这个课程主要涵盖了JavaScript的基础知识，以及其背后的ECMAScript规范。JavaScript是一种广泛应用于网页和网络应用的脚本语言，它赋予了网页动态功能，...
ECMAScript6中Map/WeakMap详解
09-03
在ECMAScript6中，Map和WeakMap是两种新的数据结构，它们的引入是为了更好地管理和操作键值对。本文将详细解析这两种结构的特点和用法。 ### 1. Map Map对象是JavaScript中的一个强大工具，它允许我们将任意类型的...
JavaWeb之查询数据库,显示到页面
Dawn
06-30 6721
需求: 将数据库中send_email表展示到页面上 分析 创建jsp页面 拿到list<Email>将数据显示在页面上 创建BeanEmail实体类 创建EmailServlet,BaseServlet类 响应编码设置 调用EmailService的findAll()方法,返回List<Email> 使用request进行转发到jsp页面,携带list集合 创建EmailService接口 调用EmailDao中的findAll()方法,返回List<Emai
JavaWeb之根据id删除一条数据,更新到页面
Dawn
06-30 3623
需求 根据页面jsp点击删除之后,数据库中删除一条记录,刷新页面 分析 jsp页面 将点击本条数据的id取到 get请求发送到servlet的delByIdEmail,进行拼接 EmailServlet 获取页面传来的id 调用service的删除方法 重定向到show EmailService 调用dao的deleteByIdEmail方法 EmailDao 定义sql语句 调用template的update方法返回一个int 类型的count 代码实现 jsp页面 &lt
JavaWeb之添加数据,显示到页面
Dawn
06-30 1929
需求: 从jsp页面添加一条记录到数据库,且显示到界面 分析: 创建jsp页面 创建EmailServlet>addEmail方法 设置请求编码 获取所有parameter的值 封装对象 调用addEmail方法 重定向到email/show下 创建EmailService接口>addEmail方法 调用addEmail(Email)方法 创建EmailDao接口>addEmail方法 创建sql语句 调用template的update方法 代码实现 jsp页面 &l
JavaWeb之更新一条数据,显示到页面
Dawn
07-01 1206
需求 根据按钮点击修改之后,跳转修改页面,且回显原邮箱信息. 点击保存,更改邮箱信息. 分析 jsp 点击之后携带id跳转到回显的servlet 修改jsp,点击保存,请求更新servlet servlet 回显servlet 设置响应编码 取到页面id 根据id调用service的findByIdEmail(id)方法,返回email对象 将email存入request域,跳转到updateEmail.jsp页面 更新servlet 设置请求编码 获取页面所有值,封装为map 封装对
深入理解ECMAScript 6：全面剖析ES6新特性
"ECMAScript 6入门（第二版）" 在JavaScript的世界里，ECMAScript 6（简称ES6）是一个重要的里程碑，它引入了大量的新特性，极大地提升了语言的表达能力和开发效率。这本书——《ECMAScript 6入门》（第二版），...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值