ES6-第一次课:概念和新特性-解构赋值-箭头函数等

ES指的是JS的核心ECMAScript部分(除BOM+DOM外),我们之前学的是ECMAScrip5,数字6表示版本号

一、ES6简介与特性

ES6全称为:ECMAScript 6.0

ES指的是JS的核心ECMAScript部分(除BOM+DOM外),我们之前学的是ECMAScrip5,数字6表示版本号。ES5版本在2009年成为标准,ES6虽然已经于2015年9月发布,但目前大部分浏览器均还在完善支持中,比如chrome浏览器支持度已经达到了98%以上。

那么如何解决这种兼容性:
1、使用在支持ES6的设备上
2、使用语法解析转换工具,把我们写的 ES6 语法转换成 ES5,常用的工具有 babel,jsx,traceur,es6-shim 等

学习ES6是为接下来的node.js和vue.js做准备。目前只需要了解如下几方面即可。

总结:ES6给人的感觉越来越像java这种后端语言了,所以才会有node.js这种可以让JavaScript做服务器端开发的平台。

二、ES6声明变量的方式let、const

  1. let:声明变量的另一种方式

    特点:
    1、是块级作用域,无论在哪里声明,都只能在所包含的作用域内访问,比如函数和代码块({}这种形式)都可以形成块级作用域
    2、在同级作用域内,不能重复声明,多个层级嵌套,只在最接近的{}内有效
    3、没有变量提升,也就是没有预解析,必须要先声明再使用(即所谓的暂死区,变量没执行时是不会被扫描到的,必须执行到才会将变量释放并可用)

//注意:
    1、var a=10; let a=1;
    //这种也是重复声明。不允许,违背了第2条规则。
    2、for(let i=0;i<5;i++){ let i=10;} 
    //这是允许的,可以认为()内的是主作用域,而{}是次作用域,不算重复声明。该函数的结果是会打印5次10,但如果{}内的let不要,那么则只会打印1次10,因为循环不满足条件,跳出了。

总结:有了以上特性,意味着之前使用闭包才能留住当前循环的那个值现在可以使用let即可,不再需要闭包。

  1. const:声明常量

    特点:
    1、声明时必须要赋值,且该值不可改变
    2、是块级作用域。同let
    3、对于对象,不能改对象本身,但可以改里面的属性值,也就是只能通过访问的方式改属性值。类似于指针,不能改变地址,但能改变里面的值
    4、建议使用大写字母来命名

    // 比如希望π的值是不变的
    const Pi=3.14;
    //比如希望ajax对象是不会被更改的
    const xhr=new XMLHttpRequest();
    //使用const声明的变量,对象不能修改,但是对象里面的属性可以修改
    const Obj={
        name:"张三"
    }
    
    // obj=123;
    obj.name1="李四";
    

三、ES6解构赋值

含义:按照一定模式,将数组或对象中提取值(结构拆开)用于给变量赋值。
通俗讲就是将一个结构给解开,用于给变量或属性赋值。也就是解构在左边,赋值在右边。

1.数组的解构赋值。(使用[]进行)

之前定义多个变量需要分别进行。而现在可以像数组那样批量声明和赋值变量。
例子1:

let [a, b, c] = [1, 2, 3]; //等价于let a=1,b=2,c=3;
let [a, b, c, d] = [1, 2, 3]; //等价于let a=1,b=2,c=3,d=undefined;

例子2:在左边可以给变量默认值

let [a, b, c=5] = [1, 2]; 等价于let a=1,b=2,c=5;
//注意:如果同时给了默认值和初始值,那么初始值会替换默认值
let [a, b, c=5] = [1, 2, 3]; 
//等价于let a=1,b=2,c=3  即c不会等于5,而是等于3

例子3:可以使用逗号省略变量名

let [a,,c] =[1,2,3]; 此时相当于let a=1,c=3

注意:左右两边必须要有中括号,才是解构赋值,如果左边有,右边没有则会报错。

2.对象的解构赋值(使用{}进行)

可以使用一个let声明批量定义多个对象。左边的变量名必须要在右边也出现相同的属性名。且没有顺序之分。

例子1:

let {foo,bar}={foo:"abc",bar:"123"};  //结果都一样
let {bar,foo}={foo:"abc",bar:"123"};  //结果都一样
//以上例子中的foo,bar对应的是右边的同名属性所代表的值,即相当于是foo="abc",bar="123" 如果是要给一个对象,则在右边的值需要写对象的形式:
let {foo,bar}={foo:{},bar:{}};

注意:匹配设置对象后,可以通过左边的变量名来访问右边对象的属性或方法,但是不允许在同级作用域中再次出现重复命名。即:

let {foo,bar}={foo:"abc",bar:"123"}; 
let foo=10;
console.log(foo) // 报错,不允许重复声明。因为foo已经被声明了。

例子2:默认值

let {fun,isEnd,say,isArray=function(){}}={
    fun:function(){

    },
    say:function(){

    },
    isEnd:function(){

    }
};
//右边没有对应的,那么可以在左边这里给其添加一个默认值,当然其他的也可以,右边优先级要大于左边的。

例子3:批量设置多个对象

let {aaa,bbb,ccc} = {
    aaa:{
        //对象1
    },
    bbb:{
        //对象2
    },
    ccc:{
        //对象3
    }
}

总结:对象的结构赋值,右边的属性值可以是任意类型的数据。

3、字符串的解构赋值

字符串之所以能够解构赋值,是因为字符串被转换成了一个类似数组的对象。

例子1:

let [a, b, c, d, e] = 'hello'; //此时:a=h,b=e,...
4、函数参数的解构赋值

例子1:
函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。

function add([x, y]){
   return x + y;
}
add([1, 2]); // 3

例子2:参数是对象的情况(d=5为默认值)

function fun({a,b,c,d=5}){
    console.log(a);
    console.log(b);
    console.log(c);
}
// 调用
fun({
    a:1,
    b:2,
    c:3
});

总结:形参相当于是左边,实参相当于是右边。函数体中对应的变量,相当于是在访问结构赋值。

四、ES6箭头函数

含义:使用箭头(=>)定义函数。也就是箭头函数是函数的快捷写法。就像我们在emmet插件中使用ul>li按回车就可以输出HTML代码那样。

//格式:
var fun = v => v; //只有一个参数,可省去中间的v的括号
var fun =() => { }; //没有参数,或多个参数,而且没有返回值

需要将声明的箭头函数赋值给一个变量。

  1. 箭头函数的特点:
    1)、不需要 function 关键字来创建函数

    var fun= function (x){
        return x;
    }
    //可简写为:
    var fun= x=> x;
    

    注意:如果只有一个参数,可以不写(),如果没有参数或多个参数就一定要写

    //比如 
    var fun=()=> 5; 
    //等价于 
    var fun=function (){ return 5;}
    

    2)、省略 return 关键字
    函数语句和返回值只有一个表达式时是可以省略{}和return关键字的
    3)、继承当前上下文的 this 关键字,即在哪里定义this指的就是谁,而不是看它在哪里调用

  1. 注意的事项(特性):
    1、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
    2、不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用Rest参数代替
    3、在箭头函数中,this指向是固定的,也就是绑定在了定义时所在的作用域下。
  2. 总结:
    箭头函数其实就是不用function,()表示形式参数,=> 后面接的就是有返回值的函数体,{}也可以省略了,而且不需要return,但是如果不需要它有返回值,那么需要使用void关键字。
    注意:返回一个对象,需要加();函数体包含多条语句时不可省略{},有多条语句并有返回值还需要手动写return返回
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 920
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top