ES6详细解说，基础教学（一）

于 2021-03-08 20:39:03 发布
阅读量186 收藏 2
点赞数
分类专栏： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52426181/article/details/114548510
版权

一、ECMAScript简介

ECMA (欧洲计算机制造商协会)

这个组织的目标是评估、开发和认可计算机标准。

1996 年 11 月，Netscape（ JavaScript 的创造者，网景公司），决定将 JavaScript提交给ECMA。1997年，ECMA发布并规定了浏览器脚本语言的标准，即ECMA1.0版。

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

  • ES5 : 2009年发布
  • ES6 : 2015年发布, 也称为ECMA2015
  • ES7 : 2016年发布, 也称为ECMA2016
  • ES10:2019年发布
  • ES 2020

**总结：**ECMAScript 和 JavaScript 的关系是，前者是后者的规则，后者是前者的一种实现。

二、严格模式

JavaScript 严格模式, 即在严格的条件下运行。

关键词：'use strict’

为什么有严格模式

  • 消除 JavaScript 语法的一些不合理、不严谨之处，减少一些怪异行为
  • 消除代码运行的一些不安全之处，保证代码运行的安全
  • 提高编译器效率，增加运行速度
  • 为未来新版本（es6）的 JavaScript 做好铺垫

严格模式的几个特点说明

  1. 严格模式下，变量使用前，必须要先声明

           var age=20;
       console.log(age);

  2. 严格模式下，禁止函数中的 this 指向Window

           function f(username,pwd){
           this.username=username;
           this.pwd=pwd;
           return this.username+this.pwd
       } 
       console.log(f("rypy",123456));

  3. 严格模式下，eval函数存在独立作用域

        var username="rypy";
    eval("var username='rypy1';console.log(username);");//将可执行类型的字符串代码转换为真的的代码。
    console.log(username);

三、let和const关键词

1、概念

let 定义变量，

const 定义常量，定义的常量必须再声明的时候初始化，且赋值以后不能改变(注：不能改变的类型包含：数值，字符串，布尔等基本类型)

const关键词的特性

​ 1、声明的时候，必须要初始化。否则会报错。

        var age;
        console.log(age);//undefined
        const age;
        console.log(age);//报错，变量未初始化

​ 2、声明的变量，初始化以后，值不能改变。否则报错。

        const age=20;
        age=30;//报错，不能改变值
        console.log(age);

2、特性：

2.1、块级作用域

        {
            var a=20;
        }
        console.log(a);
        {
            let b=30;
        }
        console.log(b);

2.2、同一作用域，不能重复声明

        {
            var a=20;
            var a=30;
            console.log(a);//30
        }
        {
            let b=20;
            let b=30;
            console.log(b);//报错，Identifier 'a' has already been declared   
        }

2.3、不存在变量提升（暂时性死区）

        {
            console.log(age);
            var age=20;
        } 
        {
            console.log("我是变量b的死区");
            console.log(b);
            console.log("sssss");
            console.log("aaaaaaa");
            console.log("我是变量b的死区");
            let b=30;
        }

3、应用

3.1 循环中的应用
        for(var i=0;i<5;i++){}
        console.log(i);//5
        for(let j=0;j<5;j++){}
        console.log(j);//报错，j is not defined
3.2 点击事件中的应用
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
   <script>
		let btns=document.querySelectorAll("button");
        for(let i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                console.log("按钮被点击"+i);
            }
        }
    </script>

四、解构赋值

4.1 概念：

ES6 允许按照一定模式（即规则），从数组和对象中提取值，对变量进行赋值，这被称为解构赋值（Destructuring）。

4.2 数组解构

4.2.1 形式
let [a,b,c,d]=[1,2,3,4];
4.2.2 规则

数组的解构赋值，先找形式[ ],再找" ，"，进行一对一匹配。

4.2.3 用法
完全解构
        let [a,b,c,d,e,f]=[1,2,3,4,5,6];
不完全解构
1. 值比变量多
        let [a,b,c]=[1,2,3,4,5,6];
        console.log(a);
        console.log(b);
        console.log(c);
2.变量比值多
        let [a,b,c,d]=[1,2];
        console.log(c);//undefined

**注：**在ES6中没有null关键，如果变量没有赋值默认都是undefined

        let [a,b]=false;
        console.log(a);//报错？因为不是数组的形式
4.2.4 默认值
概念

数组的默认值指在等号的左边给变量进行赋值。由于代码的执行顺序是从上到下，从左到右，所以先默认值，再赋值。

特例规则

1.当赋值的变量中，赋值部分为undefined的时候，默认值优先。

2.当赋值的变量中，赋值部分为null的时候，变量的值为null。

        let [a,b=3,c]=[1,2,3];
        console.log(b);
        let [a,b=22,c]=[1,,3];
        console.log(b);//22
        let [a,b=22,c]=[1,null,3];
        console.log(b);//null
4.2.5 作用
数组交换（重新赋值）
        let a=1;
        let b=2;
        let c=3;
        [a,b,c]=[c,c,a];//值的交换。
        console.log(a);
        console.log(b);
        console.log(c);

4.3 对象解构

和数组不同的是，对象是无序的。

4.3.1 形式
let user={username:"rypy",pwd:"123456"};
let {username}=user;
console.log(username);
4.3.2 规则：

在对象的解构赋值中，先找{}，再找键名，键名相同赋值成功，键名不同赋值失败。

4.3.3 用法：

完全解构

        let {username:uname,pwd:pwd}={username:"rypy",pwd:123456};
        console.log(uname);
        console.log(pwd);

不完全解构

  1. 值比变量多
let {username}={username:"rypy",pwd:123456};
  1. 变量比值多
let {username,pwd}={username:"rypy"};
4.3.4 默认值
概念

对象的解构赋值默认值，指在等号左边给变量进行赋值

 let {username:uname="admin",pwd:pwd}={pwd:123456};
console.log(uname);
let {username="admin1"}={};
console.log(username);

特例规则

let {username:uname="rypy"}={username:"admin"};
console.log(uname);
let {username:uname="rypy"}={};
console.log(uname);
let {username:uname="rypy",pwd}={username:null,pwd:""};
console.log(uname);//null
console.log(pwd);//""
4.3.5 使用场景（多用于ajax返回的json数据）
可以解构JSON格式的数据，可以按需解构

五、模板字符串

5.1 写法

 `字符串1${}字符串2`

5.2 用法（好处）

1、模板字符串可以输出中英文字符，

2、模板字符串可以输出变量

3、模板字符串可以输出对象的属性

4、模板字符串可以调用函数，并且获取到函数的返回值

5、模板字符串可以使用标签，并且可以将标签转义

6、模板字符串可以使用javascript代码进行逻辑判断（三目运算符）

六、对象扩展

6.1 属性简写

        let username="rypy";
        let pwd=123456;
        let user={username,pwd};//对象的属性和值的简写
        //let user={username:"rypy",pwd:123456}
        console.log(user);

6.2 方法简写

        let obj={
            f(){
                console.log("我是对象的方法");
            }
        }
        obj.f()

6.3 变量值作为属性名和方法名

变量的值作为对象中的属性名,可以采用[]获取变量的值。变量是可以做拼接操作的。

		let a="username";
        let b="getUsername";
        let c="aaa"
        let obj={
            [a+c]:"rypy",
            [b](){
                return "haha";
            }
        }
        //获取对象中变量的属性值
        console.log(obj[a]);
        console.log(obj.username);
        console.log(obj[b]());
        console.log(obj.getUsername());

6.4 对象的常用方法

6.4.1 合并对象

对象.assign(参数1,参数2…参数n)：将多个对象序列进行合并操作,即是将参数2…参数n合并到参数1上(此合并生成的参数1是深拷贝)，并生成新的对象(此对象是浅拷贝参数1)。

        Object.assign(user,user1,user2);
        console.log(user);
        user1.sex="nv";
        console.log(user1);
        console.log(user);

        let obj= Object.assign(user,user1,user2);//方法的返回值和参数1之间是浅拷贝。
        console.log(obj);
        console.log(user);
        obj.username="admin";
        console.log(user);
6.4.2 获取对象的键名

Object.keys(对象)：以一维数组的形式输出对象的键名。

        let user={username: "rypy", pwd: 123456, sex: "男", admin: "0"};
        console.log(Object.keys(user));
6.4.3 获取对象的键值

Object.values(对象):以一维数组的形式输出对象的键值

        let user={username: "rypy", pwd: 123456, sex: "男", admin: "0"};
        console.log(Object.values(user));
6.4.4 获取对象的键值对数组

Object.entries(对象):将对象的键值对转换为二维数组，每个键名和键值形成一个一维数组。

        let user={username: "rypy", pwd: 123456, sex: "男", admin: "0"};
        console.log(Object.entries(user));
6.4.5 给对象添加新的属性

1、Object.create(原对象，{新属性配置});给对象添加新的属性

let user={username:"rypy",pwd:123456};
        let newUser=Object.create(user,{
            admin:{
                value:"0",//设置新对象的属性值
                writable:true,//设置新对象的属性值是否可以改变，默认值是false
                configurable:true,//设置新对象的属性值是否可以删除，默认值是false
                enumerable:true,//设值新对象的属性值是否可以枚举(循环输出)，默认值false
            },
            admin1:{
                value:"hhhh"
            }
        });
        console.log(user);
        newUser.admin="1";
       // delete newUser.admin;//删除对象中的属性
        console.log(newUser);
        
        for(let i in newUser){
            console.log(newUser[i]);
        }

2、Object.defineProperties(原对象，新属性方法),向对象中添加属性。

let user={username:"rypy",pwd:123456};
    let newUser=Object.defineProperties(user,{
        admin:{
            get(){//获取对象中的属性的时候被调用,从而获取属性的值
                //console.log("我被调用get");
                return this.adminvalue;
            },
            set(value){//设置对象中的属性值的时候被调用，从而设置属性的值
                //console.log("我被调用set"+value);
                this.adminvalue=value;
            }
        }
    });
    newUser.admin="aaaa";
    // console.log(newUser.admin);
    console.log(user);//
    console.log(newUser);
    //user.username="admin";
    newUser.username="admin1";
    console.log(user);
    console.log(newUser);

七、数组的扩展

7.1 循环遍历数组

1、引用.forEach()，遍历数组，回调函数中的参数一为数组的元素，回调函数参数二为数组的下标。、

        arr.forEach(function(item,index){
            console.log(item ,index);
        });

2、引用.map(),遍历数组，根据返回生成新的数组，数组的个数与原数组相同…

        let newArr=arr.map(function(item,index){
            return item+5;
        });
        console.log(newArr);

3、引用.filter(),遍历数组,根据返回值的布尔类型结果，生成新的数组。功能：通常完成数组的过滤。

        let newArr=arr.filter(function(item,index){
            return item>5;
        });
        console.log(newArr);

7.2 将其它类型转换为数组

1、Array.from(对象),将含有length属性的且键名为数值的对象，转换为真正的数组。注：必须要给length属性赋值,如果不设置length属性，则生成空数组。

        let obj={0:"rypy",1:"aaaa",19:"bbbb",length:20}//注：此对象的键名必须是Number类型，必须要含有长度属性
        console.log( Array.from(obj));

2、Array.of(),将序列形式的参数转换为数组。

       console.log(Array.of(1,3,5,7,3,"sasdfadf",6,8,function a(){},78,9,true,0,5,3,8));

7.3 for形式输出数组

let of:循环输出数组元素

        let obj={username:"rypy",pwd:123456,isadmin:"0"};
        for(let [key,values] of Object.entries(obj)){
            //[key,values]=item
            if(key==="pwd")obj[key]=values.toString();
        }
小豆很优秀
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值