ES6基本语法

目录

一、 let,const
二、 解构赋值
三、箭头函数
四、this指向问题
五、剩余参数
六、扩展运算符
七、模板字符串
八、Map和Set

九、symbol
十、迭代器

十一、生成器


一、 let,const

  •  let    es6中新增 声明变量的关键词

                let声明的变量只在所处于的块级有效{ } 

                      
                
                不存在变量提升 

                

               
                暂时性死区        

               

  • const  声明常量的关键词  常量就是值(内存地址)不能变化的量
    具有块级作用域
    声明常量时必须赋值
    常量赋值后,值不能修改

二、 解构赋值

ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构。
按照一定模式从数组中或对象中提取值,将提取出来的值赋给另外的变量

  • 数组解构
    数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋给变量

  • 对象解构
    对象解构允许我们使用变量的名字匹配对象的属性,匹配成功将对象属性的值赋给变量

    上述代码的意思是:首先要注意let 后面的大括号中不是上面person对象中的属性,而是三个变量,他们会去person对象中寻找与自己对应匹配的属性,匹配上了则会将这个属性的值赋给变量。比如name属性的值是liming,而name变量和name属性是对的上的,所以此时name变量的值就为liming。
    另一种对象解构的写法

三、箭头函数

       ES6中新增的定义函数的方式

() => {}
const fn = () => {}

  
  上述代码中 ( )是用来接收参数用的 { }里边则是函数体的位置。左边const是一个变量名,用来    接收这个函数。

  • 在箭头函数中,如果形参只有一个,可以省略小括号。
     
  • 在箭头函数中,如果函数体中只有一句代码,并且代码执行的结果就是函数的返回值{ }可以省略。

四、this指向问题

         箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置上下文的this    
        

        
        因为箭头函数本身不绑定this,所以他是没有自己的this的,和传统的函数中的this机制不一样
        如果要用箭头函数的this,为箭头函数所在区域范围中的 this ,比如上述代码因为箭头函数被            定义在了fn1函数当中,所以返回的箭头函数中的this为fn1函数中的this 即obj。


五、剩余参数

        剩余参数允许我们将一个不定数量的参数表示为一个数组     
        
        上述代码中,参数...args 说明这是一个参数数组。
         剩余参数还可以和解构配合使用
        


六、扩展运算符(展开语法)

  •  扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

    上述代码中 ...arr 为1,2,3  只是在console.log中被当做了log方法中的逗号分隔符被去掉了
  • 合并数组

  • Array的拓展方法 :构造函数方法 Array.from()
                                   将类数组或可遍历对象转为真正的数组

          
     Array.from()也可以接收第二个参数。用作于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

    Array的拓展方法 :实例方法 find()
                                    用于找出第一个符合条件的数组成员,如果没有找到返回undefined

    Array的拓展方法 :实例方法 findIndex()
                                    用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

    Array的拓展方法 :实例方法 includes()
                                   表示某个数组是否包含给定的值,返回布尔值


七、模板字符串

ES6新增的创建字符串的方式 使用反引号定义

let name =`liming`

let sayHello = `hello,my name is ${name}`; 
  • 模板字符串可以解析变量
  • 模板字符串可以换行
  • 在模板字符串中可以调用函数
  • String的拓展方法:实例方法 startsWith()  endsWith()
    startsWith() : 表示参数字符串是否在原字符串的头部,返回布尔值
    endsWith() :表示参数字符串是否在原字符串的尾部,返回布尔值
  • String的拓展方法:实例方法 repeat()
                                   表示将原字符串重复n次,返回一个新字符串


八、Map和Set

  • Set数据结构
    ES6提供了新的数据结构set,它类似于数组,但是成员的值都是唯一的,没有重复的值
    创建Set :

    初始化Set  : Set函数可以接受一个数组作为参数,用来初始化
  • Set数据结构:实例方法
    add(value):添加某个值,返回Set结构本身
    delete(value):删除某个值,返回一个布尔值,表示是否删除成功
    has(value):返回一个布尔值,表示该值是否为Set的成员
    clear():清除所有成员,没有返回值


  • Set数据结构 遍历
    Set数组结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
  • Map数据结构
    是ES6新增的数据结构,Map类似于对象,但普通对象的key必须是字符串或者数字,而Map的key可以是任何数据类型。
  • Map 实例属性和方法
    size : 获取成员的数量
    set : 设置成员key 和 value
    get :获取成员属性值
    has : 判断成员是否存在
    delete : 删除成员
    clear : 清空所有

九、symbol

   ES6引入的一种新的基本数据类型,表示独一无二的值

const a = Symbol();

  使用Symbol()创建一个Symbol类型的值并赋值给a变量后,你就得到了一个在内存中独一无二的    值。现在除了通过变量a,任何人在任何作用域内都无法重新创建出这个值。

  •  Symbol属性对应的值是唯一的,解决命名冲突问题
  • Symbol值不能与其他数据进行计算,包括同字符串拼串
  • for in ,for of遍历时不会遍历Symbol属性

十、迭代器(iterator)

          迭代器(iterator)是 ES6 引入的一种新的遍历机制,主要讲解的是 Iterator 、迭代过程、              可迭代的数据结构。
          

  • 通过Symbol.iterator来创建迭代器,指向当前数据结构的起始位置
  • 通过迭代器的next( )来获取迭代后的结果,当属性 done 为 true 时访问结束
  • 迭代器是用于遍历数据结构的指针

十一、生成器(generator)

   函数组成  它与普通函数的区别:

  • function后面 函数名之前 有个*
  • 函数内部有yield表达式

    其中 * 用来表示函数为Generator函数 ,yield用来定义函数内部的状态

    执行机制

     调用 Generator 函数和调用普通函数一样,在函数名后面加上()即可,但是 Generator 函数不         会像普通函数一样立即执行,而是返回一个指向内部状态对象的指针,所以要调用遍历器对象     Iterator 的 next 方法,指针就会从函数头部或者上一次停下来的地方开始执行。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值