ES6小结

es6使javascript的语法更加丰满,总结一下常用的es6知识点:

  • 变量声明const和let
    之前一直习惯用var关键字声明变量,无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部),这就是函数变量提升:
    在这里插入图片描述
    所以不管bool为true还是false,实际上,无论如何str都会被创建声明。而在es6之后,我们通常用let和const进行声明。const表示常量、let表示变量,Let和const都是块级作用域,那么如何理解块级作用于呢?
    在一个函数内部、在一个代码块内部?
    注:通常来说{}大括号内的代码块即为let和const的作用域。
    在这里插入图片描述
    let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。
    const声明分变量都会被认为是常量,表示它的值设置完成后就不能再修改了。
    在这里插入图片描述
    如果const是一个对象,对象所包含的值是可以被修改的。就是对象所指向的地址没有变就行。
    在这里插入图片描述
    常见的面试题:
    在这里插入图片描述
    很明显:输出10十次。
    但是如果想要输出0-9呢?
    两种解决办法,如下代码:
    在这里插入图片描述

  • 模板字符串
    es6的模板字符串在项目中也是经常用到的:
    第一个用途:基本的字符串格式化,将表达式嵌入字符串进行拼接,用${}来界定。
    在这里插入图片描述
    第二个用途:在ES5时我们通过反斜杠()来做多行字符串或者字符串一行拼接。ES6反引号(``)直接搞定。
    在这里插入图片描述
    对于字符串ES6当然也提供了很多厉害也很有意思的方法。
    在这里插入图片描述
    3、函数
    ES5这样的:
    在这里插入图片描述
    细心的同学们肯定会发现,num传入为0的时候就是false,但是我们实际需求就是拿到num=0,此时num=200明显与我们实际想要的结果明显不一样,ES6为参数提供了默认值,在定义函数时便初始化了这个参数,以便于在参数还没有被传递进去时使用。
    在这里插入图片描述
    箭头函数
    箭头函数最直观的三个特点:

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

  • 省略return关键字

  • 继承当前上下文的this关键字
    在这里插入图片描述
    说一个小细节。
    当你的函数有且仅有一个参数的时候,是可以省略括号的,当你函数返回有且仅有一个表达式的时候可以省略{}和return:
    在这里插入图片描述
    作为参考:
    在这里插入图片描述
    一道面试题:
    在这里插入图片描述
    4、拓展的对象功能
    ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的:
    在这里插入图片描述
    键值对重名,ES6可以简写如下:
    在这里插入图片描述
    ES6同样改进了对象字面量方法赋值的语法,ES5为对象添加方法:
    在这里插入图片描述
    ES6通过省略冒号与function关键字,将这个语法变得更简洁:
    在这里插入图片描述
    ES6对象提供了Object.assign()这个方法来实现浅复制。
    Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象。第一个参数即为目标对象,在实际项目中,我们为了不改变源对象,一般会把目标对象传为{}。
    在这里插入图片描述
    5、更方便的数据访问–解构
    数组和对象是JS中最常用的也是最重要的表示形式,为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程,
    ES5我们提取对象中的信息形式如下:
    在这里插入图片描述
    是不是觉得很熟悉,没错,在ES6之前我们就是这样获取对象信息的,一个一个的获取。现在,解构能让我们从对象后者数组里取出数据存为变量,例如:
    在这里插入图片描述
    面试题:
    在这里插入图片描述
    6、Spread Operator 展开运算符
    ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿…接下来就展示一下它的用途。组装对象或者数组:
    在这里插入图片描述
    有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项。
    在这里插入图片描述
    对于 Object 而言,还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名,右边覆盖左边。
    在这里插入图片描述
    7、export和import
    import导入模块、export导出模块:
    在这里插入图片描述
    导入的时候有没有大括号的区别是什么,下面是总结:

  • 当用export default people到处是,就用import people导入(不带大括号)。

  • 一个文件里,有且只能有一个export default,但可以有多个export.

  • 当用export name 时,就用import{name}导入(记得带上大括号)。

  • 当一个文件里,既有一个export default people,又有多个export name 或者export age时,导入就用import people, {name, age}。

  • 当一个文件里出现n多个export导出模块,导入时除了一个一个导入,也可以用import * as example.
    8、Promise
    在promise之前代码过多的回调或嵌套

猜你喜欢

转载自blog.csdn.net/qq_37642495/article/details/85376135
ES6